Tutorials Face: Innovative Sliding Menu(Reside Menu) in android

Sunday, 31 August 2014

Innovative Sliding Menu(Reside Menu) in android

I found a very interesting repository in GitHub by SpecialCyCi which shows a innovative reside menu.

Download Source Code Download

1. Requirments
1. Download the ResideMenu library from here.
2. Import it in your eclipse workspace.
3. Extends FragmentActivity instead of Activity as it will open fragments inside it.

How to set up ResideMenu

// attach to current activity;

ResideMenu resideMenu = new ResideMenu(this);

//set background of menu

resideMenu.setBackground(R.drawable.menu_background);

resideMenu.attachToActivity(this);

resideMenu.setMenuListener(menuListener);

//valid scale factor is between 0.0f and 1.0f. leftmenu'width is 150dip.

resideMenu.setScaleValue(0.6f);

// create menu items;

ResideMenuItem itemHome = new ResideMenuItem(this, R.drawable.icon_home, "Home");

ResideMenuItem itemProfile = new ResideMenuItem(this, R.drawable.icon_profile, "Profile");

ResideMenuItem itemCalendar = new ResideMenuItem(this, R.drawable.icon_calendar, "Calendar");

ResideMenuItem itemSettings = new ResideMenuItem(this, R.drawable.icon_settings, "Settings");

itemHome.setOnClickListener(this);

itemProfile.setOnClickListener(this);

itemCalendar.setOnClickListener(this);

itemSettings.setOnClickListener(this);

resideMenu.addMenuItem(itemHome, ResideMenu.DIRECTION_LEFT);

resideMenu.addMenuItem(itemProfile, ResideMenu.DIRECTION_LEFT);

resideMenu.addMenuItem(itemCalendar, ResideMenu.DIRECTION_RIGHT);

resideMenu.addMenuItem(itemSettings, ResideMenu.DIRECTION_RIGHT);

//To open Menu of right side

resideMenu.openMenu(ResideMenu.DIRECTION_RIGHT);

//To open Menu of left side

resideMenu.openMenu(ResideMenu.DIRECTION_LEFT);

//To close menu

resideMenu.closeMenu();

//Menu open Listeners

private ResideMenu.OnMenuListener menuListener = new ResideMenu.OnMenuListener() {

@Override

public void openMenu() {

Toast.makeText(mContext, "Menu is opened!", Toast.LENGTH_SHORT).show();

}

@Override

public void closeMenu() {

Toast.makeText(mContext, "Menu is closed!", Toast.LENGTH_SHORT).show();

}

};

//Replace dispatchTouchEvent

@Override

public boolean dispatchTouchEvent(MotionEvent ev) {

return resideMenu.dispatchTouchEvent(ev);

}

2. Full Source Code

Project Hierarchy

1. main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:background="@android:color/white"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/layout_top">

<ImageView

android:layout_width="match_parent"

android:layout_height="3dp"

android:background="#2ea3fe"/>

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<Button

android:layout_width="28dp"

android:layout_height="28dp"

android:background="@drawable/titlebar_menu_selector"

android:id="@+id/title_bar_left_menu"

android:layout_gravity="left|center_vertical"

android:layout_marginLeft="10dp"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="7dp"

android:text="RESideMenu DEMO"

android:textSize="24sp"

android:textColor="#999999"

android:layout_gravity="center"/>

<Button

android:layout_width="28dp"

android:layout_height="28dp"

android:background="@drawable/titlebar_menu_selector"

android:id="@+id/title_bar_right_menu"

android:layout_gravity="right|center_vertical"

android:layout_marginRight="10dp"/>

</FrameLayout>

<ImageView

android:layout_width="match_parent"

android:layout_height="5dp"

android:background="#ebebeb"/>

</LinearLayout>

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:id="@+id/main_fragment">

</FrameLayout>

</LinearLayout>

2.MenuActivity.java

package com.tutorialsface.ResideMenuDemo;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentTransaction;

import android.view.MotionEvent;

import android.view.View;

import android.widget.Toast;

import com.special.ResideMenu.ResideMenu;

