Center content of TextView vertically & horizontally - LinearLayout

Question

I am trying to center the context of a TextView vertically and horizontally. Please see the below screenshot.

The TextViews that say 1-5 and 100+ Points are the ones I want centered vertically and horizontally. As you can see, they are center horizontally but not vertically. Below is the code I am using.

    <LinearLayout
        android:id="@+id/linearlayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"   
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView 
                android:id="@+id/l1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:paddingTop="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:paddingBottom="5dp"
                android:textSize="12sp"
                android:gravity="center_vertical|center_horizontal" /> 

            <TextView 
                android:id="@+id/g1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:paddingTop="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:paddingBottom="5dp"
                android:textSize="12sp"
                android:gravity="center_vertical|center_horizontal" /> 

            <TextView 
                android:id="@+id/c1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:paddingTop="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:paddingBottom="5dp"
                android:textSize="12sp"
                android:gravity="center_vertical|center_horizontal" />
        </LinearLayout>

Again, this question is how to center the content of the TextViews, not how to center the TextViews in the LinearLayout. So, how do I center the content both ways in the TextViews?

Solution 1

This is your problem:

android:layout_height="wrap_content"

Your TextView's are set to wrap_content, which means there is no space to be aligned vertically. To fix this, set a fixed row-height. In my example below, I used 50dp; however, it can be set to anything you wish.

P.S - android:gravity="center" handles both center_vertical and center_horizontal.

Throw this code in and check it out!

<LinearLayout
    android:id="@+id/linearlayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"   
        android:layout_height="50dp"
        android:orientation="horizontal" >

        <TextView 
            android:id="@+id/l1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:paddingTop="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp"
            android:textSize="12sp"
            android:gravity="center" /> 

        <TextView 
            android:id="@+id/g1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="4"
            android:paddingTop="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp"
            android:textSize="12sp"
            android:gravity="center" /> 

        <TextView 
            android:id="@+id/c1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="4"
            android:paddingTop="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp"
            android:textSize="12sp"
            android:gravity="center" />
    </LinearLayout>

Solution 2

It looks like android is centering the baseline of the text, not the text istself.

Here's a nice blog post about this annoying problem: http://www.doubleencore.com/2013/10/shifty-baseline-alignment/

In summay, linear layout will attempt to align child views by their text baseline, if possible. There is an xml flag to disable this behavior: android:baselineAligned, which you can try setting to false.

Solution 3

You can check this post

The Android View Groups employ a notion of LayoutParams that are analogous to layout constraints used by Swing Layout Managers. The LayoutParams configure the way the Android View Group lays out it's children views. In Android the GUI can be either built programmatically using Java code or using an XML file. The structure of the XML elements parallels the structure of View object you may build programatically. The XML attributes are used to configure the Layout Params.

And you can configure the gravity into the layout.