Cara Menambahkan Animasi Pada Item RecyclerView Ketika Tampil di Aplikasi Android

Halo android programmer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya, saya sudah membagikan tutorial cara membuat swipe pada item recyclerview di android studio. Dan sekarang pada kesempatan kali ini saya akan membagikan tutorial cara menambahkan animasi pada item recyclerview ketika tampil pada aplikasi android.

Sudah saya jelaskan sebelumnya bahwa widget recyclerview adalah widget yang sangat luar biasa. Ada banyak sekali function yang bisa dikerjakan hanya menggunakan satu widget ini saja. Seperti sebelumnya, kita bisa membuat masing-masing dari item recyclerview yang tampil di swipe ke kiri atau ke kanan untuk menghapusnya.

Ada banyak lagi yang bisa dikerjakan pada widget ini seperti drag yang saat ini belum bisa saya kerjakan. Lalu ada selection yang sangat sulit di koding. Karena saya sudah berhasil membuat item recyclerview menampilkan animasi maka dari itu akan saya bagikan tutorial nya.

Jadi, dalam tutorial ini kita akan belajar cara membuat atau menampilkan animasi pada item recyclerview di aplikasi android dengan langkah-langkah yang mudah.

Tutorial Cara Menambahkan Animasi Pada Item RecyclerView di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Application Name:Animated App
Package Name:com.androidrion.animatedapp
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam project ini:

  1. activity_main.xml
  2. list_item.xml

Daftar file java class yang digunakan dalam project ini:

  1. AdapterRecyclerView.java
  2. ItemAnimation.java
  3. ItemModel.java
  4. MainActivity.java
  5. MyItem.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Animated App.

Download Asset

Dalam tutorial ini saya menggunakan logo untuk di tampilkan pada item recyclerview. Silahkan download pada link di bawah ini.

DOWNLOAD ASSET

Pindahkan file asset tersebut ke dalam folder drawable pada project android studio kalian.

Library Material Design

Untuk menggunakan widget RecyclerView dalam project android studio, kalian harus menambahkan terlebih dahulu library material design. Tambahkan kode dibawah ini pada project android studio kalian dalam file build.gradle (Module: app)

Gradle Scripts/build.gradle (Module: app)

implementation 'com.google.android.material:material:1.0.0'

Ikuti tutorial di bawah ini untuk menambahkan library material design kedalam projek android studio.

CARA MENAMBAHKAN LIBRARY KE DALAM PROJEK ANDROID STUDIO

XML Layout File

Buatlah file xml layout baru dengan cara klik kanan pada folder layout, lalu pilih New>Layout resource file. Simpan file layout baru tersebut dengan nama list_item. Berikut ini adalah kode lengkap untuk file list_item.xml

app/res/layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingLeft="16dp"
    android:paddingTop="8dp"
    android:paddingRight="16dp"
    android:paddingBottom="8dp">

    <ImageView
        android:id="@+id/imageList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/facebook" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_headline"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Facebook" />

        <TextView
            android:id="@+id/text_subhead"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Social Media" />
    </LinearLayout>
</LinearLayout>

Sekaran buka file activity_main.xml dalam folder layout. Tambahkan widget RecyclerView di dalam layout RelativeLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        tools:listitem="@layout/list_item"/>

</RelativeLayout>

Java Class File

Buat file java class baru dengan cara klik kanan pada folder java, lalu pilih New>Java Class. Simpan file java class baru tersebut dengan nama MyItem. Berikut ini adalah kode lengkap untuk file MyItem.java

app/java/com.androidrion.animatedapp/MyItem.java

package com.androidrion.animatedapp;

class MyItem {

    static int[] iconList = {
            R.drawable.facebook, R.drawable.twitter, R.drawable.instagram, R.drawable.snapchat,
            R.drawable.whatsapp, R.drawable.line, R.drawable.kakaotalk, R.drawable.telegram, R.drawable.messenger,
            R.drawable.youtube, R.drawable.tiktok, R.drawable.vine, R.drawable.vimeo,
            R.drawable.figma, R.drawable.adobe_xd, R.drawable.sketch, R.drawable.framer,
            R.drawable.android, R.drawable.apple, R.drawable.windows,
            R.drawable.opera, R.drawable.firefox, R.drawable.safari, R.drawable.edge,
            R.drawable.paypal, R.drawable.mastercard, R.drawable.visa,
            R.drawable.bitcoin, R.drawable.ethereum
    };

    static String[] Headline = {"Facebook", "Twitter", "Instagram", "SnapChat",
            "WhatsApp", "LINE", "KakaoTalk", "Telegram", "Messenger",
            "YouTube", "TikTok", "Vine", "Vimeo",
            "Figma", "Adobe XD", "Sketch", "Framer",
            "Android", "iOS", "Windows",
            "Opera", "Mozilla", "Safari", "Edge",
            "Paypal", "Mastercard", "Visa",
            "Bitcoin", "Ethereum"
    };

