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.