Align LinearLayout elements with elements from another LinearLayout

Question

Good afternoon,

I am trying to do a countdown like this:

To do it, I made two horizontal LinearLayout, one for the numeric values and the other, placed below, for the labels, like "DAYS" or "HOURS".

My objective is to align labels in the middle of the numeric values, like in the picture, but I do not know how to do it, here is my code :

<!-- NUMERIC VALUES -->
<LinearLayout
    android:id="@+id/countdown_numbers"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|center"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/days"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"
        android:drawablePadding="10dp"
        android:textColor="@color/white"
        android:text="00"
        android:textSize="58sp"
        android:fontFamily="sans-serif-regular"
        android:layout_marginRight="9dp"
        android:layout_marginBottom="30sp"/>

    <TextView
        android:id="@+id/hours"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"
        android:layout_toRightOf="@id/days"
        android:drawablePadding="10dp"
        android:textColor="@color/white"
        android:text="00"
        android:textSize="58sp"
        android:fontFamily="sans-serif-regular"
        android:paddingRight="@dimen/padding_countdown"
        android:paddingLeft="@dimen/padding_countdown"
        android:layout_marginRight="@dimen/margin_right"/>

    <TextView
        android:id="@+id/minutes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"
        android:layout_toRightOf="@id/hours"
        android:textColor="@color/white"
        android:drawablePadding="10dp"
        android:text="00"
        android:textSize="58sp"
        android:fontFamily="sans-serif-regular"
        android:paddingRight="@dimen/padding_countdown"
        android:paddingLeft="@dimen/padding_countdown"
        android:layout_marginRight="@dimen/margin_right"/>

    <TextView
        android:id="@+id/seconds"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"
        android:layout_toRightOf="@id/hours"
        android:textColor="@color/white"
        android:drawablePadding="10dp"
        android:text="00"
        android:textSize="58sp"
        android:fontFamily="sans-serif-regular"
        android:paddingRight="@dimen/padding_countdown"
        android:paddingLeft="@dimen/padding_countdown"/>

</LinearLayout>

<!-- LABELS -->
<LinearLayout
    android:id="@+id/countdown_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_below="@+id/countdown_numbers">

    <TextView
        android:id="@+id/days_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"
        android:drawablePadding="10dp"
        android:text="@string/days_label"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:fontFamily="sans-serif-regular"
        android:layout_below="@+id/days" />

    <TextView
        android:id="@+id/hours_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"
        android:drawablePadding="10dp"
        android:text="@string/hours_label"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:fontFamily="sans-serif-regular"
        android:gravity="center"
        android:layout_below="@+id/hours"
        android:layout_alignRight="@+id/hours"
        android:layout_alignEnd="@+id/hours"
        android:layout_toRightOf="@+id/days"
        android:layout_toEndOf="@+id/days" />

    <TextView
        android:id="@+id/minutes_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"
        android:drawablePadding="10dp"
        android:text="@string/minutes_label"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:fontFamily="sans-serif-regular"
        android:gravity="center"
        android:layout_below="@+id/minutes"
        android:layout_alignRight="@+id/minutes"
        android:layout_alignEnd="@+id/minutes"
        android:layout_toEndOf="@+id/hours"
        android:layout_toRightOf="@+id/hours" />

    <TextView
        android:id="@+id/seconds_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceListItem"
        android:drawablePadding="10dp"
        android:text="@string/seconds_label"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:fontFamily="sans-serif-regular"
        android:gravity="center"
        android:layout_below="@+id/seconds"
        android:layout_alignRight="@+id/seconds"
        android:layout_alignEnd="@+id/seconds"
        android:layout_toEndOf="@+id/minutes"
        android:layout_toRightOf="@+id/minutes" />
</LinearLayout>

But it does not work, the labels are not in the middle of the numeric values.

Can you please help me?

Thank you !

Answer 1

To achieve that you could use android:layout_weight.

Here his a full xml sample for your case.

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

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:id="@+id/txtDays"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="22" />

            <TextView
                android:id="@+id/txtDayText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/txtDays"
                android:layout_centerHorizontal="true"
                android:text="days" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:id="@+id/txtHours"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="20" />

            <TextView
                android:id="@+id/txtHourText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/txtHours"
                android:layout_centerHorizontal="true"
                android:text="hour" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:id="@+id/txtMinutes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="20" />

            <TextView
                android:id="@+id/txtMinuteText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/txtMinutes"
                android:layout_centerHorizontal="true"
                android:text="minutes" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:id="@+id/txtSeconds"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="20" />

            <TextView
                android:id="@+id/txtSecondsText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/txtSeconds"
                android:layout_centerHorizontal="true"
                android:text="seconds" />

        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

Screenshot: