मैं appcompat-v7 टूलबार को Theme.AppCompat.Light.DarkActionBar की शैली कैसे करूँ?


105

मैं Theme.AppCompat.Light.DarkActionBarनए समर्थन पुस्तकालय टूलबार के साथ फिर से देखने की कोशिश कर रहा हूँ ।

अगर मैं चुनता Theme.AppCompat.Lightहूं तो मेरा टूलबार हल्का होगा और अगर मैं चुनूं Theme.AppCompatतो अंधेरा हो जाएगा। (तकनीकी रूप से आपको .NoActionBarसंस्करण का उपयोग करना होगा लेकिन जहां तक ​​मैं बता सकता हूं कि एकमात्र अंतर है

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

अब वहाँ कोई नहीं है, Theme.AppCompat.Light.DarkActionBarलेकिन भोलेपन से मैंने सोचा कि यह सिर्फ अपना खुद का बनाने के लिए काफी अच्छा होगा

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

हालाँकि इसके साथ मेरे टूलबार अभी भी Lightथीम पर आधारित हैं। मैंने अब डार्क (बेस) थीम और लाइट थीम को मिक्स करने के विभिन्न संयोजनों को आजमाया है, लेकिन मुझे अभी ऐसा कॉम्बिनेशन नहीं मिल रहा है जिससे मुझे लाइट बैकग्राउंड सब कुछ मिल जाए लेकिन टूलबार।

वहाँ AppCompat.Light.DarkActionBarआयात के साथ देखो पाने का एक तरीका है android.support.v7.widget.Toolbar?

जवाबों:


216

एक Light.DarkActionBarक्लोन के लिए टूलबार को स्टाइल करने के लिए अनुशंसित तरीका Theme.AppCompat.Light.DarkActionbarमाता-पिता / ऐप थीम के रूप में उपयोग करना होगा और डिफ़ॉल्ट एक्शनबेर को छिपाने के लिए शैली में निम्नलिखित विशेषताओं को जोड़ना होगा:

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

फिर अपने टूलबार के रूप में निम्नलिखित का उपयोग करें:

<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>

आगे के संशोधनों के लिए, आप शैलियों का विस्तार करेंगे ThemeOverlay.AppCompat.Dark.ActionBar और ThemeOverlay.AppCompat.Lightभीतर लोगों की जगह AppBarLayout->android:themeऔर Toolbar->app:popupTheme। यह भी ध्यान दें कि यह आपके ऊपर उठाएगा ?attr/colorPrimaryयदि आपने इसे अपने मुख्य शैली में सेट किया है तो आपको एक अलग पृष्ठभूमि रंग मिल सकता है।

आपको इसका एक अच्छा उदाहरण मिलेगा वर्तमान प्रोजेक्ट टेम्पलेट Empty Activityमें एंड्रॉइड स्टूडियो (1.4+) के साथ।


1
अच्छा हाँ आप कर सकते हैं। "यदि आप उन शैलियों से विरासत प्राप्त करना चाहते हैं जो आपने खुद को परिभाषित किया है, तो आपको मूल विशेषता का उपयोग करने की आवश्यकता नहीं है। इसके बजाय, उस शैली का नाम उपसर्ग करें जिसे आप अपनी नई शैली के नाम से विरासत में प्राप्त करना चाहते हैं, जिसे एक अवधि के अनुसार अलग किया गया है। । " डेवलपर
.android.com

1
साथ ही आपके द्वारा पोस्ट की गई xml का उपयोग करने पर मुझे सफेद टेक्स्ट के साथ एक सफेद टूलबार मिलता है या अगर मैं थीम को बदलकर ThemeOverlay.AppCompat.ActionBarब्लैक टूल के साथ व्हाइट टूलबार प्राप्त करता हूं तो यह अच्छी तरह से काम नहीं करता है। के बारे में प्रणाली चिंताओं की तरह प्रतीत नहीं होता है <item name="android:colorBackground">@color/background_material_dark</item>में Base.ThemeOverlay.AppCompat.Dark। लेकिन मैं खुदाई करता रहूंगा। (और मैंने वह पृष्ठ पढ़ा है। यह मेरे शुरुआती बिंदुओं में से एक था। फिर भी यह काम नहीं करता है।)
सीमांत

1
उसके लिए माफ़ करना। टूलबार की पृष्ठभूमि का रंग सरलता के लिए छोड़ दिया और परिणामों का परीक्षण नहीं किया। मैंने तदनुसार उत्तर को संशोधित किया है। मुझे यह केवल शैलियों का उपयोग करके ऐसा करने का तरीका नहीं मिला है। जैसा कि मेरे ऐप में अलग-अलग रंग योजनाएं हैं, मैं android:background="?attr/colorPrimary"टूलबार और <item name="colorPrimary">@color/background_material_dark</item>अपनी शैली में उपयोग करता हूं इसलिए यह स्वचालित रूप से प्राथमिक ऐप रंग को एडेप्ट करता है।
oRRs

1
यह ऐप कॉम्पिटिटर 23 में अब काम नहीं कर रहा है और शीर्षक काला है और सफेद नहीं है: /
राशद। जेड

21
वहाँ विषयों और शैलियों के इस जंगल पर एक पकड़ पाने के लिए कोई रास्ता नहीं है?
axd

72

संपादित करें: Appcompat-v7: 22.1.1 में अपडेट होने के बाद और मेरी शैलियों के AppCompatActivityबजाय उपयोग करना। ActionBarActivityxml जैसा दिखता है:

<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>

नोट: इसका मतलब है कि मैं Toolbarफ्रेमवर्क द्वारा प्रदान किया गया उपयोग कर रहा हूं (XML फ़ाइल में शामिल नहीं है)।

इसने मेरे लिए काम किया:
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>

अपडेट: गैब्रियल मारियोटी के ब्लॉग का एक उद्धरण ।

नए टूलबार के साथ आप एक शैली और एक थीम लागू कर सकते हैं। वे भिन्न हैं! टूलबार दृश्य के लिए शैली स्थानीय है, उदाहरण के लिए पृष्ठभूमि का रंग। एप्लिकेशन: थीम टूलबार में फुलाए गए सभी यूआई तत्वों के लिए वैश्विक है, उदाहरण के लिए शीर्षक और आइकन का रंग।


"त्रुटि: कोई संसाधन नहीं मिला जो दिए गए नाम से मेल खाता हो: attr 'colorPrimary'।" हम यहां appcompat_v7 का उपयोग करने के बारे में बात कर रहे हैं।
यार

मेरे लिए, यह केवल लॉलीपॉप उपकरणों पर काम करता है। प्री-लॉलीपॉप पर न केवल एक्शन बार, बल्कि सभी गतिविधि डार्क थीम का उपयोग करती हैं, जो कि मैं नहीं चाहती थी। मैंने उत्थान किया, लेकिन अंत में मैंने एकल टूलबार दृश्य को स्टाइल करते हुए, ओआरआरएस उत्तर का उपयोग किया।
लोरेंजो-एस

@ lorenzo-s मैंने appcompat के नवीनतम संस्करण के लिए अपना जवाब अपडेट किया। मैंने इसे एंड्रॉइड 4.3 के साथ गैलेक्सी नेक्सस पर भी परीक्षण किया और यह काम कर रहा है
लॉर्डरेडेनएमके

31

ठीक है इस समस्या में ज्यादा समय तक डूबने के बाद मैं जिस तरह की उम्मीद कर रहा था उसे पाने में कामयाब रहा। मैं इसे एक अलग उत्तर बना रहा हूं ताकि मुझे सब कुछ एक ही स्थान पर मिल सके।

यह कारकों का एक संयोजन है।

सबसे पहले, सिर्फ थीम के माध्यम से अच्छा खेलने के लिए टूलबार प्राप्त करने का प्रयास न करें। यह असंभव मालूम पड़ता है।

तो अपने टूलबार में स्पष्ट रूप से थीम लागू करें जैसे कि ओआरआरएस उत्तर में

लेआउट / 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" />

हालाँकि यह जादू की चटनी है। वास्तव में पृष्ठभूमि रंग प्राप्त करने के लिए मैं backgroundआपके टूलबार थीम में विशेषता को ओवरराइड करने की उम्मीद कर रहा था

मान / styles.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>

फिर बस अपने टूलबार लेआउट को अपने अन्य लेआउट में शामिल करें

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

और तुम जाने के लिए अच्छा हो

आशा है कि यह किसी और की मदद करता है ताकि आपको इस पर उतना समय खर्च न करना पड़े जितना मेरे पास है।

(अगर कोई यह पता लगा सकता है कि सिर्फ थीम का उपयोग करके इस काम को कैसे बनाया जाए, अर्थात लेआउट फ़ाइलों में स्पष्ट रूप से थीम लागू न करने पर, मैं ख़ुशी से उनके जवाब का समर्थन करूँगा)

संपादित करें:

तो जाहिरा तौर पर एक और अधिक पूर्ण उत्तर पोस्ट करना एक डाउनवोट चुंबक था इसलिए मैं ऊपर दिए गए अधूरे जवाब को स्वीकार करूंगा लेकिन अगर किसी को वास्तव में इसकी आवश्यकता है तो इस उत्तर को यहां छोड़ दें। हालांकि यह आपको खुश करता है या नहीं, तो इसे कमज़ोर महसूस करते रहें।


2
मेरे AppTheme में मैंने अभी डाला है <item name="colorPrimary">@color/colorPrimary</item> तो मैं android:background="?attr/colorPrimary"अपने टूलबार विजेट में विशेषता का उपयोग करने के लिए स्वतंत्र हूं।
लेम्युएल

क्या मुझे पता है कि आपको "@ रंग / सामग्री_ग्रे_200" की परिभाषा कैसे मिलती है?
चोक यान चेंग

मैं बिल्कुल याद नहीं है जहां लेकिन किसी एक colors.xml के आधार पर फ़ाइल बनाया google.com/design/spec/style/color.html#color-color-palette यह अब नहीं मिल रहा है, हालांकि
liminal

1
@ आपराधिक यदि आप का उपयोग करते हैं @android:color/transparentतो आप उस मुद्दे से बचते हैं जब आप लंबे मेनू पर क्लिक करते हैं / मेनू आइटम पर पाठ के चारों ओर एक बॉक्स होता है। यदि भविष्य में प्रकाश की पृष्ठभूमि का रंग बदलता है, तो यह भी भविष्य में इसका प्रमाण देता है।
रयान आर

जब आप CollapsingToolbarLayout का उपयोग करते हैं तो काम नहीं करता है।
arekolek

17

मुझे यह करने के लिए सबसे साफ तरीका ' ThemeOverlay.AppCompat.Dark.ActionBar ' का बच्चा पैदा करना है । उदाहरण में, मैंने टूलबार के बैकग्राउंड कलर को RED और टेक्स्ट के कलर को BLUE में सेट किया है।

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

तब आप टूलबार में अपनी थीम लागू कर सकते हैं:

<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
मेरे भगवान यह था! textColorPrimary! ऐसा क्यों था कि कहीं भी
ईश्वर

12

उपकरण पट्टी शैली को अनुकूलित के लिए, पहले उपकरण पट्टी कस्टम Widget.AppCompat.Toolbar इनहेरिट शैली, ओवरराइड गुण बनाने और उसके बाद कस्टम अनुप्रयोग विषय में जोड़ने के रूप में नीचे दिखाया गया है, को देखने के http://www.zoftino.com/android-toolbar-tutorial के लिए अधिक जानकारी टूल बार और शैलियाँ।

   <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

Yout इसे नीचे आज़मा सकते हैं।

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

और विस्तार तत्व आप उन्हें अंदर पा सकते हैं https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

यहां कुछ और कर रहे हैं: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation

आशा है इससे आपको सहायता मिलेगी।


1
हाँ। उन लोगों के साथ जहाँ तक मुझे बैकग्राउंड कलर सही मिल रहा है और मैं अंत में यह जान पाया कि टाइटल-रंगों को सही कैसे प्राप्त किया जा सकता है। हालाँकि अभी हत्यारे की बात यह है कि मैं यह पता नहीं लगा सकता कि यह ओवरफ़्लो बटन कहाँ से मिला है। कोई फर्क नहीं पड़ता कि मैं इसे बदल देता हूं यह इतना काला रहता है कि यह मेरे अंधेरे एक्शनबार के खिलाफ नहीं दिखता है। अगर मैं विषय को अंधेरे में बदल देता हूं तो यह हल्का है और अच्छी तरह से दिखाता है। चाहे मैं कितना भी
खोदूं,

0

अर्नव राव के समान, लेकिन एक अलग माता-पिता के साथ:

    <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>

इस दृष्टिकोण के साथ, टूलबार की उपस्थिति पूरी तरह से ऐप शैलियों में परिभाषित की गई है, इसलिए आपको प्रत्येक टूलबार पर कोई स्टाइल लगाने की आवश्यकता नहीं है।


2
दरअसल android:toolbarStyleएपीआई 21+ के लिए है android.widget.ToolbartoolbarStyleके लिए AppCompat है android.support.v7.widget.Toolbar
यूजेन पिंचेक

मैंने सोचा था कि एंड्रॉइड स्टूडियो मुझे इसके साथ एक मुद्दा दे रहा है, लेकिन एक दूसरे परीक्षण पर, आप सही हैं! यह बहुत अच्छी खबर है - मैं अपने minSDK को फिर से 19 पर दस्तक देने में सक्षम हूं, और ऐसा लग रहा है कि मेरा टूलबार स्टाइल अभी भी ठीक काम कर रहा है! धन्यवाद!
क्रेग्मज

अभी ध्यान दिया! अभी भी शैलियों बनाम विषयों की गलतफहमी है । MyToolbarशैली को Widget.AppCompat.Toolbarएक विषय नहीं होना चाहिए ।
यूजेन पिंचेक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.