CODEWITHSUNDEEP
androidandroid-layouttextviewpercentage
Ivan
Ivan

Reputation: 249

Textview center-aligned based on percentage of screenwidth

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>

Upvotes: 1

Views: 1692

Answers (3)

S.Thiongane
S.Thiongane

Reputation: 6915

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.

Upvotes: 2

Harshid Vasoya
Harshid Vasoya

Reputation: 5721

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.

Upvotes: 0

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

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

Upvotes: 0

Related Questions