Material Design development tool: Android Design Support Library Introduction

Transferred from: https://blog.leancloud.cn/3306/

Android 5.0 Lollipop is by far the most significant release, largely because material design--is a new design language that refreshes the entire Android user experience. But it is a big challenge for developers to design an application that is fully consistent with material design philosophy. This is supported by the Android design support Library, which brings together a number of important material Design controls that support all Android 2.1 and later versions. Inside you can see navigation drawer view, floating labels, floating action button, Snackbar, tabs, and a set of action and scrolling frames that tightly combine them

Navigation view (Navigation view)

Whether from app identification, content navigation, or design consistency, navigation drawer is the first focus. Now, Navigationview makes the navigation bar easier, providing the framework that navigation drawer needs and the ability to customize more menu items through resource files.

You only need to use Navigationview as a drawerlayout content view, for example:

Here you will notice two attributes: app:heanderLaytout the layout used to control the header section, and app:menu the menu resource specified. Navigationview automatically handles changes to the status bar, ensuring that it works correctly on the device 21+ the API.

The simplest drawer menu is a collection of menu items that are allowed to be selected, for example:

The selected menu is highlighted to remind the user which menu item is currently selected.

You can also use subheader in menus to implement separate groupings:

After the call setNavigationItemSelectedListener() , when the menu item is selected, you will OnNavigationItemSelectedListener get the callback. When you process a callback, you know which menu item is clicked, and you can handle the selection event, modify the selected state, load the new content, and close the drawer by code, or any other action you want to perform.

Hover labels for text input

Although EditText has made some improvements to material design, it is not enough, for example, that it will automatically hide the cue tag when we enter the first character. Now you should use Textinputlayout, which will automatically hover the cue label over the EditText after the user starts typing, so the user will always know the context of the input.

Alternatively, you can also setError() display an error message under EditText by calling the method. What a thoughtful design, is there?

Floating action button (floating action buttons)

The floating action button is a circular button that represents the most important interactive action of the current page. The Floatingactionbutton in the Design Library gives you a simple and consistent implementation that defaults to colorAccent the tones defined by the attributes in your theme.

It also supports mini size in addition to the standard size. Floatactionbutton inherits from ImageView, so you can also use android:src or other methods (such as setImageDrawable() ) to control its appearance.

Snackbar

If you want to provide a lightweight, quick way of operating feedback, it is not Snackbar. The Snackbar is displayed at the bottom of the screen, containing text and an optional action that automatically disappears after a certain amount of time, and the user can remove it early by swiping gestures.

View Snackbar Effect Click (Note FQ when not open)

Snackbar can support swipe gestures or respond to click Actions, much more powerful than Toast, but you'll find its API very familiar:

Snackbar
.make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
.setAction(R.string.snackbar_action, myOnClickListener)
.show(); // Don’t forget to show!


You will notice make the first parameter, Snackbar will try to find the appropriate parent view to make sure it can be displayed at the bottom of the correct position.

Tabs (tab)

Within an app, switching between different views via tab is not a new concept in material design. Tabs are generally used for top-level navigation, or to organize and display the contents of different groupings within the application. As shown in the following:

The Tablayout control of the Design Library implements a fixed tab (All tab-equal, fixed-width) and scrolling tab (width is self-adapting to the title length and can be slid horizontally), and you can add tabs with code:


TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));


If you use Viewpager to split pages horizontally, you can PagerAdapter.getPageTitle() create tabs directly in, and finally setupWithViewPager() bind them together by means of a method. This ensures that tab and Viewpager are automatically synchronized when content changes.

Coordinatorlayout, animations and scrolling

Creating a material Design-style application with unique visual effects is only one aspect of the action and gesture that is also a very important part. Material design contains a large number of gestures, such as clicking on the ripple effect and some other useful transition animations. The design library describes the layout of Coordinatorlayout, which provides an additional layer to control the click events between sub-views, which are used by many controls in the design library.

