The original article was first published in the wechat public number: Practice, welcome to pay attention to communication!

Material Design Design specification was launched in Google I/O 2014. This Design concept has been favored by the majority of developers since it was launched. It mainly focuses on the creation of paper and ink and highlights the sense of entity of Design, making the Design closer to the real world and striving for smooth and continuous interaction and user experience. This Design specification is more conducive to the development of the Android ecosystem. For this purpose, Google provides a series of Material Design style controls, such as FloatingActionButton, Snackbar, TabLayout, etc. Although it is often used in development, I did not record it. I plan to record the use of these components from scratch. Today, I will talk about the knowledge of CoordinatorLayout and FloatingActionButton.

CoordinatorLayout

CoordinatorLayout is an enhanced version of FramLayout, which means that if you don’t put any restrictions on it, the child View in CoordinatorLayout is in the upper left corner by default. CoordinatorLayout can be used in two main ways:

  1. As the top-level layout of the application
  2. As a container for interacting with one or more child Views

You can specify behaviors for the child views in CoordinatorLayout, you can provide many different interactions within a single parent, and the child views can interact with each other, CoordinatorLayout can use CoordinatorLayout. DefaultBehavior annotations to specify the default behavior of the component View, all in all, can use CoordinatorLayout implement different scrolling effect.

FloatingActionButton

FloatingActionButton is a Material Design button control that is a circular icon that floats on top of the UI and has its own behavior and anchor points.

FloatingActionButton FloatingActionButton has two sizes: Normal (56DP) and Mini (40DP). The default is Mini (40DP). The size of the FloatingActionButton can be specified using the property fabSize. You can also set the fabSize to Auto, and the system will select the appropriate size for different screens.

FloatingActionButton inherits ImageView indirectly and can set the icon in code as follows:

// Set the icon
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);
Copy the code

By default, the background color of FloatingActionButton is the colorAccent of the theme. You can change the background color of FloatingActionButton in the following way:

// Set the background color
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("# 000000")));
       
Copy the code

You can set the size of FloatingActionButton as follows:

// Set the size
fab.setSize(FloatingActionButton.SIZE_MINI);
Copy the code

The size of FloatingActionButton is defined in the dimens file. Design_fab_size_mini and design_fab_size_normal are specified as follows:

/ / the source code
private int getSizeDimension(@Size final int size) {
    final Resources res = getResources();
    switch (size) {
        case SIZE_AUTO:
            // If we're set to auto, grab the size from resources and refresh
            final int width = res.getConfiguration().screenWidthDp;
            final int height = res.getConfiguration().screenHeightDp;
            return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
                    ? getSizeDimension(SIZE_MINI)
                    : getSizeDimension(SIZE_NORMAL);
        case SIZE_MINI:
            return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
        case SIZE_NORMAL:
        default:
            returnres.getDimensionPixelSize(R.dimen.design_fab_size_normal); }}Copy the code

Create dimens folder and set design_FAB_size_mini and design_FAB_size_normal to customize the size of FloatingActionButton:

/**dimens.xml**/

      
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_size_mini" tools:override="true">20dp</dimen>
    <dimen name="design_fab_size_normal" tools:override="true">100dp</dimen>
</resources>
Copy the code

Of course FloatingActionButton inherits ImageView indirectly, so some properties of the ImageView can definitely be used.

The properties of FloatingActionButton

Here are some common attributes, as follows:

Android: SRC // Set icon (24dp) APP :backgroundTint // Set icon background color. App :rippleColor // Set the color of the water ripple when clicked app:elevation // Set the shadow size app:fabSize // Set the size app:pressedTranslationZ // The distance from the Z-axis when pressed App :layout_anchor // Set anchor point app:layout_anchorGravity// Set relative anchor point positionCopy the code

About the attributes, to understand the specific use of the setting after observing the effect is an intuitive way to learn.

Simple to use

For example, you can use CoordinatorLayout and FloatingActionButton to see the effect. The layout is as follows:


      
<android.support.design.widget.CoordinatorLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.manu.materialdesignsamples.samples.SampleActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvData"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:visibility="visible"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:layout_gravity="bottom|end"
        android:src="@drawable/fab"
        android:scaleType="center"
        app:backgroundTint="@color/colorAccent"
        app:backgroundTintMode="src_in"
        app:elevation="5dp"
        app:rippleColor="# 000000"
        app:fabSize="auto"
        app:pressedTranslationZ="10dp"/>

</android.support.design.widget.CoordinatorLayout>

Copy the code

Then set the click event of FloatingActionButton as follows:

findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v,"I'm a Snackbar...",Snackbar.LENGTH_SHORT)
                .setAction("Cancel".new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(SampleActivity.this."Cancel", Toast.LENGTH_SHORT).show(); } }).show(); }});Copy the code

Let’s start with a rendering, as follows:

FloatingActionButton automatically allocates a position to the Snackbar to avoid blocking the FloatingActionButton when the Snackbar pops up. Because the Behavior corresponding to Snackbar has been implemented inside the FloatingActionButton, the CoordinatorLayout automatically adjusts the position of the sub-view based on the Behavior. So of course that’s where FloatingActionButton is, you can try to set the root layout to a RelativeLayout or something like that, and of course the Snackbar pops up and blocks FloatingActionButton, As the name implies, CoordinatorLayout is the coordination layout, and the part about Behavior is left to sort out later.

You can choose to follow the wechat official number: Jzman-blog to get the latest updates and exchange and learn together!