Android widget AppBarLayout always comes on top

Question

Hi I am developing small android application in which I am trying to display tool-bar with AppBarLayout. I want to display some view on top of my tool-bar. I tried this in following way :

<?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 above layout later both relative layouts comes under my AppBarLayout. But I want to show them on top of my toolbar_view. Am I missing anything or doing something wrong. Need some help. Thank you.

Myogenic

Answer 1

I am really not happy with this solution, but I found this so far: try to add 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 came up for me, so I will try to investigate some more on it. (For me the magic value is 5dp, don't ask why.)

Alternatively you can put your views inside 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>

Perreault

Note: elevation="5dp" works on API level 21 and higher. – Boltrope

Answer 2

The AppBarLayout has a elevation of 4dp,if you want to show a view on top of the App bar in the Z-axis,you must give that view a elevation value greater than 4dp, according to https://material.io/design/environment/elevation.html

Hideaway