Kotlin RecyclerView Animation Example – Coding Shiksha

Kotlin RecyclerView Animation Example – Coding Shiksha

Welcome Folks I am back with another blog post. In this post We will be looking a nice library by which you can add some cool little animations with Kotlin RecyclerView with a library called as RecyclerView Animators.

 

 

Let me just show some of the animations in RecyclerView that this library supports. The screenshots of the Animation are as follows

 

 

How do I use it?

 

Setup

 

Gradle

Just include the following line in the build.gradle of the project. The line is as follows

dependencies {
  implementation 'jp.wasabeef:recyclerview-animators:3.x.x'
}

 

Also make sure that the repositories section includes not only jcenter but also a maven section with the "google()"endpoint.

 

repositories {
  google()
  jcenter()
}

 

Full Source Code Example

 

  1. Layouts File : -> First of all we will be making layout files for this project. Just create layout files with xml code.

 

 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  >

  <androidx.appcompat.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#3DC49D"
    android:minHeight="?attr/actionBarSize"
    >

    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      >

      <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    </RelativeLayout>

  </androidx.appcompat.widget.Toolbar>

  <androidx.recyclerview.widget.RecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

</LinearLayout>

 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  >

  <androidx.appcompat.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#3DC49D"
    android:minHeight="?attr/actionBarSize"
    >

    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      >

      <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

      <TextView
        android:id="@+id/del"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:background="?attr/selectableItemBackground"
        android:padding="10dp"
        android:text="DEL"
        />

      <TextView
        android:id="@+id/add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@id/del"
        android:background="?attr/selectableItemBackground"
        android:padding="10dp"
        android:text="ADD"
        />

    </RelativeLayout>

  </androidx.appcompat.widget.Toolbar>

  <androidx.recyclerview.widget.RecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

</LinearLayout>

 

READ  Kotlin Google Maps AutocompleteTextView Location Example - Coding Shiksha

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:padding="20dp"
  >

  <ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#11000000"
    android:scaleType="centerCrop"
    />

  <TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:textSize="18sp"
    />

</LinearLayout>

 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_centerInParent="true"
  >

  <Button
    android:id="@+id/btn_animator_sample"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Animator Sample Activity"
    />

  <Button
    android:id="@+id/btn_adapter_sample"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Adapter Sample Activity"
    />

  <androidx.appcompat.widget.SwitchCompat
    android:id="@+id/grid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:text="Set to Grid"
    />

</LinearLayout>

 

2) Kotlin Code

 

 

package jp.wasabeef.example.recyclerview

import android.content.Context
import android.os.Bundle
import android.view.View
import android.view.animation.OvershootInterpolator
import android.widget.AdapterView
import android.widget.ArrayAdapter
import android.widget.Spinner
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import jp.wasabeef.recyclerview.adapters.AlphaInAnimationAdapter
import jp.wasabeef.recyclerview.adapters.AnimationAdapter
import jp.wasabeef.recyclerview.adapters.ScaleInAnimationAdapter
import jp.wasabeef.recyclerview.adapters.SlideInBottomAnimationAdapter
import jp.wasabeef.recyclerview.adapters.SlideInLeftAnimationAdapter
import jp.wasabeef.recyclerview.adapters.SlideInRightAnimationAdapter
import jp.wasabeef.recyclerview.animators.FadeInAnimator

/**
 * Created by Wasabeef on 2015/01/03.
 */
class AdapterSampleActivity : AppCompatActivity() {

  internal enum class Type {
    AlphaIn {
      override operator fun get(context: Context): AnimationAdapter {
        return AlphaInAnimationAdapter(MainAdapter(context, SampleData.LIST.toMutableList()))
      }
    },
    ScaleIn {
      override operator fun get(context: Context): AnimationAdapter {
        return ScaleInAnimationAdapter(MainAdapter(context, SampleData.LIST.toMutableList()))
      }
    },
    SlideInBottom {
      override operator fun get(context: Context): AnimationAdapter {
        return SlideInBottomAnimationAdapter(MainAdapter(context, SampleData.LIST.toMutableList()))
      }
    },
    SlideInLeft {
      override operator fun get(context: Context): AnimationAdapter {
        return SlideInLeftAnimationAdapter(MainAdapter(context, SampleData.LIST.toMutableList()))
      }
    },
    SlideInRight {
      override operator fun get(context: Context): AnimationAdapter {
        return SlideInRightAnimationAdapter(MainAdapter(context, SampleData.LIST.toMutableList()))
      }
    };

