How Do I Align Text View To Be In Center (vertically) Of Two NumberPickers?

I would like to align a TextView containing ':' between two NumberPickers, I would also like it to be on top of the NumberPickers so that it is not 'pushing' the NumberPickers to t

Solution 1:

To get the colon (:) to appear above (z-index) the pickers and not take space, the layout needs to be layered. There are a few ways to do this but likely the simplest is

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/timer">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <NumberPicker
            android:id="@+id/numberPicker1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <NumberPicker
            android:id="@+id/numberPicker2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView"
        android:text=":" />
</FrameLayout>

It's worth noting here that this assumes that the absolute center of the two pickers is going to be the visual center of the two pickers. I say this because if ever there is a design of the number pickers (either platform or custom) that makes the vertical center offset from the layout center, you'll have an issue with the way this looks.

Solution 2:

Try the following code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".Launcher" >

<NumberPicker
    android:id="@+id/numberPicker2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/numberPicker1"
    android:layout_marginBottom="48dp"
    android:layout_toLeftOf="@+id/numberPicker2"
    android:text=":"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<NumberPicker
    android:id="@+id/numberPicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/numberPicker2"
    android:layout_toLeftOf="@+id/textView1" /></RelativeLayout>

Solution 3:

android:layout_centerVertical="true" on TextView will place the ":" in the center between the numberPickers.