Membuat Toolbar Material Design Pada AIDE

Artikel ini merupakan kelanjutan dari artikel sebelumnya yang telah membahas tentang pembuatan action bar.

Baca:
Menampilkan Icon Aplikasi Pada Action Bar

Pada postingan kali ini kita akan membahas tentang cara membuat toolbar menggunakan material design pada AIDE. Toolbar dengan material design mempunyai tampilan yang lebih menarik dibandingkan dengan action bar, namun pembuatannya jauh lebih rumit dan membutuhkan library AppCompat.

Langkah-langkah membuat toolbar material design pada AIDE

Untuk memulainya, buat project baru.
Nama : ToolbarMaterialDesign
Package : com.toolbar.materialdesign

Jika AIDE yang kita gunakan belum mempunyai library AppCompat, maka kita diharuskan mendownload library ini, sehingga membutuhkan koneksi internet dan kuota yang cukup. Proses download dan instalasi library ini akan dilakukan sendiri oleh AIDE, kita hanya butuh memasukkan sebaris kode dibagian dependencies pada file build.gradle yang terdapat dalam folder project. Silahkan perhatikan gambar dibawah ini.

Build.gradle

Untuk semua project aplikasi yang menggunakan tampilan material design, kode ini wajib dimasukkan kedalam file build.gradle dibagian dependencies. Berikut ini adalah kode tersebut.


compile 'com.android.support:appcompat-v7:+'

Setelah memasukkan kode tersebut simpan project, selanjutnya proses download library akan dimulai. Biarkan proses download ini berlangsung dengan sendirinya sambil kita mengerjakan langkah-langkah selanjutnya.
Selengkapnya isi file build.gradle seperti ini:


apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    buildToolsVersion "27.1.0"

    defaultConfig {
        applicationId "com.toolbar.materialdesign"
        minSdkVersion 14
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile 'com.android.support:appcompat-v7:+'
    compile fileTree(dir: 'libs', include: ['*.jar'])
}

Main.xml

Salin kode dibawah ini dan masukkan kedalam file main.xml.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="TextInputActivity">

 <android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  android:theme="@style/AppTheme"
  android:elevation="4dp">

 </android.support.v7.widget.Toolbar>

 <LinearLayout
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:orientation="vertical"
  android:layout_below="@id/toolbar">

  <ImageView
   android:layout_height="match_parent"
   android:layout_width="match_parent"
   android:src="@drawable/bg"/>

 </LinearLayout>


</RelativeLayout>

Jangan lupa buat file bg.png dalam folder drawable sebagai background layout.

MainActifity.java

Salin kode dibawah ini kedalam file MainActivity java.


package com.toolbar.materialdesign;

import android.app.*;
import android.os.*;
import android.support.v7.widget.*;
import android.support.v7.app.AppCompatActivity;
import android.view.*;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity 
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

  // findview toolbar
  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

  // set toolbar ke dalam action bar
  setSupportActionBar(toolbar);

  // set icon menu
  //getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  //getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu);

  // set title/nama aplikasi
  getSupportActionBar().setTitle("CARALIYO");

  // set subtitle
  getSupportActionBar().setSubtitle("caraliyo.com");

  // set logo toolbar
  getSupportActionBar().setDisplayUseLogoEnabled(true);
  getSupportActionBar().setLogo(R.drawable.ic_launcher);

    }

 @Override
    public boolean onCreateOptionsMenu(Menu menu)
 {
        menu.add(0, 1, 1, "New");
        menu.add(0, 2, 2, "Create");
        menu.add(0, 3, 3, "Open");
        menu.add(0, 4, 4, "Delete");
        menu.add(0, 5, 5, "Exit");

        return true;
    }

 @Override
 public boolean onOptionsItemSelected(MenuItem item)
 {
        switch (item.getItemId())
  {
   case (1):
    Toast.makeText(getApplicationContext(), "New", Toast.LENGTH_SHORT).show();
    
    return true;
   case (2):
    Toast.makeText(getApplicationContext(), "Create", Toast.LENGTH_SHORT).show();
    
    return true;
   case (3):
    Toast.makeText(getApplicationContext(), "Open", Toast.LENGTH_SHORT).show();
    
    return true;
   case (4):
    Toast.makeText(getApplicationContext(), "Delete", Toast.LENGTH_SHORT).show();
    
    return true;
   case (5):
    Toast.makeText(getApplicationContext(), "Keluar", Toast.LENGTH_SHORT).show();
    finish();
    return true;
    
        }
        return false;
    }
}

Styles.xml dan colors.xml dalam folder values

Didalam folder values terdapat 2 file yaitu styles.xml dan strings.xml. Ubah isi file styles.xml menjadi seperti berikut :


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

    <style name="Base.Theme.ThemeApp" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/primary</item>

        <!--   warna gelap untuk status bar dan contextual app bars -->
        <item name="colorPrimaryDark">@color/primary_dark</item>

        <!--   theme UI controls seperti checkboxes dan text fields e.g. FloatActionButton -->
        <item name="colorAccent">@color/accent</item>

        <!--   warna untuk Title Text  -->
        <item name="android:textColorPrimary">@color/primary_text</item>

        <!--   warna untuk menu overflow icon (tiga titik vertical) -->
        <item name="android:textColorSecondary">@color/secondary_text</item>

    </style>

    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Base.Theme.ThemeApp">
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
    </style>

</resources>

Masih dalam folder values, buat sebuah file baru dan beri nama colors.xml, sehingga sekarang ada 3 file didalam folder values.

Salin kode dibawah ini dan masukkan kedalam file colors.xml.


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

<resources>
 <color name="primary">#00BCD4</color>
 <color name="primary_dark">#0097A7</color>
 <color name="primary_light">#FFCDD2</color>
 <color name="accent">#009688</color>
 <color name="primary_text">#000000</color>
 <color name="secondary_text">#ffffff</color>
 <color name="icons">#FFFFFF</color>
 <color name="divider">#B6B6B6</color>
</resources>

Styles.xml dalam folder values-v21

Sekarang pindah ke folder values-v21 dan buka file styles.xml. Salin kode dibawah ini kedalam file styles.xml.


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

    <style name="Base.Theme.ThemeApp" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/primary</item>

        <!--   warna gelap untuk status bar dan contextual app bars -->
        <item name="colorPrimaryDark">@color/primary_dark</item>

        <!--   theme UI controls seperti checkboxes dan text fields e.g. FloatActionButton -->
        <item name="colorAccent">@color/accent</item>

        <!--   warna untuk Title Text  -->
        <item name="android:textColorPrimary">@color/primary_text</item>

        <!--   warna untuk menu overflow icon (tiga titik vertical) -->
        <item name="android:textColorSecondary">@color/secondary_text</item>

    </style>

    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Base.Theme.ThemeApp">
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
    </style>

</resources>

Setelah semua langkah diatas selesai dikerjakan, coba jalankan aplikasinya. Jika tidak terdapat error, maka aplikasi akan tampak seperti pada gambar paling atas artikel ini. Untuk mengubah warna, buka file colors.xml dan lakukan perubahan warna sesuai dengan yang diinginkan.

Bagi Anda yang kesulitan dalam pembuatan project ini, saya telah menyediakan file project yang dapat diperoleh melalui link dibawah ini.

Download File Project

Demikian pembahasan tentang cara membuat toolbar material design pada AIDE. Semoga ini bermanfaat, selamat berkreasi dan selamat berkarya.

Inilah caraliyo.