Android - Theme Alert Dialogs - android

I'm currently trying to implement themes into my application, and I'm running into issues when trying to style my Dialogs.
<style name="MyTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:colorBackground">#color/background</item>
<item name="colorPrimary">#color/colorPrimary</item>
...
<!-- AppCompat Dialog Attributes -->
<item name="dialogTheme">#style/AppCompatDialog</item>
<item name="alertDialogTheme">#style/AppCompatAlert</item>
</style>
For example, MyTheme sets the colorPrimary and colorBackground correctly, which works fine in most areas of the app. And when I need to reference them I'm using them like this.
<LinearLayout
android:background="?android:colorBackground"
...>
<TextView
android:id="#+id/title"
style="#style/TextAppearance.AppCompat.Display1"
android:background="?attr/colorPrimary"
... />
However, when I'm styling my dialogTheme and alertDialogTheme, the color seems to default to something else.
<style name="MyAlertDialogStyle" parent="Base.Theme.AppCompat.Dialog">
...
<item name="android:background">?android:colorBackground</item>
</style>
This will not use my defined colorBackground, but instead some light-grey ( default?) color.
Here is an example of the result.
<style name="MyAlertDialogStyle" parent="Base.Theme.AppCompat.Dialog">
<item name="android:windowTitleStyle">#style/MyTitleTextStyle</item>
<!-- Used for the buttons -->
<item name="android:colorAccent">?colorAccent</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">?colorAccent</item>
<!-- Used for the background -->
<item name="android:background">?android:colorBackground</item>
</style>
Left side ("Desired") is using normal colors such as #color/colorAccent and the right side ("Result") is what happens if I attempt to use the theme colors ?colorAccent.
How do I reference my theme's colors in styles correctly?
Also, somewhat related question, I'm trying to style my toolbar, but it's having no effect.
<style name="MyTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar" >
...
<item name="toolbarStyle">#style/toolbarStyle</item>
</style>
<style name="toolbarStyle" parent="Base.Widget.AppCompat.Toolbar">
<item name="android:background">#drawable/header_background</item>
</style>
Any idea why this isn't working?
Thanks!

I was able to at least theme the background of dialogs in API >= 23 by setting this attribute in the Activity's Theme:
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:colorBackgroundFloating">#color/gunmetal</item>
</style>
Then making sure your activity uses it in your AndroidManifest.xml:
<activity
android:name="package.your.YourActivity"
android:theme="#style/AppTheme"
...

When extending DialogFragment use AppCompatDialogFragment instead and in your theme
<style name="YourAppTheme" parent="Theme.AppCompat">
<item name="colorBackgroundFloating">your_desired_color</item>
</style>
without the android prefix.
Tested for API 21+

Related

why are the colors in my application not being over-ridden?

Why are my button colors not changing?
<application android:label="Sales Plus" android:icon="#drawable/Icon"
android:theme="#style/AppTheme"></application>
Where App Theme is defined as:
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
</style>
<!-- inherit from the AppCompat theme -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Color overrides -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<!-- Background Color Override -->
<item name="android:windowBackground">#color/window_background</item>
</style>
A theme is created
<style name="ButtonTheme" parent="Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/primary</item>
<item name="colorControlHighlight">#color/accent</item>
</style>
Styling for ButtonSM:
<style name="ButtonSm" parent="Widget.AppCompat.Button.Colored">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
Theme is applied:
<Button
android:text="#string/about"
android:id="#+id/btnAbout"
style="#style/ButtonSm"
android:theme="#style/ButtonTheme"
/>
However, the button color that appears is the default green.
Using Xamarin.Android.Support.v7.AppCompat and Android Framework version 7.1 (API lvl 25). Also, tested on Lollipop...
I've tried changing the ButtonTheme parent to ThemeOverlay as well as Widget.AppCompat.Button.Colored
I've already looked into Coloring Buttons in Android with Material Design and AppCompat
There were styles being applied to another element in the axml that didn't actually exist. After removing them, the styles were applied without issue.
I declared my primary and accent colors in the App Theme(values v-21), which was applied in manifest.xml. The AppCompat theme automatically applied the accent color to my buttons throughout the application.
I hope this post is helpful to others.

