Floatingactionbutton of material design component

The material design specification was launched in Google I / O 2014. Once launched, this design concept has been loved by the majority of developers. It mainly focuses on paper and ink creation 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 can better promote the development of Android ecosystem. Therefore, Google provides a series of controls that conform to the material design style, such as floatingactionbutton, snackBar, tablayout, etc. Although it is often used in development, it is not recorded. I intend to record the use of these components from the beginning. Today, I will talk about the knowledge related to coordinatorlayout and floatingactionbutton.

Coordinatorlayout is an enhanced version of framlayout, which means that if no restrictions are imposed, the child views in coordinatorlayout will appear in the upper left corner by default. Coordinatorlayout has two main uses:

You can specify behavior for child views in coordinatorlayout, which provides many different interaction effects in a single parent layout. Child views can also interact with each other. Coordinatorlayout can use the coordinatorlayout.defaultbehavior annotation to refer to the default behavior of child views. In short, you can use coordinatorlayout to achieve different scrolling effects.

Floatingactionbutton is a button control of material design type. It is generally expressed as a circular icon floating on the upper layer of the UI. It has its own behavior and can set anchor points.

Floatingactionbutton has two sizes: normal (56dp) and mini (40dp). The default is mini (40dp). Its size can be specified through the attribute fabsize. Of course, you can also set fabsize to auto. The system will select the appropriate size according to different screens.

Floatingactionbutton indirectly inherits ImageView. You can set icons in the code in the following ways:

//设置图标
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);

The background color of the floatingactionbutton defaults to the value represented by the coloraccent of the theme. In the code, you can modify the background color of the floatingactionbutton in the following ways:

//设置背景颜色
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));

You can set the size of the floatingactionbutton as follows:

//设置大小
fab.setSize(FloatingActionButton.SIZE_MINI);

Then, how to customize the size of the floatingactionbutton? You can see from the source code of the floatingactionbutton that the size is defined in the dimensions file, which is determined by design_ fab_ size_ Mini and design_ fab_ size_ Normal. Some codes are as follows:

//源码
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:
            return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
    }
}

So you just need to create the dimensions folder and reset the design in it_ fab_ size_ Mini and design_ fab_ size_ The size of the floatingactionbutton can be customized by the value of normal, as follows:

/**dimens.xml**/
<?xml version="1.0" encoding="utf-8"?>
<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>

Of course, the floatingactionbutton indirectly inherits the ImageView, and some properties of the ImageView can certainly be used. I won't talk about it here.

Here are some common attributes, as follows:

android:src             //设置图标(24dp)
app:backgroundTint      //设置图标背景颜色。  
app:rippleColor         //设置点击时水波纹颜色  
app:elevation           //设置阴影大小
app:fabSize             //设置大小 
app:pressedTranslationZ //按下时距离Z轴的距离  
app:layout_anchor       //设置锚点  
app:layout_anchorGravity//设置相对锚点的位置

About attributes, it is an intuitive learning method to observe the effect after setting.

I always think it's better to make notes with renderings. Then simply use the coordinatorlayout and floatingactionbutton to see the specific effects. The layout is as follows:

<?xml version="1.0" encoding="utf-8"?>
<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>

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,"我是Snackbar...",Snackbar.LENGTH_SHORT)
                .setAction("取消",new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(SampleActivity.this,"取消",Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }
});

Let's start with an effect drawing, as follows:

It can be seen that the floatingactionbutton will automatically leave a position for the snackBar to avoid blocking the floatingactionbutton when the snackBar pops up. Because the behavior corresponding to the snackBar has been implemented in the floatingactionbutton, the coordinatorlayout will automatically adjust the position of the sub view according to the specific performance of the corresponding behavior. Here, of course, is the position of the floatingactionbutton, You can try to set the root layout to relativelayout, etc. of course, the floatingactionbutton will be blocked when the snackBar pops up. As the name suggests, coordinatorlayout is the coordination layout. The part about behavior will be left for later sorting.

You can choose to pay attention to WeChat official account: jzman-blog get the latest updates, and exchange learning together!