Develop Reference

fitSystemWindows with windowTranlucentStatus and windowTranslucentNavigation makes Toolbar too tall

I'm trying to make my app bleed under the status bar and the navigation bar. I got the layouts to work using fitSystemWindows = true with just the status bar translucent but when I make the navigation bar as well, the toolbar appears to react as if it needs to fill under the status bar and the notification bar.
The toolbar appears to function normally when in landscape for some reason.
This double "translucent" bar effect also makes the NestedScrollView extends beyond the bottom of the page. I am also not sure how to make the FAB fit.
On another note, I originally wrote the layout with a CoordinatorLayout. This added the extra problem that the NestedScrollView then scrolls up to the bottom of where the toolbar should be, not where it is. I think, however, that the NestedScrollView respected the bottom screen boundary properly with CoordinatorLayout.
Here's the xml for the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="74dp"/>
</android.support.v4.widget.NestedScrollView>
<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="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/nav_color_1_bright"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:navigationContentDescription="#string/open_nav_menu"
app:navigationIcon="#drawable/ic_dehaze_white_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:onClick="createNew"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/darkAccent"
app:fabSize="normal" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:itemBackground="#drawable/nav_item">
<ListView
android:id="#+id/drawer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:fitsSystemWindows="true" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I apply the following 'Light Theme' to the Activity programmatically.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.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="android:windowTranslucentStatus">true</item>
<item name ="android:windowTranslucentNavigation">true</item>
</style>
<style name="LightTheme" parent="AppTheme">
<item name="android:colorPrimary">#color/lightPrimary</item>
<item name="android:colorPrimaryDark">#color/lightPrimaryDark</item>
<item name="android:colorAccent">#color/lightAccent</item>
<item name="android:navigationBarColor">#color/lightPrimaryDark</item>
<item name="actionOverflowButtonStyle">#style/OverflowMenuButtonStyleDark</item>
</style>
Here's a preview of the layout: (bigger version here)

Translucent Status bar makes the layout out of bounds(showing view behind)

