androidandroid-drawablexml-drawable

Drawable icon use square space instead of rectangle


I want to have a small button that has a three dots icon.

I made the icon drawable :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="6dp"
    android:height="24dp"
    android:viewportWidth="6.0"
    android:viewportHeight="24.0">
    <item
        android:top="0dp"
        android:width="6dp"
        android:height="6dp">
        <shape android:shape="oval">
            <solid
                android:color="#666666"/>
            <size
                android:width="6dp"
                android:height="6dp"/>
        </shape>
    </item>
    <item
        android:top="9dp"
        android:width="6dp"
        android:height="6dp">
        <shape android:shape="oval">
            <solid
                android:color="#666666"/>
            <size
                android:width="6dp"
                android:height="6dp"/>
        </shape>
    </item>
    <item
        android:top="18dp"
        android:width="6dp"
        android:height="6dp">
        <shape android:shape="oval">
            <solid
                android:color="#666666"/>
            <size
                android:width="6dp"
                android:height="6dp"/>
        </shape>
    </item>
</layer-list>

It's a 6 per 24dp, with 3 dots of 6dp each.

When I want to show it, I'm using it like that:

<Button
    android:id="@+id/mybtnId"
    android:layout_width="24dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    app:icon="@drawable/ic_more_dots" />

enter image description here

I tried to add android:gravity="start", change android:layout_width, android:viewportWidth etc but this doesn't changes anything or isn't helpful.

How can I make it as a rectangle, to let it fit the button instead of going outside ?


Solution

  • As suggested by @CommonsWare, I change the Button to an ImageButton and it works fine.

    Here is my new code:

    <ImageButton
        android:id="@+id/mybtnId"
        android:layout_width="24dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:src="@drawable/ic_more_dots" />
    

    With this, the button doesn't want to put a text in it, and so doesn't add padding to icon. The icon is well centered as it should.

    enter image description here