I have create a simple app with 2 activities. Main (launcher) activity is themed properly where colorPrimaryDark is applied to status bar.
But when I transition to new activity, everything seems normal except status bar. It somehow colored white. Any idea why this could be happening?
Running this on OnePlus One (Lollipop 5.0.2)
Target api -> 16+
values/styles.xml
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/PrimaryColor</item>
<item name="colorPrimaryDark">#color/PrimaryDarkColor</item>
<item name="colorAccent">#color/accent</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
values-v21/styles.xml
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/slide_bottom</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
layout/activity_settings.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#856"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".SettingsActivity">
<include layout="#layout/toolbar" />
</LinearLayout>
Change
<item name="android:statusBarColor">#android:color/transparent</item>
to
<item name="android:statusBarColor">#color/PrimaryDarkColor</item>
Change the api level to 11+, you can find it. change the Theme to DarkActionBar
You might be not needing this anymore but I recently get this issue so maybe this will help others.
I fix it by creating new style in values-v21/styles.xml extending from the AppTheme:
<style name="AppTheme.SolidStatusBar">
<item name="android:statusBarColor">#color/PrimaryDarkColor</item>
</style>
and use this as your new Activity theme in manifest. This way your changes don't have to interfere with activities that need to use translucent status bar like your Main activity.
I have no idea why is this happening though.
In values-v21/styles.xml, change
<item name="android:statusBarColor">#android:color/transparent</item>
to
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
Related
I am trying to make my textview textColor white in my AppTheme but it appears as black in my fragment. The fragment has been set to have a background like so:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="wrap_content"
android:id="#+id/fragment_settings"
android:background="?android:attr/windowBackground"
The page looks like this now:
The theme looks like this:
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<!-- <item name="android:statusBarColor">#android:color/transparent</item> -->
</style>
<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/whiteText</item>
<item name="android:buttonStyle">#style/MyButton</item>
<item name="android:statusBarColor">#android:color/black</item>
<item name="android:colorBackground">#2d314d</item>
<item name="android:textColorPrimary">#color/whiteText</item>
<item name="android:textColorPrimaryInverse">#android:color/holo_red_dark</item>
<item name="android:textColorSecondary">#android:color/holo_blue_bright</item>
<item name="android:textColorSecondaryInverse">#android:color/holo_red_dark</item>
<item name="android:colorForeground">#android:color/holo_blue_bright</item>
<item name="android:windowBackground">?android:attr/colorBackground</item>
</style>
<style name="MyButton" parent="android:Widget.Button">
<item name="android:background">#FF5A79</item>
<item name="android:textColor">#color/whiteText</item>
</style>
</resources>
Also, not sure this is related but just in case, I was using the Theme Editor and it gives a warning - Not enough contrast with colorButtonNormal - by the android:textcolorPrimary. I don't know much about what colorButtonNormal is nor can I find any info about it. This is what my theme editor looks like with my current settings:
While I'm at it another problem is the text color is white inside the editText fields (WEIGHT and AGE) which is where I need to change it to be black.
Thanks for any help, this android styling stuff is driving me nuts.
Go for this
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="wrap_content"
android:id="#+id/fragment_settings"
android:background="#android:color/white"/>
this will solve your problem. You are setting parent="Theme.AppCompat.Light.DarkActionBar" that is why everything is black
I try to change drop-down menu background, but can't find right decision. http://i.stack.imgur.com/OqO4j.png
That is ../values-v21/styles.xml I used
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#009688</item>
<item name="colorPrimaryDark">#00796B</item>
<item name="android:textColorPrimary">#FFFFFF</item>
</style>
Explain, please, how I can change background color there.
Since you are using a Toolbar you can use something like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/action_bar_main"
app:popupTheme="#style/popupTheme"
...../>
where popupTheme is:
<style name="popupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#color/myTextColor</item>
<item name="android:colorBackground">#color/myPopupBackgroundColor</item>
</style>
Bigger question I have now, is how do I color the toolbar icons on kitkat / jellybean. On lollipop I can use the
<item name="android:textColorSecondary">#color/ttdPrimaryColor</item>
and that seems to do the trip but no such luck on kitkat.
I am trying to figure out how to theme the menu icon on the Toolbar. I need to keep the title white, but I want the menu icon to be a different color.
This is my current style:
<style name="ToolBarStyle" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">?colorPrimary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
the toolbar looks like:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/abc_action_bar_default_height_material"
app:popupTheme="#style/Theme.AppCompat.Light.NoActionBar"
app:theme="#style/ToolBarStyle" />
Another problem is that on most activities I want the drawer toggle to be the apps primary color but on certain activities I want it to be white. What is the best way to handle that.
Thanks,
Nathan
You can define a Theme for your Activities (not the Toolbar).
Something like this:
<style name="MyTheme" parent="Theme.AppCompat">
<item name="drawerArrowStyle">#style/MyDrawerArrowToggle</item>
</style>
<style name="MyDrawerArrowToggle"
parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/my_color</item>
</style>
I'm using new android appcompat toolbar. I need to set the same custom color to both burger icon and back arrow icons. Using drawerArrowStyle allows me to change burger icon but not the arrow. The issue is only on Lollipop devices, anything pre-lollipop is fine.
Here is the code:
Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/my_primary"
local:theme="#style/My.Toolbar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Style.xml:
<style name="Theme.Base" parent="Theme.AppCompat.Light">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/my_primary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/black</item>
</style>
<style name="My.Theme" parent="Theme.Base">
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="My.Toolbar" parent="Theme.AppCompat.NoActionBar">
<!-- color of the title text in the Toolbar, in the Theme.AppCompat theme: -->
<item name="android:textColorPrimary">#color/my_actionbartext</item>
<!-- necessary to support older Android versions.-->
<item name="actionMenuTextColor">#color/my_actionbartext</item>
<item name="android:textColorSecondary">#color/my_actionbartext</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/my_actionbartext</item>
</style>
I've tried using solution from here but it didn't work. Anyone has any ideas?
Just do this in your Activity/Fragment:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
getSupportActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha, null));
else
getSupportActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
The path to the right solution for the problem I found here
However this still didn't 100% work due to our use of DrawerLayout. My colleague wrote an excellent post on the solution here
I am also not able to update back arrow button after upgrading to 23.2.0 support library
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
It is the color of actionMenuTextColor. Add this line to your theme.
<item name="actionMenuTextColor">your color</item>
I'm trying to recreate the look of Theme.AppCompat.Light.DarkActionBar with the new support library Toolbar.
If I choose Theme.AppCompat.Light my toolbar will be light and if I choose Theme.AppCompat it will be dark. (Technically you have to use the .NoActionBar version but as far as I can tell the only difference is
<style name="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
Now there's no Theme.AppCompat.Light.DarkActionBar but naively I thought it'd be good enough to just make my own
<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
However with this my toolbars are still Light themed. I've spent hours now trying different combinations of mixing the Dark (base) theme and the Light theme but I just can't find a combination that will let me have light backgrounds on everything but the toolbars.
Is there a way of getting the AppCompat.Light.DarkActionBar look with import android.support.v7.widget.Toolbar's?
The recommended way to style the Toolbar for a Light.DarkActionBar clone would be to use Theme.AppCompat.Light.DarkActionbar as parent/app theme and add the following attributes to the style to hide the default ActionBar:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then use the following as your Toolbar:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
For further modifications, you would create styles extending ThemeOverlay.AppCompat.Dark.ActionBar and ThemeOverlay.AppCompat.Light replacing the ones within AppBarLayout->android:theme and Toolbar->app:popupTheme. Also note that this will pick up your ?attr/colorPrimary if you have set it in your main style so you might get a different background color.
You will find a good example of this is in the current project template with an Empty Activity of Android Studio (1.4+).
Edit: After updating to appcompat-v7:22.1.1 and using AppCompatActivity instead of ActionBarActivity my styles.xml looks like:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Note: This means I am using a Toolbar provided by the framework (NOT included in an XML file).
This worked for me:
styles.xml file:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Update: A quote from Gabriele Mariotti's blog.
With the new Toolbar you can apply a style and a theme.
They are different!
The style is local to the Toolbar view, for example the background color.
The app:theme is instead global to all ui elements inflated in the Toolbar, for example the color of the title and icons.
Ok after having sunk way to much time into this problem this is the way I managed to get the appearance I was hoping for. I'm making it a separate answer so I can get everything in one place.
It's a combination of factors.
Firstly, don't try to get the toolbars to play nice through just themes. It seems to be impossible.
So apply themes explicitly to your Toolbars like in oRRs answer
layout/toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/Dark.Overlay"
app:popupTheme="#style/Dark.Overlay.LightPopup" />
However this is the magic sauce. In order to actually get the background colors I was hoping for you have to override the background attribute in your Toolbar themes
values/styles.xml:
<!--
I expected android:colorBackground to be what I was looking for but
it seems you have to override android:background
-->
<style name="Dark.Overlay" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">?attr/colorPrimary</item>
</style>
<style name="Dark.Overlay.LightPopup" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#color/material_grey_200</item>
</style>
then just include your toolbar layout in your other layouts
<include android:id="#+id/mytoolbar" layout="#layout/toolbar" />
and you're good to go.
Hope this helps someone else so you don't have to spend as much time on this as I have.
(if anyone can figure out how to make this work using just themes, ie not having to apply the themes explicitly in the layout files I'll gladly support their answer instead)
EDIT:
So apparently posting a more complete answer was a downvote magnet so I'll just accept the imcomplete answer above but leave this answer here in case someone actually needs it.
Feel free to keep downvoting if it makes you happy though.
The cleanest way I found to do this is create a child of 'ThemeOverlay.AppCompat.Dark.ActionBar'. In the example, I set the Toolbar's background color to RED and text's color to BLUE.
<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#FF0000</item>
<item name="android:textColorPrimary">#0000FF</item>
</style>
You can then apply your theme to the toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="#style/MyToolbar"
android:minHeight="?attr/actionBarSize"/>
To customize tool bar style, first create tool bar custom style inheriting Widget.AppCompat.Toolbar, override properties and then add it to custom app theme as shown below, see http://www.zoftino.com/android-toolbar-tutorial for more information tool bar and styles.
<style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="toolbarStyle">#style/MyToolBarStyle</item>
</style>
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#80deea</item>
<item name="titleTextAppearance">#style/MyTitleTextAppearance</item>
<item name="subtitleTextAppearance">#style/MySubTitleTextAppearance</item>
</style>
<style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">35dp</item>
<item name="android:textColor">#ff3d00</item>
</style>
<style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">30dp</item>
<item name="android:textColor">#1976d2</item>
</style>
Yout can try this below.
<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
<!-- your code here -->
</style>
And the detail elements you can find them in https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar
Here are some more:TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.
Hope this can help you.
Similar to Arnav Rao's, but with a different parent:
<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="toolbarStyle">#style/MyToolbar</item>
</style>
<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#ff0000</item>
</style>
With this approach, the appearance of the Toolbar is entirely defined in the app styles, so you don't need to place any styling on each toolbar.