Action bar atau disebut juga dengan app bar adalah salah satu elemen yang paling penting dalam activity app kita, karena Action Bar menyediakan struktur visual dan elemen yang interaktif bagi user. Dengan menggunakan app bar akan membuat app kita konsisten dengan app Android yang lain, membuat user bisa memahami dengan cepat bagaimana cara kerja app kita dan membuat experience yang baik. Fungsi utama app bar adalah sebagai berikut:
- Memberikan app kita identitas dan menunjukkan dimana lokasi user di app kita
- Mengakses tindakan-tindakan yang penting, misalkan search
- Mendukung navigasi dan perubahan view (misalkan dengan tab atau drop-down lists).
Untuk membuat app bar kita akan menggunakan widget ‘Toolbar’ dari ‘v7 appcompat’. Ada beberapa cara lain untuk membuat app bar, misalkan, beberapa theme bisa untuk membuat ‘ActionBar’ sebagai app bar secara default, tetapi menggunakan ‘Toolbar app compat’ akan memudahkan untuk men-set app bar karena kompatibel untuk berjalan di banyak perangkat, dan juga memberi kita ruang untuk meng-kustom app bar kita saat pembuatan app.
Pada saat Android 3.0 (API level 11), semua activity yang menerapkan theme default akan memiliki ‘ActionBar’ sebagai app bar. Tetapi, fitur-fitur dalam app bar secara bertahap ditambahkan ke ‘ActionBar’ native ini pada berbagai rilis Android. Akibatnya, ‘ActionBar’ native ini bertindak berbeda-beda tergantung pada versi sistem Android yang digunakan. Sebaliknya, fitur-fitur terbaru akan ditambahkan ke ‘Toolbar’ appcompat dan tersedia pada perangkat apapun yang bisa menggunakannya.
Karena alasan inilah kita sebaiknya menggunakan class ‘Toolbar’ untuk mengimplementasikan app bar activity kita. Dengan menggunakan Toolbar akan memastikan bahwa app kita akan konsisten pada perangkat apapun.
Berikut latihan untuk membuat App bar atau action bar menggunakan ‘Toolbar’:
1. Tambahkan ‘v7 appcompat’ support library (kalau belum ada) ke project. Silahkan akses link berikut tentang ‘Support Library Setup’
2. Pastikan bahwa activity kita ‘extends’ AppCompatActivity
public class MainActivity extends AppCompatActivity {
...
}
Catatan:Lakukan perubahan ini untuk setiap activity pada app kita yang menggunakan ‘Toolbar’ sebagai app bar.
3. Di dalam file AndroidManifest.xml, tambahkan di dalam elemen untuk menggunakan salah satu theme dari ‘NoActionBar’ appcompat. Dengan menggunakan salah satu theme ini akan mencegah app untuk menggunakan class ‘ActionBar’ native untuk menampilkan app bar.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="id.co.blogspot.diansano.myactionbar">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
4. Kita modifikasi dan tambahkan pada file layout activity widget ‘Toolbar’. Misalnya, kode berikut akan menambahkan ‘Toolbar’ yang tampilannya seolah mengambang di atas activity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="id.co.blogspot.diansano.myactionbar.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
Letakkan posisi toolbar diujung atas activity karena kita menggunakannya sebagai app bar
5. Di dalam method ‘onCreate()’ kita panggil method ‘setSupportActionBar()’, dan melewatkan toolbar activity. Method ini akan men-set tollbar sebagai app bar untuk activity kita. Contohnya adalah seperti berikut:
package id.co.blogspot.diansano.myactionbar;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
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 myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
ActionBar actionBar = getSupportActionBar();
//actionBar.hide(); //utk menyembunyikan
actionBar.show(); //utk memunculkan lagi
}
}
6. Jalankan di emulator Android Studio
Penjelasan:
Atribut ‘android:theme’ mengijinkan kita untuk menonaktifkan tampilan Action Bar native pada activity kita (android:theme="@style/Theme.AppCompat.Light.NoActionBar). Sebagai gantinya kita menggunakan widget ‘Toolbar’ di layout activity kita. Kemudian di dalam file utama java, kita set supaya toolbar tersebut sebagai app bar pada activity kita dengan kode berikut:
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
Untuk mengakses berbagai utilitas dari app tersebut misalkan ingin menampilkan dan menyembunyikan app bar , kita bisa menggunakan dari class ‘ActionBar’ v7 appcompat. Untuk menggunakan method-method dar class ‘ActionBar’ untuk memodifikasi app bar, kita harus membuat instans dari class ‘ActionBar’ dengan memanggil method ‘getSupportActionBar()’. Dan setelah itu method-method dari class ‘ActionBar’ bisa digunakan untuk memodifikasi app bar seperti berikut:
package id.co.blogspot.diansano.myactionbar;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
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 myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
ActionBar actionBar = getSupportActionBar();
//actionBar.hide(); //utk menyembunyikan
actionBar.show(); //utk memunculkan lagi
}
}
No comments:
Post a Comment