How to change android button text color globally in theme

How can I change all my buttons text color?
I know I can set the background color like follows :
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="colorButtonNormal">#color/buttonColor</item>
</style>
How can I do this for the button Text?
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColor">#yourcolor</item>
<item name="android:buttonStyle">#style/ButtonColor</item>
<item name="colorButtonNormal">#color/buttonColor</item>
</style>
<style name="ButtonColor" parent="#android:style/Widget.Button">
<item name="android:textColor">#color/yourcolor</item>
</style>
android:textColor This should help you change the text color globally.
With the new Theme.MaterialComponents theme you can define the materialButtonStyle attribute in your app theme, to customize globally the style of all buttons in your app.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- .... -->
<item name="materialButtonStyle">#style/Widget.App.Button</item>
</style>
With
<style name="Widget.App.Button" parent="Widget.Material3.Button">
<!-- button style customization example -->
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
Use Widget.MaterialComponents.Button as parent if you are using Material2 theme.
If you would like to override only some attributes like colors from the default style use the materialThemeOverlay attribute.
Something like:
<style name="Widget.App.Button" parent="Widget.Material3.Button">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
</style>
<style name="ThemeOverlay.App.Button">
<!-- For filled buttons, your theme's colorPrimary provides the default background color of the component, and -->
<!--the text color is colorOnPrimary -->
<item name="colorPrimary">#color/my_color</item>
<item name="colorOnPrimary">#color/my_color2</item>
</style>
If you just need to change the text colour of buttons. You can modify the textAppearanceButton style attribute of your main theme.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorButtonNormal">#color/buttonColor</item>
<item name="android:textAppearanceButton">#style/TextAppearance.AppCompat.Button.Custom</item>
</style>
And declare your new textAppearance style as follows
<style name="TextAppearance.AppCompat.Button.Custom">
<item name="android:textColor">#color/mycustomcolor</item>
</style>
For anyone that stumbles onto this, I recommend checking out a similar question about Material Design Button Styles. With a theme, your "accent color" will be used to color your button.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
<item name="buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
</style>
Since MaterialComponents Buttons use colorPrimary by default you can simply set colorOnPrimary in your theme when using Theme.MaterialComponents.Light, don't know if it's the same with Material3.
<resources>
<!-- Base application theme. -->
<style name="Base.Theme.MyApplication" parent="Theme.MaterialComponents.Light">
<!-- Customize your light theme here. -->
...
<item name="colorOnPrimary">#color/colorOnPrimary</item>
</style>
<style name="Theme.MyApplication" parent="Base.Theme.MyApplication" />
</resources>
Just using AppCompatButton by setting this attribute :
"app:backgroundTint="#color/wildberries"
And make sure your activity extends AppCompatActivity. I just use it in my project. It works like a charm in both 5.X and pre-5.X.
<Button
app:backgroundTint="#fece2f" //any color
/>
This is best way if you don't want it to be defined globally

Widget.AppCompat.Button colorButtonNormal shows gray

