Android Constraint Layout Day 2: Simple Selection Layout

Today I made a simple select layout, similar structures are used extensively in all apps. My sample is the selection of a country, which is usually used when choosing a home or destination. I have kept it pretty basic considering my level of expertise.

You can see it consists of a Label, a Recyclerview and two Buttons, to go back and forth between screens.

So I just went straight ahead and selected an Empty activity. I actually used a horizontal guideline at the bottom of the page to separate the Label and Recyclerview from the Buttons. The layout_constraintGuide_percent value is set to .85 and removed the value from layout_constraintGuide_begin.

Next I put the controls in the layout. The textview is constrained at the top and left. The recyclerview is centered vertically and constrained to the bottom of the textview. The left button is constrained at the left and right button is constrained at the right. Both buttons tops are constrained with the bottom of the guideline, and bottoms are constrained with the bottom of the screen. So I can say, the buttons are centered vertically within the button and the guideline.

The resulting layout is below.

The layout code is below

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".CountryListActivity">

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:text="Select Country"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.RecyclerView
        android:layout_width="395dp"
        android:layout_height="374dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView7" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:text="Prev"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="NEXT"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".85" />
</android.support.constraint.ConstraintLayout>

I have omitted the parts related to recyclerview loading since it’s not related to any constraints. Next day I will work with another simple layout.