Separate image from AppCompatTextView

Question

I have a Linear Layout with a list of six horizontal button in column. Each Button is defined as a AppCompactTextView since I need to place two images on it, as you can see in the following image:

What I need to do is separate the drawableStartCompat image (the one on the left) from the AppCompactTextView, without changing its position. I would like to keep it separated from the button. How can do it? I was thinking to wrap it with the button in a View but I do not know how to manage it. This is the code of one of the six element of the list:

<androidx.appcompat.widget.AppCompatTextView
     android:id="@+id/view_top_up_button"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@android:color/transparent"
     android:text="@string/placeholder"
     android:textColor="@color/black"
     app:drawableEndCompat="@drawable/ic_arrow_right_small_black"
     app:drawableStartCompat="@drawable/ic_menu_charge" />

Answer 1

You can wrap the Imageview & TextView into any viewgroup you like & create one view like this, which gives you flexibility to maintain margin postion etc for your view:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/leftImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:src="@drawable/ic_android" />

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_weight="1"
            android:padding="8dp"
            android:text="Boost"
            android:textSize="16sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/rightImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:src="@drawable/ic_arrow_right" />
    </LinearLayout>


</LinearLayout>

Output:

You can even go ahead & create a custom/compound view out of your layout.