Fy Projects

DOWNLOAD APK DOWNLOAD RES FOLDER DOWNLOAD PROJECT

Android Create Animation Interpolator

1. Project Structure

2. Gradle

plugins {
  id 'com.android.application'
}

android {
  compileSdkVersion 30
  buildToolsVersion "30.0.3"

  defaultConfig {
    applicationId "com.animation.interpolator"
    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.interpolator;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.TimeInterpolator;
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.view.animation.AccelerateInterpolator;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.AnticipateOvershootInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.interpolator.view.animation.FastOutLinearInInterpolator;
import androidx.interpolator.view.animation.FastOutSlowInInterpolator;
import androidx.interpolator.view.animation.LinearOutSlowInInterpolator;

import com.animation.interpolator.utils.Tools;


public class MainActivity extends AppCompatActivity {

  private View object;
  private AnimatorSet mAnimatorSet;
  private int distance;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    object = findViewById(R.id.object);
    int valueInPixels = (int) getResources().getDimension(R.dimen.spacing_large);
    distance = Tools.getScreenWidth() - (valueInPixels * 3);

    mAnimatorSet = new AnimatorSet();
    initToolbar();

    findViewById(R.id.inter_linear).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new LinearInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_accelerate).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new AccelerateInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_decelerate).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new DecelerateInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_accelerate_decelerate).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new AccelerateDecelerateInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_overshoot).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new OvershootInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_anticipate).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new AnticipateInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_anticipate_overshoot).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new AnticipateOvershootInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_bounce).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new BounceInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_fast_out_linear_in).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new FastOutLinearInInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_fast_out_slow_in).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new FastOutSlowInInterpolator())
      );
      restart();
    });

    findViewById(R.id.inter_linear_out_slow_in).setOnClickListener(view -> {
      mAnimatorSet = new AnimatorSet();
      mAnimatorSet.playTogether(
          animate(new LinearOutSlowInInterpolator())
      );
      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);
  }

  private ObjectAnimator animate(TimeInterpolator interpolator) {
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(object, "translationX", 0, distance);
    objectAnimator.setDuration(1000);
    objectAnimator.setInterpolator(interpolator);
    objectAnimator.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        new Handler(getMainLooper()).postDelayed(() -> resetObject(), 1500);
      }
    });
    return objectAnimator;
  }

  private void initToolbar() {
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setNavigationIcon(R.drawable.ic_menu);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle("Animation Interpolator");
    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">

      <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_centerVertical="true"
        android:background="@color/grey_20" />

      <ImageView
        android:id="@+id/object"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_marginHorizontal="@dimen/spacing_large"
        android:src="@drawable/shape_circle"
        app:tint="@color/colorAccent" />

    </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/inter_linear"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Linear Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_accelerate"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Accelerate Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_decelerate"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Decelerate Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_accelerate_decelerate"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Accelerate Decelerate Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_overshoot"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Overshoot Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_anticipate"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Anticipate Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_anticipate_overshoot"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Anticipate Overshoot Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_bounce"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Bounce In Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_fast_out_linear_in"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Fast Out Linear In Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_fast_out_slow_in"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Fast Out Slow In Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

        <RadioButton
          android:id="@+id/inter_linear_out_slow_in"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="start"
          android:layoutDirection="rtl"
          android:paddingHorizontal="@dimen/spacing_medium"
          android:paddingVertical="@dimen/spacing_middle"
          android:text="Linear Out Slow In Interpolator"
          android:textColor="@color/grey_60"
          app:buttonTint="@color/grey_40" />

      </RadioGroup>

    </ScrollView>

  </LinearLayout>

</LinearLayout>

5. Value

<?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>

<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
</resources>

M Syahrul Alfyan

Hi there! I am Founder at fyprojects and programming enthusiast from Indonesia. Fullstack Developer at startup company

Android Create Animation Interpolator

Android Create Animation Interpolator

1. Project Structure

2. Gradle

3. Main Activity

4. Layout

5. Value

M Syahrul Alfyan

Random Post

Featured Posts

Most Read

Catagories