Cara Membuat Toolbar(Action Bar) Material Design Android

  • Post
    codeorayo
    Keymaster
    none
    Toolbar adalah sebuah komponen antar muka yang merupakan bagian dari material design di Android.Yang juga merupakan pengganti kelanjutan dari versi terdahulu yaitu Action Bar, Toolbar terdiri dari navagasi icon,menu ,setting dll. Untuk menggunakan dan menerapkan toolbar kalian bisa menggunakan nya dari library v21 (Appcompat) sampai versi terbaru sekarang.Nah disini lah kelebihan  Android Studio karna sudah support v21 dari awal  dirilis versi 1.0 

    [img]https://4.bp.blogspot.com/-vg6Ju60l6jc/VvfWbSWPARI/AAAAAAAAFLI/MnHlLSNuEm4DwLTyBlhw2oO1-TTP7zyQw/s1600/android-studio-tutorial-development-apps-by-okedroid.png[/img]

    Pada tutorial belajar android kali ini, kita akan mencoba membuat dan menerapkan Toolbar dengan menggunakan Android Studio. 

    1. Pertama buka Android Studio 

    2. Pilih Start a New Android Studio Project 

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=298]https://2.bp.blogspot.com/-UuGKl7Vgb3k/Vr_PQGoghiI/AAAAAAAAEqU/bymLc7Evl4U/s320/buat-new-project-android-studio-2.0.png[/img][/td]
    [td]Start a New Android Studio Project[/td]

                                            

    3..Kedua pada bagian Create New Project, sesuaikan dengan nama dan package serta lokasi file yang akan kalian gunakan. Untuk contoh saya menggunakan seperti yang ada di gambar di bawah. Jika sudah pilih Next.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=204]https://1.bp.blogspot.com/-FGQfg35J7Vs/VsZTBvcN1VI/AAAAAAAAErk/iGwkTglzC8Y/s320/Create-New-Project-Android-Studio.png[/img][/td]
    [td]Create New Project[/td]

    4. Selanjutnya tentukan Target Android Devices dari Aplikasi kalian , secara default saya menggunakan API 15 untuk minimumnya. Jika sudah pilih Next.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=209]https://4.bp.blogspot.com/-T8vfh3frTms/Vr_Q-RuWMhI/AAAAAAAAEqk/k60bbG3fC8U/s320/target-android-devices.png[/img][/td]
    [td]Target Android Devices[/td]

    5. Pada bagian Add an Activity to Mobile kita bisa memilih template bawaan yang masih kosong yaitu Empty Activity  lalu pilih Next 

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=202]https://4.bp.blogspot.com/-PM62ys3R2CA/VsZUBFJY5HI/AAAAAAAAErs/I1Q5eBBisJI/s320/Add-An-Activity-to-Mobile.png[/img][/td]
    [td]Empty Activity[/td]

    6. Selanjutnya di bagian Customize the Activity kita hanya perlu memilih tombol Finish.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=205]https://1.bp.blogspot.com/-DIE9lYCnsC8/VsZUiT8IV8I/AAAAAAAAErw/wNg-DKUDDEo/s320/Customize-the-Activity.png[/img][/td]
    [td]Customize the Activity[/td]

    7.Setelah itu kita tunggu sampai proses building project gradle selesai .

    8. Setelah selesai proses building , kita akan mencoba membuat Toolbar berikut langkah-langkahnya: 

    Setup Gradle

  • Sebelum memulai untuk secara default pastikan pada build gradle khususnya di bagian dependencies library support appcompat versi 21 atau versi terbaru seperti pada digambar :


    [img width=320,height=70]https://3.bp.blogspot.com/-Ykwdl1IEM_M/VsZW6YzXsAI/AAAAAAAAEsA/4cIUn7w41go/s320/build-gradle.png[/img]

    Mengubah Color Resources 

  •  Pada bagian  color.xml(res/values/color) untuk dasarnya kalian bisa merubah dan menyesuaikan warna dari toolbar .


           color.xml



  •     #2ecc71

  •     #27ae60

  •     #e67e22



  • colorPrimary : merupakan warna dasar dari toolbar 

    colorPrimaryDark : merupakan warna dari status bar ( akan terlihat jika kita menggunakan perangkat android 5.0 atau terbaru )

    colorAccent : merupakan  warna kontras 

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=185,height=320]https://2.bp.blogspot.com/-yYYf_neM8Ic/VsZgC4oDSII/AAAAAAAAEsQ/RLkBpvM9u3g/s320/color-material-theme.png[/img][/td]
    [td]Color Material Theme ( source developer.android.com )[/td]

  • Pada bagian styles.xml (res/values/styles.xml) warna yang sudah disesuaikan akan diterapkan di bagian file ini . Disini kita dapat menerapkan jenis theme dan style dari salah satu komponen material design seperti toolbar. 


          styles.xml


  •  

  •     

  •     

  •         @color/colorPrimary

  •         @color/colorPrimaryDark

  •         @color/colorAccent

  •         

  •     

  •  



  • Setelah itu kita akan menerapkan baris instruksi (codingan ) di bawah pada file layout dan file java.

    1. Pertama di bagian activity_main.xml  untuk contoh kita bisa menerapkan baris instruksi dibawah:

    Copykan ke file activity_main.xml 

  •  

  • http://schemas.android.com/apk/res/android“

  •                 xmlns:tools=”http://schemas.android.com/tools

  •                 android:layout_width=”match_parent”

  •                 android:layout_height=”match_parent”

  •                 android:background=”#fff”

  •                 tools:context=”.MainActivity”>

  •  

  •     

  •         android:id=”@+id/toolbar”

  •         android:minHeight=”?attr/actionBarSize”

  •         android:background=”?attr/colorPrimary”

  •         android:layout_width=”match_parent”

  •         android:layout_height=”wrap_content”>

  •     

  •  

  •     

  •         android:layout_width=”match_parent”

  •         android:layout_height=”wrap_content”

  •         android:text=”Hello Toolbar “

  •         android:layout_below=”@+id/toolbar”

  •         android:textColor=”#7f8c8d”

  •         android:layout_marginTop=”10dp”

  •         android:textSize=”22sp”

  •         android:gravity=”center_horizontal”/>



  • 2.Kedua di bagian MainActivity.java kalian bisa copykan baris instruksi dibawah:

    MainActivity.java 

  • package com.okedroid.aplikasisaya;

  •  

  • import android.support.v7.app.AppCompatActivity;

  • import android.os.Bundle;

  • import android.support.v7.widget.Toolbar;

  •  

  • public class MainActivity extends AppCompatActivity {

  •  

  •     @Override

  •     protected void onCreate(Bundle savedInstanceState) {

  •         super.onCreate(savedInstanceState);

  •         setContentView(R.layout.activity_main);

  •  

  •  

  •         Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);

  •         setSupportActionBar(toolbar);

  •     }

  • }


    3.Setelah selesai kita bisa coba jalankan Aplikasinya lewat Android Studio .

    Hasilnya kurang lebih seperti ini :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=163,height=320]https://4.bp.blogspot.com/-baPNox-894M/VsZoa-Ly_WI/AAAAAAAAEsg/T-yC7PsFY8g/s320/Hasil-toolbar-android-studio.png[/img][/td]
    [td]Hasil Toolbar di Android Device 4.2.2[/td]
    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=163,height=320]https://4.bp.blogspot.com/-1lJ8uaoxcQI/VsZrw0W1b9I/AAAAAAAAEss/Q4hHlmusXRc/s320/Hasil-toolbar-android-studio2.png[/img][/td]
    [td]Hasil Toolbar di Android Device 5.0[/td]

    Seperti yang kalian sudah ketahui , jika kita menjalankan Aplikasi di Android Device di bawah 5.0 Lollipop, khususnya saya menggunakan Android Device 4.2.2 maka warna status bar dari colorPrimaryDark tidak akan tampil. 

    Sebaliknya jika kita menggunakan Android Device  5.0 Lolipop keatas atau versi terbaru , maka warna status bar dari colorPrimaryDark akan tampil.

    Untuk  Android Device 4.2.2 saya mengujinya dengan emulator genymotion. Untuk Android Device  5.0 Lolipop saya mengujinya dengan emulator bawaan terbaru dari Android 2.0 Beta.  

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.