How To Create Android Custom Striped Navigation Drawer?
I want to make Striped Navigation Drawer, How to create something just like this?
Solution 1:
1. Create a custom layout XML for your custom NavigationView.
nav_custom_layout.xml
<?xml version="1.0" encoding="utf-8"?><ScrollViewxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:background="#efefef"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="160dp"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:src="@drawable/dummy_recipe"android:scaleType="centerCrop"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_alignParentBottom="true"android:layout_marginLeft="24dp"android:layout_marginBottom="24dp"android:textSize="28sp"android:textColor="@android:color/white"android:text="Menu"></TextView></RelativeLayout><!-- Home --><LinearLayoutandroid:id="@+id/custom_menu_home"android:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:background="#efefef"android:gravity="center_vertical"android:paddingLeft="24dp"android:paddingRight="24dp"><ImageViewandroid:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/ic_action_home"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:maxLines="1"android:textSize="16sp"android:textColor="#555555"android:text="Home"/></LinearLayout><!-- Shopping List --><LinearLayoutandroid:id="@+id/custom_menu_shopping_list"android:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:background="#ffffff"android:gravity="center_vertical"android:paddingLeft="24dp"android:paddingRight="24dp"><ImageViewandroid:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/ic_action_list"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:maxLines="1"android:textSize="16sp"android:textColor="#555555"android:text="Shopping List"/></LinearLayout><!-- Search --><LinearLayoutandroid:id="@+id/custom_menu_search"android:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:background="#efefef"android:gravity="center_vertical"android:paddingLeft="24dp"android:paddingRight="24dp"><ImageViewandroid:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/ic_action_search"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:maxLines="1"android:textSize="16sp"android:textColor="#555555"android:text="Search"/></LinearLayout><!-- My Yums --><LinearLayoutandroid:id="@+id/custom_menu_my_yums"android:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:background="#ffffff"android:gravity="center_vertical"android:paddingLeft="24dp"android:paddingRight="24dp"><ImageViewandroid:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/ic_action_yums"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:maxLines="1"android:textSize="16sp"android:textColor="#555555"android:text="My Yums"/></LinearLayout><!-- Settings --><LinearLayoutandroid:id="@+id/custom_menu_settings"android:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:background="#efefef"android:gravity="center_vertical"android:paddingLeft="24dp"android:paddingRight="24dp"><ImageViewandroid:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/ic_action_settings"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:maxLines="1"android:textSize="16sp"android:textColor="#555555"android:text="Settings"/></LinearLayout><!-- Invite Friends --><LinearLayoutandroid:id="@+id/custom_menu_invite_friends"android:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:background="#ffffff"android:gravity="center_vertical"android:paddingLeft="24dp"android:paddingRight="24dp"><ImageViewandroid:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/ic_action_invite"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:maxLines="1"android:textSize="16sp"android:textColor="#555555"android:text="Invite Friends"/></LinearLayout></LinearLayout></ScrollView>2. Add custom layout nav_custom_layout inside your NavigationView.
<android.support.design.widget.NavigationViewandroid:id="@+id/nav_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"android:fitsSystemWindows="true"><includelayout="@layout/nav_custom_layout"android:layout_width="match_parent"android:layout_height="wrap_content" /></android.support.design.widget.NavigationView>3. Set onClick listener to custom menu item(LinearLayout) and change state using method toggleMenuState().
publicclassMainActivityextendsAppCompatActivity
implements View.OnClickListener {
LinearLayout customNavMenuHome;
LinearLayout customNavMenuShoppingList;
LinearLayout customNavMenuSearch;
LinearLayout customNavMenuMyYums;
LinearLayout customNavMenuSettings;
LinearLayout customNavMenuInviteFirends;
TextView textHome, textShoppingList, textSerach, textMyYums, textSettings, textInviteFriends;
ImageView iconHome, iconShoppingList, iconSerach, iconMyYums, iconSettings, iconInviteFriends;
DrawerLayout mDrawer;
NavigationView mNavigationView;
int previousMenu;
int currentMenu;
private static final int MENU_HOME = 1;
private static final int MENU_SHOPPING_LIST = 2;
private static final int MENU_SEARCH = 3;
private static final int MENU_MY_YUMS = 4;
private static final int MENU_SETTINGS = 5;
private static final int MENU_INVITE_FRIENDS = 6;
@Overrideprotected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
............
......................
mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
............
......................
// NavigationView
mNavigationView = (NavigationView) findViewById(R.id.nav_view);
// Menus
customNavMenuHome = (LinearLayout) findViewById(R.id.custom_menu_home);
customNavMenuShoppingList = (LinearLayout) findViewById(R.id.custom_menu_shopping_list);
customNavMenuSearch = (LinearLayout) findViewById(R.id.custom_menu_search);
customNavMenuMyYums = (LinearLayout) findViewById(R.id.custom_menu_my_yums);
customNavMenuSettings = (LinearLayout) findViewById(R.id.custom_menu_settings);
customNavMenuInviteFirends = (LinearLayout) findViewById(R.id.custom_menu_invite_friends);
// Menu Titles
textHome = (TextView) customNavMenuHome.findViewById(R.id.text_home);
textShoppingList = (TextView) customNavMenuShoppingList.findViewById(R.id.text_shopping_list);
textSerach = (TextView) customNavMenuSearch.findViewById(R.id.text_search);
textMyYums = (TextView) customNavMenuMyYums.findViewById(R.id.text_my_yums);
textSettings = (TextView) customNavMenuSettings.findViewById(R.id.text_settings);
textInviteFriends = (TextView) customNavMenuInviteFirends.findViewById(R.id.text_invite_friends);
// Menu Icons
iconHome = (ImageView) customNavMenuHome.findViewById(R.id.icon_home);
iconShoppingList = (ImageView) customNavMenuShoppingList.findViewById(R.id.icon_shopping_list);
iconSerach = (ImageView) customNavMenuSearch.findViewById(R.id.icon_search);
iconMyYums = (ImageView) customNavMenuMyYums.findViewById(R.id.icon_my_yums);
iconSettings = (ImageView) customNavMenuSettings.findViewById(R.id.icon_settings);
iconInviteFriends = (ImageView) customNavMenuInviteFirends.findViewById(R.id.icon_invite_friends);
// Set click listeners
customNavMenuHome.setOnClickListener(this);
customNavMenuShoppingList.setOnClickListener(this);
customNavMenuSearch.setOnClickListener(this);
customNavMenuMyYums.setOnClickListener(this);
customNavMenuSettings.setOnClickListener(this);
customNavMenuInviteFirends.setOnClickListener(this);
// Default
previousMenu = MENU_HOME;
currentMenu = MENU_HOME;
toggleMenuState();
}
@Overridepublic void onClick(View view) {
// Store current menu
previousMenu = currentMenu;
switch (view.getId()) {
case R.id.custom_menu_home: {
currentMenu = MENU_HOME;
Toast.makeText(this, "Home clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_shopping_list: {
currentMenu = MENU_SHOPPING_LIST;
Toast.makeText(this, "Shopping List clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_search: {
currentMenu = MENU_SEARCH;
Toast.makeText(this, "Search clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_my_yums: {
currentMenu = MENU_MY_YUMS;
Toast.makeText(this, "My Yums clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_settings: {
currentMenu = MENU_SETTINGS;
Toast.makeText(this, "Settings clicked", Toast.LENGTH_SHORT).show();
break;
}
case R.id.custom_menu_invite_friends: {
currentMenu = MENU_INVITE_FRIENDS;
Toast.makeText(this, "Invite Friends clicked", Toast.LENGTH_SHORT).show();
break;
}
}
// Change selected menu state
toggleMenuState();
// Close drawer
mDrawer.closeDrawer(GravityCompat.START);
}
// Required to change selection state of custom menupublic void toggleMenuState() {
// Reset
switch (previousMenu) {
case MENU_HOME: {
customNavMenuHome.setBackgroundColor(Color.parseColor("#efefef"));
textHome.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_SHOPPING_LIST: {
customNavMenuShoppingList.setBackgroundColor(Color.parseColor("#ffffff"));
textShoppingList.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_SEARCH: {
customNavMenuSearch.setBackgroundColor(Color.parseColor("#efefef"));
textSerach.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_MY_YUMS: {
customNavMenuMyYums.setBackgroundColor(Color.parseColor("#ffffff"));
textMyYums.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_SETTINGS: {
customNavMenuSettings.setBackgroundColor(Color.parseColor("#efefef"));
textSettings.setTextColor(Color.parseColor("#555555"));
break;
}
case MENU_INVITE_FRIENDS: {
customNavMenuInviteFirends.setBackgroundColor(Color.parseColor("#ffffff"));
textInviteFriends.setTextColor(Color.parseColor("#555555"));
break;
}
}
// Set icon default colors
iconHome.setColorFilter(Color.DKGRAY);
iconShoppingList.setColorFilter(Color.DKGRAY);
iconSerach.setColorFilter(Color.DKGRAY);
iconMyYums.setColorFilter(Color.DKGRAY);
iconSettings.setColorFilter(Color.DKGRAY);
iconInviteFriends.setColorFilter(Color.DKGRAY);
// Selected menu :: GRAY color
switch (currentMenu) {
case MENU_HOME: {
customNavMenuHome.setBackgroundColor(Color.GRAY);
iconHome.setColorFilter(Color.WHITE);
textHome.setTextColor(Color.WHITE);
break;
}
case MENU_SHOPPING_LIST: {
customNavMenuShoppingList.setBackgroundColor(Color.GRAY);
iconShoppingList.setColorFilter(Color.WHITE);
textShoppingList.setTextColor(Color.WHITE);
break;
}
case MENU_SEARCH: {
customNavMenuSearch.setBackgroundColor(Color.GRAY);
iconSerach.setColorFilter(Color.WHITE);
textSerach.setTextColor(Color.WHITE);
break;
}
case MENU_MY_YUMS: {
customNavMenuMyYums.setBackgroundColor(Color.GRAY);
iconMyYums.setColorFilter(Color.WHITE);
textMyYums.setTextColor(Color.WHITE);
break;
}
case MENU_SETTINGS: {
customNavMenuSettings.setBackgroundColor(Color.GRAY);
iconSettings.setColorFilter(Color.WHITE);
textSettings.setTextColor(Color.WHITE);
break;
}
case MENU_INVITE_FRIENDS: {
customNavMenuInviteFirends.setBackgroundColor(Color.GRAY);
iconInviteFriends.setColorFilter(Color.WHITE);
textInviteFriends.setTextColor(Color.WHITE);
break;
}
}
}
}
OUTPUT:
Hope this will help~
Post a Comment for "How To Create Android Custom Striped Navigation Drawer?"