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 } }
コメント