Logicchip

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

  1. FragmentA
  2. FragmentB
  3. FragmentC
  4. 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.
Exit mobile version