'How to add Toolbar on Translucent imageview

I need to know, How we can create an toolbar on this imageview just with back button(getSupportActionBar().setDisplayHomeAsUpEnabled(true);). Here is the example from Google Developers:

And here is what i've tried with Translucent imageview:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="client.test.UserActivity">

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_alignParentStart="true"
        android:background="@drawable/header_img"
        android:contentDescription="@string/bgheader">

    </ImageView>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imgheaderusr"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:src="@drawable/ic_acc"
        android:layout_above="@+id/cvuser"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="17dp" />


    <android.support.v7.widget.CardView
        android:id="@+id/cvuser"
        android:layout_width="320dp"
        android:layout_height="110dp"
        android:layout_gravity="center"
        card_view:cardCornerRadius="5dp"
        card_view:cardElevation="3sp"
        card_view:cardUseCompatPadding="true"
        android:layout_below="@+id/imageView6"
        android:layout_centerHorizontal="true">

        <TextView
            android:id="@+id/txtusr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textViewwlc"
            android:layout_alignEnd="@+id/textViewwlc"
            android:layout_gravity="center"
            android:gravity="center"
            android:paddingEnd="0dp"
            android:paddingStart="0dp"
            android:text="Medium Text"
            android:textSize="20sp"
            android:textStyle="bold" />

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/cvgotit"
        android:layout_width="350dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        card_view:cardCornerRadius="5dp"
        card_view:cardElevation="3sp"
        card_view:cardUseCompatPadding="true"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        android:layout_below="@+id/cvuser"
        android:layout_centerHorizontal="true">

        </android.support.v7.widget.CardView>


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/btnFloatingAction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:src="@drawable/ic_logout"
            app:fabSize="normal"
            app:borderWidth="0dp"
            android:backgroundTint="#F44336"
            android:layout_marginBottom="33dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="18dp" />

</RelativeLayout>

Style:

<style name="AppTheme.header" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
    </style>

How we can design this? I can't find duc or manuals about this!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source