    static String[] Subhead = {"Social Media", "Social Media", "Social Media", "Social Media",
            "Chatting App", "Chatting App", "Chatting App", "Chatting App", "Chatting App",
            "Video Streaming App", "Video Streaming App", "Video Streaming App", "Video Streaming App",
            "UI Design App", "UI Design App", "UI Design App", "UI Design App",
            "Operating System", "Operating System", "Operating System",
            "Browser App", "Browser App", "Browser App", "Browser App",
            "Payment Method", "Payment Method", "Payment Method",
            "Cryptocurrency", "Cryptocurrency"
    };
}

Lalu buat lagi file java class baru dengan nama ItemModel. Berikut ini adalah kode lengkap untuk file ItemModel.java

app/java/com.androidrion.animatedapp/ItemModel.java

package com.androidrion.animatedapp;

public class ItemModel {

    private String name;
    private String type;
    private int image;

    public ItemModel(String name, String type, int image) {
        this.name = name;
        this.type = type;
        this.image=image;
    }

    public String getName() {
        return name;
    }

    public String getType() {
        return type;
    }

    public int getImage() {
        return image;
    }
}

Buat file java class baru lagi untuk membuat animasi pada item RecyclerView. Simpan file java tersebut dengan nama ItemAnimation. Berikut ini adalah kode lengkap untuk file ItemAnimation.java

app/java/com.androidrion.animatedapp/ItemAnimation.java

package com.androidrion.animatedapp;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.view.View;

class ItemAnimation {

    static final int ANIMATION = 1;
    private static final long DURATION_IN_ANIMATION = 150;

    static void animate(View view, int position, int type) {
        if (type == ANIMATION) animateBottomUp(view, position);
    }

    private static void animateBottomUp(View view, int position) {
        boolean not_first_item = position == -1;
        position = position + 1;
        view.setTranslationY(not_first_item ? 800 : 500);
        view.setAlpha(0.f);
        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator animatorTranslateY = ObjectAnimator.ofFloat(view,
                "translationY",
                not_first_item ? 800 : 500, 0);
        ObjectAnimator animatorAlpha = ObjectAnimator.ofFloat(view,
                "alpha",
                1.f);
        animatorTranslateY.setStartDelay(not_first_item ? 0 : (position * DURATION_IN_ANIMATION));
        animatorTranslateY.setDuration((not_first_item ? 3 : 1) * DURATION_IN_ANIMATION);
        animatorSet.playTogether(animatorTranslateY, animatorAlpha);
        animatorSet.start();
    }
}

Buat file java class baru untuk custom adapter recyclerview dengan nama AdapterRecyclerView. Berikut ini adalah kode lengkap untuk file AdapterRecyclerView.java

app/java/com.androidrion.animatedapp/AdapterRecyclerView.java

package com.androidrion.animatedapp;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class AdapterRecyclerView extends RecyclerView.Adapter<AdapterRecyclerView.ViewHolder> {

    private ArrayList<ItemModel> dataItem;
    private int animation_type;
    private int lastPosition = -1;
    private boolean on_attach = true;

    static class ViewHolder extends RecyclerView.ViewHolder {
        TextView textHead;
        TextView textSubhead;
        ImageView imageIcon;

        ViewHolder(View v) {
            super(v);

            textHead = v.findViewById(R.id.text_headline);
            textSubhead = v.findViewById(R.id.text_subhead);
            imageIcon = v.findViewById(R.id.imageList);
        }
    }

    AdapterRecyclerView(ArrayList<ItemModel> data, int animation_type) {
        this.dataItem = data;
        this.animation_type = animation_type;
    }

    @NonNull
    @Override
    public AdapterRecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        TextView textHead = holder.textHead;
        TextView textSubhead = holder.textSubhead;
        ImageView imageIcon = holder.imageIcon;

        textHead.setText(dataItem.get(position).getName());
        textSubhead.setText(dataItem.get(position).getType());
        imageIcon.setImageResource(dataItem.get(position).getImage());
        setAnimation(holder.itemView, position);

    }

    @Override
    public void onAttachedToRecyclerView(@NonNull RecyclerView recyclerView) {
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                on_attach = false;
                super.onScrollStateChanged(recyclerView, newState);
            }
        });
        super.onAttachedToRecyclerView(recyclerView);
    }

    @Override
    public int getItemCount() {
        return dataItem.size();
    }

    private void setAnimation(View view, int position) {
        if (position > lastPosition) {
            ItemAnimation.animate(view, on_attach ? position : -1, animation_type);
            lastPosition = position;
        }
    }
}

Dan sekarang, buka file MainActivity pada folder java dalam projeck android studio kalian. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.animatedapp/MainActivity.java

Run ‘app’

Jalankan project android studio kalian. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada video di bawah ini.

AKHIR KATA

Itulah tadi tutorial cara menambahkan animasi pada recyclerview di android studio. Tutorial diatas lumayan susah untuk dikerjakan karena ada banyak file java yang digunakan untuk membuat item pada recyclerview menampilkan animasi di aplikasi android.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

Get real time updates directly on you device, subscribe now.

You might also like

Leave A Reply

Your email address will not be published.