I am trying to change the style of the app but everything is grey instead. What's the problem?
I am using android studio. This project was originally on eclipse. I am not building it using Lollipop on Android Studio
<application
android:name=".MainApplication"
tools:replace="android:icon,android:theme"
android:label="#string/app_name"
android:logo="#drawable/ic_logo"
android:theme="#style/Theme.Materialred" >
styles_materialred.xml:
<resources>
<style name="Theme.Materialred" parent="#style/Theme.AppCompat.Light">
<item name="actionBarItemBackground">#drawable/selectable_background_materialred</item>
<item name="popupMenuStyle">#style/PopupMenu.Materialred</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Materialred</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Materialred</item>
<item name="actionDropDownStyle">#style/DropDownNav.Materialred</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Materialred</item>
<item name="actionModeBackground">#drawable/cab_background_top_materialred</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_materialred</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Materialred</item>
</style>
<style name="ActionBar.Solid.Materialred" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">#drawable/ab_solid_materialred</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_materialred</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_materialred</item>
<item name="progressBarStyle">#style/ProgressBar.Materialred</item>
</style>
<style name="ActionBar.Transparent.Materialred" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="background">#drawable/ab_transparent_materialred</item>
<item name="progressBarStyle">#style/ProgressBar.Materialred</item>
</style>
<style name="PopupMenu.Materialred" parent="#style/Widget.AppCompat.Light.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_materialred</item>
</style>
<style name="DropDownListView.Materialred" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_materialred</item>
</style>
<style name="ActionBarTabStyle.Materialred" parent="#style/Widget.AppCompat.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_materialred</item>
</style>
<style name="DropDownNav.Materialred" parent="#style/Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_materialred</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_materialred</item>
<item name="android:dropDownSelector">#drawable/selectable_background_materialred</item>
</style>
<style name="ProgressBar.Materialred" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_materialred</item>
</style>
<style name="ActionButton.CloseMode.Materialred" parent="#style/Widget.AppCompat.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_materialred</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Materialred.Widget" parent="#style/Theme.AppCompat">
<item name="popupMenuStyle">#style/PopupMenu.Materialred</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Materialred</item>
</style>
Set the color in this way in action bar theme.
<item name="colorPrimary">#color/primaryDef</item>
Read this interesting article of Chris Banes https://chris.banes.me/2014/10/17/appcompat-v21/#migrationfromprevioussetup
I was having this problem and just noticed that there was a separate styles.xml file for Lollipop. It was originally hidden by the default file, but clicking the arrow reveals it. Editing this one works as expected.
You have to use this:
<style name="AppThemeRandom" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<!-- The primary branding color for the app. By default, this is the color applied to the
action bar background. -->
<item name="colorPrimary">#color/md_indigo_500</item>
<!-- Dark variant of the primary branding color. By default, this is the color applied to
the status bar (via statusBarColor) and navigation bar (via navigationBarColor). -->
<item name="colorPrimaryDark">#color/md_indigo_700</item>
<!-- Bright complement to the primary branding color. By default, this is the color applied
to framework controls (via colorControlActivated). -->
<item name="colorAccent">#color/md_pink_A200</item>
<!-- The color applied to framework controls in their normal state. -->
<item name="colorControlNormal">#color/md_amber_500</item>
<!-- The color applied to framework controls in their activated (ex. checked) state. -->
<item name="colorControlActivated">#color/md_green_500</item>
<!-- The color applied to framework control highlights (ex. ripples, list selectors). -->
<item name="colorControlHighlight">#color/md_teal_500</item>
<!-- The color applied to framework buttons in their normal state. -->
<item name="colorButtonNormal">#color/md_red_500</item>
<!-- The color applied to framework switch thumbs in their normal state. -->
<item name="colorSwitchThumbNormal">#color/md_black_1000_50</item>
<!-- Inactive track color(75% transparency) -->
<item name="android:colorForeground">#color/md_black_1000_75</item>
</style>
Obviously, choose your colors, it is a random theme to check all colors in status bar, toolbar, widgets like checkbox, etc.
Related
I want to change the default textColor of all text in my App. e.g. for all buttons, textViews, EditText's etc. in my App. Before moving to Material3, this was done using:
themes.xml
<style name="MyThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColor">#color/black</item>
Now it doesn't work anymore. How do I do it now? The project is a default Android project:
<style name="Theme.MyApplication" parent="Theme.Material3.DayNight.NoActionBar">
<!-- This is not working -->
<item name="android:textColor">#color/black</item>
<!-- 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>
I can do it like this, but that is not the answer I'm looking for:
<style name="BaseStyle" parent="android:Widget.Material.Light.Button.Borderless"/>
<style name="Widget.Button.MyCompanyName" parent="BaseStyle">
<item name="android:textColor">#android:color/black</item>
</style>
The above button style I only define the textColor when it differs from the default color that I want.
The text color of the elements will change based on what type of element it is being shown on. for example if you are using the material button by default the button color will be "colorPrimary" and the button text color will be "colorOnPrimary". and similar to this if an element color uses the "colorBackground" its text color will be "colorOnBackground".
in my case i was able to control the text color of all the elements i use by adding a value for the following styles:
<item name="colorOnPrimary">#000000</item>
<item name="colorOnPrimaryContainer">#000000</item>
<item name="colorOnSecondary">#000000</item>
<item name="colorOnSecondaryContainer">#000000</item>
<item name="colorOnBackground">#000000</item>
<item name="colorOnSurface">#000000</item>
<item name="colorOnSurfaceVariant">#000000</item>
<item name="android:textColorPrimary">#000000</item>
<item name="titleTextColor">#000000</item>
you can read more about this in "Typography and iconography colors" section Here
Does the below work? Not sure textViewStyle covers ALL texts. You might need some extra things like <item name="materialButtonStyle"> too.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:textViewStyle">#style/MyTextView</item>
</style>
<style name="MyTextView" parent="Widget.MaterialComponents.TextView">
<item name="android:textColor">#android:color/black</item>
</style>
I cannot seem to get what I want no matter how much reading I do on this subject - yet what I want is quite simple.
I am applying a global style to my app based on AppCompat NoActionBar. This gives white text and I want to change it to a dark colour. Here is my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorAccent">#color/colorSecondary</item>
<item name="android:textColor">#ff4400</item>
</style>
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:background">#color/colorPrimary</item>
<item name="colorControlNormal">#android:color/white</item>
</style>
This is fine. The text colour is changed to a dark colour everywhere (set to red here so I can see what's happening). Unfortunately this also overrides all of the text colouring for buttons. Disabled buttons show the dark colour and there is no way to distinguish them from enabled buttons. I've tried applying styles to buttons but the textColor always overrides the disabled colour.
I'm at a bit of a loss as to how to proceed. I don't want to apply a selector on every button nor colour all the buttons individually by setting a style on each one. I want an overall global colour change - which Android seems to have made exceptionally difficult.
I eventually managed to get it to work. I had to use a selector. I provide my solution below.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorButtonNormal">#color/colorSecondary</item>
<item name="android:textColorPrimary">#color/primary_text_color_selector</item>
<item name="android:textColorSecondary">#color/secondary_text_color_selector</item>
<item name="alertDialogTheme">#style/ThemeDialog</item>
</style>
<style name="ThemeDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColorPrimary">#color/primary_text_color_selector</item>
<item name="android:background">#color/colorTertiary</item>
</style>
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:background">#color/colorPrimary</item>
<item name="colorControlNormal">#android:color/white</item>
</style>
I have a couple of Themes in an app and it works ok. Now I wanted to set a chat bubble text color to color red when user select BaseTheme.Red, and text color orange when user select BaseTheme.Orange (see code below)
It´s only the chat bubble text right that I want to be like red for the ´Red´ and Orange for the Orange Theme and all other TextView text color in the app will have default Theme color.
I try to learn Android Themes and got into trouble setting this chat TextView text color to another color then this global:
<item name="android:textColor">#color/white</item>
I created this: Inside the BaseTheme.Red
<item name="chatBubbleTextColor">#color/material_red_500</item>
and thought I could use it in the TextView xml like
android:textColor="?attr/chatBubbleTextColor"
but i cannot get it to work maybe it does not work like that?
How can I with the Themes below make this work?
Here is two Themes Red and Orange:
<!-- Base Theme -->
<style name="BaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Attributes for all APIs -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="dialogTheme">#style/AppTheme.Dialog</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert</item>
<item name="colorControlHighlight">#color/selector_black_pressed</item>
<!-- Theme for the Preferences -->
<item name="preferenceTheme">#style/AppPreferenceTheme</item>
<!-- Theme for the pacv_placesAutoCompleteTextV -->
<item name="pacv_placesAutoCompleteTextViewStyle">#style/Widget.AppCompat.EditText</item>
<!-- Default App Theme -->
<style name="AppTheme" parent="BaseTheme">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawable">#drawable/state_list_selectable_rect_black</item>
<item name="selectableRectDrawableInverse">#drawable/state_list_selectable_rect_white</item>
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_black</item>
<item name="selectableRoundedRectDrawable">#drawable/state_list_selectable_rounded_rect_black</item>
<item name="selectableRoundedRectDrawableInverse">#drawable/state_list_selectable_rounded_rect_white</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_black</item>
</style>
<!-- Orange App Theme -->
<style name="BaseTheme.Orange" parent="AppTheme">
<!-- Attributes for all APIs -->
<item name="colorPrimary">#color/material_orange_500</item>
<item name="colorPrimaryDark">#color/material_orange_700</item>
<item name="colorAccent">#color/material_orange_a700</item>
<item name="dialogTheme">#style/AppTheme.Dialog.Orange</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert.Orange</item>
<item name="android:windowBackground">#color/material_orange_300</item>
</style>
<style name="AppTheme.Orange" parent="BaseTheme.Orange">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_orange</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_orange</item>
<!-- Add your custom overall styles here -->
</style>
<!-- Red App Theme -->
<style name="BaseTheme.Red" parent="AppTheme">
<!-- Attributes for all APIs -->
<item name="colorPrimary">#color/material_red_500</item>
<item name="colorPrimaryDark">#color/material_red_700</item>
<item name="colorAccent">#color/material_red_a700</item>
<item name="dialogTheme">#style/AppTheme.Dialog.Red</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert.Red</item>
<item name="android:windowBackground">#color/material_red_300</item>
<!-- Chat bubble attribute not working-->
<item name="chatBubbleTextColor">#color/material_red_500</item>
</style>
<style name="AppTheme.Red" parent="BaseTheme.Red">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_red</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_red</item>
<!-- Add your custom overall styles here -->
</style>
I found the answer to my own question here
Basically, it goes like this:
In the file attr.xml, I define this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="ChatBubbleBackGroundColor" format="reference|color" />
<attr name="ChatBubbleTextColor" format="reference|color" />
</resources>
Next I add to my two BaseTheme:
<style name="BaseTheme.Red" parent="AppTheme">
<item name="ChatBubbleBackGroundColor">#color/material_red_a200</item>
<item name="ChatBubbleTextColor">#color/material_red_a700</item>
</style>
<style name="BaseTheme.Orange" parent="AppTheme">
<item name="ChatBubbleBackGroundColor">#color/material_orange_a200</item>
<item name="ChatBubbleTextColor">#color/material_orange_a700</item>
</style>
and finally in my layout
<TextView
android:id="#+id/quoteTitle"
android:textColor="?ChatBubbleTextColor"
android:BackGround="?ChatBubbleBackGroundColor"
...
</TextView>
I've been trying real hard to theme SearchView. My min API is sdk 21 too, so I should be able to use the new styling options.
Specifically, I want the in-app-bar text field that appears when I click on the search icon to be theme-able. I want to ultimately make the background white, and the text/cursor either blue or black.
Here is my styles.xml. The last theme is the new SearchTheme I'm working on. The actual values don't matter, they're garbage values I threw in just trying to make a change happen.
<resources>
<!-- Base application theme. -->
<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="android:windowBackground">#android:color/white</item>
<item name="android:searchViewStyle">#style/AppTheme.SearchTheme</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.PreferencesTheme" parent="AppTheme">
<item name="android:windowBackground">#android:color/white</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:searchViewStyle">#style/AppTheme.SearchTheme</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:searchViewStyle">#style/AppTheme.SearchTheme</item>
</style>
<style name="AppTheme.SearchTheme" parent="Theme.AppCompat.Light">
<item name="android:closeIcon">#drawable/contacts5icon</item>
<item name="android:voiceIcon">#drawable/contacts5icon</item>
<item name="android:queryBackground">#android:color/black</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
</resources>
I've assigned the AppTheme.SearchTheme to the other main themes that I'm using in my layout. But nothing I do seems to have any effect. The values don't seem to change.
I haven't really messed with Android theming before, so I'm a bit lost.
This should help you get on the right track, per Chris Banes' walk-through for using material design on pre-lollipop androids. For you, in a nutshell: set item property searchViewStyle under your main style with a Widget.AppCompat.SearchView style extension.
You can use the queryBackground item property for altering the text field's background. Other properties are detailed below.
<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
<item name=”searchViewStyle”>#style/MySearchViewStyle</item>
</style>
<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
<!-- Background for the search query section (e.g. EditText) -->
<item name="queryBackground">...</item>
<!-- Background for the actions section (e.g. voice, submit) -->
<item name="submitBackground">...</item>
<!-- Close button icon -->
<item name="closeIcon">...</item>
<!-- Search button icon -->
<item name="searchIcon">...</item>
<!-- Go/commit button icon -->
<item name="goIcon">...</item>
<!-- Voice search button icon -->
<item name="voiceIcon">...</item>
<!-- Commit icon shown in the query suggestion row -->
<item name="commitIcon">...</item>
<!-- Layout for query suggestion rows -->
<item name="suggestionRowLayout">...</item>
</style>
more here
styles.xml
<resources>
<style name="CustomTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/CustomBar</item>
<item name="actionBarStyle">#style/CustomBar</item>
</style>
<style name="CustomBar" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/black</item>
<item name="android:src">#drawable/home</item>
<item name="background">#color/black</item>
<item name="src">#drawable/home</item>
</style>
</resources>
The Above code doesn't work as android:src is not found, however i wish to achieve the intended effect of this.
I have a company logo that i want to use as the action bar main image, but don't want to use static image for full background colouring. The logo image, #drawable/home has a transparent background.
How would i style the action bar to include an image as well as a background colour?
I don`t know that we have src, here is the code what worked for me:
to set the image this is what I use:
<item name="android:background">#drawable/headerflowerimage</item>
Please find the whole code here:
<!-- the theme applied to the application or activity -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/SActionBar</item>
<!--- Support library compatibility-->
<item name="actionBarStyle">#style/SActionBar</item>
<item name="android:actionBarTabStyle">#style/STabBars</item>
<!-- Support library compatibility -->
<item name="actionBarTabStyle">#style/STabBars</item>
</style>
<!-- ActionBar tabs styles -->
<style name="STabBars" parent="#style/Widget.AppCompat.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">#color/tabbar_background</item>
<item name="android:backgroundStacked">#color/background_material_light</item>
<item name="android:actionBarTabTextStyle">#color/greyrish_s</item>
<!-- Support library compatibility -->
<item name="background">#color/tabbar_background</item>
<item name="backgroundStacked">#color/background_material_light</item>
<item name="actionBarTabTextStyle">#color/greyrish_s</item>
</style>
<!-- ActionBar styles -->
<style name="SActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/headerflowerimage</item>
<item name="android:titleTextStyle">#style/sTitleColor</item>
<item name="android:displayOptions">showTitle</item>
<!-- Support library compatibility -->
<item name="background">#drawable/headerflowerimage</item>
<item name="titleTextStyle">#style/sTitleColor</item>
<item name="displayOptions">showTitle</item>
</style>