# Side menu ## Required ```java= dependencies { implementation 'androidx.navigation:navigation-fragment-ktx:2.2.1' implementation 'androidx.navigation:navigation-ui-ktx:2.2.1' } ``` 1. Create a menu.xml ```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/item1" android:title="item1"/> <item android:id="@+id/item2" android:title="item2"/> <item android:id="@+id/item3" android:title="item3"/> </group> </menu> ``` 2. Edit activity_main.xml Note that layout_gravity must set ```xml= <?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.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/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.google.android.material.navigation.NavigationView android:layout_width="240dp" android:layout_height="match_parent" app:menu="@menu/menu" android:layout_gravity="start"/> </androidx.drawerlayout.widget.DrawerLayout> ``` 3. Now you can slide from left to show menu  ## Add toggle button on toolbar 1. Add a toolbar element in activity_main.xml ```xml= <androidx.drawerlayout.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/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimaryDark" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.Dark" /> </LinearLayout> <com.google.android.material.navigation.NavigationView android:layout_width="240dp" android:layout_height="match_parent" app:menu="@menu/menu" android:layout_gravity="start"/> </androidx.drawerlayout.widget.DrawerLayout> ``` 2. Add code in MainActivity.kt ```kotlin= class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) val toggle = ActionBarDrawerToggle(this,drawerLayout,toolbar,0,0) drawerLayout.addDrawerListener(toggle) toggle.syncState() } } ``` 3. Remember set AppTheme style with NoActionBar or you will get error ```xml= <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> ``` 4. Result  ## Trigger side menu item click 1. Set id to NavigationView ```xml= <androidx.drawerlayout.widget.DrawerLayout ...> ... <com.google.android.material.navigation.NavigationView android:id="@+id/drawer_navigationView" android:layout_width="240dp" android:layout_height="match_parent" app:menu="@menu/menu" android:layout_gravity="start"/> </androidx.drawerlayout.widget.DrawerLayout> ``` 2. Kotlin code ```kotlin= drawer_navigationView.setNavigationItemSelectedListener { item -> drawerLayout.closeDrawers() when(item.itemId){ R.id.item1 ->{ Snackbar.make(drawerLayout,"Item 1 press",Snackbar.LENGTH_SHORT).show() } R.id.item2 ->{ Snackbar.make(drawerLayout,"Item 2 press",Snackbar.LENGTH_SHORT).show() } R.id.item3 ->{ Snackbar.make(drawerLayout,"Item 3 press",Snackbar.LENGTH_SHORT).show() } } return@setNavigationItemSelectedListener false } ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up