Cara Menampilkan Animasi Slide Up / Down di Android Studio

Tutorial Cara Menambahkan Animasi Slide Up Down 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 Slide up dan slide down di android studio.

Di Android, animasi Slide Up dan Slide Down digunakan untuk mengubah penampilan dan perilaku objek selama waktu interval tertentu. Animasi Slide Up dan Slide Down akan memberikan tampilan dan nuansa yang lebih baik untuk aplikasi kita.

Umumnya, 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.

Jadi dalam tutorial ini kalian akan belajar cara membuat aplikasi android untuk menampilkan animasi Slide Up dan Slide Down di Android Studio dengan cara yang sederhana.

Tutorial Cara Menampilkan Animasi Slide Up / Down 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. slide_down.xml
  2. slide_up.xml

Daftar file java class yang digunakan dalam project ini:

  1. MainActivity.java

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

XML Anim 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 slide_up. Berikut ini adalah kode lengkap untuk file slide_up.xml

app/res/anim/slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.0"
        android:toYScale="0.0" />
</set>

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

app/res/anim/slide_down.xml

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/slidedown"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="16dp"
        android:text="Slide Down" />

    <Button
        android:id="@+id/slideup"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:layout_alignParentRight="true"
        android:layout_marginTop="16dp"
        android:text="Slide Up" />
</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.content.Context;
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 slidedown, slideup;
    ImageView imageView;

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

        imageView = findViewById(R.id.image);

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

        slideup = findViewById(R.id.slideup);
        slideup.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
                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 slide up / down 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 slide up atau slide down.

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.

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

You might also like

Leave A Reply

Your email address will not be published.