User interface design

In this application, we will keep the user interface simple and informative. All we have is one RecyclerView and two buttons for adding and loading the data. The following xml layout code dictates the UI design: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        android:textSize="25dp"
        android:gravity="center"
        android:text="Packt Blood Bank"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <View
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@color/colorAccent" />

The following code adds the vertical LinearLayout to support the DynamicData:

    <LinearLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/peopleList"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

The above code sets the dynamic lists that load the data from RecyclerView. lets continue updating the same layout to make the UI complete.  

        <View
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:background="@color/colorPrimary" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

The following layout adds a scrollable layout for the input controls. 

            <ScrollView
                android:scrollIndicators="right"
                android:scrollbarStyle="insideOverlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scrollbars="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="150px"
                    android:layout_marginTop="40px"
                    android:gravity="center"
                    android:orientation="vertical">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="150px"
                        android:layout_marginTop="40px"
                        android:gravity="center"
                        android:orientation="horizontal">
                        <EditText
                            android:id="@+id/donorNameInput"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:hint="Full name"
                            android:textColor="#000000"
                            android:textSize="16dp" />
                        <EditText
                            android:id="@+id/donorCityInput"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:hint="City"
                            android:textColor="#000000" />
                    </LinearLayout>

The following code adds the donor blood group type and email address:

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="150px"
                        android:layout_marginTop="40px"
                        android:gravity="center"
                        android:orientation="horizontal">
                        <EditText
                            android:id="@+id/donorBloodGroupInput"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:hint="Blood Group"
                            android:textColor="#000000"
                            android:textSize="16dp" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="150px"
                        android:layout_marginTop="40px"
                        android:gravity="center"
                        android:orientation="horizontal">

                        <EditText
                            android:id="@+id/donorEmailInput"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:hint="Email address"
                            android:textColor="#000000"
                            android:textSize="16dp" />

                    </LinearLayout>

The following code adds the buttons to act on the data received from the input fields:

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#36FFFFFF">
                        <Button
                            android:id="@+id/loadBtn"
                            android:layout_width="500px"
                            android:layout_height="150px"
                            android:text="Load Donors info"
                            android:textColor="#000000"
                            android:textStyle="bold" />
                        <Button
                            android:id="@+id/addBtn"
                            android:layout_width="500px"
                            android:layout_height="150px"
                            android:layout_marginLeft="30px"
                            android:layout_toRightOf="@id/loadBtn"
                            android:text="Add Donor info"
                            android:textColor="#000000"
                            android:textStyle="bold" />
                    </RelativeLayout>
                </LinearLayout>
            </ScrollView>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

We also need each item layout for the RecyclerView, which is defined as follows. In this layout, all we have is four TextView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/donorName"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:padding="10px"
        android:textColor="@color/colorPrimary"
        android:textSize="25dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/donorCity"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:padding="10px"
        android:text="+216 54 821 200"
        android:textSize="14dp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/donorBloodGroup"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:padding="10px"
        android:text="+216 54 821 200"
        android:textSize="14dp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/donorEmail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:padding="10px"
        android:text="+216 54 821 200"
        android:textSize="14dp"
        android:textStyle="italic" />

</LinearLayout>

Now that we have our user interface in place, let's pe deep into the Java part. Let's create a class called Donor. This class is a Plain Old Java Object (POJO) class that we will use throughout the application, and the POJO class dictates the structure of the data.