Android Material design Android FAB (Floating Action Button) Animations

-


Creating Project

Here i have created a Android Studio project with package shahedkhondaker.fabanimation also Activity as MainActivity and layout as activity_main.
We have a larger FAB and two smaller FAB. When the larger FAB is pressed the two smaller FAB pop up. Initially the two smaller Fab are invisible.The layout activity_main is given as,

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
 
    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
 
    </android.support.design.widget.AppBarLayout>
 
    <include layout="@layout/content_main" />
 
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="160dp"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="@dimen/fab_margin"
        android:visibility="invisible"
        app:backgroundTint="@color/colorFAB2"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/ic_done" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="90dp"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="@dimen/fab_margin"
        android:visibility="invisible"
        app:elevation="6dp"
        app:backgroundTint="@color/colorFAB1"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/ic_message" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:elevation="6dp"
        app:backgroundTint="@color/colorAccent"
        app:pressedTranslationZ="12dp"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add" />
 
</android.support.design.widget.CoordinatorLayout>
The colors I used are,

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#4CAF50</color>
    <color name="colorPrimaryDark">#388E3C</color>
    <color name="colorAccent">#F44336</color>
    <color name="colorFAB1">#2196F3</color>
    <color name="colorFAB2">#E040FB</color>
</resources>

Defining Animation

Our project has four animations. They are,
1. fab_open
2. fab_close
3. rotate_forward
4. rotate_backward
The defined animations are placed in res/anim folder as xml. Let us now discuss what these four animations does

fab_open

Initially the two smaller FAB are invisible and not clickable. When the larger FAB with Add icon is pressed the two smaller FAB scale from their invisible initial position and at the same time opacity increases. These two are achieved by using the<scale> and <alpha> animation elements.

fab_open.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="0.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.8" />
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="300"/>
</set>

fab_close

This the exact opposite of the fab_open animation. The two smaller FAB dissappers to its original state.

fab_close.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.0" />
    <alpha android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="300"/>
</set>

To Be Continue.......

Comments

Post a Comment

Popular posts from this blog

ANDROID MATERIAL DESIGN RATING BAR

-
Image
A RatingBar is an extension of SeekBar and ProgressBar that shows a rating in stars. The user can touch/drag or use arrow keys to set the rating when using the default size RatingBar. The smaller RatingBar style ( ratingBarStyleSmall ) and the larger indicator-only style ( ratingBarStyleIndicator ) do not support user interaction and should only be used as indicators. How to add? I. In your build.gradle add latest appcompat library. dependencies { compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version } II. Make your activity extend  android.support.v7.app.AppCompatActivity . public class MainActivity extends AppCompatActivity { ... } III. Declare your RatingBar inside any  layout.xml  file. <RatingBar android:rating="3.5" android:stepSize="0.5" android:numStars="5" android:layout_width="wrap_content" android:layout_height="wrap_content"/> I. Declare cu...
Read more

Layout design in Android Studio

-
Image
Today when start optimizing the codebase of my project, I saw this: Look at the list of XML files inside my  res/layout  folder. Horrible, right? Now, look at yours. Is your  res/layout  too big, hard to control? Your project have too many features, too many screens? Let imagine while confusing running for the deadline, and you can’t find the XML layout that need to be fixed  just because you can’t remember the file name. Wandering search online, I find out that many people have the  same problem  as me. So I decide to write an article to share some tips for better manage  res/layout  folder in  Android Studio . Step 1 First create a parent layouts folder. Right click in  res , select  New  →  Directory , type  layouts (remember the  ‘s’  or it will be duplicated). I call it “ layouts”   because it is parent folder to hold all l...
Read more

TEXT FIELD

-
Image
From google material design  documentation . Text fields allow the user to input text, select text (cut, copy, paste), and lookup data via auto-completion. HOW TO ADD? I. In your build.gradle add latest appcompat library. dependencies { compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version } II. Make your activity extend  android.support.v7.app.AppCompatActivity . public class MainActivity extends AppCompatActivity { ... } III. Declare your EditText inside any  layout.xml  file. <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Hint text"/> I. Declare custom style in your  styles.xml  file. <style name="MyEditText" parent="Theme.AppCompat.Light"> <item name="colorControlNormal">@color/indigo</item> <item name="colorControlActivated">@color/pink</item> </...
Read more