Cara Menampilkan Animasi Fade In / Out di Android Studio

Tutorial Cara Menambahkan Animasi Fade In Out Di Android Studio

Halo ui mobile designer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial tentang bagaimana cara mengimplementasikan animasi Fade In dan Fade Out di android studio.

Sebelumnya, saya sudah pernah membagikan tutorial tentang bagaimana cara menampilkan animasi Slide Up dan Slide Down di Android Studio. Pada tutorial tersebut, kalian belajar cara membuat aplikasi yang menampilkan animasi slide up dan slide down pada gambar.

Seperti yang telah saya jelaskan pada tutorial sebelumnya bahwa animasi berguna ketika kita ingin memberi tahu pengguna tentang perubahan yang terjadi di aplikasi kita, seperti konten baru yang dimuat atau tindakan baru yang tersedia dan lain-lain.

- Advertisement -

Jadi dalam tutorial ini kalian akan belajar cara membuat aplikasi android untuk menampilkan animasi Fade In dan Fade Out di Android Studio dengan cara yang sederhana.

Tutorial Cara Menampilkan Animasi Fade In / Out di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

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

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml

Daftar file xml anim yang digunakan dalam project ini:

  1. fade_in.xml
  2. fade_out.xml

Daftar file java class yang digunakan dalam project ini:

  1. MainActivity.java

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

XML Animation File

Buatlah folder anim dengan cara klik kanan pada folder res. Lalu kalian pilih New>Android Resource Directory. Untuk lebih jelasnya, kalian bisa mengikuti tutorial pada link di bawah ini.

Setelah kalian berhasil membuat folder anim dalam folder res maka selanjutnya kalian membuat file xml di dalamnya. Klik kanan pada folder anim lalu pilih New>Animation resource file. Simpan file xml animation tersebut dengan nama fade_in. Berikut ini adalah kode lengkap untuk file fade_in.xml

app/res/anim/fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0">
    </alpha>
</set>

Lakukan hal yang sama, namun untuk kali ini nama file fade_out. Berikut adalah kode lengkap untuk file fade_out.xml

app/res/anim/fade_out.xml

[sociallocker id=”1410″]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
</set>

[/sociallocker]

XML Layout File

Buka file activity_main.xml dalam folder layout. Tambahkan widget ImageView dan dua Button. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@android:mipmap/sym_def_app_icon" />

    <Button
        android:id="@+id/fadeOut"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="16dp"
        android:text="Fade Out" />

    <Button
        android:id="@+id/fadeIn"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="16dp"
        android:text="Fade In" />
</RelativeLayout>

Java Class File

Buka file MainActivity dalam folder java. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.animapp/MainActivity.java

package com.androidrion.animapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    Button fadeOut, fadeIn;
    ImageView imageView;

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

        imageView = findViewById(R.id.image);

        fadeOut = findViewById(R.id.fadeOut);
        fadeOut.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_out);
                imageView.startAnimation(animation);
            }
        });

        fadeIn = findViewById(R.id.fadeIn);
        fadeIn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_in);
                imageView.startAnimation(animation);
            }
        });
    }
}

Run Project

Sekarang jalankan project android studio kalian. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada animasi berikut ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah bagaimana cara mengimplementasikan animasi fade in / out di android studio. Tutorial diatas sangatlah mudah untuk dikerjakan karena kita tidak begitu banyak kode yang digunakan pada file java class untuk membuat aplikasi animasi fade in atau fade out.

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.

- Advertisement -

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

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.