ActionBarSherlock: Mengubah UI Gingerbread dengan rasa Ice Cream Sandwich


feature_02

Daripada nganggur share sedikit ilmu tentang design UI di android. Bagi yang mempunyai smartphone android versi 4 atau yang dikenal dengan code name ICS(Ice Cream Sandwich) pasti terbiasa dengan tampilan aplikasi dengan actionbar di atas. Namun ada kalanya kita membuat aplikasi dengan target android sdk yang mendukung versi sdk dibawah ICS, di versi android sdk dibawah ICS action bar tidak dapat digunakan karena tampilan tersebut khusus untuk android versi 4.0. Lalu bagaimana agar bisa membuat aplikasi dengan actionbar di android dengan versi dibawah ICS, saya ambil contoh sdk versi 2.3 a.k.a GingerBread. Solusinya menggunakan actionbarsherlock, anda bisa mengunduhnya di sini. Sekarang tahap development, saya anggap anda sudah menginstall android SDK dan sudah terintegrasi dengan eclipse. Jika belum melakukan instalasi, anda wajib mampir ke http://developer.android.com/sdk/installing/installing-adt.html.

Ready to brew!!!

Berikut langkah-langkahnya:

  1. Buat project android baru dengan nama terserah, saya menggunakan nama Test Sherlock dengan package name com.upi.testsherlock. Untuk project ini saya menggunakan target build Jelly Bean (API 16) agar support untuk android versi terbaru. Untuk lebih jelas nya bisa anda lihat di screenshot dibawah ini.

    Create new project
    Create new project
  2. Setelah itu tekan next, next, next, dan finish… hehe..2 3 4
  3. Ekstrak file ActionBarSherlock-4.2.0.zip lalu import library File->import kemudian pilih Existing Android Code Into Workspace  dan tekan next. Setelah itu pilih folder tempat ekstraksi file tadi, kemudian import library saja tanpa sample. Jangan lupa centang Copy project into workspace, lalu finish.

    Import librari
    Import library
  4. Klik kanan project yang baru saja di import kemudian pastikan di Java Compiler menggunakan JDK compliance 1.6. Jika sudah maka build project tersebut.

    Setting JDK Compliant
    Setting JDK Compliance
  5. Jika library actionsbarsherlock sukses di build, maka tambahkan reference project ini kedalam Test Sherlock project yang pertama-tama dibuat tadi. Klik kanan kemudian pilih project property di Test Sherlock, lalu pilih Android. Disebelah kanan pada bagian library tekan Add, dan tambahkan library.
    Add library ke dalam Test Sherlock Project
    Add library ke dalam Test Sherlock Project

    Jika sukses menambahkan  maka akan muncul ../library dengan centang hijau seperti gambar dibawah ini. Jangan lupa tekan apply dan OK.

    Sukses menambahkan library
    Sukses menambahkan library
  6. It’s time to write code. Langsung saja menuju folder src dan ubah code seperti contoh dibawah ini
    import android.os.Build;
    import android.os.Bundle;
    
    import com.actionbarsherlock.app.SherlockActivity;
    import com.actionbarsherlock.view.Menu;
    import com.actionbarsherlock.view.MenuItem;
    
    public class MainActivity extends SherlockActivity {
    
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		//Untuk versi sdk dibawah ICS maka diset tema nya ke tema actionbarsherlock
    		if (Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
    			this.setTheme(R.style.Sherlock___Theme_Light);
    		}
    		setContentView(R.layout.activity_main);
    	}
    
    	@Override
    	public boolean onCreateOptionsMenu(Menu menu) {
    		menu.add("Save").setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
    		menu.add("Edit").setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
    		return true;
    	}
    }
    
  7. Langkah terakhir ganti manifest android:theme=”@style/AppTheme” menjadi
    android:theme=”@style/Theme.Sherlock.Light.DarkActionBar”
  8. Setelah itu jalankan emulator android 2.3 seperti gambar dibawah ini,

    Emulator android 2.3.3
    Emulator android 2.3.3
  9. Selanjutnya jalankan project. Dan hasilnya seperti pada gambar dibawah ini

    tampilan actionbarsherlock sederhana di android 2.3
    tampilan actionbarsherlock sederhana di android 2.3

Bagaimana? mudah bukan? Semoga bermanfaat.🙂

4 thoughts on “ActionBarSherlock: Mengubah UI Gingerbread dengan rasa Ice Cream Sandwich

  1. Maaf mau tanya, saya sudah download dan mengekstrak data actionbarsherlock nya, tapi pas mau di import kok keluar tulisan “no project are found to import” dan tidak keluar list yg harus di check list seperti pada gambar langkah 3, padahal cara nya udah sesuai dengan petunjuk di tutorial. bagaimana ya?

    1. kl misalkan no project found coba cek hasil ekstrak file nya atau coba import file jar sherlock nya langsung. ga lewat source code kyk di contoh diatas

      1. bisa gak ambil hanya file jar nya yg di libs, saya langsung copy paste ke folder di workspace saya? hehehe

        maaf banyak nanya, saya masih newbie soalnya.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s