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