Develop Reference

Removing navigation view top padding in Android N Multi-Window mode

I would like to remove paddingTop/marginTop from the navigation view in Multi-Window mode of Android N. Like Gmail already does.
If you see the image below, I'm talking about the normal padding with size equals to the status bar at the beginning of the navigation view.
So basically in Multi-Window mode (see the image below) I have to remove that padding when my app is in the second part of the screen.
Unfortunately from the new api 24 you have isInMultiWindowMode() but it's not possible to know in which part of the screen is your app.

Instead of trying to figure out if you're in multi-window mode and on which part of the screen, you need to make your navigation view header respect system windows insets.
Normally you care about just one window - the one your app is drawn in. Usually you don't even think there are any windows. Isn't your app drawn fullscreen? Well, actually no. Usually there is some space reserved for system bars, like status bar at the top and navigation bar at the bottom. They are drawn in separate windows - system windows. (Oh, and now we've got multi-window mode in N. More like multi-app-window mode, because if you count system windows then multi-window has been around for a while.)
You can make your navigation view header adjust its insets depending on whether it is under a system window (in this case: status bar) or not with just a few simple tweaks.
Assuming the navigation view is defined like that:
<android.support.design.widget.NavigationView
...
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
... />
and there is a simple header layout in nav_header_main.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="#dimen/nav_header_height"
android:background="#drawable/nav_header_background"
android:orientation="vertical"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="32dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/default_profile_picture" />
...
</LinearLayout>
you just need change it like that:
<?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="#dimen/nav_header_height"
android:background="#drawable/nav_header_background"
android:fitsSystemWindows="true"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/sym_def_app_icon"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"/>
...
</LinearLayout>
First you need to add android:fitsSystemWindows="true" to the layout.
Now you need to make top padding smaller, as fitsSystemWindows will automatically add padding the size of status bar. So previously your top padding was from the top of your header, now it is only from the bottom of the status bar.
And you have to move all your paddings from the layout somewhere else (for example I moved them to margins on child views), because fitsSystemWindows will overwrite those paddings.
After this if your app is in the bottom part of multi-window split then the padding for status bar will not be added. It will also make your navigation view look properly in any other cases where it's not under the status bar or if the status bar changes size in any future version of Android or some crazy custom ROM.

For me nothing was working so I ended up going this route and it got the job done:
<android.support.design.widget.NavigationView
...
app:insetForeground="#null"/>
Technically, the insets are still present but since the insetForeground resource used to draw on them is now null, that logic is skipped in ScrimInsetsFrameLayout's onDraw method (which is the parent class of NavigationView).
So when all else fails, this is a fairly efficient route.

RelativeLayout Background isn't properly aligned

I'm trying to set up a background for my MainActivity in Android Studio, but it doesn't align properly on the top.
I've tried changing the device from Nexus 6P to Nexus 5 and Nexus 4 but it always looks the same.
This picture may help you understand the problem:
As you can see the gray triangle should be aligned at the top but there is a white line in the middle that I don't know how to remove.
This is my code, I'd really appreciate some help to fix this problem.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="dancam.com.myapp.MainActivity">
</RelativeLayout>
I've tried also to set the android:layout_height to fill_parent but nothing changed
The theme that I'm using is Light_NoTitleBar

The Image I was using had a transparent gap above the gray triangle that caused the problem.
When I opened the image in android studio I was able to see the gap. Make sure you crop your images the right way!

How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar on KitKat?

I've problems with implementing this guidelines in Kitkat. On Lollipop everything looks ok:
But on Kitkat Toolbar does not have any top padding:
I can fix this with https://github.com/jgilfelt/SystemBarTint library using:
SystemBarTintManager.SystemBarConfig config = tintManager.getConfig();
mainView.setPadding(0, config.getPixelInsetTop(false), config.getPixelInsetRight(), config.getPixelInsetBottom());
But I feel that I'm doing something wrong. Do you have any good practices how to achieve this effect on KitKat?

Move current layout resource in layout-v21 folder to have it as it is on the first screenshot. Then try to create new layout resource that will have just a placeholder view of same height of the status bar
Hierarchy should be following:
--Top layout
--<view layout_height="25dip"...>
-- Toolbar
-- the rest of the views
Using view аbove your Toolbar, will not push it behind the status bar, as it is on second screenshot and will mimick the padding you are trying to achieve

Do you have fitsSystemWindow set to true? Setting it to false will bring the toolbar back under the status bar.
The effect you see for Kitkat is because you have translucent status bar set and fitting to System Window goes underneath it.
For example, in your layout XML file:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="false">
<android.support.v7.widget.Toolbar
android:background="#color/blue"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/action_bar"/>
<!-- YOUR CONTENT HERE -->
<!-- YOUR NAVIGATION VIEW HERE -->
</android.support.v4.widget.DrawerLayout>

How to wait for an ImageView in xml to finish loading

I want to create a title screen for an Android app. The screen is a simple XML file with an image in it. Basically the screen will show until some other stuff finishes loading, upon which the screen will change to the app content. The problem is, many time the image in the XML doesn't appear at all - all I get is a blank xml page, and afterwards the app loads. I assumeit's because loading the image is done async or something. I tried to use Thread.sleep, which proved to be a bad idea.
Anyone has an idea how to get this to work?
Thanks!
The main xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_marginTop="128dp"
android:src="#drawable/icon" />
The main activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
<do some stuff>
start_other_activity_with_different_xml();

Ok, got found the answer faster than I expected. For my purposes, what I'm looking for is a splash screen, and a good explanation of how to create one can be found here: http://www.androidhive.info/2013/07/how-to-implement-android-splash-screen-2/

Translucent navigation without layout displaying beneath status bar

I am using the new Android 4.4 FLAG_TRANSLUCENT_NAVIGATION flag to turn the navigation bar (back, home button etc) at the bottom of the screen translucent. This works fine but a side effect of this is the layout of my Activity now displays beneath the status bar at the top of the screen (even though I have not set the status bar as being translucent). I want to avoid a hacky fix I.e. applying padding to the top of the layout.
Is there a way to set the navigation as translucent whilst ensuring the status bar appears normally and does NOT allow the layout to display beneath it?
The code I am using is as follows:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
Thanks

ianhanniballake's answer actually works, but you shouldn't use android:fitsSystemWindows="true" on the toplevel view. Use this property as following :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorPrimaryDark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
android:fitsSystemWindows="true">
<!-- Your other views -->
</LinearLayout>
</LinearLayout>
As you can see, you have to set the color on the top-level view, and put the property on another container.

Add android:fitsSystemWindows="true" to your top level view - android:fitsSystemWindows will automatically resize the view to take into account the system windows such as the status bar.