Kali ini kita akan belajar membuat aplikasi sederhana dengan menggunakan animasi transisi pada android studio.
Dengan animasi transisi kita bisa mengatur pergantian/perpindahan dari satu activity (antarmuka) ke activity lainnya dengan memberikan sentuhan efek animasi supaya terlihat lebih menarik.
Pada tutorial kali ini kita akan membuat aplikasi sederhana menyalakan dan mematikan lampu yang mana ketika tombol switch on/off ditekan akan terlihat efek animasi transisi (perpindahan) dari lampu yang mati (off) ke lampu yang menyala (on) ataupun sebaliknya.
lampu off lampu on 
Langkah-langkah :
1. Buat Project Baru
Silahkan Buka android studionya dan buat project baru dengan nama Transition, tentukan sdk, activity dan lainnya sampai dengan finish dan workspace android studio tampil.
2. Tambahkan Gambar
Tambahkan dua gambar yaitu gambar lampu dalam keadaan off dan juga gambar lampu dalam keadaan on pada drawable.
Untuk memudahkan proses belajar disini saya sudah menyediakan gambarnya silahkan klik download
3. Buat Layout Baru
Buat dua layout baru pada directory drawable dengan cara klik kanan pada drawable > New > Drawable resource file > isikan Nama Layout :
- Layout trans_off.xml
- Layout trans_on.xml
Ketikan kode-kode berikut pada trans_off.xml
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/on"/>
<item android:drawable="@drawable/off"/>
</transition>
Pada trans_on.xml ketikan juga kode-kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/off"/>
<item android:drawable="@drawable/on"/>
</transition>
4. Atur Layout Utama
Buka Activity_Main.xml
- Ubah background color menjadi warna hitam dengan kode-kode sebagai berikut :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
tools:context=".MainActivity">
- Tambahkan ImageView, untuk srcnya pilih drawable layout trans_on.xml dengan kode-kode berikut :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/trans_on"
android:scaleType="centerInside"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="@+id/imageView" />
- Tambahkan button dengan kode-kode berikut :
<Button
android:text="ON / OFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="34dp"
android:id="@+id/button" />
- Untuk lengkapnya yaitu :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/trans_on"
android:scaleType="centerInside"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="@+id/imageView" />
<Button
android:text="ON / OFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="34dp"
android:id="@+id/button" />
</RelativeLayout>
5. Atur MainActivity.java
Pada MainActivity. java kita akan memasukan kode-kode java diantaranya yaitu :
- kode untuk memberikan action pada button (on/off) yang telah dibuat pada ActivityMain.xml dan juga pengaturan animasi transisi termasuk waktu berapa lama efek transisi tampil dengan kode-kode :
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(!turnOn){
imageview.setImageResource(R.drawable.trans_on);
((TransitionDrawable)imageview.getDrawable()).startTransition(3000);
turnOn=true;
}else {
imageview.setImageResource(R.drawable.trans_off);
((TransitionDrawable)imageview.getDrawable()).startTransition(3000);
turnOn=false;
Untuk kode lengkapnya pada MainActivity.java :
package badoystudio.com.transition;
import android.graphics.drawable.TransitionDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
ImageView imageview;
Button button;
Boolean turnOn=false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageview=(ImageView)findViewById(R.id.imageView);
button=(Button)findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(!turnOn){
imageview.setImageResource(R.drawable.trans_on);
((TransitionDrawable)imageview.getDrawable()).startTransition(3000);
turnOn=true;
}else {
imageview.setImageResource(R.drawable.trans_off);
((TransitionDrawable)imageview.getDrawable()).startTransition(3000);
turnOn=false;
}
}
});
}
}
6. Atur Nama Aplikasi
Buka string.xml masukan kode-kode berikut :
<resources>
<string name="app_name">Animasi Transisi</string>
</resources>
Jika sudah diikuti langkah-langkah diatas, silahkan jalankan aplikasi menggunakan android virtual device, emulator genymotion, atau langsung ke device android dan Lihat hasilnya.
Silahkan Anda Coba …. Gratis kok …. hehehe
Untuk mempercepat pemahaman ini, daftar segera kursus komputer di Edusoft Center. Ada puluhan paket kursus dengan trainer yg handal dan berpengalaman.
Info selengkapnya bisa hubungi
Office : 0271 745 2187
No Simpati : 082 22922 2121 (WA )
atau
Bisa Langsung Registrasi Online lewat Formulir Online:
www.edusoftcenter.com