    abstract operator fun get(context: Context): AnimationAdapter
  }

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_adapter_sample)

    setSupportActionBar(findViewById(R.id.tool_bar))
    supportActionBar!!.setDisplayShowTitleEnabled(false)

    val recyclerView = findViewById<RecyclerView>(R.id.list)
    recyclerView.layoutManager = if (intent.getBooleanExtra(MainActivity.KEY_GRID, true)) {
      GridLayoutManager(this, 2)
    } else {
      LinearLayoutManager(this)
    }

    val spinner = findViewById<Spinner>(R.id.spinner)
    spinner.adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1).apply {
      for (type in Type.values()) add(type.name)
    }
    spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
      override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {
        recyclerView.adapter = Type.values()[position][view.context].apply {
          setFirstOnly(true)
          setDuration(500)
          setInterpolator(OvershootInterpolator(.5f))
        }
      }

      override fun onNothingSelected(parent: AdapterView<*>) {
        // no-op
      }
    }

    recyclerView.itemAnimator = FadeInAnimator()
    val adapter = MainAdapter(this, SampleData.LIST.toMutableList())
    recyclerView.adapter = AlphaInAnimationAdapter(adapter).apply {
      setFirstOnly(true)
      setDuration(500)
      setInterpolator(OvershootInterpolator(.5f))
    }
  }
}

 

READ  Kotlin (Android) Result Progress Bar Design [NEW] - Coding Shiksha

 

package jp.wasabeef.example.recyclerview

import android.os.Bundle
import android.view.View
import android.widget.AdapterView
import android.widget.ArrayAdapter
import android.widget.Spinner
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import jp.wasabeef.recyclerview.animators.BaseItemAnimator
import jp.wasabeef.recyclerview.animators.FadeInAnimator
import jp.wasabeef.recyclerview.animators.FadeInDownAnimator
import jp.wasabeef.recyclerview.animators.FadeInLeftAnimator
import jp.wasabeef.recyclerview.animators.FadeInRightAnimator
import jp.wasabeef.recyclerview.animators.FadeInUpAnimator
import jp.wasabeef.recyclerview.animators.FlipInBottomXAnimator
import jp.wasabeef.recyclerview.animators.FlipInLeftYAnimator
import jp.wasabeef.recyclerview.animators.FlipInRightYAnimator
import jp.wasabeef.recyclerview.animators.FlipInTopXAnimator
import jp.wasabeef.recyclerview.animators.LandingAnimator
import jp.wasabeef.recyclerview.animators.OvershootInLeftAnimator
import jp.wasabeef.recyclerview.animators.OvershootInRightAnimator
import jp.wasabeef.recyclerview.animators.ScaleInAnimator
import jp.wasabeef.recyclerview.animators.ScaleInBottomAnimator
import jp.wasabeef.recyclerview.animators.ScaleInLeftAnimator
import jp.wasabeef.recyclerview.animators.ScaleInRightAnimator
import jp.wasabeef.recyclerview.animators.ScaleInTopAnimator
import jp.wasabeef.recyclerview.animators.SlideInDownAnimator
import jp.wasabeef.recyclerview.animators.SlideInLeftAnimator
import jp.wasabeef.recyclerview.animators.SlideInRightAnimator
import jp.wasabeef.recyclerview.animators.SlideInUpAnimator

/**
 * Created by Wasabeef on 2015/01/03.
 */
class AnimatorSampleActivity : AppCompatActivity() {

  internal enum class Type(val animator: BaseItemAnimator) {
    FadeIn(FadeInAnimator()),
    FadeInDown(FadeInDownAnimator()),
    FadeInUp(FadeInUpAnimator()),
    FadeInLeft(FadeInLeftAnimator()),
    FadeInRight(FadeInRightAnimator()),
    Landing(LandingAnimator()),
    ScaleIn(ScaleInAnimator()),
    ScaleInTop(ScaleInTopAnimator()),
    ScaleInBottom(ScaleInBottomAnimator()),
    ScaleInLeft(ScaleInLeftAnimator()),
    ScaleInRight(ScaleInRightAnimator()),
    FlipInTopX(FlipInTopXAnimator()),
    FlipInBottomX(FlipInBottomXAnimator()),
    FlipInLeftY(FlipInLeftYAnimator()),
    FlipInRightY(FlipInRightYAnimator()),
    SlideInLeft(SlideInLeftAnimator()),
    SlideInRight(SlideInRightAnimator()),
    SlideInDown(SlideInDownAnimator()),
    SlideInUp(SlideInUpAnimator()),
    OvershootInRight(OvershootInRightAnimator(1.0f)),
    OvershootInLeft(OvershootInLeftAnimator(1.0f))
  }

