Android Drawer – Android X

Drawer

Drawer is menu UI which is very common in Mobile App

There is a hamburger button to open menu.

build.gradle

To use this UI from Android X, please add following library to build.gradle

implementation 'com.google.android.material:material:1.0.0'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    

Code

For Activity

layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawerLayout"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        </com.google.android.material.appbar.AppBarLayout>

        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="16dp">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello World!"
            />
        </RelativeLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigationView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer"
            android:layout_gravity="start"/>


</androidx.drawerlayout.widget.DrawerLayout>

layout/drawer_header.xml

This is header design (custom)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@color/cardview_dark_background"
        android:theme="@style/ThemeOverlay.AppCompat.Light">
    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="HelloWorld"
            android:id="@+id/textView"
            android:padding="16dp"
            android:layout_alignParentBottom="true"/>
</RelativeLayout>

menu/drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
                android:id="@+id/menu_item1"
                android:icon="@android:drawable/ic_menu_my_calendar"
                android:title="Test1" />

        <item
                android:id="@+id/menu_item2"
                android:icon="@android:drawable/ic_menu_agenda"
                android:title="Test2" />
    </group>
</menu>

values/style.xml

Hide default action header

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

values/string.xml

<resources>
    <string name="app_name">RakutenSample</string>
    <string name="drawer_open">Drawer Open</string>
    <string name="drawer_close">Drawer Close</string>
</resources>

Prepare drawer_ for drawer description

MainActivity.kt

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var drawer : DrawerLayout = findViewById(R.id.drawerLayout)

        var toggle = ActionBarDrawerToggle(this,
            drawer,
            toolbar,
            R.string.drawer_open,
            R.string.drawer_close)
        drawer.addDrawerListener(toggle)
        toggle.syncState()

        // Navigation Listener
        var navigationView : NavigationView = findViewById(R.id.navigationView)
        navigationView.setNavigationItemSelectedListener(this)
    }
    /*
     * NavigationView.OnNavigationItemSelectedListener
    */
    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        val id : Int = item.itemId

        when(id) {
            R.id.menu_item1 -> {
                chrome(this)
            }
            R.id.menu_item2 -> {
                pending()
            }
        }
        val drawer : DrawerLayout = findViewById(R.id.drawerLayout)
        drawer.closeDrawer(GravityCompat.START)
        return true
    }
}