Each "layout" I set a white background and "Manifest" I set Theme.Light.
Still receives a gray background instead of white. Why?
Edit:
Manifest.xml
android:theme="#android:style/Theme.Light.NoTitleBar">
Layout
android:background="#android:color/white"
Theme.Light does not mean that it will be white. It just means that it will be light, not dark :P This is not theme.white.
Each device manufacturer can customize Android OS on his phone for example to preferred colors and look & feel. In particular he can define styles for his Android implementation - Light and dark. Thanks to that your app may look differently on various devices, however it will always fit the style used on this device (every app in style Theme.Light will have grey background on this device, unless you set android:background="#android:color/white" )
Your device's manufacturer defined style Theme.Light as style with grey background.
Hope that I am clear - otherwise do not hesitate to ask
I had the same issue until I changed #android:color/white to explicit android:background="#FFFFFF". Weird though...
Since it's an old question this might have another solution already but anyway one can just enter the AppTheme style tag in styles.xml, you can do so by pressing the ⌘cmd key and clicking on your theme declaration in the manifest.
Over there add this line with your preferred color -
<item name="android:windowBackground">#color/white</item>
This line basically overrides the theme's default background value.
Example -
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 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:colorControlActivated">#color/black</item>
<item name="android:windowBackground">#color/white</item>
</style>
Related
I'm using Theme.AppCompat.DayNight and I want to customize a certain layout background and text color to change depending on whether it's day or night mode .
Here's what I tried so far:
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryDarkColorAmber</item>
<item name="colorPrimaryDark">#color/primaryDarkColorAmber</item>
<item name="colorControlActivated">#color/primaryDarkColorAmber</item>
</style>
<style name="PopUpTheme" parent="AppTheme">
<!-- layout custom theme there's no darkBackground value...!! -->
<item name="android:background">#color/popup_background</item>
</style>
first of all create res/values-night this directory then add same as res/value file you can copy and replace to color and after that when you change day or night theme you can get color according to your style
If you are following Android's Color theming System, then you can use:
<View
...
android:background="?android:attr/colorBackground"
.../>
Similarly, for texts you can use ?android:attr/textColorPrimary and for icons ?attr/colorControlNormal. This way you do not need to create separate value files.
You can find more details here.
I have been learning MDC from google code lab, and it is a well designed application to know how material design works. However, in a particular section they showed how to use dark theme. The did it by changing the theme attributes from style.xml. Being resourceful, I have been trying to learn how to use multiple theme and interchange them runtime.
For this reason I avoided their hard-coded way and tried to inherit the base theme and put changes according to my need. Below I am putting some changes in the theme file
<!--Dark Theme style !-->
<style name="Theme.Shrine.Dark" parent="Theme.Shrine">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/darkColorPrimaryDark</item>
<item name="colorPrimaryDark">#color/darkColorPrimaryDark</item>
<item name="colorAccent">#color/darkColorAccent</item>
<item name="android:windowLightStatusBar" tools:targetApi="m">false</item>
<item name="android:textColorPrimary">#color/darkTextColorPrimary</item>
<item name="colorControlActivated">#color/darkColorControlActivated</item>
<item name="toolBarStyle">#style/Widget.Shrine.Toolbar.Dark</item>
<item name="appBackGroundColor">#color/darkBackgroundColor</item>
</style>
There are some changes but they are irreverent to my problem, so I am not going to add them here. Anyway, with changes in my style file app looks something like this
Everything is expected except for icon colour in toolbar. So I check into the code and find every icon colour is referenced from the their respective from drawable file with android:tint="#color/toolbarIconColor" and in color.xml toolbarcolor is <color name="toolbarIconColor">#color/textColorPrimary</color>
It shows wrong color in dark mode, in this case how can I show yellow color in dark mode. I have changed textColoeSecondary from base theme of dark theme but it didn't work
Firstly, you need to remove hard reference of colour from every drawables which reflect different colours depending on app theme. So, add attrs.xml in your values directory. and add the reference name for icon colour such as this one
<attr name="toolbarIconColor" format="reference"/>
Secondly, add two different colour for two themes. For example, for normal theme <color name="toolbarIconColor">#color/textColorPrimary</color> and for dark one use <color name="darkToolbarIconColor">#FFCF44</color>
Finally, go to your style.xml file and make this change to hook up with the reference we have added in attrs.xml file, like this one for normal theme <item name="toolbarIconColor">#color/toolbarIconColor</item> and <item name="toolbarIconColor">#color/darkToolbarIconColor</item>
I am trying to use setEnabled(false) on a Button to show grey disabled state...
I can only get the desired result if I force a theme on the button with
android:theme="#style/Button"
and then change the parent on that Button style to something other than the Theme.AppCompat.Light.DarkActionBar, such as from Material:
<style name="Button" parent="android:Theme.Material.Light.NoActionBar">
(even then, only the button background changes, the text color doesn't.)
I can't see the Button as grey when set disabled if I leave the Button to take the defaults. (My understanding is that when using Theme.AppCompat., Button becomes AppCompat.Widget.Button and inherits a ColorStateList.)
In my res\values\styles.xml
<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>
<!-- only way I could get this to work -->
<style name="Button" parent="android:Theme.Material.Light.NoActionBar">
<!--<item name="colorAccent">#color/butt</item>-->
<!--<item name="colorButtonNormal">#color/butt</item>-->
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
In AndroidManifest.xml
<application
android:theme="#style/AppTheme"
( and nothing under <activity> )
My MainActivity extends Activity
but I have also tried extends AppCompatActivity and had the same problem.
So what is going on here? Why doesn't the default work for a "disabled button"?
(And if I do inherit from Material theme (as above), why does the Button text color not change? Basically, why don't the Buttons look like they do in the theme editor?)
Also
when I specify a custom ColorStateList via res\color, why can't I override just some of the states? I tried to have only
<item android:state_enabled="false" android:color="#616161" />
But it didn't work. I was only able to get a greyed disable Button using this method if I specified more <item>s, even though I don't care to match other states. It only works If I add something like:
<!-- disabled state -->
<item android:state_enabled="false" android:color="#616161" />
<!-- enabled state -->
<item android:state_enabled="true" android:color="#color/colorPrimaryLighter" />
<!-- default -->
<item android:color="#ffffff"/>
My supportLibraryVersion = '27.1.1'
I have already seen
How to setup disabled color of button with AppCompat?
Widget.AppCompat.Button colorButtonNormal shows gray
State list drawable and disabled state
Android - default button style
Android: change color of disabled text using Theme/Style?
When should one use Theme.AppCompat vs ThemeOverlay.AppCompat?
Use android:theme and ThemeOverlay to theme specific Views and their descendents
Pro-tip by +Ian Lake
and
Nesting Android Themes
I don't want to override the defaults if I don't have to and specify anything I don't have to. Thanks in advance!
Let me go into more detail to hopefully help clear up some of your questions:
Activating default material buttons:
Side note: Overall I think it leads to a more consistent look and behaviour when using the AppCompat Theme to also use AppCompatActivity etc.
But as you noticed just by using the AppCompat Theme, a Button (Internally mapped to android.support.v7.widget.AppCompatButton) doesn't automatically apply the compatibility material style.
I'm not sure if this is a bug, but I suspect it's to keep the look backwards compatible. You can easily activate it by applying the correct style directly on the view:
<Button
style="#style/Widget.AppCompat.Button.Colored"
... />
Here is a screenshot to show the different look of enabled and disabled buttons.
The styled buttons are the first two. The active one has the pink accent color as background.
The old Android button are the bottom two. As you can see disable only changes the text color and slightly the outline.
If you want this applied to any button you use in your app, you can add the following line to your AppTheme:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
...
This will use your default colorAccent as button highlight color and a grey tone as a flat disabled button. You mentioned only defining the android:theme for your App in your Manifest. For this solution to work you might need to set the theme to each Activity.
Defining a color with different states
The idea of the ColorStateList is to define a color that changes depending on the state of a View. It needs the default case as a fallback in case the conditions of the specific definitions don't match.
Your example can be simplified to the following:
<!-- disabled state -->
<item android:state_enabled="false" android:color="#616161" />
<!-- default = enabled state -->
<item android:color="#color/colorPrimaryLighter"/>
For buttons you can also make use of the default disabled alpha attribute e.g. define button_accent_stated =
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:alpha="?android:attr/disabledAlpha"
android:color="#color/colorAccent"/>
<item android:color="#color/colorAccent" />
</selector>
Custom color styling
If you are happy with the defaults, then you can ignore the following part...
If you want to style a button (and same for other components) and give it custom colors you need to make the difference between applying styles and themes. Both are defined in the styles.xml so this can be confusing. I can recommend giving the definitions names that represent how they are used.
When you want to overwrite for example the accent color, you create a custom ButtonTheme and apply it with android:theme as shown in your question.
When you want to adjust the look of a component (e.g. with the material buttons to get a different disabled color), you create a custom ButtonStyle and apply it with style. These definitions need a parent that corresponds to the View.
With material buttons and latest support libraries the previous approach to set the disabled color with colorButtonNormal seems to not work anymore. Instead you can use the color defined in the previous step by creating a custom style and set it as backgroundTint.
<style name="AppTheme.ButtonStyle" parent="#style/Widget.AppCompat.Button.Colored">
<item name="colorAccent">#color/colorAccent</item>
<item name="android:backgroundTint">#color/button_accent_stated</item>
</style>
This will lead to a disabled button like this:
Again you can apply this style as above per button or overall in your AppTheme. If you still need to support pre-lollipop devices you probably will also need a custom theme to set the colorButtonNormal.
Update: Default Material + stated text color:
Played with my example app and the only other explanation I found to what prevents the default stated text color is defining android:textColorPrimary on your AppTheme!
<item name="android:textColorPrimary">#color/colorPrimaryTextOnLight</item>
If you have this all buttons without a custom text color will use this text for both states! See Screenshot.
If you just want to fix the button text to change color, you can define your button style like this:
<style name="AppTheme.TextStatedButtonStyle" parent="#style/Widget.AppCompat.Button.Colored">
<item name="android:textColor">#color/button_text_stated</item>
</style>
With button_text_stated a selector like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:alpha="?android:disabledAlpha"
android:color="#color/colorPrimaryTextOnLight" />
<item android:color="#color/colorPrimaryTextOnDark" />
</selector>
And simply apply this buttonStyle for all buttons or as style per button as shown above.
I've uploaded my demo project with more screenshots / combinations of setting styles and themes to Github since I felt this answer was getting too long and it's better to just play with it to understand how styles work.
Preview in Android studio
As mentioned in the comments I can confirm that the Preview in Android studio is sometimes showing elements wrong, especially when applying a custom theme to an element! Better to test in the emulator or on a real device.
I may have a flawed understanding of how themes work in android, so I'm just gonna say what I want to do, and someone can tell me why I'm wrong:
I'd like my application to switch between a dark and a light theme, so I've declared two themes. The theme switching works fine, the problem arises when I'd like to add an attribute that presumable doesn't exist:
<style name="AppThemeDark" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#000</item>
<item name="colorPrimaryDark">#000</item>
<item name="colorAccent">#000</item>
<item name="colorBackground">#000</item>
...
</style>
Which yields the result: No resource found that matches the given name: attr 'colorBackground'.
So I know that one of two things is at play here:
I somehow, somewhere need to define colorBackground, or..
I cannot add any new attributes and must work with the ones I am given, which seems odd to me, but hey, what do I know.
I want both of my themes to have a 'colorBackground' so that I can set the application's views' backgrounds to the corresponding theme. a light background for the light theme and a darker background for the dark theme. Ideally something like:
<RelativeLayout>
....
android:background="?attr/colorBackground"
....
</RelativeLayout>
There may be a specific attribute that is made to do this specifically, but I do not know it.
So what am I doing wrong?
I have an app where I haven't explicitly defined any colors. The app looks different on my phone than it does on a few other phones around my office (the title bar at the top of the app on my phone is blue with white letters and on other phones it's gray with white letters). How do I make them all the same? Is it as simple as just explicitly setting the color in my app?
You need to apply one of available themes to your application. You can do it AndroidManifest.xml, just use android:theme attribute:
android:theme="#android:style/Theme.Holo" if you want dark theme or android:theme="#android:style/Theme.Holo.Light" if you want light theme.
If you use put this app in one of your <activity> tags, only corresponding activity will be styled, if you put it in <application> tag, style will be applied to the whole application.
Of course, you can define your own style in styles.xml:
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#drawable/bg_window</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
Here's the example of AndroidManifest.xml:
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme"
>
<activity
android:name=".Activity1"
android:theme="#style/AppTheme2"
/>
<activity
android:name=".Activity2"
/>
In this example, AppTheme2 will be applied only to Activity1, while AppTheme will be applied to all other activities.
All the buttons, textviews and other UI elements not designed by you will change their aspect depending on the selected Theme. If you choose the default theme, all the GUI widgets will look different depending on the device manufacturer, the Android version, etc.
You can specify a concrete theme, such as Holo, with the problem that it won't work on Android versions prior to 3.0. You can keep the default theme for the old version, or otherwise you can use this website to generate all the Holo-style GUI elements yourself:
http://android-holo-colors.com/
the title bar at the top of the app on my phone is blue with white
letters and on other phones it's gray with white letters
This is the problem with the customized frameworks of some OEMs. They override the default android styles. I assume that the device with a blue title bar is a Samsung device with TouchWiz on it, right?
I order to have a consistent title bar you'll have to declare your own theme:
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#drawable/title_bar</item>
<item name="android:windowTitleStyle">#style/WindowTitle</item>
</style>
<style name="WindowTitle">
<item name="android:singleLine">true</item>
<item name="android:textAppearance">#style/TextAppearance.WindowTitle</item>
<item name="android:shadowColor">#BB000000</item>
<item name="android:shadowRadius">2.75</item>
</style>
The original title_bar 9 patch.
This is the answer to your question. However in my opinion you should't use title bars, use the ActionBar instead. You can use ActionBarSherlock for backwards compatibility.