i am trying to add Custom background to AppCompat action bar. Here is my style
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#drawable/top_bar_bg</item>
</style>
I am using AppTheme as my Theme. It still shows default dark background. What am i missing here?
In res/values/styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/actionbar_background</item>
</style>
</resources>
In res/values-v11/styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/actionbar_background</item>
</style>
</resources>
Related
I've created a project and added 2 buttons in activity_main.xml but they have different colors in layout preview and the actual app. How come?
There are 2 files under themes:
themes.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="NecklaceShowcase" parent="Theme.MaterialComponents.Light.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. -->
</style>
</resources>
and themes.xml (night)
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="NecklaceShowcase">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_200</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_200</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
The layout preview is using the theme you have set in your themes.xml file.
When you run the app the btn2 is switching to red because in your activity_main.xml it is setting its background to: halo_red_light.
I'm unable to tell why the other button is changed to grey this may have been set in your activity class.
You can read more here
I tried to customise the dividers between the tabs of the TabBar, but it seems that the customisation isn't working properly!
Here's the link to the screenshot: http://imgur.com/vhcwIGx
Here's my styles.xml file's code:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
<item name="android:actionBarTabTextStyle">#style/ActionBarTabTextStyle</item>
<item name="android:actionBarTabBarStyle">#style/ActionBarTabBarStyle</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/ActionBarStyle</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle</item>
<item name="actionBarTabTextStyle">#style/ActionBarTabTextStyle</item>
<item name="actionBarTabBarStyle">#style/ActionBarTabBarStyle</item>
</style>
<!-- ActionBar styles -->
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar">
<!-- Customize your theme here. -->
<item name="android:background">#color/light_purple</item>
<!-- Support library compatibility -->
<item name="background">#color/light_purple</item>
</style>
<!-- ActionBar tabs styles -->
<style name="ActionBarTabStyle" parent="#style/Widget.AppCompat.Light.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">#drawable/actionbar_tab_indicator</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_tab_indicator</item>
</style>
<!-- ActionBar tabsText styles -->
<style name="ActionBarTabTextStyle" parent="#style/Widget.AppCompat.Light.ActionBar.TabBar">
<!-- text style -->
<item name="android:textColor">#color/light_purple</item>
<item name="android:textStyle">bold</item>
</style>
<!-- Action bar tab bar style -->
<style name="ActionBarTabBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/divider_style</item>
<item name="android:dividerPadding">8dp</item>
<!-- Support library compatibility -->
<item name="showDividers">middle</item>
<item name="divider">#drawable/divider_style</item>
<item name="dividerPadding">8dp</item>
</style>
<style name="WalkthroughThemes" parent="Theme.AppCompat.Light.NoActionBar">
</style>
</resources>
Here's my divider_style.xml file's code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="1.5dp" android:right="1.5dp" android:drawable="#color/light_purple">
<shape android:shape="line" android:tint="#color/light_purple">
</shape>
</item>
</layer-list>
I am unable to figure out what to do here.
Please let me know what to do.
I'm new to StackOverflow, so please cooperate.
Thanks in advance.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="0dp" android:right="0dp" android:bottom="1dp" android:drawable="#color/light_purple">
<shape android:shape="line" android:tint="#color/light_purple">
</shape>
</item>
</layer-list>
I'm using Android Studio and I have this error during the build of the project:
:app:mergeDebugResources FAILED Error:Execution failed for task
':app:mergeDebugResources'.
Unsupported node 'item' in file C:\Users\Mh2\Desktop\IlMartino2doppiofinal\app\src\main\res\values\styles.xml
I tried to clean and rebuild the project but it seems not to be the solution.
Here there is my styles.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"/>
<!-- Customize your theme here. -->
<item name="homeAsUpIndicator">#drawable/ic_drawer</item>
<item name="android:homeAsUpIndicator">#drawable/ic_drawer</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/black</item>
<!-- colorPrimaryDark is used for the status bar
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
-->
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight & colorSwitchThumbNormal. -->
<item name="colorControlNormal">#color/purple</item>
<item name="colorControlActivated">#color/red</item>
<item name="colorControlHighlight">#color/darkred</item>
<item name="colorSwitchThumbNormal">#color/darkorange</item>
</resources>
How can I find a solution?
here:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"/>
you closed it with />
You should make it like
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item........
</style>
I want to achieve a somewhat orange color for my actionbar. The problem is, I am using an appcompat theme for my app:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
</style>
<style name="menu_labels_style">
<item name="android:background">#drawable/fab_label_background</item>
<item name="android:textColor">#color/white</item>
</style>
</resources>
So the usual way with:
<resources>
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#F39530</item>
</style>
</resources>
(for example), won't work. So how do I change the color of the actionbar in an AppCompat theme?
Use colorPrimary to set the color, as in
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/background_green</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/background_green</item>
<!-- colorAccent is used as the default value for colorControlActivated,
which is used to tint widgets -->
<item name="colorAccent">#color/darkgreen_activeTextColor</item>
<style>
See also this blog post from google devs
AppCompat v21 — Material Design for Pre-Lollipop Devices
In my app in setings I use EditTextPreference , and on android API uder 11 edittext field has black background and black text color.
How can I chenge EditTextPreferences background color ?
I tried:
in theme :
<item name="android:editTextPreferenceStyle">#style/EditTextAppTheme</item>
in style:
<style name="EditTextAppTheme" parent="android:Widget.EditText">
<item name="android:background">#drawable/edit_text_holo_light</item>
<item name="android:textColor">#000000</item>
</style>
If I set style to :
<style name="EditTextPreferences" parent="android:Preference.DeviceDefault.DialogPreference.EditTextPreference">
<item name="android:background">#drawable/edit_text_holo_light</item>
<item name="android:textColor">#FF0000</item>
</style>
And theme to :
<item name="android:editTextPreferenceStyle">#style/EditTextPreferences</item>
I got error:
error: Error retrieving parent for item: No resource found that matches the given name 'android:Preference.DeviceDefault.DialogPreference.EditTextPreference'.
I have been trying to figure this out as well for the past couple of days. I've found that all the EditTextPrefence extends is AlertDialog and EditText. So if you can style both of those in your theme, you will find the result you are looking for in a EditTextPreference. Here's what I'm working with:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="LightTheme" parent="android:Theme.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:background">#color/greyscale2</item>
<item name="android:textColor">#color/greyscale16</item>
<item name="android:textViewStyle">#style/LightTextView</item>
<item name="android:buttonStyle">#style/LightButton</item>
<item name="android:editTextStyle">#style/LightEditText</item>
<item name="android:alertDialogTheme">#style/LightDialog</item>
<item name="android:dialogPreferenceStyle">#style/LightDialog</item>
<item name="android:colorBackground">#color/greyscale2</item>
<item name="android:colorBackgroundCacheHint">#color/greyscale1</item>
</style>
<!-- TextView -->
<style name="LightTextView" parent="android:Widget.TextView">
<item name="android:textColor">#color/greyscale16</item>
<item name="android:background">#android:color/transparent</item>
</style>
<!-- Button -->
<style name="LightButton" parent="android:Widget.Button">
<item name="android:textColor">#color/greyscale16</item>
<item name="android:background">#drawable/light_button_background</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
</style>
<style name="LightCheckBox" parent="android:Widget.CompoundButton.CheckBox">
<item name="android:background">#color/greyscale2</item>
</style>
<style name="LightEditText" parent="android:style/Widget.EditText">
<item name="android:background">#color/greyscale1</item>
<item name="android:editTextBackground">#color/greyscale2</item>
<item name="android:textColor">#color/greyscale16</item>
<item name="android:button">#style/DarkButton</item>
<item name="android:inputType">number</item>
</style>
<style name="LightDialog" parent="#android:style/Theme.Dialog">
<item name="android:background">#color/greyscale2</item>
<item name="android:textColor">#color/greyscale16</item>
<item name="android:textViewStyle">#style/LightTextView</item>
<item name="android:buttonStyle">#style/LightButton</item>
<item name="android:divider">#color/greyscale14</item>
</style>
Notice the
<item name="android:dialogPreferenceStyle">#style/LightDialog</item> attribute in my base theme. I found the styleable resource here, more specifically alertDiaolg here (Note: These can also be found in your SDK directory on your computer)
I hope this at least heads you in the right direction, I have been struggling to figure this out (my first theme in my apps). Happy Coding!
I think the effect you've observed is a bug in the Gingerbread emulator.
After changing the activity's theme and restarting the emulator the EditTextPreference appeared as above.
First extend EditTextPreference and override onPrepareDialogBuilder, inverting background color for versions below Honeycomb:
public class CustomEditTextPreference extends EditTextPreference {
/**
* Prepares the dialog builder to be shown when the preference is clicked.
* Use this to set custom properties on the dialog.
* <p>
* Do not {#link AlertDialog.Builder#create()} or
* {#link AlertDialog.Builder#show()}.
*/
#Override
protected void onPrepareDialogBuilder(AlertDialog.Builder builder) {
builder.setInverseBackgroundForced(Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB);
}
}
Then replace in your preferences.xml all
<EditTextPreference ... />
with
<your.package.CustomEditTextPreference ... />
I had this exact issue when I switched to the API v21 AppCompat (I think - it previously used to work just fine at least).
My solution was to define the style for android:editTextStyle explicitly in my theme - here is my complete styles.xml:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
<item name="android:editTextStyle">#android:style/Widget.EditText</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
</resources>
The result is an editText that looks the same as in #Jesse Webb's screenshot.