CODEWITHSUNDEEP
androidandroid-layout
sandalone
sandalone

Reputation: 41759

Keep ImageView on the right size of the text and yet prevent long text to push it out of view?

The situation is the same no matter if I use LinearLayout or RelativeLayout. I think this is a old Android XMl bug, but I have no idea why it still exists.

Namely, in a layout where an ImageView is on the right side of a TextView can disappear from the screen when text becomes too long. It simply pushes it off the screen. I must NOT make TextView single line.

Here is the XML. 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
>

<TextView
    android:id="@+id/txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="some long text blahblahblahblahblah"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textSize="17sp"
    android:layout_marginRight="10dp"
    android:layout_centerVertical="true"
    />

<ImageView
    android:layout_toRightOf="@+id/txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/key"
    android:layout_centerVertical="true"
    />
</RelativeLayout>

I cannot use layout_weight attribute as image will then stick to the right side of the screen. It HAS to be on the right side of the text.

Anyone has any ideas how to solve this bug?

Check images when the text is short and long. On the 2nd image the text is long and the image is being pushed away from the screen.

Upvotes: 4

Views: 1034

Answers (3)

Eric B.
Eric B.

Reputation: 4702

You can achieve your task, if you use the layout_weight properly. Please refer the code below:

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

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="The quick brown fox jumps over the lazy dog. As you can see it easily handles the long length of the text"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textSize="17sp"
        android:layout_marginRight="10dp"

        />

    <ImageView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        />
</LinearLayout>

The output for long text:Output for long text

The output for short text: enter image description here

EDIT: This works because of the layout whose width is set as wrap_content. If it were match_parent then in all cases, all the extra space would have been given to TextView because of it's layout_weight but since the parent is wrap_content, there is no extra space for the TextView to fill when the text is small. But when the text is large, the weight property is applied to the TextView but since there is no layout_weight for the ImageView hence, it takes only the amount of space it has to.

Upvotes: 7

Hala.M
Hala.M

Reputation: 766

there is 2 solutions for these

either set the image as a drawableRight to the textview 

<TextView
    android:id="@+id/txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="The quick brown fox jumps over the lazy dog. As you can see it easily handles the long length of the text"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textSize="17sp"
    android:layout_marginRight="10dp"

android:drawableRight="@drawable/ic_launcher" />

or

alignt the image to right and make textview toleft of the image

Upvotes: 0

geNia
geNia

Reputation: 1025

Set

android:layout_marginRight="30dp"

for the TextView

and

android:layout_marginLeft="-20dp"

for the ImageView


You can change the values depending on your needs.

But, if the image can have different sizes, you will have to set margins programmatically.

Upvotes: 0

Related Questions