Coordinatorlayout and Floating action buttons

Floatingactionbutton is a perfect example. When you add Floatingactionbutton as a child element coordinatorlayout and then pass coordinatorlayout as a parameter Snackbar.make() , Snackbar is not displayed to Floatingactionbutton above. Floatingactionbutton takes advantage of the additional callback interface provided by Coordinatorlayout, which automatically moves up when the Snackbar is displayed and automatically resets when it disappears, all without writing any code.

Click to see the effect (Please note FQ when not open)

Coordinatorlayout also provides a layout_anchor property that, together layout_anchorGravity , can be used to place a suspended view (such as Floatingactionbutton) associated with other views.

Coordinatorlayout and App Bar

Another major usage scenario for coordinatorlayout is related to AppBar (previous actionBar) and scrolling. You may have used Toolbar in the layout, which allows you to simply modify the appearance, integrate the icons to match the rest. The Design Library puts all of these things to the next level: use Appbarlayout to get your Toolbar and other views (such as the tab view provided by Tablayout) that respond to Scrollingviewbehavior-tagged sibling views The scrolling event. At this point you can create a layout like this:

Now, as the user scrolls Recyclerview, Appbarlayout also responds to these events (by using the scroll flag of the child nodes to control how they roll in and out of the screen). Flags include:

• Scroll: This flag is set to all views that you want to roll out of the screen, and if you do not set this flag, the view remains at the top of the screen.
• enteralways: This flag will ensure that any sliding scrolling screen will trigger the view display, which is equivalent to opening a "quick return" mode.
• enteralwayscollapsed: If you set minheight and this flag, your view will usually be collapsed and will only open to full height if the scrolling view has reached its vertex.
• exituntilcollapsed: This flag causes the view to remain locked until it exits.

Note: All views that have the scroll flag set must be declared before the view without the flag, which ensures that all scrolling views exit from the top, while the pinned elements are unaffected.

Scalable Toolbars

By adding Toolbar directly to the Appbarlayout, you can set enterAlwaysCollapsed / exitUntilCollapsed wait for the scrolling flag, but the different elements respond to the folding action and you can't control it more deeply. To achieve this, you need to use Collapsingtoolbarlayout:

Use app:layout_collapseMode="pin" to ensure that the Toolbar will remain at the top of the screen. Further, when you combine Collapsingtoolbarlayout and Toolbar, the caption automatically zooms in when the view is fully present, and when the view collapses, the caption transitions to the default font size. Note that you need to call Collapsingtoolbarlayout's Settitle () instead of Toolbar's corresponding method.

In addition to pinning the view to the screen, you can also set app:layout_collapseMode="parallax" (and add additional app:layout_collapseParallaxMultiplier="0.7" attributes to set the Parallax multiplier) to achieve the Parallax scrolling effect. This usage collocation app:contentScrim="?attr/colorPrimary" property works very well, such as the following:

Coordinatorlayout and Custom views

Another important thing is that Coordinatorlayout is not born to understand Floatingactionbutton or how appbarlayout works, it just provides some additional API for Coordinator.behavior , allowing child controls to better control click events and gestures.

Views can also be used CoordinatorLayout.DefaultBehavior(YourView.Behavior.class) to define a default behavior, or set in the layout file app:layout_behavior="com.example.app.YourView$Behavior" to achieve the same effect.

The Design Library Framework allows any view to be used in combination with Coordinatorlayout.

Now released

The Design Library is now publicly available, please confirm upgrading Android support Repository in SDK Manager. For the Gradle project, you can directly add a dependency to the Design Library:

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

Note : The Design Library relies on the support V4 and AppCompat support libraries, which are automatically added to the build dependencies. Also, these new widgets are available in the Android Studio Layout editor (Find them in CustomView).

Design Library, AppCompat, and all Android support libraries are important tools for building a modern application with first-class look and interaction, so let's try it out.

Material Design Development tool: Android Design support Library Introduction