Android Getting Started Tutorial | DrawerLayout Side Slider

DrawerLayout is a control that implements the side-sliding menu effect.

DawerLayout is divided into two parts: side menu and main content area :

• The main content area should be placed in front of the side menu, and it is best to use DrawerLayout as the root layout of the interface for the main content area, otherwise the problem of touch events being blocked may occur.
• The layout of the side-sliding menu part must set the layout_gravity attribute, indicating whether the side-sliding menu is on the left or right. Only the view with layout_gravity="start/left" set will be considered a side-sliding menu.

Precautions for use

• The main content view must be the first subview of DrawerLayout
• Main content view width and height need to match_parent
• The android:layout_gravity attribute of the specified side-sliding view must be displayed. 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 side-sliding view is measured in dp. It is not recommended to exceed 320dp (in order to always see some main content views). Set the side-sliding event: mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListene

DrawerLayout example:

To use DrawerLayout, you can set DrawerLayout as the root view in the layout xml file.

Drawer view that slides out from the left (side slider)

A simple example of sliding out the side slider from the left.

After the side slider slides out, the view behind it will have a shadow.

layout file

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:openDrawer="start">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是主页" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是侧滑栏" />
    </RelativeLayout>

</androidx.drawerlayout.widget.DrawerLayout>

Effect:

It should be noted that DrawerLayout needs to be set tools:openDrawer="start"; and the side slider layout needs to be set android:layout_gravity="start".

If changed tools:openDrawer="end", the side slider layout needs to be set android:layout_gravity="end". The side slide bar can slide out from the right.

Now the sidebar is placed with RelativeLayout. You can also put a RecyclerView.

Push page when drawer comes out

To listen to the sliding event of the side sliding bar, use ActionBarDrawerToggle. When the side slide bar slides out, onDrawerSlidethe sliding distance is calculated in the method. Then set the horizontal relative offset distance of the main view setTranslationX.

Configuration operations can be performed in the onCreate method of the activity

DrawerLayout root = findViewById(R.id.root);
    final View contentView = findViewById(R.id.content_field);

    ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, root, android.R.string.yes, android.R.string.cancel) {
    
    

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
    
    
            super.onDrawerSlide(drawerView, slideOffset);
            float slideX = drawerView.getWidth() * slideOffset;
            contentView.setTranslationX(slideX);
        }
    };
    root.addDrawerListener(actionBarDrawerToggle);

Change shadow on slide out

Use the DrawerLayout setScrimColormethod to change the shadow color. The default shadow color is DEFAULT_SCRIM_COLOR = 0x99000000.

DrawerLayout root = findViewById(R.id.root);
root.setScrimColor(Color.TRANSPARENT);

Lock DrawerLayout

root.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); // 解锁
root.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); // 不检测从左到右的滑动动作

Share one last time

[Produced by Tencent Technical Team] Getting started with Android from scratch to mastering it, Android Studio installation tutorial + full set of Android basic tutorials

Android programming introductory tutorial

Java language basics from entry to familiarity

Kotlin language basics from entry to familiarity

Android technology stack from entry to familiarity

Comprehensive learning on Android Jetpack

For novices, it may be difficult to install Android Studio. You can watch the following video to learn how to install and run it step by step.

Android Studio installation tutorial

With the Java stage of learning, it is recommended to focus on video learning at this stage and supplement it with book checking and filling in gaps. If you mainly focus on books, you can type the code based on the book's explanations, supplemented by teaching videos to check for omissions and fill in the gaps. If you encounter problems, you can go to Baidu. Generally, many people will encounter entry-level problems and give better answers.

You need to master basic knowledge points, such as how to use the four major components, how to create Service, how to layout, simple custom View, animation, network communication and other common technologies.

A complete set of zero-based tutorials has been prepared for you. If you need it, you can add the QR code below to get it for free.

A complete set of basic Android tutorials