Android Design Support Library

Android Design Support Library
Android Design Support Library

At the 2015 I/O conference, Google introduced more detailed Material Design specifications. At the same time, it also brought us a brand new Android Design Support Library. In this support Library, google provides us with more standardized MD design style controls. Most importantly, the Android Design Support Library is more compatible and can be directly compatible with Android 2.2. This is a good idea.

Using the Support Library is very simple:
Add reference:

compile 'com.android.support:design:22.2.0'

Let's take a look at the basic usage of these new controls. Let's start with the simplest controls.

Snackbar

Snackbar provides a lightweight control between Toast and AlertDialog, which can easily provide message prompts and action feedback.
The use of Snackbar is basically the same as that of Toast:

Snackbar.make(view, Snackbar comes out, Snackbar.LENGTH_LONG)                        .setAction(Action, new View.OnClickListener() {                            @Override                            public void onClick(View v) {                                Toast.makeText(                                        MainActivity.this,                                        Toast comes out,                                        Toast.LENGTH_SHORT).show();                            }                        }).show();

Note that the first parameter is used as the benchmark element displayed in the Snackbar, and multiple actions can be set.

The display effect is similar to the following:

Vcu1w/drawing + DQo8cD48aW1nIGFsdD0 = "Write picture description here" src = "http://www.bkjia.com/uploads/allimg/150606/04234G616-1.png" title = "\"/>

TextInputLayout

As a parent container control, TextInputLayout encapsulates the new EditText. Generally, a separate EditText will hide the hint information after the user inputs the first letter, but now you can use TextInputLayout to encapsulate EditText, the prompt information will be changed to a floating label displayed on the EditText, so that users will always know what they are entering. At the same time, if you add a listener to EditText, you can also add more floating labels to it.

Next we will look at this with a TextInputLayout:

It must be noted that it includes EditText and cannot be used independently.

In the code, we set a listener for it:

        final TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.til_pwd);        EditText editText = textInputLayout.getEditText();        textInputLayout.setHint(Password);        editText.addTextChangedListener(new TextWatcher() {            @Override            public void beforeTextChanged(CharSequence s, int start, int count, int after) {                if (s.length() > 4) {                    textInputLayout.setError(Password error);                    textInputLayout.setErrorEnabled(true);                } else {                    textInputLayout.setErrorEnabled(false);                }            }            @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {            }            @Override            public void afterTextChanged(Editable s) {            }        });    }

The result is as follows:

When input:

Note that the color of TextInputLayout comes from the color of col1_cent in the style:

  
   #1743b7
  

The following describes how to use TextInputLayout in Google API Doc:

Http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

Floating Action Button

Floating action button is a circular button that displays basic operations on the interface. The FloatingActionButton in the Design library implements a floating OPERATION button that uses the default color as colcent in the topic. like this:

FloatingActionButton -- FAB is very easy to use. You can specify CoordinatorLayout in the reinforced FrameLayout, which will be later.
You can use FAB as a button.

You can specify the location of layout_gravity.
Similarly, you can specify anchor to display the anchor of the position:

In addition to the floating OPERATION button of the general size, it also supports mini size (fabSize = "mini "). FloatingActionButton is inherited from ImageView. You can use any android: src or ImageView method, such as setImageDrawable () to set icons in FloatingActionButton.

Http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

TabLayout

Switching views by Tab sliding is not a new concept, but Google provided complete support in the support library for the first time, the TabLayout of the Design library not only achieves a fixed average distribution of the width of the tab-view, but also implements a scrolling tab-view with an unfixed width and horizontal scrolling. Tab can be dynamically added in the program:

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);        tabLayout.addTab(tabLayout.newTab().setText(tab1));        tabLayout.addTab(tabLayout.newTab().setText(tab2));        tabLayout.addTab(tabLayout.newTab().setText(tab3));

However, most of the time we do not use this method. Generally, the sliding layout works with ViewPager. Therefore, we need ViewPager to help:

MViewPager = (ViewPager) findViewById (R. id. viewpager); // setupViewPager (); TabLayout tabLayout = (TabLayout) findViewById (R. id. tabs); tabLayout. setupWithViewPager (mViewPager );

By setupWithViewPager in one sentence, we can combine ViewPager with TabLayout.

Http://developer.android.com/reference/android/support/design/widget/TabLayout.html

NavigationView

NavigationView is very important in MD design. Google also proposed to use DrawerLayout to implement the navigation drawer. In the support library, Google provides NavigationView to implement the navigation menu interface. Therefore, the new navigation interface can be written as follows:

These two attributes are the most important:

App: headerLayout
App: menu

With these two attributes, we can easily specify the header layout and menu layout of the navigation interface:

The top layout is the header layout specified by app: headerLayout:

The following menu layout can be automatically generated directly through the menu content, without the need to specify the layout:

You can set an OnNavigationItemSelectedListener and use setNavigationItemSelectedListener () to obtain the selected callback event of an element. It provides you with the clicked menu elements, allowing you to process selection events, change the status of check boxes, load new content, close navigation menus, and any other operations you want. For example:

private void setupDrawerContent(NavigationView navigationView) {        navigationView.setNavigationItemSelectedListener(                new NavigationView.OnNavigationItemSelectedListener() {                    @Override                    public boolean onNavigationItemSelected(MenuItem menuItem) {                        menuItem.setChecked(true);                        mDrawerLayout.closeDrawers();                        return true;                    }                });    }

