Cannot vertically align 2 TextViews within a LinearLayout

Question

I have a calendar image (72x72). I am trying to overlay the month on the top bit and the day date on the main bit.

I'm trying to do this by using a vertical LinearLayout with the calendar set as the background image with two TextViews as the children of the LinearLayout.

I've got it working up to a point, but I cannot get the month to move down sufficiently so that it is in the correct position.

This image is what I've achieved so far:

Using the following layout fragment:

 <LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/cal"
    android:layout_gravity="center"
    android:weightSum="8">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="September"
        android:id="@+id/textView8"
        android:layout_weight="5"
        android:gravity="center_horizontal|bottom"
        android:textColor="#ffffff"
        android:textSize="10dp"
        android:layout_gravity="center_horizontal"
        android:textStyle="bold"
        android:paddingBottom="-10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Display1"
        android:text="21"
        android:id="@+id/textView9"
        android:textColor="#000000"
        android:textStyle="bold"
        android:layout_weight="3"
        android:gravity="center"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="0dp"
        android:paddingTop="0dp" />

</LinearLayout>

I've been playing around with weight and padding (as you can see), but nothing I've tried has worked.

Can anyone suggest what I should do? (I'd prefer not to change the text sizes if possible.)

The answer was to add padding to the top of the date month TextView as Hussein El Feky (and Brendan Shaenzer) suggested. So thank you, both.

Here is the corrected image:

Answer 1

Try this layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/cal">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="September"
        android:id="@+id/textView8"
        android:layout_weight="5"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="10dp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Display1"
        android:text="21"
        android:id="@+id/textView9"
        android:textColor="#000000"
        android:textStyle="bold"
        android:layout_weight="7"
        android:gravity="center" />

</LinearLayout>

If you can provide your cal drawable, I will also be able to improve my answer. I have let your TextViews be centered, but now play with the weights, since I don't have your drawable.

Answer 2

It looks like you need space between the first TextView and the top of the LinearLayout, but I don't see any attributes in there that would achieve that. Any of:

• android:paddingTop on textView8
• android:layout_marginTop on textView8
• android:paddingTop on the LinearLayout

Should do it.