2.6.4 DrawerLayout (Official Sliding Menu) Simple Usage

Category Android Basic Tutorial

Introduction to This Section:

This section introduces the last UI control in the basic part: DrawerLayout, a sliding menu control provided by the official, which was introduced after version 3.0. For lower versions, you need to use the v4 compatibility package. Speaking of sliding, many people have used the SlidingMenu on GitHub, but there seem to be two versions, one is standalone, and the other requires dependency on another open source project: ActionBarSherlock. Since Google has provided us with this control, why not use it? Moreover, in the Material Design specifications, many sliding menu animation effects that can be seen everywhere can be achieved through Toolbar + DrawerLayout. In this section, we will explore the basic usage of this DrawerLayout, which some people also like to call the drawer control. Official documentation: DrawerLayout

1. Notes on Usage

1. The main content view must be the first child view of DrawerLayout.
2. The width and height of the main content view need to be match_parent.
3. The android:layout_gravity attribute of the sliding view must be specified: when android:layout_gravity = "start", the menu slides out from left to right; when android:layout_gravity = "end", the menu slides out from right to left. It is not recommended to use left and right!!!
The width of the sliding view should be in dp units, and it is not recommended to exceed 320dp (to always see some of the main content view).
Set the sliding event: mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);
It should be noted: it can be used in combination with the Actionbar, when the user clicks on the app icon on the Actionbar, the sliding menu pops up! Here you need to use ActionBarDrawerToggle, which is a specific implementation of DrawerLayout.DrawerListener. We can override ActionBarDrawerToggle's onDrawerOpened() and onDrawerClosed() to monitor the drawer pull out or hide events! But we won't talk about it here, because after 5.0 we use Toolbar! Those who are interested can consult the relevant documentation themselves!

2. Usage Code Example

Example 1: Implementation of a Single Sliding Menu

Running Effect Picture :

Key Implementation Code :

First is our main layout, note: the outermost layer must be DrawerLayout!!!

activity_main.xml :

&lt;android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/ly_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ListView
        android:id="@+id/list_left_drawer"
        android:layout_width="180dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#080808"
        android:choiceMode="singleChoice"
        android:divider="#FFFFFF"
        android:dividerHeight="1dp" />

</android.support.v4.widget.DrawerLayout>

Then the layout code of ListView and the domain class: Item is very simple, so it is not given, and the layout and code of the middle Fragment are directly presented! In addition, the Adapter directly reuses the reusable MyAdapter we wrote before!

fg_content.xml :

<?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="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="25sp" />

</RelativeLayout>

ContentFragment.java :

/**
 * Created by Jay on 2015/10/8 0008.
 */
public class ContentFragment extends Fragment {

    private TextView tv_content;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        tv_content = (TextView) view
English:

Consists of up to three parts: the central content section, the left sliding menu section, and the right sliding menu section!
Below we will write an example with two sliding menus!

**Running Effect Picture**:

**Code Implementation**:

First, we create two Fragments and their corresponding layouts, which are the left and right sliding menus!

**Left Fragment**:

Layout: **fg_left.xml**, here we just use an image, and when clicked, a new Activity pops up;
Of course, you can expand according to your own needs!

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/bg_menu_left"/>

</LinearLayout>

Corresponding LeftFragment.java:

/**
 * Created by Jay on 2015/10/9 0009.
 */
public class LeftFragment extends Fragment{

    private DrawerLayout drawer_layout;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_left, container, false);
        ImageView img_bg = (ImageView) view.findViewById(R.id.img_bg);
        img_bg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getActivity().startActivity(new Intent(getActivity(),OtherActivity.class));
                drawer_layout.closeDrawer(Gravity.START);
            }
        });
        return view;
    }

    //Exposed to Activity to pass in DrawerLayout, because after clicking, you want to close DrawerLayout
    public void setDrawerLayout(DrawerLayout drawer_layout){
        this.drawer_layout = drawer_layout;
    }
}

Right Fragment:

The layout has three buttons, when clicked, it replaces the central part of the Fragment, the layout fg_right.xml code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2F9AF2"
    android:gravity="center"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menu Item One" />

    <Button
        android:id="@+id/btn_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menu Item Two" />

    <Button
        android:id="@+id/btn_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menu Item Three" />

</LinearLayout>

Then the corresponding is RightFragment.java:

/**
 * Created by Jay on 2015/10/9 0009.
 */
public class RightFragment extends Fragment implements View.OnClickListener{

