Latest Android Design Support Library components

Latest Android Design Support Library components

Android 5.0 Lollipop is the most significant version released by Android. A very important reason for this is the introduction of Material Design. A new Design language refreshes the entire Android experience. Our detailed description is a great start for adapting to Material Design. At the same time, we can understand that it is a huge challenge for developers, especially for backward compatible developers. We can get some help from the Design Support Library of the new Android Design. Today, we bring some important material design components to all developers and Android2.1 and above. You can see a navigation drawer, floating tag, floating action button, snackbar, tabs, and a frame that associates them with the processing action and sliding.

Navigation View

Navigation drawer can become an important focus in App recognition and navigation, and design consistency will also have an important impact on App navigation, especially for first-time users. NavigationView makes it easy to provide the framework of the navigation drawer required by developers, and it also provides developers with the ability to define navigation items through menu resources.

You can use NavigationView as the drawer content of DrawerLayout in a layout like this.

windows="true" android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">    
      

Note the two attributes of NavigationView: app: headerLayout controls the layout at the top (optional ). App: menu is the menu resource for determining navigation items (which can be updated at runtime ). NavigationView will also take into account the gauze protection of the status bar to ensure that your NavigationView and status bar can interact correctly on the device of API 21 (Android 5.0.
The simplest drawer content can be a set of optional menu items:

The selected navigation item is highlighted in the navigation drawer to ensure that the user knows which navigation item is selected now.

You can also use a subtitle to separate navigation items into groups:

By calling setNavigationItemSelectedListener () to set OnNavigationItemSelectedListener, you can capture the callback events selected for the navigation item. The menu items provided for you can be clicked, allowing you to process selection events, change the selection status, load new content, and close the drawer in the code, or something else you want to do.

Floating label of EditText

Even the simple EditText has room for improvement in material design. When an EditText is the first character, the prompt text will be hidden. Now you can place the prompt text in TextInputLayout, so that the prompt text can be converted into a floating label and placed above EditText, to ensure that the context background is not lost during the input process.

Besides the prompt text, you can also call the setError () method to display the error message under EditText.

Floating action button

A floating action button represents a circular button on the interface to process individual action events. The FloatingActionButton in the design dependency Library provides a simple help implementation. The default color is the colorAccent attribute value you set in the topic.

Snackbar

Using Snackbar to provide a lightweight and fast response feedback for your operations is a perfect choice. The Snackbar is displayed at the bottom of the screen and contains a text with an optional single action. It automatically disappears from the screen as an animation within the set time. In addition, you can remove it before the set time arrives.

Snackbar has the ability to slide or interact with other actions, making it much more powerful than Toast (another lightweight feedback mechanism. However, you can find that their APIs are similar:

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

Note that using a View as the first parameter of the make method, Snackbar will find a suitable parent control to ensure that you are placed at the bottom.

Tabs

For material design, switching between views by TAG is not a new concept. It is equivalent to the top navigation mode of the home page, or organize different group content in the App (for example, different types of music)

TabLayout in the design dependency Library provides fixed labels-the width of the view under all labels is equal to the split, and slide labels-All labels are not of even size and can slide horizontally. You can add tags in the program as follows:

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

However, if you use ViewPager as the horizontal page between tags, you can directly use getPageTitle () in PagerAdapter to create tags, and then associate them together using the setupWithViewPager () method. This ensures that the tag selection event updates ViewPager, and the page switch also updates the selected tag.

CoordinatorLayout, action and scroll

The unique visual effects are only part of the material design, and actions are also an important part of a great material design App. While the material desig has a large number of ripple effects and interesting transition animation effects, the design dependency Library also includes CoordinatorLayout, A layout provides control over touch events between child controls at a higher level, which can be exploited by many components in the design dependency library.

CoordinatorLayout and floating action buttons

A good example is that when you add FloatingActionButton as a child control of CoordinatorLayout and pass CoordinatorLayout to your Snackbar. in the make () method, what replaces the snackbar display on the FloatingActionButton is the CoordinatorLayout feedback effect that FloatingActionButton can use to automatically move the animation effect to the snackbar, and return to the original position when the snackbar disappears, which can be implemented on Android 3.0 or a later device without additional code.

CoordinatorLayout also provides a layout_anchor attribute that can be used with the layout_anchorGravity attribute to place floating views, such as FloatingActionButton, and associate it with other views.

CoordinatorLayout and app bar

Other major usage of CoordinatorLayout is app bar and scrolling technology. You may want to use a Toolbar in the layout to easily customize the appearance and associate it with an app Image. Design dependency libraries bring this to another level: Use AppBarLayout to allow Toolbar and other views (such as TabLayout that provides labels) to generate feedback on rolling events in the sibling view marked with ScrollingViewBehavior. Therefore, you can create a layout like this:

Now, when a user slides the RecyclerView, AppBarLayout can respond to the sliding event and control how they enter and exit the screen by using the slide sign of the Child control (scroll flags. These logos are:

Scroll: this flag is used for all views that can be rolled out of the screen. If this flag is not set, the View will be pinned to the top of the screen. EnterAlways: this flag ensures that any sliding action can make the View visible and the "quick return" mode is available. EnterAlwaysCollapsed: When a View declares the minimum height and uses this flag, this View only enters the minimum height (declared by the collapsed attribute, it is stretched to the whole height only when sliding to the top. ExitUntilCollapsed: this flag ensures that the View remains on the screen until it is moved to the minimum height.

Note: The slide flag used by all views should be declared before the View is used to the flag, which will ensure that all views exit from the top and leave fixed elements.

Collapsing Toolbars

Adding a Toolbar directly to AppBarLayout will carry the sliding flags of enterAlwaysCollapsed and exitUntilCollapsed, but it does not control in detail how different elements react to the folding. To do so, you can use CollapsingToolbarLayout,

Set the attribute app: layout_collapseMode = "pin" of CollapsingToolbarLayout to ensure that the Toolbar is pinned at the top of the screen when the view is folded. Even better, you can use CollapsingToolbarLayout together with Toolbar. When the entire layout is highly visible, your title Font will become larger. When the view is folded, the original size is transitioned. Note that in these examples, the setTitle method is called in CollapsingToolbarLayout, instead of in Toolbar.

In addition to holding a View, you can use app: layout_collapseMode = "parallax" (optional setting property app: layout_collapseParallaxMultiplier = "0.7" to set the parallax multiplier) to implement a parallax scroll (for example, the sibling view ImageView in CollapsingToolbarLayout ). In this usage, the app: contentScrim = "? "Attr/colorPrimary" is used in combination. The result is that a gauze effect is added when the view is folded.

CoordinatorLayout and custom views

One important thing is to note that CoordinatorLayout does not need to understand the internal working principle of FloatingActionButton or AppBarLayout, just like a Coordinator. behavior is an additional API provided to allow sub-views to better control touch events and gestures. It also declares dependencies between each other and can receive feedback through onDependentViewChanged.

View can be accessed through CoordinatorLayout. defaultBehavior (YourView. behavior. class) annotation to declare a default behavior, or use app: layout_behavior = "com. example. app. yourView $ Behavior "property. This framework enables CoordinatorLayout to be associated with any View.

It can finally be used!

This design dependency library can be used now. Make sure that you have updated the Android Support Repository in SDK Manager. You can start to use these dependency libraries to use this simple statement:

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

Note: This library depends on Support v4 and AppCompat Support Libraries. These Libraries are automatically included when you add this design dependency library.

This design dependency library, AppCompat, and all other Android Development Support libraries are very important tools that provide building modules for us to develop a modern and beautiful APP, this avoids repeated creation of previous projects.