I have values:styles.xml with:
<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/my_color</item>
<item name="android:textColor">#android:color/white</item>
</style>
and values-v21:styles.xml with:
<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
<item name="android:colorButtonNormal">#color/my_color</item>
<item name="android:textColor">#android:color/white</item>
</style>
And app style with
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/AppTheme.Button</item>
</style>
But the colors appears grey instead of #color/my_color
To customize one Button only set android:theme="#style/AppTheme.Button" to your Button.
<Button
android:theme="#style/AppTheme.Button"
/>
Define your style as you did in your question
<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/my_color</item>
</style>
[EDIT]
See GitHub demo here
Use Widget.AppCompat.Button.Colored as a parent for your style.
<style name="RedButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:textColor">#color/white</item>
<item name="colorButtonNormal">#color/red</item>
</style>
Use android:theme, not style in buttons definitions:
<Button android:theme="#style/RedButton"/>
See AppCompat v21 > Theming and Android Support Library v22.1 - AppCompat blog posts.
(note on second post, android:theme is supported on API11-, it just doesn't do automatic inheritance from parent, you will have to specify it on each child, not an issue here but worth mentioning - see Chris Banes' post on that).
Put the xml line below in your "AppTheme" xml, rather than trying to set it from the "AppTheme.Button". This works for me on v22.1.1 with non-lollipop devices. I'm guessing this is a bug because your solution above works fine for lollipop.
<item name="colorButtonNormal">#color/my_color</item>
Ensure your Activity is extending AppCompatActivity, otherwise it won't handle appCompat styles properly.
class: android.support.v7.app.AppCompatActivity
Gradle: compile 'com.android.support:appcompat-v7:23.0.1'
Use:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="buttonStyle">#style/AppTheme.Button</item>
</style>
remove the android:
That works:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!-- android:buttonStyle for v21+ and buttonStyle for the rest -->
<item name="buttonStyle">#style/MyCustomButton</item>
<item name="android:buttonStyle">#style/MyCustomButton</item>
<item name="colorButtonNormal">#color/my_color</item>
</style>
<style name="MyCustomButton" parent="Base.Widget.AppCompat.Button">
<item name="android:textColor">#ffffff</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
</style>
colorButtonNormal can be set in the theme style. To change the text color, size or any other feature of the button you can create a style and then using buttonStyle (less than v21) or android:buttonStyle (v21+) in the the theme style to set the button style.
v21/styles.xml
<style name="AppTheme.BlueButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:colorButtonNormal">#color/blue</item>
<item name="android:textColor">#color/text_white</item>
</style>
styles.xml
<style name="AppTheme.BlueButton" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/blue_tint</item>
<item name="android:textColor">#color/text_white</item>
</style>
Initially I'm too facing this problem. After making correction like above I got correct UI button
It seems to be a bug on Android framework that we can not change customize colorButtonNormal with Widget.AppCompat.Button theme.
A workaround solution is to define another custom AppCompat theme and use colorAccent to set colorButtonNormal.
There are two following steps.
1.Define another theme for your custom button.
<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>
</style>
<!-- Custom button theme. -->
<style name="CustomButtonTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Set your desired button color here. -->
<item name="colorAccent">#color/red</item>
<item name="buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
</style>
</resources>
2.Apply button theme in layout.
<Button android:theme="#style/CustomButtonTheme"/>
Hi I think the parent widget you used might be not correct one, it should android:Widget.Button for API version 21 or earlier version, for later version 21 or above you should use `android:Widget.Material.Button. Let say you have default style should look see below.
res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/AppTheme.Button</item>
</style>
<style name="AppTheme.Button" parent="android:Widget.Button">
<item name="android:background">#color/my_color</item>
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
For API version 21 the resource style file should look like (res/values-v21/style.xml)
<resources>
<style name="AppTheme.Button" parent="android:Widget.Material.Button">
<item name="android:background">#color/my_color</item>
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
Thank you Let me know if you have any question.
In case you wonder why colorButtonNormal is not picked up as defined for disabled buttons, you might also need to set android:disabledAlpha to 1.0 in your theme, otherwise your color will by default blend into the button's background. Example:
<style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:disabledAlpha">1.0</item>
<item name="colorButtonNormal">#color/my_solid_disabled_color</item>
<item name="colorAccent">#color/my_solid_accent_color</item>
<item name="buttonStyle">#style/my_button_style</item>
</style>
Try buttonStyle instead of android:buttonStyle, since this is AppCompat attribute pre Lollipop, so it should be without android prefix

How to change the action bar background color using Appcompat

Yes, I know there are a lot of similar questions and answers in the internet. I checked all of them for the last three hours. No solution worked for me.
I simply started an Android Studio (v1.0.2) Project, which is by default provided by the v7 AppCompat Library.
I changed styles.xml to:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyAppTheme" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#style/MyAppTheme">
<item name="android:background">#android:color/holo_red_dark</item>
</style>
</resources>
... and inside AndroidManifest.xml:
android:theme="#style/MyAppTheme"
I'm looking for the easiest way to change the background color of the Action Bar globally to a desired color.
Right now the action bar is completely white with three black dots for the menu button.
With Appcompat rel 21.0.x just use something like:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- Set AppCompat’s color theming attrs -->
<item name=”colorPrimary”>#color/my_color</item>
<item name=”colorPrimaryDark”>#color/my_color_darker</item>
</style>
If you want to override the actionBarStyle attribute use:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- ... -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<!-- default value is #null -->
<item name="background">....</item>
</style>

how to change Android overflow menu icon

How do i change the Overflow Menu icon on the far right of the action bar as seen in the image below? My Holo theme specifies this 3 row black stack icon by default and i want something else. i can't seem to find a solution for this. I have looked at the documentation on http://developer.android.com/guide/topics/ui/menus.html but it doesn't seem to lend much help.
Thanks!
You can try something like this:
<style name="MyTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionOverflowButtonStyle">#style/MyActionButtonOverflow</item>
</style>
<style name="MyActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/my_action_bTutton_overflow</item>
</style>
and in AndroidManifest.xml
<application
android:theme="#style/MyTheme" >
Define a custom style: for example, let's call it customoverflow.
In this style you set android:src to the picture you would like to use.
Now create a style with parent Theme.holo.
In this style you need to define:
<item name="android:actionOverflowButtonStyle">#style/customoverflow</item>
I just tested this and it works.
If you are using AppCompat you can achieve by following code.
res/values/themes.xml
<style name="MyTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
<!-- Support library compatibility -->
<item name="actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
</style>
<style name="ActionButtonOverflow" parent="#style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/ic_launcher</item>
</style>
and in androidmanifest.xml
<application
android:theme="#style/MyTheme" >
I noticed that it becomes white if the theme of the app is Holo, but it is blackish when the theme is Holo.Light
However, changing the style of the action bar to inherit from Holo and the rest of the app from Holo.Light does not solve the problem, but it should point in the direction of which style you should be modifying.
What I have tried is:
<style name="AppThemeLight" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:windowContentOverlay">#drawable/actionbar_shadow</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/header_brown</item>
<item name="android:titleTextStyle">#style/ActionBarTitle</item>
<item name="android:icon">#drawable/header</item>
</style>
I have the same problem and I think this is close to a solution
Duplicate question,
Changing overflow icon in the action bar
This is my answer as below,
Change your custom overflow icon of Actionbar in styles.xml
<resources>
<!-- Base application theme. -->
<style name=“MyTheme" parent="#android:style/Theme.Holo">
<!-- Pointer to Overflow style DONT forget! -->
<item name="android:actionOverflowButtonStyle">#style/MyOverFlow</item>
</style>
<!-- Styles -->
<style name="MyOverFlow" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/ic_your_action_overflow</item>
</style>
</resources>
Put custom theme "MyTheme" in application tag of AndroidManifest.xml
<application
android:name="com.example.android.MainApp"
android:theme="#style/AppTheme">
</application>
Have fun.#.#
Shalafi's solution works with a few changes! You will need to specifiy theme.Holo as the parent for the theme but it has the downside of changing the default text color(at least in my styles).
The amended code should be:
<style name="AppThemeLight" parent="android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:windowContentOverlay">#drawable/actionbar_shadow</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/header_brown</item>
<item name="android:titleTextStyle">#style/ActionBarTitle</item>
<item name="android:icon">#drawable/header</item>
</style>
Basically Theme customizations available in newer API levels can go in res/values-vXX/styles.xml, while customizations related to backward-compatibility can go values/styles.xml
Shalafi's solution works with a few additions:So
add this code to both res/values-vXX/styles.xml and res/values/styles.xml and this will work like Magic!
<style name="AppTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionOverflowButtonStyle">#style/MyActionButtonOverflow</item>
</style>
<style name="MyActionButtonOverflow"parent="android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/your_overflow_icon</item>
</style>
also add it in AndroidManifest.xml
<application
android:theme="#style/AppTheme" >
<style name="ToolBarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:tint">#color/colorAccent</item>
create the above theme.set tint with your color and add this theme to the toolbar.
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolBarTheme"/>

Categories

Resources