    private DrawerLayout drawer_layout;
    private FragmentManager fManager;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_right, container, false);
        view.findViewById(R.id.btn_one).setOnClickListener(this);
        view.findViewById(R.id.btn_two).setOnClickListener(this);
        view.findViewById(R.id.btn_three).setOnClickListener(this);
        fManager = getActivity().getSupportFragmentManager();
        return view;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_one:
                ContentFragment cFragment1 = new ContentFragment("1.Clicked on the right menu item one",R.color.blue);
                fManager.beginTransaction().replace(R.id.fly_content,cFragment1).commit();
                drawer_layout.closeDrawer(Gravity.END);
                break;
            case R.id.btn_two:
                ContentFragment cFragment2 = new ContentFragment("2.Clicked on the right menu item two",R.color.red);
                fManager.beginTransaction().replace(R.id.fly_content,cFragment2).commit();
                drawer_layout.closeDrawer(Gravity.END);
                break;
            case R.id.btn_three:
                ContentFragment cFragment3 = new ContentFragment("3.Clicked on the right menu item three",R.color.yellow);
                fManager.beginTransaction().replace(R.id.fly_content,cFragment3).commit();
                drawer_layout.closeDrawer(Gravity.END);
                break;
        }
    }

    public void setDrawerLayout(DrawerLayout drawer_layout){
        this.drawer
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fg_content, container, false);
    view.setBackgroundColor(getResources().getColor(bgColor));
    TextView tv_content = (TextView) view.findViewById(R.id.tv_content);
    tv_content.setText(strContent);
    return view;
}

Once you have written this, it's time to move on to the layout of our Activity and the code for the Activity:
Before that, we also need to write a layout for the top bar:

**view_topbar.xml**:

```xml
<?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="wrap_content"
    android:background="#DCDEDB">

    <Button
        android:id="@+id/btn_right"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/btn_selctor"/>

</RelativeLayout>

Then there is activity_main.xml:

&lt;android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include
            android:id="@+id/topbar"
            layout="@layout/view_topbar"
            android:layout_width="wrap_content"
            android:layout_height="48dp" />

        <FrameLayout
            android:id="@+id/fly_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <fragment
        android:id="@+id/fg_left_menu"
        android:name="jay.com.drawerlayoutdemo2.LeftFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:tag="LEFT"
        tools:layout="@layout/fg_left" />

    <fragment
        android:id="@+id/fg_right_menu"
        android:name="jay.com.drawerlayoutdemo2.RightFragment"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:tag="RIGHT"
        tools:layout="@layout/fg_right" />

</android.support.v4.widget.DrawerLayout>

Finally, there is MainActivity.java:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private DrawerLayout drawer_layout;
    private FrameLayout fly_content;
    private View topbar;
    private Button btn_right;
    private RightFragment fg_right_menu;
    private LeftFragment fg_left_menu;
    private FragmentManager fManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fManager = getSupportFragmentManager();
        fg_right_menu = (RightFragment) fManager.findFragmentById(R.id.fg_right_menu);
        fg_left_menu = (LeftFragment) fManager.findFragmentById(R.id.fg_left_menu);
        initViews();
    }

    private void initViews() {
        drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
        fly_content = (FrameLayout) findViewById(R.id.fly_content);
        topbar = findViewById(R.id.topbar);
        btn_right = (Button) topbar.findViewById(R.id.btn_right);
        btn_right.setOnClickListener(this);

        //Set the right side sliding menu to be only openable programmatically
        drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
                Gravity.END);

        drawer_layout.setDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View view, float v) {

            }

            @Override
            public void onDrawerOpened(View view) {

            }

            @Override
            public void onDrawerClosed(View view) {
                drawer_layout.setDrawerLockMode(
                        DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);
            }

            @Override
            public void onDrawerStateChanged(int i) {

            }
        });

        fg_right_menu.setDrawerLayout(drawer_layout);
        fg_left_menu.setDrawerLayout(drawer_layout);
    }

    @Override
    public void onClick(View v) {
        drawer_layout.openDrawer(Gravity.RIGHT);
        drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
                Gravity.END);    //Unlock
    }
}

A: This is not used here. When rewriting the onDrawerSlide method of DrawerListener, we can determine which menu triggered the menu event by calling the first parameter drawerView and using drawerView.getTag().equals("START"). Then we can perform the corresponding operations!

3. Code Sample Downloads

DrawerLayoutDemo.zip

DrawerLayoutDemo2.zip

Summary of This Section:

Well, this section introduced the basic usage of the official sliding control DrawerLayout, which is very convenient to use! Of course, this is just a simple demonstration. You can also check out a post written by the esteemed Yang, titled: Android DrawerLayout High Imitation QQ5.2 Bidirectional Sliding Menu. If you are interested, you can take a look. After reading this section, you should not have much difficulty understanding it.

This concludes this section, and we say goodbye to the UI control chapter. The next chapter, we will start with drawing and animation, laying the foundation for our advanced series of custom controls!

-1.0 Android Basic Tutorial Introduction

-1.0.1 Latest Android Basic Tutorial Catalog for 2015

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Developing Android APP with Eclipse + ADT + SDK

-1.2.2 Developing Android APP with Android Studio

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Basic Operations of Git Local Repository

-1.5.2 Using GitHub to Set Up a Remote Git Repository

-1.6 How to Play with 9 (Nine Sister) Images

-1.7 Interface Prototype Design