Align the top of a View to the bottom of another view in a RelativeLayout

Question

How can I align a View's top to another View's bottom? I need two views one on top of another. I achieved the right vertical position with a simple android:layout_below="id_of_the_top_view", but I can't manage to align the Views horizontally. I would something like android:layout_alignTopToBottomOf="id_of_the_top_view", or in general something that lets me align a View center (horizontal or vertical) to another View center.

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

<!-- center picker @ minutes -->
<NumberPicker
    android:id="@+id/npicker_minutes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp" />

<!-- left picker @ hours -->
<NumberPicker
    android:id="@+id/npicker_hours"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@id/npicker_minutes" />

<!-- right picker @ seconds -->
<NumberPicker
    android:id="@+id/npicker_seconds"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/npicker_minutes" />

<TextView
    android:id="@+id/tv_minutes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/npicker_minutes"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/minutes_short" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/npicker_hours"
    android:layout_toLeftOf="@id/tv_minutes"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/hours_short" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/npicker_seconds"
    android:layout_toRightOf="@id/tv_minutes"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/seconds_short" />

</RelativeLayout>

What I've got is this:

And what I need to achieve is that the three TextViews ("hh", "mm" and "ss"), are placed each one below one of the number pickers, with the horizontal center of the TextView aligned to the horizontal center of the NumberPicker.

Answer 1

in my case i use android:layout_above

 <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/layout_bottom"
        >

Answer 2

You need to add this lines to your TextViews:

android:layout_alignLeft="@id/npicker_minutes"
android:layout_alignRight="@id/npicker_minutes"
android:gravity="center_horizontal"

Complete sample of your code:

<!-- center picker @ minutes -->

<NumberPicker
    android:id="@+id/npicker_minutes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp" />

<!-- left picker @ hours -->

<NumberPicker
    android:id="@+id/npicker_hours"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@id/npicker_minutes" />

<!-- right picker @ seconds -->

<NumberPicker
    android:id="@+id/npicker_seconds"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/npicker_minutes" />

<TextView
    android:id="@+id/tv_minutes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/npicker_minutes"
    android:layout_alignRight="@id/npicker_minutes"
    android:gravity="center_horizontal"
    android:layout_below="@id/npicker_minutes"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/minutes_short" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/npicker_hours"
    android:layout_alignRight="@+id/npicker_hours"
    android:gravity="center_horizontal"
    android:layout_below="@id/npicker_hours"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/hours_short" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/npicker_seconds"
    android:layout_alignRight="@id/npicker_seconds"
    android:gravity="center_horizontal"
    android:layout_below="@id/npicker_seconds"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/seconds_short" />

The alternative way is to use tree LinearLayouts, every with one NumberPicker and one TextView inside.

Answer 3

You can use the following properties to align the first and the third text view:

      android:layout_alignLeft="@+id/your_first_number_picker" //your first text view

 android:layout_alignRight="@+id/your_third_number_picker" //your third text view