Android Navigation Drawer Menu on top of Actionbar / Toolbar
Android Navigation Drawer Menu on top of Actionbar / Toolbar
در این آموزش نحوه Navigation Drawer برای منوهای اندروید رو آموزش میدیم.
Apps like gmail, you see when click on menu icon, a nice Navigation Drawer slides from left on top of Actionbar. Let’s see example layout.
The basic idea behind android navigation drawer on top of action bar is creating custom Actionbar and treat it as child of our main layout. Finally, build Navigation Drawer Layout on top of that. Browse below for project files.
آموزش Navigation Drawer اندروید
دانلود سورس آموزش
MainActivity.java
Setup custom toolbar and navigation drawer layout.
File Location: App→java→Your package
package com.androidcss.drawerexample;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
public class MainActivity extends AppCompatActivity {
public static DrawerLayout mDrawerLayout;
private Toolbar mToolbar;
private ActionBarDrawerToggle mDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Setup Actionbar / Toolbar
mToolbar = (Toolbar) findViewById(R.id.action_bar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
getSupportActionBar().setDisplayShowTitleEnabled(false);
// Setup Navigation Drawer Layout
mDrawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerLayout.post(new Runnable() {
@Override
public void run() {
mDrawerToggle.syncState();
}
});
}
}
Related files for MainActivity.java
Here are the files which participates in MainActivity.java
activity_main.xml
XML layout file for MainActivity.java
File location: App→res→Layout.
<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">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="@+id/action_bar"
layout="@layout/action_bar" />
</RelativeLayout>
<fragment
android:id="@+id/fragment_navigation_drawer"
android:name="com.androidcss.drawerexample.FragmentNavigationDrawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="@layout/fragment_navigation_drawer"
tools:layout="@layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
action_bar.xml
This xml layout file contains custom toolbar which is supported in support library version 7 and we are included this file in activity_main.xml.
File Location: App→res→Layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"/>
strings.xml
Setting Up Drawer layout requires two string constants, specify them in your strings.xml. The code marked below.
File location: App→res→Values.
<resources>
<string name="app_name">Drawer Example</string>
<string name="drawer_open">Drawer Opened</string>
<string name="drawer_close">Drawer Closed</string>
</resources>
آموزش Navigation Drawer اندروید
styles.xml
When i run my app, the menu icon(3 lines bar) is shown in grey color and i thought which does not look good so i changed it to white by adding following lines of marked code to my styles.xml file.
Make sure you are chosen the theme which as no action bar, i highlighted the theme below.
File location: App→res→Values.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="drawerArrowStyle">@style/BarStyle</item>
</style>
<style name="BarStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">@android:color/white</item>
</style>
</resources>
FragmentNavigationDrawer.java
Create fragment and interpret layout.
File Location: App→java→Your package
package com.androidcss.drawerexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FragmentNavigationDrawer extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
}
}
Related Files for FragmentNavigationDrawer.java
Here are the files which participates in FragmentNavigationDrawer.java
fragment_navigation_drawer.xml
XML design layout file for FragmentNavigationDrawer.java
While designing this layout i have not considered any material design guidelines, this is a tutorial on how to make drawer menu on top of actionbar, i just considered having a background with menu using LinearLayout. I hope, you consider material design guidelines from google and use ListView or RecyclerView for large menu.
File location: App→res→Layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/topBlock"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_marginBottom="10dp"
android:background="@drawable/background"
android:orientation="vertical"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="20dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:id="@+id/listIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="@mipmap/ic_marine" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:text="Android Dev"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#666" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="@mipmap/ic_backwater" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:text="PHP and Mysql"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#666" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="@mipmap/ic_shellfish" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:text="HTML and CSS"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#666" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="@mipmap/ic_dryfish" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:text="AndEngine Dev"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#666" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
background.xml
On our drawer fragment you see a nice AndroidCSS text and logo right? Yes, it is a image and SettingUp background image for LinearLayout in fragment_navigation_drawer.xml is done by this XML file.
File location: App→res→drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="1dp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#DDD" />
<solid android:color="#EEE" />
</shape>
</item>
<item >
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/logo"
android:tileMode="disabled"
android:dither="true"/>
</item>
</layer-list>