import com.special.ResideMenu.ResideMenuItem;

public class MenuActivity extends FragmentActivity implements View.OnClickListener{

private ResideMenu resideMenu;

private MenuActivity mContext;

private ResideMenuItem itemHome;

private ResideMenuItem itemProfile;

private ResideMenuItem itemCalendar;

private ResideMenuItem itemSettings;

/**

* Called when the activity is first created.

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

mContext = this;

setUpMenu();

changeFragment(new HomeFragment());

}

private void setUpMenu() {

// attach to current activity;

resideMenu = new ResideMenu(this);

//set background of menu

resideMenu.setBackground(R.drawable.menu_background);

resideMenu.attachToActivity(this);

resideMenu.setMenuListener(menuListener);

//valid scale factor is between 0.0f and 1.0f. leftmenu'width is 150dip.

resideMenu.setScaleValue(0.6f);

// create menu items;

itemHome = new ResideMenuItem(this, R.drawable.icon_home, "Home");

itemProfile = new ResideMenuItem(this, R.drawable.icon_profile, "Profile");

itemCalendar = new ResideMenuItem(this, R.drawable.icon_calendar, "Calendar");

itemSettings = new ResideMenuItem(this, R.drawable.icon_settings, "Settings");

itemHome.setOnClickListener(this);

itemProfile.setOnClickListener(this);

itemCalendar.setOnClickListener(this);

itemSettings.setOnClickListener(this);

resideMenu.addMenuItem(itemHome, ResideMenu.DIRECTION_LEFT);

resideMenu.addMenuItem(itemProfile, ResideMenu.DIRECTION_LEFT);

resideMenu.addMenuItem(itemCalendar, ResideMenu.DIRECTION_RIGHT);

resideMenu.addMenuItem(itemSettings, ResideMenu.DIRECTION_RIGHT);

// You can disable a direction by setting ->

// resideMenu.setSwipeDirectionDisable(ResideMenu.DIRECTION_RIGHT);

findViewById(R.id.title_bar_left_menu).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

resideMenu.openMenu(ResideMenu.DIRECTION_LEFT);

}

});

findViewById(R.id.title_bar_right_menu).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

resideMenu.openMenu(ResideMenu.DIRECTION_RIGHT);

}

});

}

@Override

public boolean dispatchTouchEvent(MotionEvent ev) {

return resideMenu.dispatchTouchEvent(ev);

}

@Override

public void onClick(View view) {

if (view == itemHome){

changeFragment(new HomeFragment());

}else if (view == itemProfile){

changeFragment(new ProfileFragment());

}else if (view == itemCalendar){

changeFragment(new CalendarFragment());

}else if (view == itemSettings){

changeFragment(new SettingsFragment());

}

resideMenu.closeMenu();

}

private ResideMenu.OnMenuListener menuListener = new ResideMenu.OnMenuListener() {

@Override

public void openMenu() {

Toast.makeText(mContext, "Menu is opened!", Toast.LENGTH_SHORT).show();

}

@Override

public void closeMenu() {

Toast.makeText(mContext, "Menu is closed!", Toast.LENGTH_SHORT).show();

}

};

private void changeFragment(Fragment targetFragment){

resideMenu.clearIgnoredViewList();

getSupportFragmentManager()

.beginTransaction()

.replace(R.id.main_fragment, targetFragment, "fragment")

.setTransitionStyle(FragmentTransaction.TRANSIT_FRAGMENT_FADE)

.commit();

}

// What good method is to access resideMenuï¼Ÿ

public ResideMenu getResideMenu(){

return resideMenu;

}

3. home.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@android:color/white"

android:orientation="vertical" >

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_above="@+id/ignored_view"

android:layout_alignParentTop="true"

android:gravity="center"

android:orientation="vertical" >

<ImageView

android:id="@+id/imageView"

android:layout_width="60dp"

android:layout_height="120dp"

android:layout_gravity="center"

android:scaleType="fitCenter"

android:src="@drawable/gesture" />

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:clickable="false"

android:padding="5dp"

android:text=" 1. Swipe right/left to open menu"

android:textColor="#ffacacac"

android:textSize="17sp" />

<Button

android:id="@+id/btn_open_menu"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="4dp"

android:background="@drawable/button_selector"

android:padding="12dp"

android:text="2. Click me to open menu"

android:textColor="@android:color/white"

android:textSize="17sp" />

</LinearLayout>

<FrameLayout

android:id="@+id/ignored_view"

android:layout_width="fill_parent"

android:layout_height="120dp"

android:layout_alignParentBottom="true"

android:layout_gravity="bottom"

android:orientation="vertical"

android:padding="10dp" >

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitXY"

android:src="@drawable/frame" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:gravity="center"

android:padding="5dp"

android:text="This is an ignored view，you can’t use gesture to operate menu here."

android:textColor="#9a9a9a"

android:textSize="17sp" />

</FrameLayout>

</RelativeLayout>

4.HomeFragment.java

package com.tutorialsface.ResideMenuDemo;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.FrameLayout;

import com.special.ResideMenu.ResideMenu;

public class HomeFragment extends Fragment {

private View parentView;

private ResideMenu resideMenu;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

parentView = inflater.inflate(R.layout.home, container, false);

setUpViews();

return parentView;

}

private void setUpViews() {

MenuActivity parentActivity = (MenuActivity) getActivity();

resideMenu = parentActivity.getResideMenu();

parentView.findViewById(R.id.btn_open_menu).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

resideMenu.openMenu(ResideMenu.DIRECTION_LEFT);

}

});

// add gesture operation's ignored views

FrameLayout ignored_view = (FrameLayout) parentView.findViewById(R.id.ignored_view);

resideMenu.addIgnoredView(ignored_view);

}

5.profile.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:id="@+id/textView"

style="@style/fragment_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="Profile" />

</FrameLayout>

6.ProfileFragment.java

package com.tutorialsface.ResideMenuDemo;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class ProfileFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.profile, container, false);

}

7.calender.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<ListView

android:id="@+id/listView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</FrameLayout>

8.CalendarFragment.java

package com.tutorialsface.ResideMenuDemo;

import java.util.ArrayList;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.Toast;

public class CalendarFragment extends Fragment {

private View parentView;

private ListView listView;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

parentView = inflater.inflate(R.layout.calendar, container, false);

listView = (ListView) parentView.findViewById(R.id.listView);

initView();

return parentView;

}

private void initView() {

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(

getActivity(), android.R.layout.simple_list_item_1,

getCalendarData());

listView.setAdapter(arrayAdapter);

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> adapterView, View view,

int i, long l) {

Toast.makeText(getActivity(), "Clicked item!",

Toast.LENGTH_LONG).show();

}

});

}

private ArrayList<String> getCalendarData() {

ArrayList<String> calendarList = new ArrayList<String>();

calendarList.add("New Year's Day");

calendarList.add("St. Valentine's Day");

calendarList.add("Easter Day");

calendarList.add("April Fool's Day");

calendarList.add("Mother's Day");

calendarList.add("Memorial Day");

calendarList.add("National Flag Day");

calendarList.add("Father's Day");

calendarList.add("Independence Day");

calendarList.add("Labor Day");

calendarList.add("Columbus Day");

calendarList.add("Halloween");

calendarList.add("All Soul's Day");

calendarList.add("Veterans Day");

calendarList.add("Thanksgiving Day");

calendarList.add("Election Day");

calendarList.add("Forefather's Day");

calendarList.add("Christmas Day");

return calendarList;

}

9.settings.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:id="@+id/textView"

style="@style/fragment_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="Settings" />

</FrameLayout>

10.SettingsFragment.java

package com.tutorialsface.ResideMenuDemo;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class SettingsFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.settings, container, false);

}

11.styles.xml

<?xml version="1.0" encoding="utf-8"?>

<item name="android:textColor">#ffacacac</item>

</style>

</resources>

12.AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.tutorialsface.ResideMenuDemo"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="17" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:name="MenuActivity"

android:label="@string/app_name"

android:theme="@android:style/Theme.Light.NoTitleBar" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Download Source Code Download

41 comments:

Jass18 September 2014 at 03:48
How to add a listview in the right side menu as a subitem of one of the listview items ??
ReplyDelete
Replies
Unknown18 September 2014 at 21:00
You have to Look in to the ResideMenu.java's "public void addMenuItem(ResideMenuItem menuItem, int direction)" to customize the library according to your requirement..
ReplyDelete
Replies
Jass18 September 2014 at 22:21
Should i create a new xml for right side menu items ??
ReplyDelete
Replies
Bright u'r future15 November 2014 at 00:09
How to disable left side swiping.
ReplyDelete
Replies
Unknown31 January 2015 at 12:39
if i want to call an activity(not fragment), how am i going to do that?
ReplyDelete
Replies
Pratik Butani6 February 2015 at 00:50
Will it works for Android 2.0.+
ReplyDelete
Replies
Unknown9 February 2015 at 23:10
How to remove old fragment and replace with new ones?Currently the new fragment are just placed on the top of old ones.I have a fragment with a webview which has a list of youtube videos.the video keeps on playing in background eventhough new fragment is replaced.How to fix this ?
ReplyDelete
Replies
Unknown19 March 2015 at 15:27
How I can change textColor of item menu? The default setting is white. Is possible change this setting? tx!
ReplyDelete
Replies
Unknown25 March 2015 at 08:01
How do I add a custom list in the reside menu ?.. Thanks in advance
ReplyDelete
Replies
Unknown21 May 2015 at 06:23
Hi Ankit. I have a little problem. I`ve added a webview into a fragment. But, when I swipe the fragment, it gets white cropped. Any ideas? Thanks in advance.
ReplyDelete
Replies
Zakir Hussain22 June 2015 at 01:33
Hello Ankit,

I am working on application in which when left menu open it will divide into two parts, top part contain half height of the full height and full width in which i show image and second part contain the listview.

Please tell me how i achieve this task.
ReplyDelete
Replies
Harshad6 March 2016 at 22:42
how to remove item from it????
ReplyDelete
Replies
Unknown10 March 2016 at 23:11
how to implement tabs using residemenu??
ReplyDelete
Replies
Unknown5 May 2016 at 20:58
How do i replace the right side menu butten with a searchview? i tried doing this but the searchview just doesnt show up
ReplyDelete
Replies
hemanthraj11 May 2016 at 00:23
here reside menu is linear layout, how to customise reside menu as expandable list view in android
ReplyDelete
Replies
Unknown28 June 2016 at 22:36
how to set background cloer of selected menu iewm ....i mean when i back on menu then It continues to keep the last selected menu highlighted.
ReplyDelete
Replies
Unknown13 July 2016 at 05:21
How to add header part(contains like One roundedImageview and one TExtView) like in Navigation Drawer. to the Residemenu programatically
ReplyDelete
Replies
Unknown19 July 2016 at 01:22
hello, frindzzzz

i need to left side in expandable list so how to set simple list to expandable list in your menu directory, and menu item click to expand and other sub menu are display and sub menu to open any form and information page.

thanks in advance,
ReplyDelete
Replies
Unknown9 November 2016 at 06:12
hello sir '

i need expandable list view on reside menu ..please help me..
ReplyDelete
Replies
Unknown15 November 2016 at 00:55
Hello how can i change the color of the item text ( Home , settings ) ?
thanks
ReplyDelete
Replies
Unknown31 July 2017 at 13:02
Hi guys,
I'm the Android developer of Gideon Smart Home and I'm using your library for the app. It's pretty cool!
But there are many problems with Android O.

Do you plan any fix for this problem?

Thanks,
Giuseppe.
ReplyDelete
Replies
Unknown14 April 2018 at 09:04
Hello, I have added an address book activity which has fragments in it to a "Address book" menu " using reside menu, the address book works but when I click any button in the activity it crashes. How do I make a "Address book" activity work?
ReplyDelete
Replies
Unknown29 October 2018 at 04:25
hi ,how can i replace residemenu project instead of my exisiting android project menu??
ReplyDelete
Replies

Add comment