hotspring hotspring - 5 months ago 54
Android Question

Put space between text and imageview

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.

enter image description here

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>

Answer

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>