Cara Membuat Background Dinamis diAndroid

Oleh: Yudi Setiawan

Sebenarnya judulnya agak aneh ya. Mengapa? karena, maksud dari tutorialini ialah membuat background seperti aplikasi Instagram. Bagi Anda yangsudah pernah memasangnya di smartphone pasti tahu gimana tampilannyamenu login mereka. Yap, tampilan background mereka memiliki tipe warnagradien dimana, warna backg...

Sebenarnya judulnya agak aneh ya. Mengapa? karena, maksud dari tutorial ini ialah membuatbackground seperti aplikasi Instagram. Bagi Anda yang sudah pernah memasangnya di smartphonepasti tahu gimana tampilannya menu login mereka. Yap, tampilan background mereka memiliki tipewarna gradien dimana, warna background mereka selalu berubah - ubah sehingga tampilannya bisadikatakan sangat menarik untuk di lihat. Berdasarkan hal itu, saya berniat ingin mempelajarinya dansudah berhasil saya lakukan. Adapun hasil yang saya pelajari ialah bahwa teknik bisa Anda gunakanuntuk membuat background seperti itu ialah dengan menggunakan TransitionDrawable. Mungkinagak terdengar asing di telinga Anda namun, jangan khawatir karena penggunaannya cukup mudahdilakukan. Sebelum masuk ke praktikumnya berikut ialah tampilan menu login dari aplikasiInstagram.

Seperti pada gambar diatas bahwa Instagram menggunakan background gradien. Nah, kali ini sayatidak akan menggunakan gradien melainkan sebuah gambar yang nantinya akan berganti - gantisendiri. 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.1.Setelah itu buat project baru dan beri nama sesuai dengan keinginan Anda.2.Bagi Anda pengguna Eclipse, coba cek direktori drawable apakah sudah tersedia atau belum. Jika3.belum ada maka, buat terlebih dahulu di dalam direktori res.Setelah itu, Anda letakkan semua gambar yang sudah Anda persiapkan tadi di awal di direktori4.drawable.Kemudian, buat file xml baru di direktori drawable dan beri nama "transition1.xml". Kemudian, isi5.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.6.<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 source7.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 akan8.seperti gambar berikut.

Jika Anda berhasil maka, background aplikasi yang barusan Anda buat akan mengganti gambarnyasecara otomatis. Namun, ada kekurangan pada aplikasi diatas dimana, background hanya berpindahdari 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. SilakanAnda 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(longmillisUntilFinished) {

}

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 ispresent. 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 bisamemuat 2 gambar. Adapun trik agar pada file xml transition ini ialah bahwa antara satu file denganfile berikutnya haruslah sama gambarnya agar ketika proses pemindahan dari transition 1 ketransition berikutnya tidak kelihatan proses pemindahannya. Silakan Anda buat lagi 4 file xmltransition 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 ukuranpanjang dan lebar yang sama agar proses pemindahan transition nya tidaklah kelihatan. Bagi Andayang mau lihat output program diatas, silakan klik di sini.

Tentang Penulis

Yudi Setiawan