How would I go about making this layout?

Question

I am looking to create this layout in my Android application. How would I do so? Is there any pre-existing code for a layout of this type?

Answer 1

It's a pretty simple layout actually, the only problem is making FAB in between 2 views.

Don't forget compile 'com.android.support:design:22.2.0' in gradle.

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/viewA"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.6"
        android:background="#acacac"
        android:orientation="horizontal"/>

    <LinearLayout
        android:id="@+id/viewB"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.4"
        android:background="#bebebe"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="30dp"
            android:layout_marginRight="20dp"
            android:layout_marginLeft="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_palette_grey600_24dp"/>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_palette_grey600_24dp"/>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="City"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginRight="20dp"
            android:layout_marginLeft="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_palette_grey600_24dp"/>

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="Address"/>

            <Spinner
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:entries="@array/array"
                android:prompt="@string/prompt"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_add_white_24dp"
    app:borderWidth="0dp"
    app:backgroundTint="@android:color/holo_green_dark"
    app:layout_anchor="@id/viewA"
    app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

Gives this result (styling of spinner and edittext is on you - this is on api 18) :

Answer 2

You can take a look at Chris Banes's implementation of new google design library. https://github.com/chrisbanes/cheesesquare. Especially check this layout, it has some parts from layout that you've attached.