Bagaimana cara saya menata Appcompat-v7 Toolbar seperti Theme.AppCompat.Light.DarkActionBar?


105

Saya mencoba membuat ulang tampilan Theme.AppCompat.Light.DarkActionBardengan pustaka dukungan baru Toolbar.

Jika saya memilih Theme.AppCompat.Lighttoolbar saya akan terang dan jika saya memilih Theme.AppCompatakan menjadi gelap. (Secara teknis Anda harus menggunakan .NoActionBarversi tersebut tetapi sejauh yang saya tahu satu-satunya perbedaan adalah

<style name="Theme.AppCompat.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

Sekarang tidak ada Theme.AppCompat.Light.DarkActionBartetapi secara naif saya pikir itu akan cukup baik untuk membuat saya sendiri

<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

Namun dengan ini bilah alat saya masih Lightbertema. Saya telah menghabiskan berjam-jam sekarang mencoba kombinasi yang berbeda untuk mencampur tema Gelap (dasar) dan tema Terang tetapi saya tidak dapat menemukan kombinasi yang akan membuat saya memiliki latar belakang terang pada segala hal kecuali bilah alat.

Apakah ada cara untuk mendapatkan AppCompat.Light.DarkActionBartampilan dengan import android.support.v7.widget.Toolbar?

Jawaban:


216

Cara yang direkomendasikan untuk menata Toolbar untuk Light.DarkActionBarklon adalah dengan menggunakan Theme.AppCompat.Light.DarkActionbarsebagai induk / tema aplikasi dan menambahkan atribut berikut ke gaya untuk menyembunyikan ActionBar default:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Kemudian gunakan yang berikut ini sebagai Toolbar Anda:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

Untuk modifikasi lebih lanjut, Anda akan membuat gaya yang memperluas ThemeOverlay.AppCompat.Dark.ActionBardan ThemeOverlay.AppCompat.Lightmengganti gaya di dalam AppBarLayout->android:themedan Toolbar->app:popupTheme. Juga perhatikan bahwa ini akan mengambil Anda ?attr/colorPrimaryjika Anda telah mengaturnya dalam gaya utama Anda sehingga Anda mungkin mendapatkan warna latar belakang yang berbeda.

Anda akan menemukan contoh yang bagus untuk ini di template proyek saat ini dengan Empty ActivityAndroid Studio (1.4+).


1
Ya, Anda bisa. "Jika Anda ingin mewarisi dari gaya yang Anda tentukan sendiri, Anda tidak harus menggunakan atribut induk. Sebagai gantinya, cukup awali nama gaya yang ingin Anda warisi ke nama gaya baru Anda, dipisahkan oleh titik . " developer.android.com/guide/topics/ui/themes.html#Inheritance
Liminal

1
Juga menggunakan xml yang Anda posting, saya mendapatkan bilah alat putih dengan teks putih atau jika saya mengubah tema menjadi ThemeOverlay.AppCompat.ActionBarbilah alat putih dengan teks hitam sehingga tampaknya tidak berfungsi dengan baik. Sepertinya sistem tidak peduli dengan yang <item name="android:colorBackground">@color/background_material_dark</item>masuk Base.ThemeOverlay.AppCompat.Dark. Tapi saya akan terus menggali. (Dan saya telah membaca halaman itu. Itu adalah salah satu titik awal saya. Sepertinya masih belum berhasil.)
Liminal

1
Maaf soal itu. Meninggalkan warna latar belakang Toolbar agar lebih sederhana dan belum menguji hasilnya. Saya telah merevisi jawabannya. Saya belum menemukan cara untuk melakukan ini hanya dengan menggunakan gaya. Karena aplikasi saya memiliki skema warna yang berbeda, saya gunakan android:background="?attr/colorPrimary"di Toolbar dan <item name="colorPrimary">@color/background_material_dark</item>dalam gaya saya sehingga secara otomatis menyesuaikan warna aplikasi utama.
oRR

1
ini tidak berfungsi lagi di app compat 23 dan judulnya hitam dan bukan putih: /
Rashad.Z

21
adakah cara untuk menguasai rimba tema dan gaya ini?
Axd

72

Edit: Setelah memperbarui ke appcompat-v7: 22.1.1 dan menggunakan AppCompatActivitysebagai ganti ActionBarActivitygaya saya.xml terlihat seperti:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Catatan: Ini berarti saya menggunakan yang Toolbardisediakan oleh kerangka kerja (TIDAK termasuk dalam file XML).

Ini berhasil untuk saya:
file styles.xml:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Pembaruan: Kutipan dari blog Gabriele Mariotti .

Dengan Toolbar baru Anda dapat menerapkan gaya dan tema. Mereka berbeda! Gayanya bersifat lokal untuk tampilan Toolbar, misalnya warna latar belakang. Aplikasi: tema malah bersifat global untuk semua elemen ui yang digelembungkan di Toolbar, misalnya warna judul dan ikon.


"Kesalahan: Tidak ada sumber daya yang cocok dengan nama yang diberikan: attr 'colorPrimary'." Kita berbicara tentang menggunakan appcompat_v7 di sini.
Yar

Bagi saya, ini hanya berfungsi di perangkat Lollipop. Pada pra-lollipop tidak hanya bilah tindakan, tetapi semua aktivitas menggunakan tema gelap, yang bukan itu yang saya inginkan. Saya memberi suara positif, tetapi pada akhirnya saya menggunakan jawaban oRR, menata tampilan Toolbar tunggal.
lorenzo-s

@ lorenzo-s Saya memperbarui jawaban saya untuk appcompat versi terbaru. Saya juga mengujinya di Galaxy Nexus dengan Android 4.3 dan berfungsi
LordRaydenMK

31

Ok setelah menghabiskan banyak waktu ke dalam masalah ini, inilah cara saya berhasil mendapatkan penampilan yang saya harapkan. Saya membuatnya menjadi jawaban terpisah sehingga saya bisa mendapatkan semuanya di satu tempat.

Ini kombinasi beberapa faktor.

Pertama, jangan mencoba membuat toolbar berfungsi dengan baik hanya melalui tema. Sepertinya tidak mungkin.

Jadi terapkan tema secara eksplisit ke Toolbar Anda seperti dalam jawaban oRR

layout / toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/Dark.Overlay"
    app:popupTheme="@style/Dark.Overlay.LightPopup" />

Bagaimanapun ini adalah saus ajaib. Untuk benar-benar mendapatkan warna latar belakang yang saya harapkan Anda harus mengganti backgroundatribut di tema Toolbar Anda

nilai / gaya.xml:

<!-- 
    I expected android:colorBackground to be what I was looking for but
    it seems you have to override android:background
-->
<style name="Dark.Overlay" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

<style name="Dark.Overlay.LightPopup" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:background">@color/material_grey_200</item>
</style>

lalu masukkan saja tata letak bilah alat di tata letak lainnya

<include android:id="@+id/mytoolbar" layout="@layout/toolbar" />

dan Anda siap untuk pergi.

Semoga ini bisa membantu orang lain sehingga Anda tidak perlu menghabiskan banyak waktu untuk ini seperti saya.

(jika ada yang bisa mengetahui bagaimana membuat ini bekerja hanya dengan menggunakan tema, yaitu tidak harus menerapkan tema secara eksplisit dalam file tata letak, saya akan dengan senang hati mendukung jawaban mereka)

EDIT:

Jadi tampaknya memposting jawaban yang lebih lengkap adalah magnet downvote jadi saya akan menerima jawaban tidak lengkap di atas tetapi tinggalkan jawaban ini di sini jika seseorang benar-benar membutuhkannya. Jangan ragu untuk terus downvoting jika itu membuat Anda bahagia.


2
Di AppTheme saya, saya hanya meletakkan <item name="colorPrimary">@color/colorPrimary</item> Maka saya bebas menggunakan android:background="?attr/colorPrimary"atribut di widget Toolbar saya.
lemuel

Bolehkah saya tahu bagaimana Anda mendapatkan definisi "@ color / material_grey_200"?
Cheok Yan Cheng

Saya tidak ingat persis di mana tetapi seseorang membuat file colors.xml berdasarkan google.com/design/spec/style/color.html#color-color-palette tidak dapat menemukannya sekarang
Batas

1
@Liminal Jika Anda menggunakan @android:color/transparentAnda menghindari masalah ketika Anda menekan lama / klik pada item menu ada kotak di sekitar teks. Ini juga membuktikan masa depan jika warna latar belakang cahaya berubah di masa depan.
Ryan R

Tidak berfungsi saat Anda menggunakan CollapsingToolbarLayout.
arekolek

17

Cara terbersih yang saya temukan untuk melakukan ini adalah membuat anak ' ThemeOverlay.AppCompat.Dark.ActionBar '. Dalam contoh, saya mengatur warna latar belakang Toolbar menjadi MERAH dan warna teks menjadi BIRU.

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#FF0000</item>
    <item name="android:textColorPrimary">#0000FF</item>
</style>

Anda kemudian dapat menerapkan tema Anda ke bilah alat:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:theme="@style/MyToolbar"
    android:minHeight="?attr/actionBarSize"/>

6
tuhanku ini dia! textColorPrimary! Mengapa ini sangat sulit ditemukan di mana pun
Muppet

12

Untuk menyesuaikan gaya bilah alat, pertama-tama buat gaya khusus bilah alat yang mewarisi Widget.AppCompat.Toolbar, timpa properti, lalu tambahkan ke tema aplikasi khusus seperti yang ditunjukkan di bawah ini, lihat http://www.zoftino.com/android-toolbar-tutorial untuk lebih banyak bilah alat informasi dan gaya.

   <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/MyToolBarStyle</item>
    </style>
    <style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">#80deea</item>
        <item name="titleTextAppearance">@style/MyTitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/MySubTitleTextAppearance</item>
    </style>
    <style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">35dp</item>
        <item name="android:textColor">#ff3d00</item>
    </style>
    <style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">30dp</item>
        <item name="android:textColor">#1976d2</item>
    </style>

7

Anda dapat mencobanya di bawah ini.

<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
    <!-- your code here -->
</style>

Dan elemen detail Anda dapat menemukannya di https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

Berikut adalah beberapa lebih: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

Semoga ini bisa membantu Anda.


1
Ya. Dengan itu saya bisa mendapatkan warna latar belakang yang benar dan akhirnya saya menemukan cara untuk mendapatkan warna judul yang benar. Namun hal yang mematikan saat ini adalah saya tidak tahu dari mana tombol overflow mendapatkan warnanya. Tidak peduli apa yang saya ubah, tetap begitu gelap sehingga tidak terlihat pada bilah tindakan gelap saya. Jika saya mengubah tema menjadi gelap maka itu terang dan muncul dengan baik.Namun tidak peduli seberapa banyak saya menggali, saya tidak tahu bagaimana membuat ikon luapan muncul terang ketika saya mulai dengan tema terang
Liminal

0

Mirip dengan Arnav Rao, tetapi dengan orang tua yang berbeda:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="toolbarStyle">@style/MyToolbar</item>
</style>

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#ff0000</item>
</style>

Dengan pendekatan ini, tampilan Toolbar sepenuhnya ditentukan dalam gaya aplikasi, jadi Anda tidak perlu menempatkan gaya apa pun pada setiap toolbar.


2
Sebenarnya android:toolbarStyleAPI 21+ untuk android.widget.Toolbar. toolbarStyleadalah AppCompat untuk android.support.v7.widget.Toolbar.
Eugen Pechanec

Saya pikir Android Studio memberi saya masalah, tetapi pada pengujian kedua, Anda benar! Itu berita bagus - Saya bisa menurunkan minSDK saya menjadi 19 lagi, dan sepertinya toolbarStyle saya masih berfungsi dengan baik! Terima kasih!
craigmj

Baru sadar! Masih ada kesalahpahaman tentang gaya vs. tema . MyToolbargaya tidak harus memperluas Widget.AppCompat.Toolbartema.
Eugen Pechanec
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.