(Rotate) Use Toolbar + DrawerLayout to Achieve High and Large Side-Slip Menu Quickly

Original address: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html


If you're looking at applications that follow the latest Material Design design specifications (if not, assume you do!) You may find that there are a lot of side-slip menu animations that look comfortable and very large. Examples are as follows (via Reference 2):

Today we will use official support libraries to achieve this kind of effect quickly. We need to use Toolbar and Drawer Layout. The detailed steps are as follows: (If you don't know about these two widgets, Google yourself first)

1. First you need to add appcompat-v7 support

If it is a project created on Android Studio 1.0 RC4, appcompat-v7 support has been added by default. If it is not the latest version of AS, you need to add the following code in build.gradle:

dependencies {
    ...//Other code
    compile 'com.android.support:appcompat-v7:21.0.2'
}

After adding, you need to synchronize gradle

2. Add Toolbar

Because Toolbar is inherited from View, you can add Toolbar directly to the main layout file like other standard controls, but in order to improve the reuse efficiency of Toolbar, you can create a custom_toolbar.xml code in layout as follows:

<?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:id="@+id/tl_custom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>

Explain:

  • android.support.v7.widget.Toolbar - Of course, if you use Toolbar directly only in Lollipop, you don't need to add V7 support.

  • xmlns:app - Custom xml naming control, which can specify res-auto directly in AS without using the full package name

  • Android: backgroundand android:minHeight can be declared in styles.xml

2. Add Drawer Layout

Similar to Toolbar, in order to improve code reuse efficiency, you can create a custom_drawerlayout.xml code in layout as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/dl_left"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <!--Main layout-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/iv_main"
            android:layout_width="100dp"
            android:layout_height="100dp" />
    </LinearLayout>
    <!--Side Slide Menu-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:layout_gravity="start">
        <ListView
            android:id="@+id/lv_left_menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"
            android:text="DrawerLayout" />
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

There are two sub-nodes in the Drawerlayout tag, one is the left menu, the other is the main layout, and the starting position of the left menu needs to be set to android:layout_gravity="start".

3. Implementing activity_main.xml

<LinearLayout 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:context=".MainActivity">
        <!--Toolbar-->
        <include layout="@layout/custom_toolbar" />
        <!--DrawerLayout-->
        <include layout="@layout/custom_drawerlayout" />
</LinearLayout>

Direct use of include tags, concise and clear

4. Perfecting Java Code

public class MainActivity extends ActionBarActivity {
    //Declare related variables
    private Toolbar toolbar;
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private ListView lvLeftMenu;
    private String[] lvs = {"List Item 01", "List Item 02", "List Item 03", "List Item 04"};
    private ArrayAdapter arrayAdapter;
    private ImageView ivRunningMan;
    private AnimationDrawable mAnimationDrawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViews(); //Get control
        //Beijing East Running Man animation effect, and this Toolbar has nothing to do with
        mAnimationDrawable = (AnimationDrawable) ivRunningMan.getBackground();
        mAnimationDrawable.start();
        toolbar.setTitle("Toolbar");//Setting Toolbar Title
        toolbar.setTitleTextColor(Color.parseColor("#ffffff "); // Set the title color
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true); //Setting the Return Key Available
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //Create return keys and implement open/close listening
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                mAnimationDrawable.stop();
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                mAnimationDrawable.start();
            }
        };
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        //Setting menu list
        arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvs);
        lvLeftMenu.setAdapter(arrayAdapter);
    }
    private void findViews() {
        ivRunningMan = (ImageView) findViewById(R.id.iv_main);
        toolbar = (Toolbar) findViewById(R.id.tl_custom);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
        lvLeftMenu = (ListView) findViewById(R.id.lv_left_menu);
    }
}

5. Of course, styles.xml and colors.xml are more important, as follows
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!--Status bar color-->
        <item name="colorPrimaryDark">@color/Indigo_colorPrimaryDark</item>
        <!--Toolbar colour-->
        <item name="colorPrimary">@color/Indigo_colorPrimary</item>
        <!--Return key style-->
        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
        </style>
        <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="Indigo_colorPrimaryDark">#303f9f</color>
    <color name="Indigo_colorPrimary">#3f51b5</color>
    <color name="Indigo_nav_color">#4675FF</color>
</resources>

The result is as follows. (Note: On Yosemite, it seems that the direct recording screen does not work, and the animation can't be real-time because of the frame rate. Let's look at it first.)

Reference List

Tags: Android xml DrawerLayout encoding

Posted on Thu, 11 Jul 2019 19:02:50 -0400 by Corona4456