Create 3D Navigation Drawer using Reside menu in native android.
Navigation
Drawer
3D
Reside
menu
native
android
- By Code solution
- Jan 20th, 2021
- 0 comments
- 0
Create 3D Navigation Drawer using Reside menu in the Android application.
Creating New Project
- Create a new project in Android Studio from File ⇒ New Project. When selecting Empty Activity and proceed.
- Add Residemenu dependency to your build.gradle and rebuild the project.
dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.android.support.constraint:constraint-layout:1.0.2' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.1' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1' implementation 'com.specyci:residemenu:1.6+' }
Choosing the Colors
- Open colors.xml located under res ⇒ values and add the below color values.
colors.XML
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> </resources>
- Open Style.xml located under res ⇒ values and add the below values.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="fragment_text"> <item name="android:textColor">#ffacacac</item> <item name="android:textSize">25sp</item> </style>
</resources>
Create four XML layouts named main.xml under res ⇒ layouts.
<?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:background="@color/colorPrimary" android:id="@+id/layout_top"> <ImageView android:layout_width="match_parent" android:layout_height="3dp" android:background="@color/colorPrimary"/> <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="Home" android:textSize="24sp" android:textColor="#ffffff" 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>
- Open MenuActivity.java and modify the code as below.
package com.wapptech.menu; 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(); if( savedInstanceState == null ) changeFragment(new HomeFragment()); } private void setUpMenu() { // attach to current activity; resideMenu = new ResideMenu(this); // resideMenu.setUse3D(true); resideMenu.setBackground(R.color.colorPrimaryDark); 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; } }
- Create other fragment pages like home, setting, profile, calendar
- After Finally open AndroidManifest.XML and make WelcomeActivity as launcher activity.
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.wapptech.menu"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@android:style/Theme.Light.NoTitleBar"> <activity android:name=".MenuActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>