Custom Android Navigation Drawer
Here ,I will show you how to create a custom Navigation Drawer using the auto generated Android Studio Navigation Drawer template. Using the auto generated Android Studio Navigation Drawer gives you are great head start for most of the use cases of Navigation Drawer; however it can also leave you in the middle of nowhere if you want to apply some customization. Here is what our demo app will look like when completed.[the_ad id=”1065″]
Adding Navigation Drawer
Create a new Android project using Android Studio, Select the new project template, select Phone and Tablet as your target devices and choose any API level 16. Click next and select Activity with Navigation like the image below and click next.[the_ad id=”1065″]
ject, I have added the following Fragments. No functionality is actually implemented in these fragments, they are used as demo fragment to demonstrate Navigation Drawer
- FragmentA
- FragmentB
- FragmentC
- FragmentD
Screen shots
MainActivity
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
private LinearLayout clk1,clk2,clk3,clk4;
TextView textMatter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
textMatter=(TextView)findViewById(R.id.textMatter);
clk1=(LinearLayout)findViewById(R.id.click1);
clk2=(LinearLayout)findViewById(R.id.click2);
clk3=(LinearLayout)findViewById(R.id.click3);
clk4=(LinearLayout)findViewById(R.id.click4);
Initializing();
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_nine) {
textMatter.setText("99");
return true;
}if (id == R.id.action_two) {
textMatter.setText("22");
return true;
}
return super.onOptionsItemSelected(item);
}
public void Initializing(){
Fragment fragment = null;
Class fragmentClass = FragmentA.class;
try {
fragment = (Fragment) fragmentClass.newInstance();
} catch (Exception e) {
e.printStackTrace();
}// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().replace(R.id.frame, fragment).commit();
}
public void ClickNavigation(View view){
Fragment fragment = null;
Class fragmentClass = FragmentA.class;
switch (view.getId()){
case R.id.click1:
fragmentClass = FragmentA.class;
clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));
clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
break;
case R.id.click2:
fragmentClass = FragmentB.class;
clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));
clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
break;
case R.id.click3:
fragmentClass = FragmentC.class;
clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));
clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
break;
case R.id.click4:
fragmentClass = FragmentD.class;
clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));
clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));
break;
}
try {
fragment = (Fragment) fragmentClass.newInstance();
} catch (Exception e) {
e.printStackTrace();
}// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().replace(R.id.frame, fragment).commit();
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
}
}activity_main
As you can see below we commented the NavigationView and replaced it with Our LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
-->
<LinearLayout
android:background="@color/colorPrimaryText"
android:id="@+id/drawer"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:onClick="ClickNavigation"
android:background="@color/colorPrimary"
android:layout_gravity="center"
android:gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:src="@mipmap/ic_launcher"
android:layout_width="match_parent"
android:layout_height="55dp"/>
<LinearLayout
android:id="@+id/click1"
android:onClick="ClickNavigation"
android:background="@drawable/button_click"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_marginLeft="70dp"
android:layout_marginTop="10dp"
android:background="@drawable/number"
android:layout_width="5dp"
android:layout_height="5dp"
android:text=""/>
<ImageView
android:tint="@color/icons"
android:padding="10dp"
android:src="@drawable/ic_menu_camera"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Home"/>
</RelativeLayout>
<TextView
android:textColor="@color/icons"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Camera"/>
</LinearLayout>
<LinearLayout
android:id="@+id/click2"
android:onClick="ClickNavigation"
android:background="@drawable/button_click"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textColor="@color/icons"
android:layout_marginLeft="75dp"
android:layout_marginTop="5dp"
android:background="@drawable/number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:id="@+id/textMatter"
android:text="22"/>
<ImageView
android:tint="@color/icons"
android:padding="10dp"
android:src="@drawable/ic_menu_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Import"/>
</RelativeLayout>
<TextView
android:textColor="@color/icons"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gallery"/>
</LinearLayout>
<LinearLayout
android:id="@+id/click3"
android:onClick="ClickNavigation"
android:background="@drawable/button_click"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:tint="@color/icons"
android:padding="10dp"
android:src="@drawable/ic_menu_manage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Home"/>
<TextView
android:textColor="@color/icons"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tools"/>
</LinearLayout>
<LinearLayout
android:id="@+id/click4"
android:onClick="ClickNavigation"
android:background="@drawable/button_click"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:tint="@color/icons"
android:padding="10dp"
android:src="@drawable/ic_menu_send"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Home"/>
<TextView
android:textColor="@color/icons"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
button_click
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryText" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<solid android:color="@color/clr2"/>
</shape>
</item>
<item android:state_hovered="true">
<shape android:shape="rectangle" >
<solid android:color="@color/clr2"/>
</shape>
</item>
</selector>button_clickb
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<solid android:color="@color/clr2" />
</shape>
</item>
</selector>
You can download full code from here, You can modify the code us u like. In like manner feel free to comment your doubt’s below. Does our tutorials help you then help as spread the word, like and share.
