Hay guys, kali ini kita akan belajar bagaimana membuat custom Toolbar yaitu membuat TitleBar menjadi berada di tengah seperti layaknya TitleBar pada aplikasi Instagram atau Go-Jek. Hasilnya seperti ini.
Langkah-langkah:
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangDi Android Studio, buat project baru File => New Project. Buka gradle module dan tambahkan design support library di bagian dependency seperti dibawah ini.
|
1 2 3 4 |
dependencies { compile 'com.android.support:appcompat-v7:25.1.0' compile 'com.android.support:design:25.1.0' } |
Kemudian buka folder res => values => styles.xml dan ubah menjadi noActionBar seperti di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 |
<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:colorBackground">@color/colorBackground</item> </style> </resources> |
Buka layout layout Main Activity kalian (Activity_Main.xml) dan tambahkan kode dibawah ini kedalam layout tersebut. Di code ini dapat kalian lihat kita menggunakan wrapper AppBar yang berguna untuk membuat toolbar kita terlihat menggunakan konsep material design, apabila kalian tidak menggunakan wraapper Appbar maka elevation akan hilang. So, kalian bisa bereksperimen sendiri menggunakan wrapper AppBar atau tidak. Lalu di dalam AppBar kita menggunakan wrapper Toolbar sebagai pembungkus isi konten dari toolbar kita, yaitu ImageView. ImageView ini bisa kalian ganti menggunakan TextView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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" tools:context="com.dicoding.customtitlebar.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorAccent" android:minHeight="?attr/actionBarSize"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_main" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:minHeight="?attr/actionBarSize" app:theme="@style/AppTheme"> <ImageView android:id="@+id/toolbar_title" android:layout_width="100dp" android:layout_height="40dp" style="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" android:src="@drawable/dicoding_logo" android:layout_gravity="center"/> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> </RelativeLayout> |
Terakhir, kita terapkan toolbar nya secara programmatically di file Activity java (MainActivity.java). Kodenya seperti ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public class MainActivity extends AppCompatActivity { private Toolbar toolbar; private ImageView toolbarTitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //bind view toolbar = (Toolbar) findViewById(R.id.toolbar_main); toolbarTitle = (ImageView) findViewById(R.id.toolbar_title); //set toolbar setSupportActionBar(toolbar); //menghilangkan titlebar bawaan if (toolbar != null) { getSupportActionBar().setDisplayShowTitleEnabled(false); } } } |
Selesai! Silahkan run dan lihat hasilnya.
Semoga bermanfaat ya, learners. Ingin belajar lebih banyak? Yuk langsung cek Dicoding Academy Belajar Membangun Aplikasi Android Native (www.dicoding.com/academies/26), materi yang dibuat oleh Google Developer Expert Indonesia.
Tunggu tips kami selanjutnya !
