Membuat Tampilan Material Design di Basic4Android

Chairruddin Arrasid | 01/08/2015 | Basic4Android | 16 Comments

Selain performa yang begitu smooth, salah satu yang saya suka dari Android Lollipop yaitu material design-nya. Ya, aplikasi-aplikasi bawaan dari Android Lollipop yang menganut material design ini tampilannya begitu segar dan enak dipandang oleh mata. Sehingga banyak Android Developer yang ikut mengubah tampilan aplikasinya menjadi material design juga.

Lantas, apakah bisa membuat tampilan material design di Basic4Android (B4A)? Bisa dong.

Kali ini saya ingin share tutorial bagaimana cara membuat material design di B4A. Dalam tutorial ini saya menggunakan project dari postingan ini:

Cara Membuat Form Pencarian Data di Basic4Android

Perlu diketahui, bahwa syarat untuk membuat material design ini harus menggunakan setidaknya Android SDK versi 21. Maka silakan upgrade terlebih dahulu jika Android SDK Anda versinya masih di bawah 21.

Oke, let’s go…

Buka project MyLogin.
Lalu atur file AndroidManifest.xml-nya. Caranya klik menu Project – Manifest Editor.
Ganti android:targetSdkVersion menjadi 21.

'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: http://www.basic4ppc.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="5" android:targetSdkVersion="21"/>
<supports-screens android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
SetApplicationAttribute(android:theme, "@style/Theme.Herustyle")
'End of default text.

'This code will be applied to the manifest file during compilation.

'You do not need to modify it in most cases.

'See this link for for more information: http://www.basic4ppc.com/forum/showthread.php?p=78136

AddManifestText(

<uses-sdk android:minSdkVersion="5" android:targetSdkVersion="21"/>

<supports-screens android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:anyDensity="true"/>)

SetApplicationAttribute(android:icon, "@drawable/icon")

SetApplicationAttribute(android:label, "$LABEL$")

SetApplicationAttribute(android:theme, "@style/Theme.Herustyle")

'End of default text.

Buka folder res yang terdapat di dalam folder Objects dari project MyLogin.

Kemudian buat folder baru dengan nama values-v21.

Lalu di dalam folder values-v21 buat file xml dengan nama theme.xml. Tulis code seperti di bawah ini:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="Theme.Herustyle" parent="@android:style/Theme.Material.Light.DarkActionBar">
  <item name="android:colorPrimary">#FF9800</item>
  <item name="android:colorPrimaryDark">#F57C00</item>
  <item name="android:colorAccent">#FF9800</item>
  </style>
</resources>

<?xml version="1.0" encoding="utf-8"?>

</style>

</resources>

Bisa kita lihat code xml di atas, ada tiga warna yang di-set, yaitu:

colorPrimary = Warna untuk action bar.
colorPrimaryDark = Warna untuk status bar.
colorAccent = Warna aksen untuk object seperti EditText, RadioButton, CheckBox, dll.

Jangan lupa set Read-only pada folder values-v21.
Kemudian Run/Compile project ini dalam versi Release.
Lalu lihat, apa yang terjadi…

Oke, bagaimana? Segar dan enak dipandang bukan tampilannya? 😀

Tapi sayangnya, material design pada tutorial ini hanya bisa atau support untuk device Android yang sudah Lollipop saja. Untuk device Android versi di bawahnya (4.0+) tampilannya masih normal yaitu Holo Design.

About The Author

Chairruddin Arrasid

Orang yang suka belajar, juga suka membaca, juga suka menulis, dan juga suka makan kalau lapar. Dulu waktu kecil tidak punya cita-cita jadi programmer, tapi sekarang jadi programmer. Lah? Mungkin dulu masih belum tahu bahwa programming itu menyenangkan.

0 0 votes

Article Rating

This site uses Akismet to reduce spam. Learn how your comment data is processed.

16 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

imam

9 years ago

Great job gan…

Chairruddin Arrasid

Author

Reply to imam

9 years ago

Thanks gan, udah jadi pengunjung setia 😀

Ajaya Gopal Sanjaya

9 years ago

bray kok tablenya ga material design ?

Chairruddin Arrasid

Author

Reply to Ajaya Gopal Sanjaya

9 years ago

Dari sananya emang gitu bray. Kalo mau material design pake ListView aja.

putra

9 years ago

Mas kok saya punya gak bisa di compile ya.. java saya sudah 21

Chairruddin Arrasid

Author

Reply to putra

9 years ago

Bukan java 21 ya, tapi SDK-nya.

Waktu compile ada error? Error-nya seperti apa?

othong

8 years ago

maaf ni kalau pertanyaan nya aneh, tombol button bisa ga di buat saat di klik agar ngelink ke activity yang lain ? jadinya button itu di jadikan alat untuk memilih menu pada aplikasi yang dibuat. mohon jawaban nya ya mas.

Chairruddin Arrasid

Author

Reply to othong

8 years ago

Bisa dong. Begini, buat dulu event click untuk Button-nya, lalu panggil activity yang lain saat event itu dijalankan atau saat Button diklik.

Sub Button1_Click
	StartActivity(ActivityYangLain)
End Sub

Sub Button1_Click

StartActivity(ActivityYangLain)

End Sub

Othong

Reply to Chairruddin Arrasid

8 years ago

Makasi banyak suhu,.

Isaac

8 years ago

Una pregunta. ¿Para hacer eso se necesita haber empaquetado la aplicacion? ¿o se puede hacer desde que estamos apenas creandola?

ulum

8 years ago

gan kalo mau pakek tema yg old gimana gan

Chairruddin Arrasid

Author

Reply to ulum

8 years ago

Perhatikan poin no. 3, Ganti target sdk-nya menjadi 9.

<uses-sdk android:minSdkVersion="5" android:targetSdkVersion="9"/>

1	<uses-sdk android:minSdkVersion="5" android:targetSdkVersion="9"/>

Kemudian komen atau hapus kode ini:

SetApplicationAttribute(android:theme, "@style/Theme.Herustyle")

1	SetApplicationAttribute(android:theme, "@style/Theme.Herustyle")

Nanti bakal jadi theme lama (gingerbread).

Fitra

7 years ago

waktu di compile erorr ini erornya,
resvalues-v21theme.xml:3: error: Error retrieving parent for item: No resource found that matches the given name ‘@android:style/Theme.Material.Light.DarkActionBar’.
resvalues-v21theme.xml:6: error: Error: No resource found that matches the given name: attr ‘android:colorAccent’.
resvalues-v21theme.xml:4: error: Error: No resource found that matches the given name: attr ‘android:colorPrimary’.
resvalues-v21theme.xml:5: error: Error: No resource found that matches the given name: attr ‘android:colorPrimaryDark’.

jadi gak ditemukan sumbernya itu gimana mohon solusinya

Chairruddin Arrasid

Author

Reply to Fitra

7 years ago

Coba cek ini: http://www.alwaysdelheru.com/cara-mengubah-warna-background-pada-aplikasi-android-yang-dibuat/#comment-613

rahmad

6 years ago

gan kalo di klik header tabelnya kok eror

Wanita Cantik

6 years ago

kak, saat di release tiba” file values-21 nya hilang, jadi tidak bisa di release. gimana solusinya kak?

Related Posts

About The Author

Chairruddin Arrasid