Demo3 hover button: Floatactionbutton (Design support Lib)

Starting with Demo3, a few common components of the design Support component library are introduced, starting with the design support library first. The Android Design Support Library is the official open Source component library at the Google I/O 2015 launch, which includes a variety of components that conform to the material design style. The Floatactionbutton we are going to talk about today is one of them.

To use the Design support library, you first introduce this library into your project because it is an official library, so you can use the most traditional compile statement to refer to it. The operation is as follows:
Open the Gradle scripts->build.gradle (module:app) file in Project Explorer, where you'll see the various settings for our application:

We notice the statement in the box, that is, when we set up the project, Android Studio automatically helped us import the V7 Component library support package, and next we just add a reference to the design supporting library below it (friendly reminder, for design The version number of the support library is the same as the version number of the V7 library):

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

After adding a reference, if we press the sync now option, Android Studio will help us import the design support library into the project:

We will then see the design-23.3.0 Library in the Project Explorer (project) External Libraries folder (of course, this is my version). By the way, we need to refer to this library before we can use the components of the design support library.
Okay, let's move on to the subject. Floatactionbutton is the inheritance class of ImageButton, its usage is basically similar to the ordinary button, because it has more performance properties, so its focus is actually on the layout.
Main_layout.xml:

<?xml version= "1.0" encoding= "Utf-8"?><relativelayout xmlns:android="Http://schemas.android.com/apk/res/android" Xmlns:app= "http://schemas.android.com/apk/res-auto"android:orientation=" Vertical "android:layout_width="match_parent "android:layout_height=" Match_parent ">                    <include layout="@layout/toolbar" />    <Android.support.design.widget.FloatingActionButtonandroid:id="@+id/bmain_float"  app:fabsize="Normal"android:layout_width="Wrap_content"android: Layout_height="Wrap_content"android:layout_alignparentright="true"  Android:layout_alignparentbottom="true"android:src="@android:d rawable/ic_ Dialog_email "/>                                                        </relativelayout>

Above we are just like ImageButton definition, in addition, Floatactionbutton can specify two size by setting fabsize This property, normal size is normally, there is a smaller mode for Mini, You can also try the next set to run under Mini to see the effect.
To run the program, the layout effect is as follows:

With regard to the fill color, there are two important properties: Backgroundtint and Ripplecolor, which indicate the normal state and the fill color in the click State (the normal state will have a shadow when it is floating, and the shadow range will become larger when clicked). Where the default value for Backgroundtint is coloraccent in theme (coloraccent corresponds to EditText when editing, RadioButton check, checkbox, etc.), So you can modify the value of the coloraccent in the style to automatically change this property, but we generally do not, and the Ripplecolor default value is colorcontrolhighlight in theme. The general practice is to specify these two colors directly in the layout:

<android.support.design.widget.FloatingActionButton。。。        app:backgroundTint="#FFC125"        app:rippleColor="#FFD700"/>

The biggest feature of Floatactinbutton is its levitation effect, so it is of course important to have a sense of its three-dimensional properties. There are also two properties to be involved: elevation and Pressedtranslationz, respectively, the shadow size in normal state and the size of the shadow when clicked, the final layout is as follows:

<?xml version= "1.0" encoding= "Utf-8"?><relativelayout xmlns:android="Http://schemas.android.com/apk/res/android" Xmlns:app= "http://schemas.android.com/apk/res-auto"android:orientation=" Vertical "android:layout_width="match_parent "android:layout_height=" Match_parent ">                    <Android.support.design.widget.FloatingActionButton        Android:id="@+id/bmain_float"        app:fabsize="Normal"        Android:layout_width="Wrap_content"        Android:layout_height="Wrap_content"        Android:layout_alignparentright="true"        Android:layout_alignparentbottom="true"        android:src="@android:d rawable/ic_dialog_email"        App:backgroundtint="#FFC125"        App:ripplecolor="#FFD700"        app:elevation="6DP"        App:pressedtranslationz="12DP"/></relativelayout>

As for the Click event, it is the same as the button, which is not described in detail here. Final effect:

Interestingly, one of the more common patterns of Floatactionbutton is to make it move after clicking on it, which involves the animated effect of Android, and interested readers can refer to a blog about the animated Guo Lin of the Great God, Inside about the principle of property animation is very detailed, we recommend that you read: Android Property animation fully resolved (above), the basic use of the initial knowledge of property animation (author: Guolin)
Demo Source: Demo3:floatactionbutton

Demo3 hover button: Floatactionbutton (Design support Lib)