Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to create Floating Action Button Animation in android

    @rajshekhar.tiwari
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 989
    Comment on it

     In the below example I have created  Floating Action Button  Animations. Here I have added four FloatingActionButton, then in second step I have created  button_open, button_close ,rotate_forward, rotate_backward xml layouts in anim folder. In MainActivity I have used setOnClickListener method. You can see below program it will clearly describe you to create Floating Action Button Animation.

    1. Step(1)main_activity.xml layout-
    2. <?xml version="1.0" encoding="utf-8"?>
    3. <android.support.design.widget.CoordinatorLayout
    4.     xmlns:android="http://schemas.android.com/apk/res/android"
    5.     xmlns:app="http://schemas.android.com/apk/res-auto"
    6.     xmlns:tools="http://schemas.android.com/tools"
    7.     android:layout_width="match_parent"
    8.     android:layout_height="match_parent"
    9.     android:fitsSystemWindows="true"
    10.     tools:context=".MainActivity">
    11.  
    12.     <android.support.design.widget.AppBarLayout
    13.         android:layout_height="wrap_content"
    14.         android:layout_width="match_parent"
    15.         android:theme="@style/AppTheme.AppBarOverlay">
    16.  
    17.         <android.support.v7.widget.Toolbar
    18.             android:id="@+id/toolbar"
    19.             android:layout_width="match_parent"
    20.             android:layout_height="?attr/actionBarSize"
    21.             android:background="?attr/colorPrimary"
    22.             app:popupTheme="@style/AppTheme.PopupOverlay" />
    23.  
    24.     </android.support.design.widget.AppBarLayout>
    25.  
    26.     <include layout="@layout/content_main" />
    27.  
    28.     <android.support.design.widget.FloatingActionButton
    29.         android:id="@+id/fab2"
    30.         android:layout_width="wrap_content"
    31.         android:layout_height="wrap_content"
    32.         android:layout_marginBottom="160dp"
    33.         android:layout_gravity="bottom|end"
    34.         android:layout_marginRight="@dimen/fab_margin"
    35.         android:visibility="invisible"
    36.         app:backgroundTint="@color/colorFAB2"
    37.         app:elevation="6dp"
    38.         app:pressedTranslationZ="12dp"
    39.         android:src="@drawable/google" />
    40.     <android.support.design.widget.FloatingActionButton
    41.         android:id="@+id/fab1"
    42.         android:layout_width="wrap_content"
    43.         android:layout_height="wrap_content"
    44.         android:layout_marginBottom="90dp"
    45.         android:layout_gravity="bottom|end"
    46.         android:layout_marginRight="@dimen/fab_margin"
    47.         android:visibility="invisible"
    48.         app:elevation="6dp"
    49.         app:backgroundTint="@color/colorFAB1"
    50.         app:pressedTranslationZ="12dp"
    51.         android:src="@drawable/link" />
    52.     <android.support.design.widget.FloatingActionButton
    53.         android:id="@+id/fab10"
    54.         android:layout_width="wrap_content"
    55.         android:layout_height="wrap_content"
    56.         android:layout_marginBottom="90dp"
    57.         android:layout_gravity="bottom|end"
    58.         android:layout_marginRight="@dimen/fab_margin"
    59.         android:visibility="invisible"
    60.         app:elevation="6dp"
    61.         app:backgroundTint="@color/colorFAB1"
    62.         app:pressedTranslationZ="12dp"
    63.         android:src="@drawable/twitter" />
    64.     <android.support.design.widget.FloatingActionButton
    65.         android:id="@+id/fab"
    66.         android:layout_width="wrap_content"
    67.         android:layout_height="wrap_content"
    68.         android:layout_gravity="bottom|end"
    69.         app:elevation="6dp"
    70.         app:backgroundTint="@color/colorAccent"
    71.         app:pressedTranslationZ="12dp"
    72.         android:layout_margin="@dimen/fab_margin"
    73.         android:src="@drawable/button" />
    74.  
    75. </android.support.design.widget.CoordinatorLayout>
    76. Step(2)Create button_close.xml layout in anim folder-
    77. <?xml version="1.0" encoding="utf-8"?>
    78. <set xmlns:android="http://schemas.android.com/apk/res/android"
    79.     android:fillAfter="true">
    80.     <scale
    81.         android:duration="300"
    82.         android:fromXScale="0.8"
    83.         android:fromYScale="0.8"
    84.         android:interpolator="@android:anim/linear_interpolator"
    85.         android:toXScale="0.0"
    86.         android:pivotX="50%"
    87.         android:pivotY="50%"
    88.         android:toYScale="0.0" />
    89.     <alpha android:fromAlpha="1.0"
    90.         android:toAlpha="0.0"
    91.         android:interpolator="@android:anim/accelerate_interpolator"
    92.         android:duration="300"/>
    93. </set>
    94. Step(3)Create button_open.xml layout in anim folder-
    95. <?xml version="1.0" encoding="utf-8"?>
    96.  
    97.     <set xmlns:android="http://schemas.android.com/apk/res/android"
    98.         android:fillAfter="true">
    99.         <scale
    100.             android:duration="300"
    101.             android:fromXScale="0.0"
    102.             android:fromYScale="0.0"
    103.             android:interpolator="@android:anim/linear_interpolator"
    104.             android:toXScale="0.8"
    105.             android:pivotX="50%"
    106.             android:pivotY="50%"
    107.             android:toYScale="0.8" />
    108.         <alpha
    109.             android:fromAlpha="0.0"
    110.             android:toAlpha="1.0"
    111.             android:interpolator="@android:anim/accelerate_interpolator"
    112.             android:duration="300"/>
    113.     </set>
    114. Step(4)Create rotate_forward.xml layout in anim folder-
    115. <?xml version="1.0" encoding="utf-8"?>
    116. <set xmlns:android="http://schemas.android.com/apk/res/android"
    117.     android:fillAfter="true" >
    118.     <rotate android:fromDegrees="45"
    119.         android:toDegrees="0"
    120.         android:pivotX="50%"
    121.         android:pivotY="50%"
    122.         android:duration="300"
    123.         android:interpolator="@android:anim/linear_interpolator"/>
    124. </set>
    125. Step(5)Create rotate_backward.xml layout in anim folder-
    126.  <?xml version="1.0" encoding="utf-8"?>
    127. <set xmlns:android="http://schemas.android.com/apk/res/android"
    128.     android:fillAfter="true" >
    129.     <rotate android:fromDegrees="0"
    130.         android:toDegrees="45"
    131.         android:pivotX="50%"
    132.         android:pivotY="50%"
    133.         android:duration="300"
    134.         android:interpolator="@android:anim/linear_interpolator"/>
    135.  </set>
    136.  Step(6)MainActivity-
    137.  public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    138.         private Boolean isFabOpen = false;
    139.         private FloatingActionButton fab,fab1,fab10,fab2;
    140.         private Animation button_open,button_close,rotate_forward,rotate_backward;
    141.  
    142.         @Override
    143.         protected void onCreate(Bundle savedInstanceState) {
    144.             super.onCreate(savedInstanceState);
    145.             setContentView(R.layout.activity_main);
    146.             Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    147.             setSupportActionBar(toolbar);
    148.             fab = (FloatingActionButton)findViewById(R.id.fab);
    149.             fab1 = (FloatingActionButton)findViewById(R.id.fab1);
    150.             fab10 = (FloatingActionButton)findViewById(R.id.fab10);
    151.             fab2 = (FloatingActionButton)findViewById(R.id.fab2);
    152.             button_open = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.button_open);
    153.             button_close = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.button_close);
    154.             rotate_forward = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_forward);
    155.             rotate_backward = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_backward);
    156.             fab.setOnClickListener(this);
    157.             fab1.setOnClickListener(this);
    158.             fab2.setOnClickListener(this);
    159.         }
    160.  
    161.         @Override
    162.         public void onClick(View v) {
    163.             int id = v.getId();
    164.             switch (id){
    165.                 case R.id.fab:
    166.  
    167.                     animateFAB();
    168.                     break;
    169.                 case R.id.fab1:
    170.  
    171.                     Log.d("Raj", "Fab 1");
    172.                     break;
    173.                 case R.id.fab10:
    174.  
    175.                     Log.d("Raj", "Fab 1");
    176.                     break;
    177.                 case R.id.fab2:
    178.  
    179.                     Log.d("Raj", "Fab 2");
    180.                     break;
    181.             }
    182.         }
    183.  
    184.         public void animateFAB(){
    185.  
    186.             if(isFabOpen){
    187.  
    188.                 fab.startAnimation(rotate_backward);
    189.                 fab1.startAnimation(button_close);
    190.                 fab10.startAnimation(button_close);
    191.                 fab2.startAnimation(fab_close);
    192.                 fab1.setClickable(false);
    193.                 fab2.setClickable(false);
    194.                 isButtonOpen = false;
    195.                 Log.d("Raj", "close");
    196.  
    197.             } else {
    198.  
    199.                 fab.startAnimation(rotate_forward);
    200.                 fab1.startAnimation(button_open);
    201.                 fab10.startAnimation(button_close);
    202.                 fab2.startAnimation(button_open);
    203.                 fab1.setClickable(true);
    204.                 fab2.setClickable(true);
    205.                 isButtonOpen = true;
    206.                 Log.d("Raj","open");
    207.  
    208.             }
    209.         }
    210.     }
    211.  

     

    Android FloatingActionButton Animation
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: