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 View
s 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 TextView
s ("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
.
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"
>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With