Android TextView center text exactly

Question

I am working on a Navigation Drawer I want it to look like the one in Gmail. But I have some troubles with the circle with the letter in the middle of my TextView. I have android:gravity set to center but it still is not exactly in the middle.

It is moved to the bottom a little bit and therefore looks terrible.

I have also tried creating a custom view but I get the same problem there.

Does anyone have a clue how to solve this?

header.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="300dp"
    android:layout_height="168dp">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="168dp"
        android:src="@mipmap/header_background"
        android:scaleType="fitXY"
        android:id="@+id/imageView2" />

    <TextView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginLeft="16dp"
        android:layout_marginBottom="8dp"
        android:layout_above="@+id/subtitle"
        android:gravity="center"
        android:text="M"
        android:textAllCaps="true"
        android:textSize="48sp"
        android:textColor="@color/actionbar"
        android:fontFamily="sans-serif-medium"
        android:background="@drawable/circle" />

    <RelativeLayout
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:id="@+id/subtitle">

        <LinearLayout
            android:layout_centerVertical="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/name"
                android:text="My Name"
                android:textSize="14sp"
                android:textColor="#FFFFFF"
                android:fontFamily="sans-serif-medium"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/name"
                android:text="my.mail@my.server"
                android:textColor="#FFFFFF"
                android:textSize="14sp"
                android:fontFamily="sans-serif"/>
        </LinearLayout>

</RelativeLayout>

circle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@android:color/white"/>
    <size
        android:width="64dp"
        android:height="64dp"/>
</shape>

Thanks

EDIT: I changed "center_horizontal" to "center" since that is what I had in my code when I took the screenshot

Answer 1

I think you have given background to textview, therefor it is not working properly. As you have draw circle with 64 dp and also the width of textview is 64 so it might be not working properly.

So, check below 2 options.

1) Try to increase width of textview or decrease width of circle and check.

If it is not working then you need to apply below 2nd solution.

2) Set circle to layout and then add textview in it as below.

    <RelativeLayout
         android:layout_width="70dp"
         android:layout_height="70dp"
         android:layout_marginLeft="16dp"
         android:layout_marginBottom="8dp"
         android:layout_above="@+id/subtitle"
         android:gravity="center"
         android:background="@drawable/circle" />

             <TextView
                 android:layout_width="64dp"
                 android:layout_height="64dp"
                 android:layout_centerInParent="true"
                 android:gravity="center"
                 android:text="M"
                 android:textAllCaps="true"
                 android:textSize="48sp"
                 android:textColor="@color/actionbar"
                 android:fontFamily="sans-serif-medium"/>
    </RelativeLayout>

Answer 2

I think you want to modify android:textAlignment ="center" and center the text in the textview as opposed to centering the textview inside its container

Answer 3

You are correct: centering text inside a TextView will not center the text properly. The given text is always a bit shifted, because there is some padding added to the top of the text. That's why you need to create a customview, setting up a Paint-object and then place the text correctly inside your view.

At first, create a Paint-object to measure the text:

Paint mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setTextAlign(Paint.Align.CENTER);
mPaint.setColor(Color.BLUE);
mPaint.setTextSize(12);

Then, in your customView's onDraw-method, do the following:

canvas.drawText(mText, getWidth()/2, getHeight()/2, mPaint);