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.
Step(1)main_activity.xml layout-
<?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/google" />
<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/link" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab10"
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/twitter" />
<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/button" />
</android.support.design.widget.CoordinatorLayout>
Step(2)Create button_close.xml layout in anim folder-
<?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>
Step(3)Create button_open.xml layout in anim folder-
<?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>
Step(4)Create rotate_forward.xml layout in anim folder-
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<rotate android:fromDegrees="45"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="300"
android:interpolator="@android:anim/linear_interpolator"/>
</set>
Step(5)Create rotate_backward.xml layout in anim folder-
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<rotate android:fromDegrees="0"
android:toDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:duration="300"
android:interpolator="@android:anim/linear_interpolator"/>
</set>
Step(6)MainActivity-
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Boolean isFabOpen = false;
private FloatingActionButton fab,fab1,fab10,fab2;
private Animation button_open,button_close,rotate_forward,rotate_backward;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
fab = (FloatingActionButton)findViewById(R.id.fab);
fab1 = (FloatingActionButton)findViewById(R.id.fab1);
fab10 = (FloatingActionButton)findViewById(R.id.fab10);
fab2 = (FloatingActionButton)findViewById(R.id.fab2);
button_open = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.button_open);
button_close = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.button_close);
rotate_forward = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_forward);
rotate_backward = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_backward);
fab.setOnClickListener(this);
fab1.setOnClickListener(this);
fab2.setOnClickListener(this);
}
@Override
public void onClick(View v) {
int id = v.getId();
switch (id){
case R.id.fab:
animateFAB();
break;
case R.id.fab1:
Log.d("Raj", "Fab 1");
break;
case R.id.fab10:
Log.d("Raj", "Fab 1");
break;
case R.id.fab2:
Log.d("Raj", "Fab 2");
break;
}
}
public void animateFAB(){
if(isFabOpen){
fab.startAnimation(rotate_backward);
fab1.startAnimation(button_close);
fab10.startAnimation(button_close);
fab2.startAnimation(fab_close);
fab1.setClickable(false);
fab2.setClickable(false);
isButtonOpen = false;
Log.d("Raj", "close");
} else {
fab.startAnimation(rotate_forward);
fab1.startAnimation(button_open);
fab10.startAnimation(button_close);
fab2.startAnimation(button_open);
fab1.setClickable(true);
fab2.setClickable(true);
isButtonOpen = true;
Log.d("Raj","open");
}
}
}
0 Comment(s)