I want to customize my ActionBar. My Theme looks as below:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#style/ThemeOverlay.MaterialComponents.ActionBar">
<item name="background">#drawable/actionBarBackground</item>
</style>
In values folder:
<drawable name="actionBarBackground">#FFFFFFFF</drawable>
In values-night folder:
<drawable name="actionBarBackground">#FF000000</drawable>
Not sure why my ActionBar background colour doesn't change accordingly. I have tried to change my theme in different other ways as well but nothing works. Here are my other tries:
Instead of actionBarStyle, I used actionBarTheme.
<item name="actionBarTheme">#style/MyActionBar</item>
I also tried using colorPrimary.
<item name="colorPrimary">#color/actionBarBackground</item>
Am I missing something?
Since you are using a Theme.MaterialComponents.DayNight app theme the ActionBar background color is defined by default by the colorPrimary attribute.
<style name="AppThemeActionBar" parent="Theme.MaterialComponents.DayNight">
<item name="colorPrimary">#color/mycolor</item>
</style>
where mycolor is define in res/values/colors.xml
<resources>
<color name="mycolor">#xxxxxx</color>
...
</resources>
You can also customize the background color using the actionBarStyle attribute in your app theme.
Something like:
<style name="AppThemeActionBar" parent="Theme.MaterialComponents.DayNight">
<item name="actionBarStyle">#style/Custom.ActionBar</item>
...
</style>
where:
<style name="Custom.ActionBar" parent="Widget.MaterialComponents.Light.ActionBar.Solid">
<item name="background">#color/mycolor</item>
</style>
Otherwise you can use the actionBarTheme attribute to override the background color:
<style name="AppThemeActionBar" parent="Theme.MaterialComponents.DayNight">
<item name="actionBarTheme">#style/ThemeOverlay.ActionBar</item>
...
</style>
<style name="ThemeOverlay.ActionBar" parent="">
<item name="colorPrimary">#color/mycolor</item>
</style>
For me neither setting background nor colorPrimary has helped.
Apparently this is the intended behavior, as according to dark theme guidance for components that use a large portion of a screen. They should use colorSurface for their background instead of colorPrimary or colorAccent. AppBarLayouts, Toolbars, and ActionBars now default to their Surface styles in dark theme.
So I had to define colorSurface attribute for my theme in order for it to work.
<item name="colorSurface">#color/my_color_primary_dark</item>
I'm on the latest stable of MDC, and this is how it works here.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="colorPrimary">#color/purple_500</item>
<item name="actionBarStyle">#style/Widget.MaterialComponents.ActionBar.PrimarySurface</item>
</style>
If you want the app bar to be the same color as your color surface, change #style/Widget.MaterialComponents.ActionBar.PrimarySurface to #style/Widget.MaterialComponents.ActionBar.Surface
This is most likely because that's not the right way to declare colours in an app.
Typically, colour resources are located in one-singular file: colors.xml
This XML file is typically located in your app's resources folder (usually res/values/colors.xml)
They are then declared with a <resources> element as the root of the XML file and your colour resources (as defined with the <color> element):
<!-- Note: The XML header (aka <?xml version="1.0" ...?>) is optional -->
<resources>
<color name="your_color_res">#FFFFFF</color>
<!-- Your other colour resources go here -->
</resources>
You can then specify qualifiers for your colour resources by creating the same colors.xml in your app's resources with the following file format:
res/values-<qualifier>/colors.xml
These colours can then be referenced with the #color/ prefix in XML files or with R.color.* in your app's Java/Kotlin code.
Hope this helps!
Related
I would like to make the image change based on the theme (for Day-Night mode).
I've tried creating an id with the name "logo" in the style.xml that contains the drawable reference for the logo and change it according to the style but I don't know how to set this id as the ImageView source.
In the style.xml:
<resources>
<item type="drawable" name="logo"></item>
...
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="logo">#drawable/logo</item>
...
<style name="AppThemeDark" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="logo">#drawable/logodark</item>
...
</resources>
I don't know how I would reference it in the ImageView as the intelisense can't seen to find any "logo" id when I try to write in "app:srcCompat" as you can see here.
How can I make the ImageView source change based on the theme?
Nevermind, just found out about tints.
The style.xml goes like this
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
...
<!-- This sets the image tint for the style. -->
<item name="android:tint">#color/colorPrimary</item>
...
</style>
I'm using two themes for my Android application, AppTheme and AppThemeDark. I've set up a custom button style for each in the theme definitions:
<!-- Theme definitions -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:buttonStyle">#style/ButtonStyle</item>
...
</style>
<style name="AppThemeDark" parent="Theme.AppCompat.DayNight.NoActionBar">
...
<item name="android:buttonStyle">#style/ButtonStyleDark</item>
...
</style>
<!-- Button styles -->
<style name="ButtonStyle" parent="#style/Widget.AppCompat.Button">
<item name="android:ellipsize">end</item>
<item name="android:maxLines">2</item>
</style>
<style name="ButtonStyleDark" parent="ButtonStyle">
<item name="android:background">#drawable/gray_button_bg</item>
</style>
Note that my AppTheme button, ButtonStyle, doesn't override the background of Widget.AppCompat.Button, but AppThemeDark's button style inherits ButtonStyle and it changes the background.
Now, I would like to extend that buttonStyle with a new custom style for special buttons, e.g. PrimaryButton. In the AppTheme case, I do not want to change the background of the button. In the AppThemeDark case, i do want to change the background of the button.
I would like to define PrimaryButton and have it either inherit the background (in the case of AppTheme) or use a new background (AppThemeDark). Something like this:
<style name="PrimaryButton">
<item name="android:background">?attr/drawablePrimaryButtonBackground</item>
</style>
But as far as I can tell, there's no way to define an attribute in AppThemeDark as a new drawable and AppTheme as "inherit from parent". Setting to transparent obviously makes the button background in AppTheme transparent.
Is my only option to figure out what drawable is being used for a background in Widget.AppCompat.Button and define it locally?
To answer my own question...
You can dig up the private Android resource and use a local copy to retain the background. That locks you into one specific Android version of the drawable though (unless you copy multiple versions over).
You can set whole styles as attributes if the styles between your two themes are different enough to warrant it:
attrs.xml:
<attr name="stylePrimaryButton" format="reference" />
styles.xml:
<!-- Theme definitions -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="stylePrimaryButton">#style/PrimaryButton</item>
...
</style>
<style name="AppThemeDark" parent="Theme.AppCompat.DayNight.NoActionBar">
...
<item name="stylePrimaryButton">#style/PrimaryButtonDark</item>
...
</style>
<!-- Primary button styles -->
<style name="PrimaryButton">
<!-- no need to override anything -->
</style>
<style name="PrimaryButtonDark">
<item name="android:background">#drawable/dark_background</item>
</style>
layout.xml:
<Button style="?attr/stylePrimaryButton"
...
I have the following styles.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Main theme colors -->
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
</resources>
Where primary is defined as:
<color name="primary">#9c27b0</color>
However in the preview the actionbar is still black and not deep purple.
When i open the theme editor the actionbar is also deep purple.
Is this a bug in the preview? Or have i done something wrong?
In general how exactly do i use the styles.xml? Can i also define button's in it?
After editing the color code in the color.xml file, you should rebuild it. Try rewriting the code and then rebuilding. I faced the same problem, that's ho
Hello I'm making a custom theme for my app. I want to have a custom ActionBar and background for the rest of the app (below the ActionBar). I'm wondering how to do the background. Right now I have:
<style name="MyTheme" parent="android:Theme.Holo">
<item name="android:actionBarStyle">#style/dActionBar</item>
</style>
<style name="dActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#4C721D</item>
<item name="android:textColor">#FFFFFF</item>
</style>
Would I just have to do <item name-"android:background"></item> in MyTheme or would I have to create another style? After I create this do I need to put it in the res/styles folder? Also what are the API restrictions on this, if any?
Don't forget to apply your theme to your application in your AndroidManifest.xml.
<application android:theme="#style/CustomActivityTheme" ... />
You can find all the information about styling the Actionbar here.
To style your ActionBar with a nice Holo-look, try this website
Hope this helps!
Try to use below code in your Style.xml file
<resources>
<style name="Theme.Sample" parent="Theme.AppCompat">
<item name="android:colorBackground">#color/primary_material_dark</item>
<item name="actionBarTheme">#color/colorGray</item>
</style>
</resources>
Just need to use android:colorBackground as a name of item to define the background color like as below:
<item name="android:colorBackground">#color/primary_material_dark</item>
Hope you get your answer,Thanks.
I have an android manifest with an activity that I want to apply to styles to:
<activity android:label="#string/app_name" android:name="Language" android:theme="#android:style/Theme.NoTitleBar>
Is how it looks right now, but while keeping the NoTitleBar attribute, I would like to add this attribute as well:
android:style/Theme.Light"
But I'm just so new to Android that I can't figure it out.
Please help!
You cannot have more than one theme applied at once in your manifest.
I believe there is a theme Theme.Light.NoTitleBar that will do what you want - but I will show you below how you can easily do this yourself and customize more.
What you need to do is create a theme which has either Theme.NoTitleBar or Theme.Light as it's parent and customizes the bits you want -- in this case the easiest way is to create a theme with Theme.Light as it's parent and just hide the title bar (rather than have the Theme.NoTitleBar as the parent and then have to make everything light which is much harder!).
You can do this with the following code in your themes.xml file in the values folder:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- use the Android Light theme as the base for our own theme -->
<style name="MySuperTheme" parent="#android:style/Theme.Light">
<!-- hide the Window Title -->
<item name="android:windowNoTitle">true</item>
<!-- You could change the scrollbar, checkbox style, anything! -->
</style>
</resources>
Then use android:theme="#style/MySuperTheme" for your activity (or you could even apply it to your whole application by placing it on the application element -- if you apply a style to an individual activity and have one set for the whole application as well then the style of the individual activity will be the one shown).
Take a look at the Android themes.xml for a list of all the things you can customize in your own theme.
You can also look at all of the Android styles to see how they are done.
You'll need at least 2 styles, best inheriting from base styles, e.g. Theme.Material variants, or if you use appcompat then Theme.AppCompat variants. In each style override values such as colours, drawables etc with theme-specific values.
values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- original theme attributes -->
...
<item name="android:textColorPrimary">#FFFFFF</item>
</style>
<style name="AppTheme.Dark" parent="Theme.AppCompat">
<!-- alternative theme attributes -->
...
<item name="android:textColorPrimary">#000000</item>
</style>
This will be sufficient if you only use framework or appcompat attributes (e.g. colorAccent, android:textColorPrimary etc) in your layouts. But if you need your own attributes (e.g. a drawable with color that is different per theme), then you will need to define custom attributes.
values/attrs.xml
<attr name="themedMenuStoryDrawable" format="reference" />
<attr name="themedMenuCommentDrawable" format="reference" />
...
Specify theme-specific values for your custom attributes:
values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- original theme attributes -->
...
<item name="themedMenuStoryDrawable">#drawable/ic_subject_white_24dp</item>
<item name="themedMenuCommentDrawable">#drawable/ic_mode_comment_white_24dp</item>
</style>
<style name="AppTheme.Dark" parent="Theme.AppCompat">
<!-- alternative theme attributes -->
...
<item name="themedMenuStoryDrawable">#drawable/ic_subject_black_24dp</item>
<item name="themedMenuCommentDrawable">#drawable/ic_mode_comment_black_24dp</item>
</style>
Then refer to your custom attributes with ?attr/ prefix in layouts, menus etc:
menu/my_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#id/menu_comment"
android:icon="?attr/themedMenuCommentDrawable" />
<item android:id="#id/menu_story"
android:icon="?attr/themedMenuStoryDrawable" />
</menu>
Check out my blog post for the complete guide.