I know this question has been asked before, and it worked for me before but after updating to App Compat revision 23, the Toolbar is now having a black text color (I want it white) and I didn't change a thing.
Toolbar.xml:
<?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="?attr/colorPrimary"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
styles.xml
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="#attr/spinner_style">#style/spinner_style</item>
</style>
Setting toolbar to activity:
Toolbar Toolbar = (Toolbar) AppCompatActivity.findViewById(R.id.toolbar);
AppCompatActivity.setSupportActionBar(Toolbar);
ActionBar actionBar = ((AppCompatActivity)activity).getSupportActionBar();
actionBar.setTitle(title);
Change
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
to
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
The new support libraries (AppCompat) that Android Studio brings in default project templates do not insert an important attribute to style Toolbars in older Android versions.
This is what worked for me (I'm using an AppBarLayout with Toolbar and TabLayout, as shown):
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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"
android:theme="#style/AppTheme.AppBarOverlay" <!-- Needed attribute -->
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:theme="#style/AppTheme.AppBarOverlay" <!-- Needed attribute -->
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
I didn't research to know exactly what happened here, but older Android versions really need the theme in every element to be styled.
Hope it helps someone who is trying to find a solution to the black text in the light toolbar theme!
Related
I would like to set my navigation bar and my status bar like in the example in the image in the link below.
How could I do that
see the example
you can do this simply by setting style attributes like this:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
<item name="android:statusBarColor">set_your_color</item>
<item name="android:navigationBarColor">set_your_color</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
</resources>
Hope it will help you!!
If you want to remove elevation and shadow of toolbar add app:elevation="0dp" in toolbar like below:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/custom_toolbar"
android:layout_width="match_parent"
android:elevation="0dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
I am trying to make the toolbar background color transparent however, the colorPrimary theme seems to be showing instead. When I set the background of the toolbar to a standard color, it overrides colorPrimary and work as intended, but is there a way for me to get rid of it completely as to make the toolbar background transparent? The reason that I still want colorPrimary is because of the recent apps tab color, I just want it to not show in the toolbar. Thank you.
Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent" />
Style
<style name="AppTheme1" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:windowLightStatusBar">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:elevation">0dp</item>
<item name="elevation">0dp</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
</style>
use the code instead of only toolbar
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:background="#android:color/transparent"
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="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
use this
<?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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/background_toolbar_translucent" />
background_toolbar_translucent.xml
<?xml version="1.0" encoding="utf-8"?>
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#color/black_alpha_40"/>
colors.xml
<color name="black_alpha_40">#66000000</color>
make toolbar.xml inside layout folder. Use below code:
<?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="#android:color/transparent"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
And use this toolbar in your activity's xml. This way you will have a transparent toolbar.
I have a AppCompat21 Appbar/Toolbar in almost all of my Activities. All activities layout files have the following in common:
<!-- material design actionbar & toolbar -->
<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="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
so instead of having to add these attributes all the time:
android:theme="#style/AppTheme.AppBarOverlay"
android:theme="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"
I'm trying to find out how to redefine the appbar/toolbar look and feel in a global fashion within my app so I don't need this piece of redundant code everywhere.
Is this even possible? I have done it for the button style, but I can't get my head around this one...
You can create a layout resource file containing your toolbar, named toolbar,
<?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"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
and in your activities you can just simply do
<include layout="#layout/toolbar" android:id="#+id/toolbar">
When you create a new Blank Activity project in Android Studio it creates a styles.xml that includes the following. I think the last 2 lines accomplish what you want at the theme level:
<!-- 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>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
I am using the CoordinatorLayout using the default templates in Android Studio.
However when I scroll down, the notification bar (status bar) is scrolling off screen. The effect can be seen in this video.
https://youtu.be/1oAqEpg7N4I
I have included the relevant parts, but the rest of the code is available here:
https://github.com/vidia/MaterialDiningCourts/blob/master/app/src/main/res/layout/activity_meal_view.xml
In the demo (cheesesquare) the behavior is what I expect, to leave the notification bar in place and the Toolbar scrolls out underneath it. I have scoured those layouts and made changes in my code to match them, but haven't been able to find the necessary change.
What is causing the notification bar to scroll off the page, and why does the sample in Android Studio have this incorrect behavior?
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MealViewActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:layout_scrollFlags="scroll|enterAlways|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:id="#+id/meal_chooser_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTabLayout"
android:foregroundGravity="top"
app:tabIndicatorColor="#color/tabSelectedIndicatorColor"/>
</android.support.design.widget.AppBarLayout>
And styles.xml, though I have removed my custom themes from this file and it doesnt help the issue.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!-- Required from http://stackoverflow.com/a/29014475/2193387 -->
<item name="android:datePickerDialogTheme">#style/dateDialogTheme</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="AppTabLayout" parent="Widget.Design.TabLayout">
<!--<item name="tabMaxWidth">#dimen/tab_max_width</item>-->
<item name="tabIndicatorColor">#color/tabIndicatorColor</item>
<item name="tabIndicatorHeight">4dp</item>
<!--<item name="tabPaddingStart">6dp</item>-->
<!--<item name="tabPaddingEnd">6dp</item>-->
<!--<item name="tabBackground">?attr/selectableItemBackground</item>-->
<item name="tabTextAppearance">#style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/white</item>
</style>
<style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
<item name="android:textColor">#color/tabUnselectedTextColor</item>
<item name="textAllCaps">true</item>
</style>
<!-- TODO: Change to use AppCompat rather than Material -->
<style name="dateDialogTheme" parent="android:Theme.Material.Light.Dialog">
<!-- Required from http://stackoverflow.com/a/29014475/2193387 -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
The disappearing status bar effect is the result of these definitions in values-21/styles.xml:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
With these definitions, the system no longer draws system bar background. What you see as status bar background is actually drawn by CoordinatingLayout, beyond the now-transparent system bar. Now, when you scroll, CoordinatedLayout scrolls AppBarLayout up, and its content is visible through the transparent system bar.
You have two options to fix this:
Make the status bar opaque
Additionally use CollapsingToolbarLayout, and set status bar scrim
I was also running into this issue and after some time I figured out, that I had to remove
android:fitsSystemWindows="true"
from CoordinatorLayout
I'm not quite sure why, but I think it is only required for the NavigationDrawer, because according to material design guidlines it overlays the status bar and there I needed to set this tag true.
Hope this is also working for you.
Add this to your CoordinatorLayout:
android:fitsSystemWindows="true"
or try with this:
<android.support.design.widget.CoordinatorLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
...
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foregroundGravity="top"
... />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
To solve it you have to remove this line:
android:fitsSystemWindows="true"
It solves the problem for me.
I managed to get rid of this behaviour by removing the line below in the toolbar inside CoordinatorLayout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" << this one
app:popupTheme="#style/AppTheme.PopupOverlay">
I'm trying to change this toolbar color Completly White like Android Lollipop Settings action bar color but, there is a bug or something like that in our view or perhaps an Android bug!!
My toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
and style Arrow:
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
Result:
As you can see, the name is black! and after add these also, the search icon is a little bit black. (You can try it ;) )
But i need Completely White color with white actions.
How can achieve this?
I've tried everything you can expect!
You can try this :
taken from : https://github.com/sagar-viradiya/android-design-support-lib-demo/blob/master/app/src/main/res/layout/fragment_collapsing_toolbar.xml
Just add this in the AppBarLayout: app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
e.x:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
For PopUptheme:
<android.support.v7.widget.Toolbar
android:id="#+id/Main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light" />
But i have no idea about that search action and why that is still a little bit black.
If some one knows, please guide us.