Android Create Animation Basic
1. Project Structure
2. Gradle
plugins {
id 'com.android.application'
}
android {
compileSdkVersion 30
buildToolsVersion "30.0.3"
defaultConfig {
applicationId "com.animation.basic"
minSdkVersion 19
targetSdkVersion 30
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
dependencies {
implementation 'com.balysv:material-ripple:1.0.2'
implementation 'androidx.appcompat:appcompat:1.3.0'
implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}
3. Main Activity
package com.animation.basic;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.os.Handler;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import com.animation.basic.utils.Tools;
public class MainActivity extends AppCompatActivity {
private View object;
private AnimatorSet mAnimatorSet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
object = findViewById(R.id.object);
ViewGroup parent = (ViewGroup) object.getParent();
int distance = parent.getHeight() - object.getTop();
mAnimatorSet = new AnimatorSet();
initToolbar();
// ---------------- fade in ---------------------------
findViewById(R.id.fade_in).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1)
);
restart();
});
findViewById(R.id.fade_in_up).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1),
animate("translationY", object.getHeight(), 0)
);
restart();
});
findViewById(R.id.fade_in_down).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1),
animate("translationY", -object.getHeight(), 0)
);
restart();
});
findViewById(R.id.fade_in_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1),
animate("translationX", -object.getWidth() / 2f, 0)
);
restart();
});
findViewById(R.id.fade_in_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1),
animate("translationX", object.getWidth() / 2f, 0)
);
restart();
});
// ---------------- fade out ---------------------------
findViewById(R.id.fade_out).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 0)
);
restart();
});
findViewById(R.id.fade_out_up).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("translationY", 0, object.getHeight())
);
restart();
});
findViewById(R.id.fade_out_down).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("translationY", 0, -object.getHeight())
);
restart();
});
findViewById(R.id.fade_out_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("translationX", 0, -object.getWidth() / 2f)
);
restart();
});
findViewById(R.id.fade_out_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("translationX", 0, object.getWidth() / 2f)
);
restart();
});
// ---------------- bounce ---------------------------
findViewById(R.id.bounce_in).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1, 1, 1),
animate("scaleX", 0.3f, 1.05f, 0.9f, 1),
animate("scaleY", 0.3f, 1.05f, 0.9f, 1)
);
restart();
});
findViewById(R.id.bounce_in_down).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1, 1, 1),
animate("translationY", -object.getHeight(), 30, -10, 0)
);
restart();
});
findViewById(R.id.bounce_in_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("translationX", -object.getWidth(), 30, -10, 0),
animate("alpha", 0, 1, 1, 1)
);
restart();
});
findViewById(R.id.bounce_in_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("translationX", object.getMeasuredWidth() + object.getWidth(), -30, 10, 0),
animate("alpha", 0, 1, 1, 1)
);
restart();
});
findViewById(R.id.bounce_in_up).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("translationY", object.getMeasuredHeight(), -30, 10, 0),
animate("alpha", 0, 1, 1, 1)
);
restart();
});
// ---------------- zoom in ---------------------------
findViewById(R.id.zoom_in).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("scaleX", 0.45f, 1),
animate("scaleY", 0.45f, 1),
animate("alpha", 0, 1)
);
restart();
});
findViewById(R.id.zoom_in_down).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("scaleX", 0.1f, 0.475f, 1),
animate("scaleY", 0.1f, 0.475f, 1),
animate("translationY", -object.getBottom(), 0),
animate("alpha", 0, 1, 1)
);
restart();
});
findViewById(R.id.zoom_in_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("scaleX", 0.1f, 0.475f, 1),
animate("scaleY", 0.1f, 0.475f, 1),
animate("translationX", -object.getRight(), 0),
animate("alpha", 0, 1, 1)
);
restart();
});
findViewById(R.id.zoom_in_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("scaleX", 0.1f, 0.475f, 1),
animate("scaleY", 0.1f, 0.475f, 1),
animate("translationX", object.getWidth() + object.getPaddingRight(), 0),
animate("alpha", 0, 1, 1)
);
restart();
});
findViewById(R.id.zoom_in_up).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1, 1),
animate("scaleX", 0.1f, 0.475f, 1),
animate("scaleY", 0.1f, 0.475f, 1),
animate("translationY", object.getBottom(), 0)
);
restart();
});
// ---------------- zoom out ---------------------------
findViewById(R.id.zoom_out).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 0, 0),
animate("scaleX", 1, 0.3f, 0),
animate("scaleY", 1, 0.3f, 0)
);
restart();
});
findViewById(R.id.zoom_out_down).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 1, 0),
animate("scaleX", 1, 0.475f, 0.1f),
animate("scaleY", 1, 0.475f, 0.1f),
animate("translationY", 0, object.getBottom())
);
restart();
});
findViewById(R.id.zoom_out_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 1, 0),
animate("scaleX", 1, 0.475f, 0.1f),
animate("scaleY", 1, 0.475f, 0.1f),
animate("translationX", 0, -object.getRight())
);
restart();
});
findViewById(R.id.zoom_out_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 1, 0),
animate("scaleX", 1, 0.475f, 0.1f),
animate("scaleY", 1, 0.475f, 0.1f),
animate("translationX", 0, object.getRight())
);
restart();
});
findViewById(R.id.zoom_out_up).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 1, 0),
animate("scaleX", 1, 0.475f, 0.1f),
animate("scaleY", 1, 0.475f, 0.1f),
animate("translationY", 0, -object.getBottom())
);
restart();
});
// ---------------- slide in ---------------------------
findViewById(R.id.slide_in_down).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1, 1),
animate("translationY", -object.getBottom(), 0)
);
restart();
});
findViewById(R.id.slide_in_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1, 1),
animate("translationX", -object.getRight(), 0)
);
restart();
});
findViewById(R.id.slide_in_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1, 1),
animate("translationX", object.getRight(), 0)
);
restart();
});
findViewById(R.id.slide_in_up).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 0, 1, 1),
animate("translationY", object.getBottom(), 0)
);
restart();
});
// ---------------- slide out ---------------------------
findViewById(R.id.slide_out_down).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 1, 0),
animate("translationY", 0, object.getBottom())
);
restart();
});
findViewById(R.id.slide_out_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 1, 0),
animate("translationX", 0, -object.getRight())
);
restart();
});
findViewById(R.id.slide_out_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 1, 0),
animate("translationX", 0, object.getRight())
);
restart();
});
findViewById(R.id.slide_out_up).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 1, 0),
animate("translationY", 0, -object.getBottom())
);
restart();
});
// ---------------- rotate in ---------------------------
findViewById(R.id.rotate_in).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("rotation", -200, 0),
animate("alpha", 0, 1)
);
restart();
});
findViewById(R.id.rotate_in_down_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
float x = object.getPaddingLeft();
float y = object.getHeight() - object.getPaddingBottom();
mAnimatorSet.playTogether(
animate("rotation", -90, 0),
animate("alpha", 0, 1),
animate("pivotX", x, x),
animate("pivotY", y, y)
);
restart();
});
findViewById(R.id.rotate_in_down_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
float x = object.getWidth() - object.getPaddingRight();
float y = object.getHeight() - object.getPaddingBottom();
mAnimatorSet.playTogether(
animate("rotation", 90, 0),
animate("alpha", 0, 1),
animate("pivotX", x, x),
animate("pivotY", y, y)
);
restart();
});
findViewById(R.id.rotate_in_up_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
float x = object.getPaddingLeft();
float y = object.getHeight() - object.getPaddingBottom();
mAnimatorSet.playTogether(
animate("rotation", 90, 0),
animate("alpha", 0, 1),
animate("pivotX", x, x),
animate("pivotY", y, y)
);
restart();
});
findViewById(R.id.rotate_in_up_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
float x = object.getWidth() - object.getPaddingRight();
float y = object.getHeight() - object.getPaddingBottom();
mAnimatorSet.playTogether(
animate("rotation", -90, 0),
animate("alpha", 0, 1),
animate("pivotX", x, x),
animate("pivotY", y, y)
);
restart();
});
// ---------------- rotate out ---------------------------
findViewById(R.id.rotate_out).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("rotation", 0, 200)
);
restart();
});
findViewById(R.id.rotate_out_down_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
float x = object.getPaddingLeft();
float y = object.getHeight() - object.getPaddingBottom();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("rotation", 0, 90),
animate("pivotX", x, x),
animate("pivotY", y, y)
);
restart();
});
findViewById(R.id.rotate_out_down_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
float x = object.getWidth() - object.getPaddingRight();
float y = object.getHeight() - object.getPaddingBottom();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("rotation", 0, -90),
animate("pivotX", x, x),
animate("pivotY", y, y)
);
restart();
});
findViewById(R.id.rotate_out_up_left).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
float x = object.getPaddingLeft();
float y = object.getHeight() - object.getPaddingBottom();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("rotation", 0, -90),
animate("pivotX", x, x),
animate("pivotY", y, y)
);
restart();
});
findViewById(R.id.rotate_out_up_right).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
float x = object.getWidth() - object.getPaddingRight();
float y = object.getHeight() - object.getPaddingBottom();
mAnimatorSet.playTogether(
animate("alpha", 1, 0),
animate("rotation", 0, 90),
animate("pivotX", x, x),
animate("pivotY", y, y)
);
restart();
});
// ---------------- flip in out ---------------------------
findViewById(R.id.flip_in_x).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("rotationX", 90, -15, 15, 0),
animate("alpha", 0.25f, 0.5f, 0.75f, 1)
);
restart();
});
findViewById(R.id.flip_out_x).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("rotationX", 0, 90),
animate("alpha", 1, 0)
);
restart();
});
findViewById(R.id.flip_in_y).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("rotationY", 90, -15, 15, 0),
animate("alpha", 0.25f, 0.5f, 0.75f, 1)
);
restart();
});
findViewById(R.id.flip_out_y).setOnClickListener(view -> {
mAnimatorSet = new AnimatorSet();
mAnimatorSet.playTogether(
animate("rotationY", 0, 90),
animate("alpha", 1, 0)
);
restart();
});
}
private void restart() {
mAnimatorSet.end();
mAnimatorSet.cancel();
resetObject();
// start
mAnimatorSet.start();
}
private void resetObject() {
// reset object
object.setAlpha(1);
object.setScaleX(1);
object.setScaleY(1);
object.setTranslationX(0);
object.setTranslationY(0);
object.setRotation(0);
object.setRotationY(0);
object.setRotationX(0);
object.setPivotX(object.getWidth() / 2f);
object.setPivotY(object.getHeight() / 2f);
}
private ObjectAnimator animate(String style, float... values) {
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(object, style, values).setDuration(1000);
objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
objectAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
new Handler(getMainLooper()).postDelayed(() -> resetObject(), 500);
}
});
return objectAnimator;
}
private void initToolbar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_menu);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Animation Basic");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Tools.setSystemBarColor(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_basic, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
finish();
} else {
Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
}
return super.onOptionsItemSelected(item);
}
}
4. Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<include layout="@layout/toolbar" />
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/grey_3">
<androidx.cardview.widget.CardView
android:id="@+id/object"
android:layout_width="160dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
app:cardBackgroundColor="@color/colorAccent"
app:cardCornerRadius="6dp"
app:cardElevation="0dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="OBJECT"
android:textAppearance="@style/TextAppearance.AppCompat.Caption"
android:textColor="@color/white"
app:fontFamily="sans-serif-medium" />
</androidx.cardview.widget.CardView>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:clipToPadding="false"
android:paddingVertical="10dp">
<RadioGroup
android:id="@+id/group_basic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingHorizontal="@dimen/spacing_large">
<RadioButton
android:id="@+id/fade_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade In"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/fade_in_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade In Up"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/fade_in_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade In Down"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/fade_in_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade In Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/fade_in_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade In Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/fade_out"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade Out"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/fade_out_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade Out Up"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/fade_out_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade Out Down"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/fade_out_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade Out Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/fade_out_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Fade Out Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/bounce_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Bounce In"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/bounce_in_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Bounce In Down"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/bounce_in_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Bounce In Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/bounce_in_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Bounce In Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/bounce_in_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Bounce In Up"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/zoom_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom In"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/zoom_in_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom In Down"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/zoom_in_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom In Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/zoom_in_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom In Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/zoom_in_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom In Up"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/zoom_out"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom Out"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/zoom_out_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom Out Up"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/zoom_out_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom Out Down"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/zoom_out_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom Out Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/zoom_out_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Zoom Out Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/slide_in_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Slide In Up"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/slide_in_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Slide In Down"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/slide_in_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Slide In Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/slide_in_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Slide In Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/slide_out_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Slide Out Up"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/slide_out_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Slide Out Down"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/slide_out_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Slide Out Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/slide_out_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Slide Out Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/rotate_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate In"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/rotate_in_down_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate In Down Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/rotate_in_down_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate In Down Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/rotate_in_up_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate In Up Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/rotate_in_up_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate In Up Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/rotate_out"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate Out"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/rotate_out_down_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate Out Down Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/rotate_out_down_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate Out Down Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/rotate_out_up_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate Out Up Left"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/rotate_out_up_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Rotate Out Up Right"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginVertical="@dimen/spacing_middle"
android:background="@color/grey_5" />
<RadioButton
android:id="@+id/flip_in_x"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Flip In X"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/flip_out_x"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Flip Out X"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/flip_in_y"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Flip in Y"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
<RadioButton
android:id="@+id/flip_out_y"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layoutDirection="rtl"
android:paddingHorizontal="@dimen/spacing_medium"
android:text="Flip Out Y"
android:textColor="@color/grey_60"
app:buttonTint="@color/grey_40" />
</RadioGroup>
</ScrollView>
</LinearLayout>
</LinearLayout>
5. Values
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="grey_3">#f7f7f7</color>
<color name="grey_5">#f2f2f2</color>
<color name="grey_10">#e6e6e6</color>
<color name="grey_20">#cccccc</color>
<color name="grey_40">#999999</color>
<color name="grey_60">#666666</color>
<color name="grey_80">#37474F</color>
<color name="grey_90">#263238</color>
<color name="grey_95">#1a1a1a</color>
<color name="grey_100_">#0d0d0d</color>
</resources>
