Android Create Animation Basic

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>