Android: How to align TextView with upper and lower elements?

Question

Please have a look at the below UI (please ignore the comment in red)

Below is my attempt in making it

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/content_id_target_ranges"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".activities.TargetRangesActivity"
    tools:showIn="@layout/app_bar_target_ranges">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

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

            <TextView
                android:id="@+id/target_ranges_title_txt"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="12dp"
                android:text="@string/my_settings_target_ranges"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/target_ranges_sub_heading_txt"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="6dp"
                android:text="@string/target_ranges_sub_heading"
                android:textSize="14sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_marginTop="12dp"
                android:background="@drawable/linear_border"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/target_ranges_blood_glucose_txt"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_marginTop="12dp"
                    android:text="@string/target_ranges_blood_glucose_text"
                    android:textSize="16sp" />

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginRight="15dp"
                        android:layout_marginTop="6dp"
                        android:layout_weight="1"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/target_ranges_blood_glucose_pre_meal_txt"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/target_ranges_blood_glucose_pre_meal"
                            android:textAlignment="center"
                            android:textSize="12sp"
                            android:textStyle="bold" />

                        <TextView
                            android:id="@+id/target_ranges_blood_glucose_pre_meal_unit_txt"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="12dp"
                            android:text="@string/target_ranges_blood_glucose_unit"
                            android:textAlignment="center"
                            android:textSize="10sp" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="5dp"
                        android:layout_marginTop="6dp"
                        android:layout_weight="1">

                        <android.support.design.widget.TextInputLayout
                            android:layout_width="48dp"
                            android:layout_height="48dp"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:layout_marginTop="5dp"
                            android:background="@drawable/edit_text_style">

                            <EditText
                                android:id="@+id/target_ranges_blood_glucose_first_edit"
                                style="@style/EditTextStyle"
                                android:focusable="true" />

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


                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="6dp"
                        android:layout_weight="1">

                        <android.support.design.widget.TextInputLayout
                            android:layout_width="48dp"
                            android:layout_height="48dp"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:layout_marginTop="5dp"
                            android:background="@drawable/edit_text_style">

                            <EditText
                                android:id="@+id/target_ranges_blood_glucose_second_edit"
                                style="@style/EditTextStyle"
                                android:focusable="true" />

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

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="6dp"
                        android:layout_weight="1">

                        <android.support.design.widget.TextInputLayout
                            android:layout_width="48dp"
                            android:layout_height="48dp"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:layout_marginTop="5dp"
                            android:background="@drawable/edit_text_style">

                            <EditText
                                android:id="@+id/target_ranges_blood_glucose_third_edit"
                                style="@style/EditTextStyle"
                                android:focusable="true" />

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

                    </LinearLayout>

                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="30dp"
                        android:orientation="horizontal"
                        android:weightSum="1">

                        <TextView
                            android:layout_width="34dp"
                            android:layout_height="48dp"
                            android:textSize="16sp"
                            android:textColor="@color/colorWhite"
                            android:background="@drawable/gray_colour_style"
                            android:layout_weight="1.46" />

                        <TextView
                            android:layout_width="90dp"
                            android:layout_height="48dp"
                            android:textSize="16sp"
                            android:background="@drawable/green_colour_style"
                            android:textColor="@color/colorWhite"
                            android:layout_weight="0.15" />

                        <TextView
                            android:layout_width="60dp"
                            android:layout_height="48dp"
                            android:textSize="16sp"
                            android:background="@drawable/yellow_colour_style"
                            android:textColor="@color/colorWhite" />

                        <TextView
                            android:layout_width="70dp"
                            android:layout_height="48dp"
                            android:textSize="16sp"
                            android:background="@drawable/red_colour_style"
                            android:textColor="@color/colorWhite"/>

                    </LinearLayout>

                </LinearLayout>

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginRight="10dp"
                        android:layout_marginTop="6dp"
                        android:layout_weight="1"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/target_ranges_blood_glucose_post_meal_txt"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/target_ranges_blood_glucose_post_meal"
                            android:textAlignment="center"
                            android:textSize="12sp"
                            android:textStyle="bold" />

                        <TextView
                            android:id="@+id/target_ranges_blood_glucose_post_meal_unit_txt"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="12dp"
                            android:text="@string/target_ranges_blood_glucose_unit"
                            android:textAlignment="center"
                            android:textSize="10sp" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="5dp"
                        android:layout_marginTop="6dp"
                        android:layout_weight="1">

                        <android.support.design.widget.TextInputLayout
                            android:layout_width="48dp"
                            android:layout_height="48dp"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:layout_marginTop="5dp"
                            android:background="@drawable/edit_text_style">

                            <EditText
                                android:id="@+id/target_ranges_blood_glucose_four_edit"
                                style="@style/EditTextStyle"
                                android:focusable="true" />

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


                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="6dp"
                        android:layout_weight="1">

                        <android.support.design.widget.TextInputLayout
                            android:layout_width="48dp"
                            android:layout_height="48dp"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:layout_marginTop="5dp"
                            android:background="@drawable/edit_text_style">

                            <EditText
                                android:id="@+id/target_ranges_blood_glucose_five_edit"
                                style="@style/EditTextStyle"
                                android:focusable="true" />

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

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="6dp"
                        android:layout_weight="1">

                        <android.support.design.widget.TextInputLayout
                            android:layout_width="48dp"
                            android:layout_height="48dp"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:layout_marginTop="5dp"
                            android:background="@drawable/edit_text_style">

                            <EditText
                                android:id="@+id/target_ranges_blood_glucose_six_edit"
                                style="@style/EditTextStyle"
                                android:focusable="true" />

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

                    </LinearLayout>

                </LinearLayout>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="24dp" />

            </LinearLayout>



        </LinearLayout>

    </ScrollView>

