AppBarLayout Android Widget Always Comes First

Question

Hi, I am developing a small Android application in which I am trying to display a toolbar with AppBarLayout . I want to display some view on top of my toolbar. I tried this as follows:

 <?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" tools:context="com.example.nileshkashid.samplesearchbarapplication.Main2Activity"> <android.support.design.widget.AppBarLayout android:id="@+id/toolbar_view" 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="@android:color/transparent" /> </android.support.design.widget.AppBarLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="150dp" android:background="@android:color/holo_red_dark" ></RelativeLayout> <RelativeLayout android:layout_width="150dp" android:layout_height="150dp" android:background="@android:color/holo_green_dark" ></RelativeLayout> </RelativeLayout> 

So, in the above layout, both relative layouts fall under my AppBarLayout . But I want to show them on top of my toolbar_view . I missed something or something was wrong. Need help. Thanks.

Answer 1

I am not really happy with this solution, but I have found it so far: try adding android:elevation="5dp" to your RelativeLayout , which is below the AppBarLayout :

 <RelativeLayout android:layout_width="match_parent" android:layout_height="150dp" android:elevation="5dp" android:background="@android:color/holo_red_dark" /> 

This problem also arose for me, so I will try to investigate it a little more. (For me, the magic value of 5dp, don't ask why.)

Alternatively, you can place your views inside an AppBarLayout :

 <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" tools:context="com.example.nileshkashid.samplesearchbarapplication.Main2Activity"> <android.support.design.widget.AppBarLayout android:id="@+id/toolbar_view" android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- You have to use a RelativeLayout here, because AppBarLayout is a LinearLayout. --> <RelativeLayout 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="@android:color/transparent" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="150dp" android:background="@android:color/holo_red_dark" /> </RelativeLayout> </android.support.design.widget.AppBarLayout> .... </RelativeLayout> 

Answer 2

AppBarLayout height is 4 dp. If you want to display the view at the top of the application panel on the Z axis, you must assign this view a height value of more than 4 dp, according to https://material.io/design./environment/elevation.html