How do I align text view to be in center (vertically) of two NumberPickers?

Question

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 the side. Currently this is my XML for the LinearLayout containing the NumberPickers and TextView:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/timer">
    <NumberPicker
        android:id="@+id/numberPicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

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

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

And this is what it looks like in my IDE's preview:

I would really like the colon to be centered vertically and 'over' the NumberPickers so there is no white space between them. Any help is greatly appreciated!

Edit: The 'layout_alignCenter' I have in there right now does not work, doesn't seem to do anything (yes, I pulled it out of thin air).

Answer 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.

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

Answer 3

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