Search code examples
androidandroid-layouttextviewandroid-linearlayout

Center content of TextView vertically & horizontally - LinearLayout


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

enter image description here

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

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