Saya mencoba menyesuaikan tampilan Toolbar di aplikasi saya.

Target
Saya ingin mengatur warna judul dan warna latar belakang Toolbar.
Saya membaca tentang cara kerja Tema dan Gaya, jadi saya dapat mencoba beberapa solusi. Saya menemukan bahwa warna judul dikelola oleh properti app:titleTextColor dan warna latar belakang dari atribut android:background.


Premis
Untuk mengetahui cara bertindak, perlu diketahui bagaimana gaya widget yang perlu kita modifikasi dikelola.

Gaya Toolbar dasar didefinisikan dalam gaya Widget.MaterialComponents.Toolbar seperti di bawah ini.

<style name="Widget.MaterialComponents.Toolbar" parent="Widget.AppCompat.Toolbar">
    <item name="titleTextAppearance">?attr/textAppearanceHeadline6</item>
    <item name="titleTextColor">?android:attr/textColorPrimary</item>
    <item name="subtitleTextAppearance">?attr/textAppearanceSubtitle1</item>
    <item name="subtitleTextColor">?android:attr/textColorSecondary</item>
    <!-- Overrides minimum height in landscape to avoid headline6 and subtitle1 height concerns. -->
    <item name="android:minHeight">@dimen/mtrl_toolbar_default_height</item>
    <item name="maxButtonHeight">@dimen/mtrl_toolbar_default_height</item>
</style>

Di sini nilai titleTextColor diatur ke ?android:attr/textColorPrimary.


Jadi upaya pertama saya hanyalah menambahkan ovverride atribut android:textColorPrimary di tema aplikasi saya.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorPrimaryVariant">@color/purple_700</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>

    <!-- Customize your theme here. -->
    <item name="android:textColorPrimary">@color/white</item>
</style>

Hasil: Ini berhasil.

Untuk juga mengatur latar belakang, saya memutuskan untuk membuat gaya Toolbar khusus tempat meletakkan definisi latar belakang, jadi saya mengubah tema saya seperti di bawah ini.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...    
    <!-- Customize your theme here. -->
    <item name="toolbarStyle">@style/MyToolbarStyle</item>
</style>
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="android:background">?attr/colorPrimary</item>
</style>

Hasil: Ini tidak berhasil. android:background diterapkan tetapi android:textColorPrimary tidak.

Menyetel nilai titleTextColor langsung di dalam MyToolbarStyle berfungsi.

<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
    <item name="titleTextColor">?attr/colorOnPrimary</item>
    <item name="android:background">?attr/colorPrimary</item>
</style>

Saya juga mencoba mengatur tema bilah alat tempat saya mengganti Android attribute:textColorPrimary, seperti di bawah ini.

<style name="Base_ToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="android:theme">@style/Base_ToolbarTheme</item>
</style>

<style name="Base_ToolbarTheme">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="android:textColorSecondary">@color/white</item>
</style>

Hasil: Ini juga tidak berhasil.

Sekarang saya agak bingung dengan hasil tes saya.

Mengapa tidak mungkin mengganti android:textColorPrimary dalam gaya khusus?

0
blow 4 April 2021, 15:40

1 menjawab

Jawaban Terbaik

Untuk menerapkan style Anda dapat menggunakan (dan atribut toolbarStyle menerapkan gaya ini ke semua Toolbar) style atribut:

   <androidx.appcompat.widget.Toolbar
         style="@style/MyToolbarStyle"

Dengan:

<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
    <item name="titleTextColor">?attr/colorOnPrimary</item>
    <item name="android:background">?attr/colorPrimary</item>
</style>

Karena titleTextColor adalah properti yang didefinisikan dalam Toolbar.

Untuk menerapkan hamparan tema Anda dapat menggunakan atribut android:theme:

   <androidx.appcompat.widget.Toolbar
        android:theme="@style/MyToolbarThemeOverlay"

Dengan

<style name="MyToolbarThemeOverlay">
    <item name="android:textColorPrimary">@color/white</item>
</style>

Karena android:textColorPrimary adalah atribut yang ditentukan pada tingkat tema.

Jika Anda ingin mengganti atribut tema secara langsung dalam suatu gaya, Anda harus menggunakan atribut materialThemeOverlay:

<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="materialThemeOverlay">@style/MyToolbarThemeOverlay</item>
</style>
1
Gabriele Mariotti 4 April 2021, 17:50