  private val adapter = MainAdapter(this, SampleData.LIST.toMutableList())

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_animator_sample)

    setSupportActionBar(findViewById(R.id.tool_bar))
    supportActionBar!!.setDisplayShowTitleEnabled(false)

    val recyclerView = findViewById<RecyclerView>(R.id.list)
    recyclerView.apply {
      itemAnimator = SlideInLeftAnimator()
      adapter = this@AnimatorSampleActivity.adapter

      layoutManager = if (intent.getBooleanExtra(MainActivity.KEY_GRID, true)) {
        GridLayoutManager(context, 2)
      } else {
        LinearLayoutManager(context)
      }
    }


    val spinner = findViewById<Spinner>(R.id.spinner)
    val spinnerAdapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1)
    for (type in Type.values()) {
      spinnerAdapter.add(type.name)
    }
    spinner.adapter = spinnerAdapter
    spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
      override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {
        recyclerView.itemAnimator = Type.values()[position].animator
        recyclerView.itemAnimator!!.addDuration = 500
        recyclerView.itemAnimator!!.removeDuration = 500
      }

      override fun onNothingSelected(parent: AdapterView<*>) {
        // no-op
      }
    }

    findViewById<View>(R.id.add).setOnClickListener { adapter.add("newly added item", 1) }

    findViewById<View>(R.id.del).setOnClickListener { adapter.remove(1) }
  }

}

 

 

package jp.wasabeef.example.recyclerview

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.squareup.picasso.Picasso

/**
 * Created by Wasabeef on 2015/01/03.
 */
class MainAdapter(private val context: Context, private val dataSet: MutableList<String>) : RecyclerView.Adapter<MainAdapter.ViewHolder>() {

  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val v = LayoutInflater.from(context).inflate(R.layout.layout_list_item, parent, false)
    return ViewHolder(v)
  }

  override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    Picasso.get().load(R.drawable.chip).into(holder.image)
    holder.text.text = dataSet[position]
  }

  override fun getItemCount(): Int {
    return dataSet.size
  }

  fun remove(position: Int) {
    dataSet.removeAt(position)
    notifyItemRemoved(position)
  }

  fun add(text: String, position: Int) {
    dataSet.add(position, text)
    notifyItemInserted(position)
  }

  class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

    var image: ImageView = itemView.findViewById<View>(R.id.image) as ImageView
    var text: TextView = itemView.findViewById<View>(R.id.text) as TextView

  }
}

 

READ  How to make Smart Custom Alert Dialog in Kotlin - Coding Shiksha

 

package jp.wasabeef.example.recyclerview

/**
 * Created by Wasabeef on 2018/11/15.
 */
interface SampleData {
  companion object {
    val LIST = arrayOf("Apple", "Ball", "Camera", "Day", "Egg", "Foo", "Google", "Hello",
      "Iron", "Japan", "Coke", "Dog", "Cat", "Yahoo", "Sony", "Canon", "Fujitsu", "USA", "Nexus",
      "LINE", "Haskell", "C++", "Java", "Go", "Swift", "Objective-c", "Ruby", "PHP", "Bash", "ksh",
      "C", "Groovy", "Kotlin", "Chip", "Japan", "U.S.A", "San Francisco", "Paris", "Tokyo",
      "Silicon Valley", "London", "Spain", "China", "Taiwan", "Asia", "New York", "France", "Kyoto",
      "Android", "Google", "iPhone", "iPad", "iPod", "Wasabeef")
  }
}

 

 

package jp.wasabeef.example.recyclerview

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.SwitchCompat

/**
 * Created by Wasabeef on 2015/03/08.
 */
class MainActivity : AppCompatActivity() {

  companion object {
    const val KEY_GRID = "GRID"
  }

  private var enabledGrid = false

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    findViewById<View>(R.id.btn_animator_sample).setOnClickListener {
      startActivity(Intent(this, AnimatorSampleActivity::class.java).apply {
        putExtra(KEY_GRID, enabledGrid)
      })
    }

    findViewById<View>(R.id.btn_adapter_sample).setOnClickListener {
      startActivity(Intent(this, AdapterSampleActivity::class.java).apply {
        putExtra(KEY_GRID, enabledGrid)
      })
    }

    findViewById<SwitchCompat>(R.id.grid).setOnCheckedChangeListener { _, isChecked -> enabledGrid = isChecked }
  }
}

Leave a Reply

Close Menu

Indian Desi Tools - Ultimate Tools Website

Demo Description


This will close in 20 seconds