Horizontally center align two textviews in a layout

Question

I need to horizontally align two textview in the center of the screen. Both textviews have different font size.

Here is my code:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="top|center_horizontal"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/progressstatus"
        android:layout_gravity="center_horizontal"
        android:textColor="#FFFFFF"
        android:textSize="50sp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/percent"
        android:textColor="#CCCCCC"
        android:textSize="20sp" />

</LinearLayout>

Right now my textviews are aligned left and both are showing same font size.

Answer 1

Try It:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/progressstatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical|right"
        android:text="75"
        android:textColor="#FFFF00"
        android:textSize="50sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:text="%"
        android:textColor="#CCCCCC"
        android:textSize="20sp" />
</LinearLayout>

Explanation: I set the parent layout to wrap_content, means parent will wrapped its height according to child heights. There are 2 textviews in parent. One has bigger font size and other has smaller font size. Bigger font size view would definitely has more height then smaller one. So, i set the bigger height to wrap_content. Now, the smaller view's height is match_parent, means smaller one would expand itself to max height of parent that would be equal to the height of bigger font's view.. So, both would be center_aligned.

Answer 2

<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:background="#31BBF9" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="top|center_horizontal"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/progressstatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="75"
        android:textColor="#FFFFFF"
        android:textSize="50sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="%"
        android:textColor="#FFFFFF"
        android:gravity="center_vertical"
        android:textSize="20sp" />

</LinearLayout>

Output

change testview's (%) android:gravity="center_vertical" to your choice