Creating a layout over content background

Question

My question is simple is a UI/UX design question. I want to get this model for my layout

I have no idea how is this called, want some help and idea for coding this one I tried few options but nothing.

Answer 1

To create this above layout You can use either of FrameLayout or Co-ordinator Layout or the new ConstraintLayout. This will do it for you.

Refer this link to understand the above design.

    <RelativeLayout 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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="xyz.himanshusingh.cryptokoin.ui.display.MainActivity">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="@drawable/toolbargradient" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="130dp"
            android:layout_below="@+id/toolbar"
            android:background="@drawable/toolbargradient" />

        <android.support.v7.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="80dp"
            app:cardCornerRadius="10dp">
       </android.support.v7.widget.CardView>
</RelativeLayout>

and toolbargradient.xml,

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:type="linear"
        android:startColor="#f7792e"
        android:endColor="#ef246b"
        android:angle="180"/>
</shape>

This XML code will almost make the design for you. In place of CardView you can use whatever you want.Like a RecyclerView, DatePicker etc.

Hope this helps :)