Android Material Design, androidmaterial

Android Material Design, androidmaterial
Floating label for text input

Although EditText has improved material design, it is not enough. For example, when we enter the first character, the prompt label is automatically hidden. Now you should use TextInputLayout. It will automatically hover the prompt label above EditText after the user starts to input, so that the user can always know the context of the input content.

You can also callsetError()Method. An error message is displayed below EditText. What a considerate design?

Floating Action Button)

Floating action button is a circular button that represents the most important interactive action on the current page. The FloatingActionButton in the Design Library provides you with a simple and consistent implementation. It uses your topic by default.colorAccentThe color of the attribute definition.

In addition to the standard size, it also supports the mini size. FloatActionButton inherits from ImageView, so you can also useandroid:srcOr other methods (suchsetImageDrawable()) To control its appearance.

Snackbar

If you want to provide a lightweight and fast operation feedback method, it is not Snackbar. The Snackbar is displayed at the bottom of the screen, including text and an optional operation. It will automatically disappear after a certain period of time. You can also use a sliding gesture to remove it in advance.

Snackbar supports slide gestures and responds to click actions, which is far more powerful than Toast, but you will find that its API is 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 noticemakeThe first parameter, Snackbar will try to find a suitable parent view to ensure that it can be displayed at the bottom of the correct position.

Tabs (Tab)

In an application, you can switch between different views through tabs. This is not a new concept in material design. Tabs is generally used for top-level navigation, or to organize and display the content of different groups in the application. As shown in:

The TabLayout control of the Design Library implements two forms: Fixed tab (all tabs are in the same autumn color and fixed width) and rolling tab (the width is adaptive according to the title length and can be horizontally slide, you can use code to add a tab:

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

If you use ViewPager for horizontal paging, you can directlyPagerAdapter.getPageTitle()To create a tab.setupWithViewPager()Method to bind them together. This ensures that the tab and ViewPager are automatically synchronized when the content changes.

CoordinatorLayout, animation, and scrolling

To create a material design-style application, the unique visual effect is only one aspect. Action and gesture are also very important. Material design contains a large number of gestures, such as click ripple effects and other useful transfer animations. Design Library introduces the layout of CoordinatorLayout. It provides an additional layer to control click events between subviews. Many controls in Design Library use this layout.

CoordinatorLayout and floating operation buttons

FloatingActionButton is an excellent example. When you add FloatingActionButton as a sub-element to CoordinatorLayout, and then pass CoordinatorLayout as a parameterSnackbar.make()The Snackbar is not displayed on the FloatingActionButton. FloatingActionButton uses the additional callback interface provided by CoordinatorLayout to automatically move up when the Snackbar is displayed and reset when it disappears. No code is required for this operation.

CoordinatorLayout also provideslayout_anchor, Togetherlayout_anchorGravityTogether, it can be used to place floating views (such as FloatingActionButton) associated with other views ).

CoordinatorLayout and App Bar

Another major application scenario of CoordinatorLayout is related to appbar (previous actionBar) and scrolling. You may have used a Toolbar in the layout, which allows you to easily modify the appearance and integrate the icons to be consistent with the rest. Design Library puts all of these things to the next level: Use AppBarLayout to allow your Toolbar and other views (such as the tab View provided by TabLayout) to respond to the rolling events of the same-level view marked by ScrollingViewBehavior. In this case, you can create a layout as follows:

Now, as you scroll through RecyclerView, AppBarLayout will also respond to these events (using the scroll flag of the subnode to control how they roll in and out of the screen ). Flags includes:

• Scroll:This flag is set to all views that want to get out of the screen. If this flag is not set, the view will be kept at the top of the screen.
• EnterAlways:This flag will ensure that the view display is triggered for any sliding scrolling screen, which is equivalent to enabling a "quick return" mode.
• EnterAlwaysCollapsed:If you have set minHeight and the flag, your view is usually folded and displayed. It is opened to the complete height only when the rolling view has reached its vertices.
• ExitUntilCollapsed:This flag will cause the view to be locked until it exits.

Note: All views with the scroll flag set must be declared before the view with this flag is set. This ensures that all the scroll views exit from the top, and the fixed elements are not affected.

Scalable Toolbars

Add the Toolbar directly to AppBarLayout, And you can setenterAlwaysCollapsed/exitUntilCollapsedBut you cannot control how different elements respond to the folding action in depth. To achieve this, you need to use CollapsingToolbarLayout:

Useapp:layout_collapseMode="pin"To ensure that the Toolbar remains at the top of the screen. Furthermore, when you use CollapsingToolbarLayout and Toolbar in combination, the title is automatically enlarged when the view is fully displayed. When the view is folded, the title is transitioned to the default font size. Note that you need to call the setTitle () of CollapsingToolbarLayout, instead of the corresponding Toolbar method.

In addition to setting the view to the screen, you can also setapp:layout_collapseMode="parallax"(Additionalapp:layout_collapseParallaxMultiplier="0.7"This property is used to set the parallax multiplier) to achieve the effect of parallax scrolling. Collocationapp:contentScrim="?attr/colorPrimary"The attribute works very well, as shown below:

CoordinatorLayout and custom views

Another important thing is that CoordinatorLayout does not naturally understand how FloatingActionButton or AppBarLayout works. It only provides Coordinator. behavior's additional API allows sub-controls to better control click events and gestures.

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

The Design Library framework allows any view and CoordinatorLayout to be used in combination.

Released now

The Design Library is now publicly available. Be sure to upgrade Android Support Repository in SDK manager. For the Gradle project, you can directly add the dependency on the Design Library:

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

Note:: The Design Library depends on the Support v4 and AppCompat Support libraries. They are automatically added to the compilation dependencies. These new widgets are also available in the Android Studio Layout editor (find them in CustomView ).

Design Library, AppCompat, and all Android Support libraries are very important tools for building a modern application with first-class appearance and interaction. Come and try them.