It can be seen that Google encapsulates these things very easily.

AppBarLayout

AppBarLayout, like its name, uses all the components of the container class as AppBar. Like this:

Here we put Toolbar and TabLayout in AppBarLayout to make them as a whole as AppBar.

Http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

CoordinatorLayout

CoordinatorLayout is an enhanced FrameLayout. In CoordinatorLayout, we can perform many new operations based on FrameLayout.

Floating View

A new feature of MD is to add a lot of Floating views, such as the Floating Action Button we mentioned earlier. We can place FAB anywhere, just:

android:layout_gravity=end|bottom

To specify the display position. At the same time, it also provides layout_anchor for you to set the coordinates of the anchor:

app:layout_anchor=@id/appbar

Create scroll

CoordinatorLayout is the top priority of this support library update. It controls the layout of touch events between child views from the other layer, and many controls in the Design library use it.

A good example is when you add FloatingActionButton as a sub-View to CoordinatorLayout and pass CoordinatorLayout to Snackbar. make (), on devices 3.0 and above, the Snackbar is not displayed on the floating button, but FloatingActionButton uses the callback method provided by CoordinatorLayout, when the Snackbar enters the animation effect, it automatically moves up and gives way to the outbound position, and returns to the original position when the Snackbar animation disappears, without additional code.

The official example shows this:

A scrollable component, such as RecyclerView and ListView (Note that only RecyclerView and ListView are supported. If you use a ScrollView, it is ineffective.). If:
1. Set layout_behavior for the rolling component.
2. Set layout_scrollFlags for another control.
When the layout_behavior control is set to slide, the status of the control with layout_scrollFlags configured will be triggered.

The configured layout_scrollFlags has the following options:

Scroll: all views that want to scroll out of the screen need to set this flag-the view without this flag will be fixed at the top of the screen. EnterAlways: this flag enables any downward scrolling to make the view visible and enables quick "return mode ". EnterAlwaysCollapsed. ExitUntilCollapsed: this flag causes the view to scroll off until it is 'collapsed '(its minHeight) before exiting.

Note that the following two modes are useful only in CollapsingToolbarLayout, and the first two modes must be used together. That is to say, the use scenarios of these flags, it is fixed.
For example, in the previous example, this mode is used:

app:layout_scrollFlags=scroll|enterAlways

PS: all views that use scroll flag must be defined before those that do not use scroll flag, so that all views exit from the top and leave fixed elements.

Http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

CollapsingToolbarLayout

CollapsingToolbarLayout provides a foldable Toolbar, which is also an effect in Google + and photos. Google has made it a standard control for your convenience.

Here is an example:

We placed an ImageView and a Toolbar in CollapsingToolbarLayout. Put the CollapsingToolbarLayout in AppBarLayout as a whole. In CollapsingToolbarLayout, we set the layout_collapseMode of ImageView and a Toolbar respectively.
Here the app of CollapsingToolbarLayout is used: layout_collapseMode = "pin" to ensure that the Toolbar is still fixed at the top of the screen when the view is folded. When you use CollapsingToolbarLayout and Toolbar together, the title will automatically become larger when it is expanded, and the font will be transitioned to the default value when it is folded. Note that in this case, you must call setTitle () on CollapsingToolbarLayout instead of the Toolbar.

In addition to fixed view, you can also use app: layout_collapseMode = "parallax" (and use app: layout_collapseParallaxMultiplier = "0.7" to set the parallax factor) to implement the parallax scrolling effect (for example, an ImageView in CollapsingToolbarLayout). In this case, the app: contentScrim = "? The attr/colorPrimary attribute works perfectly together.

In this example, we also set the following:

app:layout_scrollFlags=scroll|exitUntilCollapsed>

To receive one:

app:layout_behavior=@string/appbar_scrolling_view_behavior>

In this way, the scrolling effect can be generated. Through layout_collapseMode, we set the effect of Content Changes During scrolling.

Let's take a look at an official example:

CoordinatorLayout and custom view

One thing you must note is that CoordinatorLayout does not know the internal working principle of FloatingActionButton or AppBarLayout-it only uses Coordinator. behavior provides additional APIs, which allow the child View to better control touch events and gestures, declare dependencies between them, and receive callbacks through onDependentViewChanged.

You can use CoordinatorLayout. defaultBehavior (your View. behavior. class) annotation or use app: layout_behavior = "com. example. app. your View $ Behavior attribute defines the default Behavior of the view. Framework makes it possible to combine any view with CoordinatorLayout.

 

Summary

After several days of research, the significance of the Android Design Support Library proposed by Google is not that it provides these very good controls. In fact, these controls can basically be found on Github. Its purpose is that Google provides an official design guide and further improves the MD design philosophy. This is the most important feature of the Android Design Support Library. Of course, in all fairness, the use of these controls is not very user-friendly, and too many packages make the overall effect not very customizable. However, this is, after all, the first step Google has taken, it will certainly be more awesome in the future.

Demo

Finally, a Demo integrating the MD and Android Design Support Library is provided for your research. I believe that you will soon understand how to use the Android Design Support Library by combining the article and code.