How Would I Go About Making This Layout?

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?

Solution 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.CoordinatorLayoutxmlns: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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><LinearLayoutandroid:id="@+id/viewA"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="0.6"android:background="#acacac"android:orientation="horizontal"/><LinearLayoutandroid:id="@+id/viewB"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="0.4"android:background="#bebebe"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_marginTop="30dp"android:layout_marginRight="20dp"android:layout_marginLeft="20dp"><ImageViewandroid: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"/><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="Name"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"><ImageViewandroid: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"/><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="City"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_marginRight="20dp"android:layout_marginLeft="20dp"><ImageViewandroid: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"/><EditTextandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:hint="Address"/><Spinnerandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:entries="@array/array"android:prompt="@string/prompt"/></LinearLayout></LinearLayout></LinearLayout><android.support.design.widget.FloatingActionButtonandroid: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) :

Solution 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.