I want to achieve a translucent status bar, and I found this,
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
yes it made my status bar translucent when my collapsing toolbar/appbar is expanded
but the problem is the one of the views(imageView) became behind on one of the other views(seems like its parent layout went out of bounds, please see the attach image)
opaque status bar, please see the image at the bottom
before that I didnt have any issues at all like this
non-translucent status bar
this is my xml, i tried to remove as much as possible, please bear with me,
<?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.support.design.widget.AppBarLayout
android:id="#+id/mHomeAppBar"
android:layout_width="match_parent"
android:layout_height="430dp"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:title="">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="#+id/image_view_on_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:srcCompat="#drawable/ic_near_me_white_18dp"/>
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/mHomeToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/mHomeScrollView"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/mLayoutTabComponents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<android.support.design.widget.TabLayout
android:id="#+id/mHomeTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/mHomeViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
and this is the style
<style name = "AppThemeNoActionBar" parent =
"Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="android:subtitle">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:background">#null</item>
<!-- Support library compatibility -->
<item name="background">#null</item>
</style>
Im trying everything around, I tried to put app:layout_behavior="#string/appbar_scrolling_view_behavior" in every parent container and layout, and I tried to remove the TabLayout's tabGravity from fill to nothing, but still no luck :(, can anyone help me figure whats wrong, I know Im missing something on the style, but please put me in the right direction, again, I apologise if the xml code is a bit long, thanks in advance!
Update: I removed all the unnecessary view contents on the layout xml. anyone? :(

I manage to solve my problem by setting
fitSystemWindows
to false
that resulted the status bar to remove the padding it generates, then I add a 25dp top padding on the next layout which is the AppBarLayout that contains all the child views, now it works perfectly as I wanted.
thanks to these posts, if everyone encounters the same, or related issue with translucent status bar, please have a look here
Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment
Using windowTranslucentStatus with CollapsingToolbarLayout

Removing Shadow From Toolbar Buttons

I want to remove the shadow from these imagebuttons in my toolbar, but I can't seem to do it. I've tried setting the elevation, borderless style, and setting stateListAnimator as null. (These were suggestions on other posts.)
EDIT: Find the updated XML below. I have tried about every single suggestion in order to remove the shadows. (Even combined almost all of them) But I still can't get rid of them.
Main Layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.tqamobile.partyme.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">
<LinearLayout
android:layout_width="wrap_content"
android:background="#00aaaaaa"
android:layout_gravity="right"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/notification_button"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:elevation="0dp"
android:background="#android:color/transparent"
android:stateListAnimator="#null"
android:theme="#style/AppTheme.ToolbarButton"
android:src="#drawable/ic_no_notifications_action" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:itemTextColor="#color/colorAccent"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu_navigation" />
</android.support.v4.widget.DrawerLayout>
Styles
<style name="AppTheme.ToolbarButton" parent="#style/Widget.AppCompat.Button.Borderless"/>

Change background of buttons from your current attributes to #null like this:
android:background="#null"

You should add your buttons as menu items instead.
Full guide here: https://stackoverflow.com/a/31477092/4974603
<?xml version="1.0" encoding="utf-8"?>
<menu
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"
tools:context=".MainActivity">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
<item
android:id="#+id/action_search"
android:orderInCategory="200"
android:title="Search"
android:icon="#drawable/ic_search"
app:showAsAction="ifRoom"
></item>
<item
android:id="#+id/action_user"
android:orderInCategory="300"
android:title="User"
android:icon="#drawable/ic_user"
app:showAsAction="ifRoom"></item>
</menu>

How to make the android activity title editable?

Can someone help me make the title of my activity editable? I have this note taking app where I want to be able to add a title to the specific note that I want to add. I have tried using the id of the EditText from the menu as label in the Manifest.xml but it doesn’t work.
Sample code for the menu
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:title="Ok"
android:icon="#drawable/ic_done_white_48dp"
android:id="#+id/note_details_save"
app:showAsAction="always"/>
<item
android:title="back"
android:icon="#drawable/ic_back_button"
android:id="#+id/note_details_back"
android:orderInCategory="0"
app:showAsAction="always"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/note_details_title"/>
</menu>

Use setTitle("My title") by itself in your activity.
"My title" should be the content of your editText.
String title = et.getText().toString();

styles.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:background="#color/colorPrimary"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:elevation="8dp" app:elevation="8dp">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textPersonName"
android:paddingLeft="10dp"
android:text="#string/app_name"
android:ems="10"
android:id="#+id/editText2"
android:layout_weight="1" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

#Mel
I have no idea why no one has answered this properly. Here is the solution:
in the layout file of the activity(where u want the editable title). Add a editText inside your toolbar tag. It should look something like this(using support-library):
(Important: What's important to notice here is the editText inside your toolbar, don't worry too much about the attributes of the other tags).
<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" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/yourId"
android:hint="yourHint"
android:background="#android:color/transparent"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Now on the onCreate method of said activity disable the default uneditable title:
getSupportActionBar().setDisplayShowTitleEnabled(false);
If u want control the positioning of the editText inside the toolbar, you can wrap it in a ConstraintLayout or RelativeLayout.
That's it... good luck to you all

Strange custom Toolbar on pre-lollipop devices

I've issues with the appcompat toolbar on < 5.0 devices.
I was expecting this (Working result on Xperia and Nexus devices with lollipop):
Unfortunately I do get this on < 5.0 devices; black text and a weird looking statusbar hovering over the toolbar:
This is my toolbar design:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
And MainActivity design:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
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:clickable="true">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar">
</include>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#fff"
android:paddingTop="4dp"
android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
My styles-v21.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
Defining code inside MainActivity's onCreate:
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
mRecyclerView = (RecyclerView) findViewById(R.id.RecyclerView);
mRecyclerView.setHasFixedSize(true);
Drawer = (DrawerLayout) findViewById(R.id.DrawerLayout);
Drawer.setStatusBarBackgroundColor(getResources().getColor(R.color.ColorPrimaryDark));

Okay I finally managed to get rid of this weird issue. I've changed the style.xml for v-19 to this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" >
<item name="android:windowTranslucentStatus">true</item>
</style>
Which just makes the statusbar transparent on kitkat devices. And changed nothing in the style-v21.xml and the original styles.xml file.
Then changed the toolbar to add app:theme and app:popupTheme which is set to display white text theme. And a android:paddingTop to change the padding which is needed to be set on kitkat devices.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:paddingTop="#dimen/tool_bar_top_padding">
</android.support.v7.widget.Toolbar>
In the default dimens.xml:
<dimen name="tool_bar_top_padding">0dp</dimen>
dimens-v19.xml:
<dimen name="tool_bar_top_padding">20dp</dimen>
dimens-v21.xml:
<dimen name="tool_bar_top_padding">0dp</dimen>
And last but not least removed the android:fitsSystemWindows="true" from the DrawerLayout in the main_activity.xml design

I am not sure about reason of this error. But I think a work around can be done if you set Statusbar background color in Lollipop from API introduced recently
The API is setStatusBarColor(int color) and you are required to set some meaningful flags to WindowManager along with it :
Sample found from this descriptive answer :
Window window = activity.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(activity.getResources().getColor(R.color.ColorPrimary));
// to set ColorPrimary as status bar background color
This will remove the gray background shown in Samsung devices of lollipop