Beranda
Android Programming

[Android] Cara Custom Font, Warna dan Ukuran Text Pada ActionBar Android




Text pada ActionBar Android secara default berwarna putih dengan style bold dan ukuran yang besar. Pada beberapa kasus desain UI saat ini ukuran text tak selalu besar dan berwarna putih. Contoh saat ini ada yang menggunakan warna dominan putih termasuk warna ActionBar maka text perlu dirubah menjadi warna Hitam pekat atau Abu - Abu.

   Pada kasus desain UI lainnya ternyata ukuran ActionBar lebih kecil dari ukuran default maka ukuran text pun perlu diperkecil. Artikel ini membahas cara custom Ukuran, Warna serta Font-Family pada Text ActionBar Android. Artikel ini custom ActionBar menggunakan Toolbar yang menggantikan ActionBar bawaan.

Setup Projek Penulis :
1. Menggunakan AndroidX
2. Menggunakan GoogleMaterial
3. Menggunakan ViewBinding

Jika tidak menggunakan Setup Projek di atas tidak mengapa, karena hanya perlu disesuaikan saja.

Langkah 1
Setup styles, ubah menjadi NoActionBar. Pada style Google Material menjadi seperti dibawah ini.
<style name="AppTheme.NoActionBar" parent="Theme.MaterialComponents.Light.DarkActionBar">

    //style standar seperti colorPrimary dan lain lain

    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

</style>
Untuk yang AppTheme standar hanya perlu pilih style yang NoActionBar

Langkah 2
Setup Styles, buat style baru untuk pengaturan font-family dan ukuran text Actionbar. Contoh dibawah ini :
<style name="title_actionbar" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">@dimen/font_size_big</item>
    <item name="android:fontFamily">@font/product_sans_bold</item>
</style>
Contoh diatas ukuran font penulis letakkan di file dimens.xml dan font Product Sans (Font Google, lihat);

Langkah 3
Penerapan Toolbar pada layout XML. Toolbar selalu berada dalam AppBarLayout, letakkan dan kunci AppBarLayout pada "TOP". Jika menggunakan Relative Layout maka kunci dengan alignParentTop. Contoh dibawah ini :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        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=".modules.auth.views.View_LengkapiProfil">
    <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/view_appbar"
            android:layout_alignParentTop="true"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            app:elevation="5dp">
        <androidx.appcompat.widget.Toolbar
                android:id="@+id/view_toolbar"
                android:layout_width="match_parent"
                android:layout_height="46dp"
                android:paddingStart="0dp"
                android:paddingEnd="10dp"
                android:background="?attr/colorPrimary"
                app:titleTextColor="@color/colorAccent"
                app:titleTextAppearance="@style/title_actionbar"/>
    </com.google.android.material.appbar.AppBarLayout>

    //Layout Konten Disini 
    //Below id view_toolbar

</RelativeLayout>
Untuk menerapkan warna, ukuran, serta font-family ada pada kode ini :
app:titleTextColor="@color/colorAccent"
app:titleTextAppearance="@style/title_actionbar"

Pada contoh ini penulis menggunakan warna text sama dengan warna accent. Penulis tidak tau mengapa properti titleTextColor ini hanya dapat diganti lewat layout XML pada Toolbar, tidak dapat dirubah melalui style pada file styles.xml. Style yang sudah dibuat pada langkah sebelumnya diterapkan dengan kode titleTextAppearance.

Langkah 4
Langkah Terakhir penerapan pada kelas Activity. Karena ActionBar bawaan dihilangkan maka perlu menerapkan Toolbar lewat kelas Activity contoh kode java dibawah ini :
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding viewMain = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(viewMain.getRoot());
        setSupportActionBar(viewMain.viewToolbar);
    }
}

Pada akhirnya setelah di build dan run menjadi seperti dibawah ini hasilnya :
Contoh Custom ActionBar

Masih mengalami masalah? Tidak berhasil? tulis masalah di komentar atau hubungi media sosial penulis.


Saya seorang programmer dengan fokus developer Web dan Android.