Textview center-aligned based on percentage of screenwidth

Question

I thought this will be a common question, but I couldn't find any answers......

Is it possible to center-aligned a (variable length) textview based on a percentage of the screen width?

In my case, I have 2 textview and I want to achieve something like this:

textiew alignment

Another example:

textview alignment2

The first textview is center-aligend 30% of the screenwidth, width=wrap_content, while the second textview takes up the rest of the space. The first textview's size should NOT be fixed (see picture above)

I do not want to do that programatically, as it will be expensive on my program. If possible it's better be in an xml layout file :)

Right now I can only achieve a "left-aligned" textview using layout_weight of LinearLayout (by putting a 30% dummy on the left), but I want center-alignment.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="3" >
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="7"
        android:orientation="horizontal" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="textview" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:singleLine="true"
            android:text="another textview"
            android:textColor="#FFFF0000"/>
    </LinearLayout>
</LinearLayout>

@mansoulx I don't have the layout because I can't figure out an answer... But let me post my attempt for the left-aligned case. — Ivan, Apr 16 '14 at 21:19

score 2 · Answer 1 · edited May 23 '17 at 12:20

With almost an hour testing this "..." layout, I succeeded with this :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100" >

    <RelativeLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="40"
        android:background="@android:color/transparent">

        <RelativeLayout
            android:id="@+id/left_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_margin="0dp"
            android:gravity="center"
            android:padding="0dp"
            android:singleLine="true"
            android:text="first textview"
            android:textColor="#FFFF0000" >

            <View
                android:layout_width="1dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:background="#0000FF" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:background="#00FF00"
                android:gravity="center"
                android:text="textview"
                android:textColor="#FFF" />
        </RelativeLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/left_layout"
            android:background="#0000FF"
            android:gravity="center"
            android:text="textview"
            android:textColor="#FFF" />
    </RelativeLayout>

    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="60"
        android:background="#FFFF0000"
        android:gravity="right"
        android:singleLine="true"
        android:text="another textview"
        android:textColor="#FFF" />

</LinearLayout>

Outputs enter image description here

Finally in your Java, according to the green textview width or content length, you can change the layout_weight for other textviews programmatically.

This should help you

Have a nice day.

Sorry but this is completely not what I wanted (just tested on Eclipse). Textview1 is taking up 70% of screenwidth and this is not what I want (refer to my picture). Can you post a screenshot? — Ivan, Apr 16 '14 at 21:28
Sorry dude, I have forgotten the main issue of your question. Let me edit the answer — S.Thiongane, Apr 16 '14 at 21:31
answer edited. Let me know it that works. I haven't tested it yet. — S.Thiongane, Apr 16 '14 at 21:37
While this is nice approach (I think you need 60:40) but I can't have space between textview1 and textview2, that is the difficult part :( — Ivan, Apr 17 '14 at 06:05
Have you tried to use `margin left/right`, `padding left/right`, or adding a `View` between the two `TextView`'s ? — S.Thiongane, Apr 17 '14 at 07:59
Why a `View` between two `TextView`'s? I don't want space... (refer to my picture...) Also to do margin I need to programatically find the width of everything and do calculation whenever my textview changes, I don't want to complicate my code and that is my last resort... — Ivan, Apr 17 '14 at 08:27
actually margin does not help either, there is chance I may need to put something on the left of textview1 also — Ivan, Apr 17 '14 at 08:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/50852/discussion-between-mansoulx-and-ivan) — S.Thiongane, Apr 17 '14 at 08:41
closer approach, but the proportion changes whenever the textview size changes...... The right textview should not have a fixed weight of 60, it should be variable — Ivan, Apr 17 '14 at 10:00
Just thinking what you want again gives me headaches :( ! Check my edited answer. good luck ! — S.Thiongane, Apr 17 '14 at 10:09

Haresh Chhelana · Answer 2 · 2014-04-17T06:36:31.203

// try this way hope this will help you...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="0.15"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.85">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="left"
                android:text="first Textview"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="second textview demo text "/>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

This does not work, since when the first textview has content smaller than the max width, the text get right aligned, not center aligned... My first textview typically contains only words of length 1 - 5 — Ivan, Apr 17 '14 at 06:07
now you check i have edited my ans and let me know still not achieved your requirement... — Haresh Chhelana, Apr 17 '14 at 06:37
@ Haresh No, now instead of right aligned textview1 just became left aligned, still not center! (my textview will change, let's say it should be center when you put "1, 2, one, four, three" — Ivan, Apr 17 '14 at 08:30

score 0 · Answer 3 · answered Apr 17 '14 at 06:57

try this one

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="7"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

Work perfect checked by me.

Please check my question and my picture carefully. I don't want space between the textviews. — Ivan, Apr 17 '14 at 08:51

Textview center-aligned based on percentage of screenwidth

3 Answers3