Android: ImageView next to TextView not showing

Question

I have a TextView and ImageView in a ListView row, positioned next to each other. However, the ImageView doesn't show up at all, and doesn't register clicks either. This is the XML code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:text="text"
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_centerVertical="true"
        android:padding="10dp" />

    <ImageView
        android:id="@+id/imageView"
        android:clickable="true"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/textView"
        android:src="@drawable/ic_action"/>
</RelativeLayout>

The problem seems to lie in the layout_toRightOf line, if I remove it, the ImageView is shown, but in the wrong place. But I don't understand why it's causing a problem. What am I missing?

@Technicolor seems `android:layout_width="320dp"` is too much for your screen why you exactly need 320 dp ? — Charuක, Feb 12 '17 at 03:00

score 1 · Accepted Answer · answered Feb 12 '17 at 02:57

The issue is that the TextView is pushing the ImageView off the screen.

You can fix this using a LinearLayout and android:layout_weight

eg:

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

    <TextView
        android:id="@+id/textView"
        android:text="text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginTop="10dp"
        android:layout_centerVertical="true"
        android:padding="10dp" />

    <ImageView
        android:id="@+id/imageView"
        android:clickable="true"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/textView"
        android:src="@drawable/ic_action"/>
</LinearLayout>

More info on the layout_weight attribute:

This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.

score 0 · Answer 2 · answered Feb 12 '17 at 03:19

You need to use LinearLayout with weight.. if you set fixed width and the size of the phone is small, it will either stretch out of the screen.

//do linearlayout with orientation horizontal

<LinearLayout 
   ...
   orientation = "horizontal"
   ...
>

    <TextView
        ....
        android:layout_width="0dp"
        android:layout_weight="1"
        ...
    />

    <Button
       ....
       android:layout_width="wrap_content"
       ...
    />

</LinearLayout>

Play with android:layout_weight, you will understand

Android: ImageView next to TextView not showing

2 Answers2