Put space between text and imageview

Question

I have the following xml. I have textview and also an imageview. I want to have a little bit of space(lets say 20dp) between these items, but based on the textview length, it is overlapping sometimes.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical|left"
    android:id="@+id/myName"
    android:textSize="14sp" />
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/myName"
    android:gravity="center_vertical|right"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_arrow_drop_down_red"
    android:paddingLeft="20dp" />
</RelativeLayout>

you could also see the problem in the following image. There is a text and image. Image is red colored.

Update:

I haved followed the following approach using android:drawableRight but getting the same thing.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
    android:textColor="@color/primary_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical|left"
    android:id="@+id/myName"
    android:textSize="14sp"
    android:drawableRight="@drawable/ic_arrow_drop_down_red"
    android:drawablePadding="20dp" />
 </RelativeLayout>

score 3 · Answer 1 · answered Jun 16 '16 at 22:07

3

If all you want is to show a drawable to the right (or any other side) of your TextView, consider using the android:drawableRight attribute instead of two views.

The image can be further separated with android:drawablePadding. If your UI is more complicated it might not be enough and you'll have to do with two views.

answered Jun 16 '16 at 22:07

Juan Cortés

20,634
8
68
91

1

This is quite a nice way to do it also. – Vucko Jun 16 '16 at 22:51

Vucko · Accepted Answer · 2016-06-16T23:01:36.800

1

You can insert an empty view with the width that you need between these two like this (also might be smart to change your layout to LinearLayout).

EDIT After changing to linear layout, both empty view solution, and drawableRight solution work, so I'm editing mine to look prettier like this. All the credit for drawableRight goes to @JuanCortes:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical|left"
    android:id="@+id/myName"
    android:textSize="14sp"
    android:drawableRight="@drawable/ic_arrow_drop_down_red"
    android:paddingLeft="20dp" />

</LinearLayout>

edited Jun 16 '16 at 23:01

answered Jun 16 '16 at 22:25

Vucko

7,371
2
27
45

Unfortunately, I am still getting the same result. Even though I deleted app and clean and rebuilt it. – casillas Jun 16 '16 at 22:32
Hm, get rid of the relative layout and place this in a linear layout. Also get rid of the `toLeftOf` and similar, cause they're unique to the relative layout. Relative layouts give me the creeps. – Vucko Jun 16 '16 at 22:33
Yeap, that worked even with `drawableRight` no need for extra view or imageview. Please update your answer, then I will mark it as answer. – casillas Jun 16 '16 at 22:43
Ok, cool. Thanks. edited. You need to start learning to work with linear layouts, they're what I've come to conquer and find myself most comfortable working with, and maintaining control over. You can nest them anyway you want, and use weights to give them relative size. – Vucko Jun 16 '16 at 22:47

score 0 · Answer 3 · answered Jun 16 '16 at 22:36

Try using Framelayout it may help you

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">
    <FrameLayout
        android:layout_width="match_parent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_height="wrap_content">
        <TextView

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|left"
            android:id="@+id/myName"
            android:textSize="14sp"
             />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/myName"
            android:layout_gravity="center_vertical|right"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:paddingLeft="20dp" />
    </FrameLayout>

</RelativeLayout>

score 0 · Answer 4 · edited May 23 '17 at 12:15

0

why not use those properties ?

margin
padding
or compound ???

How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView

edited May 23 '17 at 12:15

Community

1
1

answered Jun 16 '16 at 22:51

ceph3us

7,326
3
36
43

Put space between text and imageview

4 Answers4