CODEWITHSUNDEEP
javaandroidxml
Addev
Addev

Reputation: 32221

Center a block of two Views in Android

I want a block of two labels to be horizontally centered in the screen, currently I have the following code:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/TextView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="Lorem ipsum"
        android:textColor="#ff0000" />

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="Test 2"
        android:textColor="#00ff00" />
</LinearLayout>

It is ok when the text are short (see image below):

enter image description here

But when the red text is long (or the screen is narrow) the green text is missing:

enter image description here

Since green text is a single word I want it to have priority, beeing always visible ellipsing the red if needed (and keeping the block centered)

This is how it should look like:

enter image description here

How can I achieve that?

Note: I need to use two TextView since they must be animated

Upvotes: 0

Views: 58

Answers (5)

Jayant Arora
Jayant Arora

Reputation: 1261

Give Max Width attribute to TextView2 dynamically, it should be : Get Screen Dimensions [Width] first and then TextView1 width.

int maxWidth  = ScreenWidthSize - WidthOfTextView1;
textView2.setMaxWidth(maxWidth);

or if u want custom width for each in dp then in XML:

 android:maxWidth="200dp"

Hard coded for each.

Upvotes: 1

Igor Morais
Igor Morais

Reputation: 645

You can use layout_weight atribute.

Try this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal" >

<TextView
    android:id="@+id/TextView02"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:ellipsize="end"
    android:singleLine="true"
    android:text="Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum"
    android:textColor="#ff0000" />

<TextView
    android:id="@+id/TextView01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:text="Test 2"
    android:textColor="#00ff00" /></LinearLayout>

Hope its help.

Upvotes: 2

icaneatclouds
icaneatclouds

Reputation: 1170

Here try this:

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/TextView02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ellipsize="end"
        android:gravity="right"
        android:singleLine="true"
        android:text="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
        android:textColor="#ff0000" />

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:singleLine="true"
        android:text="TextView"
        android:textColor="#00ff00" />
</LinearLayout>

Upvotes: 2

elvisrusu
elvisrusu

Reputation: 378

I get the result that you expect using weight:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/TextView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="Lorem ipsumsvasvdfbfgnbgndnnghnghnghngngnbfgbsdfbsdfdsfvsdfvfv"
        android:textColor="#ff0000"
        android:layout_weight="1"
        android:layout_width="0dp" />

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="Test 2"
        android:textColor="#00ff00" />

</LinearLayout>

Upvotes: 1

Bhaskar.Ramagiri
Bhaskar.Ramagiri

Reputation: 21

i think u need not use two text views take one text view and use SpannableStringBuilder.

SpannableStringBuilder builder = new SpannableStringBuilder();

        SpannableString redSpannable = new SpannableString("here first string");
        redSpannable.setSpan(new ForegroundColorSpan(Color.parseColor("#ff0000")), 0, "here first string".length(), 0);
        builder.append(redSpannable);
        builder.append(" ");

        String white =  upperCase.toUpperCase();
        SpannableString whiteSpannable = new SpannableString("here second string");
        whiteSpannable.setSpan(new ForegroundColorSpan(Color.parseColor("#00ff00")), 0, "here second string".length(), 0);
        builder.append(whiteSpannable);
TextView02.setText(builder, BufferType.SPANNABLE);

Upvotes: -1

Related Questions