Android Bootstrap : Implementasi Bootstrap di Android

Twitter bootstrap sudah sangat populer digunakan dalam penggunaan theme website. Theme tersebut berupa button, text field, formatting dan lain sebagainya. Sementara dalam pengembangan android, penerapan theme masih sangat sulit. Namun saat ini bootstrap pun dapat digunakan dalam theming android.

Sampai tulisan ini dibuat bootstrap sudah mencakup pada :

• bootstrap buttons
• font awesome texts
• bootstrap edit texts
• boostrap thumbnails

Sementara fitur lengkapnya mencakup :

• Uses min SDK 7 which is Android 2.1 (Tested on a device running Android 2.2)
• Bootstrap buttons as per Bootstrap v3
• Rounded buttons
• Disabled buttons
• Various sized buttons (large to extra small)
• Just text buttons
• Left, right, left and right, or just icon button
• Font Awesome text as per Font Awesome v4
• Animations to Font Awesome Text items
• EditText backgrounds and states

Berikut tampilannya :

Tertarik untuk mencoba?

Requirement yang dibutuhkan :

1. Library android bootstrap. Bisa di download di sini
2. Pastikan di eclipse anda sudah memiliki minimal SDK 16 atau jelly bean, karena library AndroidBootstrap minimal menggunakan SDK 16

Instalasi :

1. Download library diatas
2. Ekstrak ke direktori yang anda gunakan nanti
3. Hasil ekstrak akan menghasilkan dua project : AndroidBootstrap dan AndroidBootstrapTest
4. Jalankan Eclipse
5. Pilih File – Import – Android – Existing Android Code
6. Pilih project AndroidBootstrap yang merupakan library
7. Klik finish

Ok, tahapan selanjutnya adalah memasukkan Library AndroidBootstrap ke dalam project Anda

1. Cukup dengan klik kanan pilih properties pada project yang ingin anda implementasi bootstrap
2. Cari tab disebelah kiri dengan nama “Android”
3. Pada bagian bawah window,  including libraries – klik Add – dan pilih  AndroidBootstrap
4. Click Ok

Penggunaan :

Setelah berhasil melakukan instalasi. Mari ke tahap penggunaan.

1. Copy file fontawesome-webfont.ttf  yang ada di file library tadi ke dalam direktori asset milik project anda.

2. Pada layout yang akan mengimplementasikan bootstrap, tambahkan setelah

xmlns:android="http://schemas.android.com/apk/res/android"

dengan :

xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto"
xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"

3. Untuk penerapan button, pada layout xml dengan menggunakan :

Untuk tipe button bisa dilihat di  Bootstrap CSS Buttons

Untuk tipe icon bisa dilihat di Font Awesome Cheat Sheet

Ok, segitu aja 🙂