Sebenarnya judulnya agak aneh ya. Mengapa? karena, maksud dari tutorial ini ialah membuat background seperti aplikasi Instagram. Bagi Anda yang sudah pernah memasangnya di smartphone pasti tahu gimana tampilannya menu login mereka. Yap, tampilan background mereka memiliki tipe warna gradien dimana, warna background mereka selalu berubah - ubah sehingga tampilannya bisa dikatakan sangat menarik untuk di lihat. Berdasarkan hal itu, saya berniat ingin mempelajarinya dan sudah berhasil saya lakukan. Adapun hasil yang saya pelajari ialah bahwa teknik bisa Anda gunakan untuk membuat background seperti itu ialah dengan menggunakan TransitionDrawable. Mungkin agak terdengar asing di telinga Anda namun, jangan khawatir karena penggunaannya cukup mudah dilakukan. Sebelum masuk ke praktikumnya berikut ialah tampilan menu login dari aplikasi Instagram.
Seperti pada gambar diatas bahwa Instagram menggunakan background gradien. Nah, kali ini saya tidak akan menggunakan gradien melainkan sebuah gambar yang nantinya akan berganti - ganti sendiri. Untuk gambarnya silakan Anda cari sendiri ya minimal 2 buah gambar atau lebih.
Setelah itu, ikutilah langkah - langkah berikut.
- Buka IDE Android Studio atau Eclipse.
- Setelah itu buat project baru dan beri nama sesuai dengan keinginan Anda.
- Bagi Anda pengguna Eclipse, coba cek direktori drawable apakah sudah tersedia atau belum. Jika belum ada maka, buat terlebih dahulu di dalam direktori res.
- Setelah itu, Anda letakkan semua gambar yang sudah Anda persiapkan tadi di awal di direktori drawable.
- Kemudian, buat file xml baru di direktori drawable dan beri nama "transition1.xml". Kemudian, isi source code nya seperti berikut.
<?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/gbr1"/> <item android:drawable="@drawable/gbr2"/> </transition> - Kemudian, buka file layout xml Anda. Dan isi source code nya seperti berikut.
<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="belajar.background.transition.MainActivity" > <ImageView android:id="@+id/imgBackground" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="centerCrop" android:src="@drawable/gbr1" /> </RelativeLayout> - Setelah itu, lanjutkan dengan membuka file utama java di projek Anda dan tambahkan source code berikut di dalam method onCreate().
Resources res = this.getResources(); ImageView imgBackground = (ImageView) findViewById(R.id.imgBackground); TransitionDrawable trans1 = (TransitionDrawable) res.getDrawable(R.drawable.transition1); imgBackground.setImageDrawable(trans1); trans1.startTransition(5000);
- Setelah itu, coba compile dan jalankan projek Anda. Kalau berhasil maka, tampilannya akan seperti gambar berikut.
Jika Anda berhasil maka, background aplikasi yang barusan Anda buat akan mengganti gambarnya secara otomatis. Namun, ada kekurangan pada aplikasi diatas dimana, background hanya berpindah dari gambar 1 ke gambar 2 atau bisa dikatakan hanya bisa dilakukan pada 2 gambar saja. Bagaimana jika Anda ingin membuat background gambar tersebut lebih dari 2 gambar? Tentu bisa. Caranya, Anda tinggal menggunakan CountDownTimer dan sedikit melakukan beberapa trik. Silakan Anda ubah file utama java Anda menjadi seperti berikut.
package belajar.background.transition;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
public class MainActivity extends Activity {
ImageView imgBackground;
TransitionDrawable trans1;
TransitionDrawable trans2;
TransitionDrawable trans3;
TransitionDrawable trans4;
Resources res;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
res = this.getResources();
imgBackground = (ImageView) findViewById(R.id.imgBackground);
trans1 = (TransitionDrawable) res.getDrawable(R.drawable.transition1);
trans2 = (TransitionDrawable) res.getDrawable(R.drawable.transition2);
trans3 = (TransitionDrawable) res.getDrawable(R.drawable.transition3);
trans4 = (TransitionDrawable) res.getDrawable(R.drawable.transition4);
load();
}
private void load() {
new CountDownTimer(8000, 7000) {
public void onTick(long millisUntilFinished) {
}
public void onFinish() {
repeat();
}
}.start();
}
private void repeat() {
new CountDownTimer(8000, 7000) {
public void onTick(long millisUntilFinished) {
trans1.startTransition(5000);
imgBackground.setImageDrawable(trans1);
}
public void onFinish() {
imgBackground.setImageDrawable(trans2);
trans2.startTransition(5000);
new CountDownTimer(8000, 7000) {
public void onTick(long millisUntilFinished) {
}
public void onFinish() {
imgBackground.setImageDrawable(trans3);
trans3.startTransition(5000);
new CountDownTimer(8000, 7000) {
public void onTick(long millisUntilFinished) {
}
public void onFinish() {
imgBackground.setImageDrawable(trans4);
trans4.startTransition(5000);
new CountDownTimer(8000, 7000) {
public void onTick(long millisUntilFinished) {
}
public void onFinish() {
repeat();
}
}.start();
}
}.start();
}
}.start();
}
}.start();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Dan jangan lupa untuk membuat 4 file xml transition. Karena, 1 file xml transition hanya bisa memuat 2 gambar. Adapun trik agar pada file xml transition ini ialah bahwa antara satu file dengan file berikutnya haruslah sama gambarnya agar ketika proses pemindahan dari transition 1 ke transition berikutnya tidak kelihatan proses pemindahannya. Silakan Anda buat lagi 4 file xml transition dan ubah source code nya menjadi seperti berikut:
File: transition1.xml
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/gbr1"/>
<item android:drawable="@drawable/gbr2"/>
</transition>
File: transition2.xml
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/gbr2"/>
<item android:drawable="@drawable/gbr3"/>
</transition>
File: transition3.xml
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/gbr3"/>
<item android:drawable="@drawable/gbr4"/>
</transition>
File: transition4.xml
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/gbr4"/>
<item android:drawable="@drawable/gbr1"/>
</transition>
Sedikit catatan, bahwa untuk penggunaan file gambar background haruslah memiliki ukuran panjang dan lebar yang sama agar proses pemindahan transition nya tidaklah kelihatan. Bagi Anda yang mau lihat output program diatas, silakan klik di sini.
