Problems styling ActionBar background with Drawable - android

I have tried to add a image to the ActionBar background using this theme/style
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
</style>
But although the background is being changed, it's creating a weird effect on the title and menu button. It's as thought they are separate child views within the ActionBar (maybe they are, I'm not sure) and the Drawable is being applied to them individually.
I was hoping for a seamless Drawable being applied across the ActionBar. Is this possible or should I just give up, and instead just change the background with a flat colour?
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout_activity_main"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
styles.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="coordinatorLayoutStyle">#style/Widget.Support.CoordinatorLayout</item>
<item name="colorAccent">#android:color/black</item>
<item name="colorPrimary">#android:color/holo_blue_dark</item>
<item name="colorPrimaryDark">#android:color/holo_blue_dark</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:textColorHint">#android:color/white</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="android:windowBackground">#drawable/no_actionbar_background</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#android:color/black</item>
</style>
</resources>

When you set the android:theme attribute of a view, the style you pass is applied to that view and all of its children. In your case, the AppBarLayout does (internally) use separate views for the title and the overflow menu button.
However, since the only thing your style seems to be doing is setting the android:background attribute, you could just set that directly on the AppBarLayout. So, replace this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
with this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/actionbar_background">

"android:background"
in your style change the background to each component in your layouts.
You can change the color of your ActionBar with something like this.
<item name="android:navigationBarColor">#color/colorPrimary</item>

This is an example for the AppCompat-v7 Toolbar, the other Toolbar is a bit different when it comes to theme.
I can't really give you the answer that will suit you the most, and this code is only here to show you the way.
What changes is that the toolbar is using style instead of android:theme and it uses a new style AppTheme.Toolbar.
AppTheme.Toolbar groups your custom background, the theme for the views inside the toolbar (title, subtitle, etc) and the theme for the popup menu.
The theme for the children and the popup menu are separated so you can control each component separately.
Try to play with their parent attribute (from Dark to Light) and pick what is the best for you.
Into your styles.xml
<style name="AppTheme.Toolbar">
<item name="android:background">#drawable/actionbar_background</item>
<item name="popupTheme">#style/AppTheme.PopupOverlay</item>
<item name="android:theme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Change attribute of the toolbar views-->
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Dark">
<!--Change attribute of the menu-->
</style>
Into your activity_main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
style="#style/AppTheme.Toolbar"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>

Related

Issues in customizing toolbar in Android

I wanted to achieve the following task
Remove the default toolbar
Build a custom toolbar
change the default title, title text color, title text alignment in the toolbar
I successfully removed the default toolbar but while building the custom toolbar I'm not able to
Change the title text color
Change the titleText alignment
I tried out the existing solutions provided to the above problems at stack overflow but nothing seemed to be helpful in my case
Here's toolBar.xml file
enter code here
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbarC"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/Mystyle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#ffffff">
</android.support.v7.widget.toolbar>
Here is my main xml file
enter code here`
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:layout="http://schemas.android.com/apk/res-auto"
android:background="#3dcc24">
<include
layout="#layout/clubs_tool_bar" />
</LinearLayout>
Here's is my styles.xml file
<resources>
<!-- 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="ColorTemp">#color/ColorTemp</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" />
<style name="Mystyle" parent="ThemeOverlay.AppCompat.ActionBar">
<item name = "android:textSize">30sp</item>
</style>
</resources>
This is what my screen looks like
You need to address the appropriate class so use android.support.v7.widget.Toolbar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbarC"
app:title="YourTitle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/Mystyle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#ffffff"/>
instead of
android.support.v7.widget.toolbar

Android: How to remove line between Toolbar and Statusbar

I am interested in having a uniform coloured toolbar and status bar. If I provide colorPrimary and colorPrimaryDark as the same colour this should be possible. I am getting the desired result using ActionBar but not with Toolbar. I will also be creating a navigation view so i need the status bar as transparent.
Code : Styles-v21
<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>
Code : Styles
<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/colorPrimary</item>
<item name="colorAccent">#color/colorAccent</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>
Steps to reproduce :
Create a new project in android studio with Navigation Drawer Activity
Set primary and primaryDark as same colours
Run on device or emulator
The only solution I could come up with was to remove android:fitsSystemWindows="True" from Coordinator Layout
edit : Another solution is to wrap coordinator layout in another coordinator layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|enterAlways">
<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/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/content_main"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.design.widget.CoordinatorLayout>
Before
After
This shadow you are seeing is window content overlay, you could remove it:
Please add this line to your theme specification:
<item name="android:windowContentOverlay">#null</item>

Status bar turns white and does not show content behind it

I am trying out AppCompat on Marshmallow. And I want to have a transparent status bar however it turns white. I've tried a couple solutions but they didn't work for me (Transparent status bar not working with windowTranslucentNavigation="false", Lollipop : draw behind statusBar with its color set to transparent). Here's related code.
My styles.xml
<style name="Bacon" parent="Theme.Bacon"/>
<style name="Theme.Bacon" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/theme_primary</item>
<item name="colorPrimaryDark">#color/theme_primary_dark</item>
<item name="colorAccent">#color/theme_accent</item>
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">#color/background_material_light</item>
</style>
<style name="Theme.Bacon.Detail" parent="Bacon"/>
v21
<style name="Bacon" parent="Theme.Bacon">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
<style name="Theme.Bacon.Detail" parent="Bacon">
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
Activity
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" />
</FrameLayout>
Fragment
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/black_trans80">
<ImageView
android:id="#+id/photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/photo"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I found the answer in this link:Status Bar Color not changing with Relative Layout as root element
So it turns out we need remove the
<item name="android:statusBarColor">#android:color/transparent</item>
in styles.xml(v21). And it works just fine for me.
(A little late to the party but it might help someone)
I had the exact same problem. Somehow, some activities were normal while new ones I created were showing white status bar instead of colorPrimaryDark value.
After trying several tips, I noticed that the normal-working activities where all using CoordinatorLayout as the root of the layout, while for the others I had replaced it by regular layouts because I didn't need the features (animation, etc) provided by CoordinatorLayout.
So the solution is to make CoordinatorLayout the root layout, and then inside of it add your former layout root. Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!-- your activity content here-->
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
PLEASE NOTE that without android:fitsSystemWindows="true" this solution doesn't work for me.
Tested on Lollipop and Marshmallow
You have to add this property on your style to see the content
<item name="android:windowLightStatusBar" tools:ignore="NewApi">true</item>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
</style
Just Replace this , statusBarColor should be your expected color and not TRANSPARENT
Add this in your style.xml
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
and this in your onCreate();
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
Just put this item in your v21\styles.xml :
true
It should look like this :
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
After unsuccessfully trying all of the above I found that explicitly setting the theme fixed the issue.
setTheme(R.style.AppTheme);
That has to go before the super.OnCreate() in your activity.
I faced the same issue. What i did was, in the "v21/styles.xml" file a changed the value true:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
to:
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="android:statusBarColor">#android:color/transparent</item>
You'll see that line of code in values/styles/styles.xml(v21) . Remove it and that solves the issue
Link to this answer
I fixed my issue by changing my Activity layout from FrameLayout to RelativeLayout. Thanks everybody who tried to help!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/theme_primary_dark"
android:fitsSystemWindows="true" />
</RelativeLayout>
Try hierarchy-viewer or ViewInspector. These tools might help you.
Just remove following tag from style v21
#android:color/transparent
This works for me.
I have found solution for this -
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowLightStatusBar">true</item>
</style>
add this into your style and it will work for api 21 or above.
Better approach
Check your style.xml file where your NoActionBar theme is there.
Make sure its has parent as Theme.AppCompat.NoActionBar and also customize it by adding your color scheme. Finally set your themes in manifest as required.
Below is sample of my styles.xml file (ActionBar + NoActionBar).
<!-- 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>
<!-- No ActionBar application theme. -->
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
<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="windowNoTitle">true</item>
</style>
For styles v23
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowLightStatusBar">true</item>
<item name="android:statusBarColor">#android:color/white</item>
</style>
For styles v21
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#android:color/white</item>
</style>
If your v21/styles.xml contain
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
Then,
Remove or comment below line or change colour of status bar,
<item name="android:statusBarColor">#android:color/transparent</item>
Its working fine. Hope this is helpful. Thanks.
For me it worked by doing the following :
Set the theme .NoActionBar
Wrap the Toolbar in android.support.design.widget.AppBarLayout
Make android.support.design.widget.CoordinatorLayout as the parent layout.
Essentially it is the third step that draws the status bar in the colorPrimaryDark otherwise it is not drawn if you using NoActionBar theme.
2nd step will give your toolbar that overlay.
[
Expand res -> values -> styles directory from project panel.
Open styles.xml (v21)
USE ANY ONE FROM BELOW WAYS
Change true to false in android:windowDrawsSystemBarBackgrounds property.
Change #android:color/transparent to #color/colorPrimaryDark in android:statusBarColor property.
Remove the android:statusBarColor propert line.
I'm not sure if it's late but i hope it helps someone.
* Make a fake view with transparent background that fits the layout, and make a coordinatorlayout as your root layout element.
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:fitsSystemWindows="true" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/something" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.... YOUR LAYOUT
you want this right?
try this. in [value] - [style.xml]
<style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
<item name="android:windowLightStatusBar">true</item>
</style>
you know, don't match apptheme - parent
good luck
Inside onCreate add the following:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
getWindow().setStatusBarColor(Color.WHITE);
and below
setContentView(R.layout.activity_main);
My guess is that this is caused by your android:windowBackground. Is #color/background_material_light a reference to white?
Check this
Toolbar turns white - AppBar isn't drawn after being scrolled off screen
https://code.google.com/p/android/issues/detail?id=178037#c19
I'm using libraries 23.0.0. and the bug still occurs.
Workaround for this is adding View that takes nearly no space and can be invisible. See the structure below.
<android.support.v4.widget.NestedScrollView
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
app:layout_scrollFlags="scroll|enterAlways" />
<View
android:layout_width="match_parent"
android:layout_height=".3dp"
android:visibility="visible"/>
</android.support.design.widget.AppBarLayout>
This Questions on Stackoverflow.com refer to this bug too:
CoordinatorLayout Toolbar invisible on enter until full height
AppBarLayout - Layout sometimes invisible once it enters view (even if it's not entered)
If you are using RelativeLayout / CoordinatorLayout this is the solution that worked for me:
You have to use
CoordinatorLayout
AppBarLayout
Rember to use CoordinatorLayout instead of RelativeLayout (the performance is better and perfectly works with AppBarLayout)
This is how your fragment should starts
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
...
Good coding!
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
add the 'windowTranslucentStatus' item in styles
Add this in your style.xml
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
Note : Status bar coloring is not supported below API level 21.
Window window = this.getWindow();
window.setStatusBarColor(this.getResources().getColor(R.color.colorPrimaryDark));
Add this 2 line in java file below

Android Support Toolbar Styling

I am trying to implement a Light Theme of AppCompat with a dark toolbar (action bar), however when adding the toolbar dynamically or using <include /> the text fails to display in the correct color (black instead of white). The default action bar is styled correctly, but when I add the toolbar it is not.
Here is my code:
toolbar.xml
<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"
app:theme="#style/AppTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
android:background="?attr/colorPrimary"
app:navigationIcon="?attr/homeAsUpIndicator"
app:title="#string/action_settings"
/>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#ff299725</item>
<item name="colorPrimaryDark">#ff1d691b</item>
<item name="colorAccent">#ff5fb10b</item>
</style>
</resources>
However I get this in preview and live environment:
I have tried different versions of AppCompat (v.22.1, v.22.2, v.21.0.3) all replicate the issue, I have tried adding extra styles for textColor and all that happens is that it styles everything white.
Any help SO legends?
In your toolbar.xml, remove the app:theme attribute and use this instead:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Also, depending on how you're implementing toolbar, you may want to change your base theme (in styles.xml) to use the NoActionBar variant, like so:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
styles.xml
<style name="Toolbar" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/xxx</item>
<item name="android:background">#color/xxx</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/xxx</item>
<item name="gapBetweenBars">4dp</item>
</style>
my_toolbar.xml
<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"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar"
/>

Change title color in toolbar?

I have a toolbar that I use, and set title with:
((ActionBarActivity)getActivity()).getSupportActionBar().setTitle("Home");
Is there a way to change the color from black to white?
I tried making its own theme and setting it in the xml like this, but no dice:
<resources>
<!-- Base application theme. -->
<style name="AppTheme2" parent="Theme.AppCompat">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:textColorPrimary">#color/primary_text</item>
<item name="android:textColorSecondary">#color/secondary_text</item>
</style>
<style name="Widget.MyApp.ActionBar" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/primary</item>
<item name="theme">#style/ThemeOverlay.MyApp.ActionBar</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
</style>
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#FFFFFF</item>
</style>
</resources>
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.MyApp.ActionBar">
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/statsSpin"
android:spinnerMode="dropdown"
android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>
<ListView
android:id="#+id/yourStats"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:dividerHeight="0px"
android:divider="#null"
>
</ListView>
</LinearLayout>
Programatically:
toolbar.setTitleTextColor(0xFFFFFFFF);
Per the Theme vs Style blog post by the creator of AppCompat and the post on version 21 of AppCompat, a DarkActionBar toolbar (i.e., a Toolbar with a dark background and light text), can be accomplished by adding android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" to your Toolbar's XML:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/statsSpin"
android:spinnerMode="dropdown"/>
</android.support.v7.widget.Toolbar>
This will change text color and the default colors to many attributes (such as your Spinner to light text as is needed for the dark background.
Create a new style in application base theme
<style name="custom_toolbar" parent="#style/Widget.AppCompat.Toolbar">
<item name="titleTextColor">#replace with color</item>
</style>
and use the style for the toolbar
<item name="toolbarStyle">#style/custom_toolbar</item>
I know there are a lot of answers above hope, it will help someone who doesn't understand above answers.
Android has view called Toolbar.This view has title which always takes as default color from color.xml resources which item name is accent.You can change your toolbar color in two way.
Via xml which I recommend you to do that, here below you can see example
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#color/White" />Here you can change it.Remember APP attribute not ANDROID
Via programmatically within activity or fragment.
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
toolbar.setTitleTextColor(ContextCompat.getColor(this, R.color.colorAccent));
If you want to change only title text color than,
Try this one..
getSupportActionBar().setTitle(Html.fromHtml("<font color='#746E66'>"+titleText+"</font>"));
it works..!!
You can define custom tool bar style by extending Widget.AppCompat.Toolbar and setting titleTextAppearance and subtitleTextAppearance properties. This way you can change color and text size of title and subtitle of toolbar for reference
http://www.zoftino.com/android-toolbar-tutorial .
<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="titleTextAppearance">#style/MyTitleTextAppearance</item>
<item name="subtitleTextAppearance">#style/MySubTitleTextAppearance</item>
</style>
<style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">25dp</item>
<item name="android:textColor">#ff3d00</item>
</style>
<style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">20dp</item>
<item name="android:textColor">#1976d2</item>
</style>
It can be changed programatically as you can above answer. But reduce code complexity, you should change it via style.xml
First of all create attrs.xml to under res/values folder
than add two reference to attrs.xml folder like below
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="toolbar_theme" format="reference" />
<attr name="toolbar_theme_title" format="reference" />
</resources>
After defination of reference than create a style in style.xml like below
style.xml
<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#00A4E4</item>
<item name="colorPrimaryDark">#AB0634</item>
<item name="colorAccent">#AB0634</item>
<item name="toolbar_theme">#style/CustomTheme.Toolbar</item>
<item name="toolbar_theme_title">#style/CustomTheme.Toolbar.Title</item>
<item name="android:textColorPrimary">#color/black</item>
<item name="android:textColorSecondary">#android:color/black</item>
<item name="windowActionModeOverlay">true</item>
</style>
<style name="CustomTheme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
<!-- if you have a navigationdrawer you change it color also -->
<item name="colorControlNormal">#AB0634</item>
</style>
<style name="CustomTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<!-- Set title size -->
<item name="android:textSize">#dimen/abc_text_size_title_material_toolbar</item>
<!-- Set title color -->
<item name="android:textColor">#AB0634</item>
</style>
Now we have created toolbar_theme and toolbar_theme_title reference in attrs.xml than give these references to our custom theme in style.xml
Finally we give this reference to toolbar like below
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="?attr/toolbar_theme"
app:titleTextAppearance="?attr/toolbar_theme_title"
android:elevation="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Thats it. You can give this theme programatically or set in androidmanifest.xml like below.
programmatically
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(R.style.CustomTheme); // (for Custom theme)
this.setContentView(R.layout.myactivity);
androidmanifest.xml
<application
android:theme="#style/CustomTheme">
or
<activity
android:theme="#style/CustomTheme">
Here I fixed it using the code below and it works on every API level :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_accent</item>
<item name="toolbarStyle">#style/CustomToolBarStyle</item>
</style>
<style name="CustomToolBarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="titleTextColor">#color/title_text_color</item>
</style>
To extend on tachyonflux, to set color with a HEX
toolbar.setTitleTextColor(Color.parseColor("#519c3f"));
toolbar.setTitleTextColor(getResources().getColor(R.color.black));
(toolbar is the name you've give your toolbar in your acitivyt class)
(In your colors values xml set your desired colors and reference it to the color name you chose, as seen here I keep some of my main colors normal names)
Took me a while to figure this out myself but this is the only way I can get it to work, the ThemEditor should allow this but it is what it is.
In xml:
app:titleTextColor="#color/White" as
<android.support.v7.widget.Toolbar
android:id="#+id/tb_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/AppTheme.DarkToolbar"
app:titleTextColor="#color/White" />
Use this code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:titleTextColor="#color/colorAccent"
app:theme="#style/ToolbarColoredBackArrow"
app:subtitleTextColor="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
You can change the theme of your action bar using the attribute actionBarTheme as follow. Although it has been added in API level 21 it seems to be compatible with older APIs.
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="actionBarTheme">#style/AppTheme.AppBarOverlay</item>
</style>
In Kotlin, using Sandip's answer:
with(getSupportActionBar()) {
val titleText: String = title.toString()
setTitle(Html.fromHtml("<font color='#746E66'>" + titleText + "</font>"))
}
You can change it programmatically by using following code.
toolbar.setTitleTextColor(android.graphics.Color.WHITE);
Inside of android.support.v7.widget.Toolbar, add this line:
local:titleTextColor="#color/the_color_you_want"
I found the rather simple solution.
It can be done by the following ways (by XML or programmatically).
First (XML solution):
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/Theme.AppCompat.NoActionBar"
app:titleTextColor="#color/white" />
Second (programmatically):
val toolbar = findViewById<Toolbar>(R.id.toolbar)
toolbar.setTitleTextColor(Color.WHITE)
The second solution requires min SDK version over 21, for your note.

Categories

Resources