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

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.


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

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"
        >