Develop Reference

Android : Toolbar Subtitle Gravity Right Not Working

I want to create actionbar subtitle but its gravity should be right. It should end at title end. Please see following image
My Style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</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>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
</style>
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/black_overlay</item>
</style>
<style name="ToolbarSubtitleAppearance" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">10sp</item>
<item name="android:layout_gravity">right</item>
<item name="android:layout_width">match_parent</item>
</style>
</resources>
Toolbar in Layout File :
<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>
Can i achieve this via doing small changes because i had included in many layout file.

make your toolbar like this so your can custimize as you want
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="title "/>
<TextView
android:id="#+id/subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="sub title "/>
</LinearLayout>
</android.support.v7.widget.Toolbar>

Eliminate strange grey trapezoid in transparent toolbar

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>

Appcompat 23.2.1 drawer layout with navigation view covered by status bar

I switched from the normal Light Dark appcompat themes to DayNight and now the status bar color is being drawn over my window. What changed to break my configuration?
styles.xml
<style name="AppThemeDayNight" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="preferenceTheme">#style/PreferenceThemeOverlay</item>
<item name="statusViewStyle">#style/StatusViewStyle</item>
</style>
<style name="AppThemeDayNight.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" />
styles-v21.xml
<style name="AppThemeDayNight.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<!--<item name="android:statusBarColor">#android:color/transparent</item> -->
<!--<item name="android:windowTranslucentStatus">true</item> -->
<item name="android:windowActionModeOverlay">true</item>
</style>
<style name="AppThemeDayNight.NoActionBar.Drawer">
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
activity_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
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">
<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"
tools:title="Timeline"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_twitter" />
<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="#dimen/fab_margin"
app:srcCompat="#drawable/ic_menu_send" />
</android.support.design.widget.CoordinatorLayout>
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/activity_main_drawer" />
Here's a screenshot of the drawer open with the navigation view, which should be drawing over the status bar.

add
<item name="android:windowContentOverlay">#null</item>
to
<style name="AppThemeDayNight" parent="Theme.AppCompat.DayNight.NoActionBar">
block and try

Try set the windowTranslucentStatus to true
<item name="android:windowTranslucentStatus">true</item>

Background color of Toolbar in Lollipop is normal but in Kitkat is white

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.

Android statusbar and actionbar resolve to grey

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" />