How to position a drawable inside an android button?

Question

I have some design issues in Android. I want to make some buttons, with a drawable inside, and place the drawable on top of my text. I succeeded, in a sense, to do that, which give me the following interface.

To talk about the code, i'm using a TableLayout, in which i've put two TableRow, designed as it follows :

<TableRow
    android:id="@+id/row1"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <Button
        android:id="@+id/actu"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="@string/mon_actu"
        android:drawableTop="@drawable/ic_shopping_cart_black_48dp"
        android:paddingTop="100dp"
        android:drawablePadding="-130dp"
        android:gravity="center"/>

    <Button
        android:id="@+id/commerce"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:drawableTop="@drawable/ic_shopping_cart_black_48dp"
        android:paddingTop="100dp"
        android:drawablePadding="-130dp"
        android:text="@string/mes_commerces"
        android:gravity="center" />
</TableRow>

This is the final result i want to have, but when i launch it on my own phone, all the icon are on the text, hiding it. I guess the problem comes from the values of my paddingTop, and drawablePadding values, because it's absolute values, and the resolution is different according to the model.

What can i do to solve this issue ?

Answer 1

You must not have static and negative values for responsive design which support multiple device with different resolutions.

Instead of you can use TableLayout with TableRow and LinearLayout.

Try This Out:

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="@drawable/ic_shopping_cart_black_48dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello World" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="@drawable/ic_shopping_cart_black_48dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello World" />
            </LinearLayout>

        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="@drawable/ic_shopping_cart_black_48dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello World" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="@drawable/ic_shopping_cart_black_48dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello World" />
            </LinearLayout>
        </TableRow>
    </TableLayout>

This will be supported in all device with different resolutions and height-width.