</RelativeLayout>

However it generated the below UI

Notice how the colorfull bar is not aligned properly with the upper and lower text boxes, as the first image indicated via a dotted line (the dotted line shows the where the edge of each colourful tile should be, in aligned with the textboxes.

Also notice my text boxes are different than what is expected.

How can I make it as displayed in the first image?

Answer 1

Here I have fix your inner layout, change drawable and color.., etc

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/content_id_target_ranges"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/down_shadow"
        android:orientation="vertical"
        android:weightSum="20">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="Texttttttttttttttttttttttttttttttttt"
            android:textColor="#000" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:orientation="horizontal"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:weightSum="10">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/pre_meal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="kkk lkjl" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/pre_meal"
                    android:gravity="center"
                    android:text="sd/sd" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="8"
                android:orientation="horizontal"
                android:weightSum="6">


                <EditText
                    android:id="@+id/one"
                    android:layout_width="0dp"
                    android:layout_height="48dp"
                    android:layout_weight="1"
                    android:background="#999698"
                    android:focusable="true" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <EditText
                    android:id="@+id/two"
                    android:layout_width="0dp"
                    android:layout_height="48dp"
                    android:layout_weight="1"
                    android:background="#999698"
                    android:focusable="true" />


                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />


                <EditText
                    android:id="@+id/three"
                    android:layout_width="0dp"
                    android:layout_height="48dp"
                    android:layout_weight="1"
                    android:background="#999698"
                    android:focusable="true" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:orientation="horizontal"
            android:weightSum="9">

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="48dp"
                android:layout_weight="1.5"
                android:background="#8c9393"
                android:gravity="center"
                android:text="Low"
                android:textColor="#fff" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="48dp"
                android:layout_weight="2.4"
                android:background="#1dea12"
                android:gravity="center"
                android:text="Normal"
                android:textColor="#fff" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="48dp"
                android:layout_weight="2.2"
                android:background="#f5d904"
                android:gravity="center"
                android:text="High"
                android:textColor="#fff" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="48dp"
                android:layout_weight="1.9"
                android:background="#ea0c05"
                android:gravity="center"
                android:layout_marginRight="2dp"
                android:text="Very High"
                android:textColor="#fff" />


        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:orientation="horizontal"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:weightSum="10">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/pre_meals"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="kkk lkjl" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/pre_meals"
                    android:gravity="center"
                    android:text="sd/sd" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="8"
                android:orientation="horizontal"
                android:weightSum="6">


                <EditText
                    android:id="@+id/four"
                    android:layout_width="0dp"
                    android:layout_height="48dp"
                    android:layout_weight="1"
                    android:background="#999698"
                    android:focusable="true" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />


                <EditText
                    android:id="@+id/five"
                    android:layout_width="0dp"
                    android:layout_height="48dp"
                    android:layout_weight="1"
                    android:background="#999698"
                    android:focusable="true" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <EditText
                    android:id="@+id/six"
                    android:layout_width="0dp"
                    android:layout_height="48dp"
                    android:layout_weight="1"
                    android:background="#999698"
                    android:focusable="true" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

            </LinearLayout>

        </LinearLayout>


    </LinearLayout>

</RelativeLayout>

Instead of Edittext use your TextInput layout. It is giving error while compiling so i changed it to Edittext