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