How to center text inside TextView own container?

Question

I need to create this :

As you can see the lines not exactly centered with the text .

The problem ever bigger with Lower case text .

the text is to low , not centered in is own view

this is my code - The container is Linear Layout with

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:gravity="center"
android:orientation="horizontal

<View
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginRight="10dp"
    android:layout_weight="1"
    android:background="@color/gray_separator" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:text="How ?"
    android:textColor="@color/gray_login_or"
    android:textSize="26sp" />

<View
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginLeft="10dp"
    android:layout_weight="1"
    android:background="@color/gray_separator" />

i have tried with Relative Layout but this is not the problem , the problem and the solution in the TextView .

The best easy way to understand the problem is the different between lower and upper case...in upper case i have no problem .

No .I have tried . I don't believe this a gravity issue . Maybe i"m wrong . it is something like AjustViewBounds that is missing — Jesus Dimrix, Oct 31 '18 at 08:46
put all 3 views in a linear layout, then make your textview match parent in height and then use gravity for text alignment — Vivek Mishra, Oct 31 '18 at 08:49
You pasted three views, what is their parent? This question lacks of information. — deadfish, Oct 31 '18 at 09:06

score 1 · Answer 1 · answered Oct 31 '18 at 08:50

1

I have used :

 android:layout_gravity="center_horizontal"

instead of :

  android:gravity="center_vertical"

And it worked for me.

answered Oct 31 '18 at 08:50

Rozina

349
2
14

score 1 · Answer 2 · answered Oct 31 '18 at 09:00

<View
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:background="@color/gray_separator"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:textSize="26sp"
    android:text="How ?"
    android:textColor="@color/gray_login_or"/>

<View
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:background="@color/gray_separator"/>

score 1 · Answer 3 · answered Oct 31 '18 at 09:02

Here's what I have done for the similar requirement, which works pretty well.

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="5dp"
            android:src="@drawable/dashline"
            android:layerType="software"
            android:layout_below="@+id/title"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="0dp"
            android:layout_weight="2"
            android:layout_gravity="center"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="OR"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="25dp"
            android:layout_margin="10dip"
            android:layout_gravity="center"
            android:clickable="true"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="5dp"
            android:src="@drawable/dashline"
            android:layerType="software"
            android:layout_below="@+id/title"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="0dp"
            android:layout_gravity="center"
            android:layout_weight="2"
            />

    </LinearLayout>

I am using ImageView as per my need, you can replace them with View which you want.

This is my dashline.xml

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

    <stroke
        android:color="#ffffff"
        android:dashWidth="8px"
        android:dashGap="0px"
        android:width="1dp"/>
</shape>

Here's the snapshot of the screen portion.

So android:layout_gravity="center" should work.

if you will change the OR to lowercase you will see the problem , great example — Jesus Dimrix, Oct 31 '18 at 10:20

score 1 · Answer 4 · answered Oct 31 '18 at 09:06

1

use android:gravity="center" in your text view.

answered Oct 31 '18 at 09:06

Jawad Malik

615
3
20

score 1 · Answer 5 · answered Oct 31 '18 at 09:31

I guess parent is a horizontal linear layout. So this should be used:

android:layout_gravity="center_vertical"

instead of

android:gravity="center_vertical"

but if parent's height is wrap_content, result should be same.

BTW, alphabet fonts are not horizontally in the middle of the space. It is a little lower than center line, which is more comfortable for human eyes. refer to:

https://en.wikipedia.org/wiki/File:Typography_Line_Terms.svg

score 1 · Answer 6 · answered Oct 31 '18 at 09:53

                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="0dp"
                    android:orientation="horizontal">

                    <View
                        android:layout_width="40dp"
                        android:layout_height="1dp"
                        android:background="@color/black"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="1"/>

                    <TextView
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:id="@+id/Imagetxt"
                        android:layout_width="20dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Image Cart"
                        android:clickable="false"
                        android:textColor="@color/orange"/>

                    <View
                        android:layout_width="40dp"
                        android:layout_height="1dp"
                        android:background="@color/black"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="1"/>

            </LinearLayout>


                </android.support.v7.widget.CardView>

How to center text inside TextView own container?

6 Answers6