Tutorial ToolBar Android

Android ToolBar dapat digunakan sebagai bilah tindakan dan dapat berisi tombol navigasi, logo merek, judul, subtitle, tampilan khusus, dan menu tindakan.

Perbedaan antara bilah tindakan dan bilah alat adalah bahwa elemen ToolBar dapat dikontrol dan bagian dari tata letak aplikasi sementara bilah tindakan dikontrol oleh kerangka kerja android. 

Dalam posting ini, Anda dapat belajar bagaimana menggunakan ToolBar dan tool bar material styles, menyesuaikan style tool bar, dan mengimplementasikan tool bar animation dan tool bar custom layout.

Dukungan ToolBar Perpustakaan

ToolBar ditambahkan dalam API level 21. Untuk memastikan bahwa aplikasi Anda yang menggunakan ToolBar tidak crash pada versi Android sebelumnya, dengan kata lain untuk kompatibilitas ke belakang, Anda perlu menggunakan ToolBar dari pustaka dukungan.

Menambahkan ToolBar ke Tata Letak

Di bawah ini contoh tata letak kendala berisi ToolBar.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="dialog.zoftino.com.toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/tooBarColor"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="ToolBar Tutorial"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />
</android.support.constraint.ConstraintLayout>

Menggunakan ToolBar sebagai ActionBar

Untuk menggunakan ToolBar sebagai bilah tindakan, pertama-tama Anda perlu mengatur tema aplikasi ke tanpa tema bilah tindakan, misalnya ke Theme.AppCompat.Light.NoActionBar atau Theme.AppCompat.NoActionBar. Kemudian dalam kegiatan tersebut, panggil setActionBar atau setSupportActionBar (jika Anda menggunakan ToolBar dari perpustakaan dukungan) metode lewat tool bar objek untuk itu.

Selanjutnya, Anda dapat mengatur tombol navigasi, logo merek, judul, dan subtitle.

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(myToolbar);

    myToolbar.setNavigationIcon(R.drawable.ic_drawer);
    myToolbar.setLogo(R.drawable.brandz);
    myToolbar.setSubtitle("ToolBar");
}

Perhatikan bahwa jika Anda ingin menggunakan bilah alat dalam fragmen, Anda harus terlebih dahulu mendapatkan aktivitas, lalu mentransmisikan aktivitas ke aktivitas aplikasi yang padat dan kemudian memanggil metode setSupportActionBar dalam fragmen.

((AppCompatActivity)getActivity()).setSupportActionBar(toolbar); 

Android ToolBar Material Styles & Custom Material Styles

Android menyediakan tema materi Widget.Material.Toolbar dan aplikasi yang sesuai tema kompak Widget.AppCompat.Toolbar untuk bilah alat. Anda dapat menyesuaikan gaya material untuk mengubah warna, ukuran ToolBar dan tampilan teks judul dengan mengatur properti seperti latar belakang, titleTextAppearance, subtitleTextAppearance.

Setelah menyesuaikan style tool bar, Anda dapat menambahkannya ke aplikasi mereka dengan mengatur properti toolbarStyle dari tema aplikasi kustom Anda seperti yang ditunjukkan di bawah ini.

 <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="toolbarStyle">@style/MyToolBarStyle</item>
</style>
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="android:background">#80deea</item>
    <item name="titleTextAppearance">@style/MyTitleTextAppearance</item>
    <item name="subtitleTextAppearance">@style/MySubTitleTextAppearance</item>
</style>
<style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">35dp</item>
    <item name="android:textColor">#ff3d00</item>
</style>
<style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
    <item name="android:textSize">30dp</item>
    <item name="android:textColor">#1976d2</item>
</style>
 

Output dari gaya kustom bilah alat di atas.

Android Custom ToolBar Layout

Anda dapat menyesuaikan bilah alat Android dengan menentukan tata letak khusus untuk ToolBar. Dengan tata letak bilah alat khusus, Anda masih dapat mengatur logo dan navigasi dalam aktivitas Anda. Di bawah tata letak xml menunjukkan tata letak ToolBar kustom.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="dialog.zoftino.com.toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="8dp">
            <TextView
                android:id="@+id/title_m"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="16dp"
                android:text="Tennis"
                android:textAppearance="@android:style/TextAppearance.Material.Title"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>
            <TextView
                android:id="@+id/women_s"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="W Singles"
                android:textAppearance="@android:style/TextAppearance.Material.Medium"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/title_m" />
            <TextView
                android:id="@+id/wm_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:textAppearance="@android:style/TextAppearance.Material.Title"
                android:text="Serena"
                app:layout_constraintLeft_toRightOf="@+id/women_s"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/title_m" />
            <TextView
                android:id="@+id/men_s"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="M Single"
                android:textAppearance="@android:style/TextAppearance.Material.Medium"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/women_s" />
            <TextView
                android:id="@+id/m_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="Federer"
                android:textAppearance="@android:style/TextAppearance.Material.Title"
                app:layout_constraintLeft_toRightOf="@+id/men_s"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/women_s" />
        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.Toolbar>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="ToolBar Tutorial"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />
</android.support.constraint.ConstraintLayout>

Keluaran tata letak bilah alat Toolbar dengan logo yang dikonfigurasi dalam aktivitas.

Android ToolBar Animation

ToolBar bisa dianimasikan.

Share this post