I recently split my values into two:
values/style.xml
values-v21/style.xml
my v21/style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Foodie" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
</style>
</resources>
my style.xml
<resources>
<style name="Theme.Foodie" parent="Theme.AppCompat.Light.NoActionBar">
<!--<item name="windowActionModeOverlay">true</item>-->
<item name="colorPrimary">#color/theme_primary</item>
<item name="colorPrimaryDark">#color/theme_primary_dark</item>
<item name="colorAccent">#color/theme_accent</item>
</style>
</resources>
And my toolbar:
<!-- We use a Toolbar so that our drawer can be displayed
in front of the action bar -->
<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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
Somehow, we toolbar background's resolve to grey! Same for the statusbar when I compile:
And I'm not sure if that's linked, but I recently cleaned my project before building it.
Do you know what's happening?
Use Toolbar code like this:
<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.v7.widget.Toolbar>
and in style.xml will like this:
<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.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<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" />
Related
Toolbar text and hamburger icon is in black color and I want in white color.
I have tried this, this and this solution but nothing worked.
Source code link: https://github.com/vaibhavsingh97/Solucion/tree/master/Android%20Basic%20Nanodegree/Project%206/TourGuide
Styles.xml
<!-- 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.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">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
</resources>
app_bar_main.xml
<android.support.design.widget.AppBarLayout
style="#style/AppTheme.AppBarOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_home" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="#drawable/ic_play"/>
</android.support.design.widget.CoordinatorLayout>
Android Studio: 3.0 Canary 9
SDK used for build: 26
Inside Activity, you can use
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitleTextColor(getResources().getColor(R.color.white));
If you love to choose xml for both title color & back arrow white just add this style in style.xml .
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
And toolbar look like :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
app:theme="#style/ToolBarStyle"
android:layout_height="?attr/actionBarSize"
/>
UPDATE
try this
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/black</item>
</style>
So check <item name="color">#android:color/black</item> line. Just change your desired color here.
try darkActionBar theme as toolbar style in XML file
I could not find the source of some kind of mask laying over my transparent toolbar:
Does anybody know how to remove this?
When doing orientation change to landscape it's even more ugly.
Some code:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000" <-- makes no difference
android:theme="#style/AppTheme.AppBarOverlay.Transparent">
<include layout="#layout/toolbar_transparent"/>
</android.support.design.widget.AppBarLayout>
toolbar_transparent:
<?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:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:elevation="4dp"
style="?attr/actionBarStyle"
android:background="#204CAF50"
android:theme="#style/AppTheme.NoActionBar.ColoredToolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
themes.xml (I admit it is a mess - much like try-and-error)
<style name="AppThemeBase" parent="Theme.AppCompat">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:activatedBackgroundIndicator">#drawable/activated_background</item>
</style>
<style name="AppTheme" parent="AppThemeBase"/>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:activatedBackgroundIndicator">#drawable/activated_background</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.AppBarOverlay.Transparent" parent="ThemeOverlay.AppCompat.ActionBar" >
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorPrimary">#00000000</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="AppTheme.ActionBar" parent="AppTheme.NoActionBar">
<item name="windowActionBar">true</item>
<item name="windowNoTitle">false</item>
</style>
<style name="AppTheme.NoActionBar.ColoredToolbar" parent="AppTheme.NoActionBar">
<item name="android:textColorSecondary">#color/colorPrimaryDark</item>
</style>
This comes from the android.support.design.widget.AppBarLayout wrapper.
When I remove it and just leave the Toolbar, the trapezoids are gone.
<!--<android.support.design.widget.AppBarLayout-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="wrap_content"-->
<!--android:theme="#style/AppTheme.AppBarOverlay.Transparent">-->
<include layout="#layout/toolbar_transparent"/>
<!--</android.support.design.widget.AppBarLayout>-->
Works at least for Lollipop and Marshmallow. Kitkat and below not tested yet.
BTW I'm using com.android.support:design:24.2.1.
This works for me:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay.Transparent">
<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:theme="#style/AppTheme.AppBarOverlay.Transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
in styles
<style name="AppTheme.AppBarOverlay.Transparent" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
I'm trying to use Tablayout with Toolbar but it's giving me like the image below, and when try to remove <item name="android:fitsSystemWindows">true</item> from v21\styles.xml the Toolbar being overlapped by the android system status bar
v21\styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="MyMaterialTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="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="android:typeface">serif</item>
<item name="android:fitsSystemWindows">true</item>
</style>
<style name="ToolBarStyle" parent="AppTheme">
<item name="colorControlNormal">#android:color/white</item>
</style>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="MyMaterialTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="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="android:typeface">serif</item>
</style>
<style name="ToolBarStyle" parent="AppTheme">
<item name="colorControlNormal">#android:color/white</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="PopupTheme" parent="Theme.AppCompat">
<item name="android:background">#color/popColorBg</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:drawSelectorOnTop">true</item>
</style>
activity.xml
<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"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/tools"
>
<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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.melnykov.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="#drawable/ic_add_white_24dp"
fab:fab_colorNormal="#color/colorPrimaryFab"
fab:fab_colorPressed="#color/colorPrimaryDarkFab"
fab:fab_colorRipple="#color/colorPrimaryDarkFab" />
And according to this Answer if I'll do this and remove android:fitsSystemWindows="true" from v21\styles.xml my layout will be like this:
In Lollipop, The background color of toolbar was shown normally, but in KitKat, it was shown as white color.
I don't know why.
activity_main.xml
<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"
tools:context=".MainActivity">
<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>
<include layout="#layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>
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>
<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>
styles.xml-v21
<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>
</resources>
Try putting your AppBarLayout at the end of you code. Apparently your included layout is overlapping the ToolBar. That happened to me and I fixed it doing that, it just came to my mind. Like this:
<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"
tools:context=".MainActivity">
<include layout="#layout/content_main"/>
<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>
</android.support.design.widget.CoordinatorLayout>
Create a base theme in styles.xml with primary colors and other colors colors then set it as parent in styles.xml-v21 for your style name="AppTheme.NoActionBar".
Below is my example :
in styles.xml
<style name="AppBase" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/primary_color_dark</item>
<item name="colorAccent">#color/primary_yellow_bright</item>
<item name="colorControlNormal">#color/primary_yellow</item>
<item name="colorControlHighlight">#color/primary_color_light_100</item>
<item name="colorControlActivated">#color/primary_yellow_bright</item>
<item name="colorButtonNormal">#color/primary_yellow_bright</item>
<item name="android:windowBackground">#color/primary_white</item>
<item name="android:textColorPrimary">#color/primary_color</item>
<item name="android:textColorSecondary">#color/primary_color_light</item>
<item name="android:textColor">#color/primary_white</item>
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
</style>
<style name="AppTheme" parent="AppBase" />
in styles.xml-v21
<style name="AppTheme" parent="AppBase">
<item name="android:navigationBarColor">#color/primary_light_gray</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
in AndroidManifest.xml
android:theme="#style/AppTheme"
should work.
So I created a toolbar and tabview, but I can't remove the shadow below the toolbar as you can see here:
This is my toolbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
android:id="#+id/toolBar"
android:elevation="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
</android.support.v7.widget.Toolbar>
What am I missing? I tried to remove shadow with all methods I could find on Internet, but none of them helped.
If you need me to upload any more core just say!
Thanks!
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="elevation">0dp</item>
-->
<item name="android:windowContentOverlay">#null</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="elevation">0dp</item>
-->
<item name="android:windowContentOverlay">#null</item>
<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">
<item name="elevation">0dp</item>
/>
</style>
</resources>
styles v21
<resources>>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:elevation">0dp</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
Activity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_vjezbe);
toolbar = (Toolbar) findViewById(R.id.toolBar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setElevation(0);
use app:elevation="0dp" instead of android:elevation
You have to do it programatically...
getSupportActionBar().setElevation(0);
and change ur style to
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#5C2D91</item>
<item name="android:titleTextStyle">#style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
</style>
and set the actionbar style as
<item name="android:actionBarStyle">#style/MyActionBar</item>
in
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">