Android: ImageButton's not matching parent whole size

Question

I have a toolbar with a LinearLayout inside (I painted the LinearLayout background in black so you can see it better). Inside the LinearLayout I have 3 ImageButtons.

As you can see, in the android studio graphic editor I've selected the first button, and with the selected area we can see that the height is matched with the LinearLayout height and the width is 1/3 of the toolbar width, it's ok!

However, the ImageButton itself (the grey area with the play image) is not matching the selected region, it seems to have some padding, and this is what I want to fix!

I want this (for the three buttons):

Here is my toolbar xml:

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:elevation="4dp"
android:layout_alignParentBottom="true">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="3"
    android:background="@android:color/black"
    android:orientation="horizontal">

    <ImageButton
        android:id="@+id/playButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:src="@drawable/ic_play" />

    <ImageButton
        android:id="@+id/stopButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:src="@drawable/ic_stop" />

    <ImageButton
        android:id="@+id/bookmarkButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:src="@drawable/ic_bookmark" />

</LinearLayout>


</android.support.v7.widget.Toolbar>

What I've tried:

Setting android:padding="0dp" in the LinearLayout.. But nothing changed.

possible duplicate of [How can I stretch the image in imagebutton to the whole area of the imagebutton?](http://stackoverflow.com/questions/14875705/how-can-i-stretch-the-image-in-imagebutton-to-the-whole-area-of-the-imagebutton) — cybersam, Sep 02 '15 at 22:13

Derek Fung · Accepted Answer · 2015-09-03T11:09:19.140

4

Try adding this style to your ImageButton, hope this is what you want

style="?android:attr/borderlessButtonStyle"

like this

<ImageButton
    android:id="@+id/playButton"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:scaleType="center"
    android:clickable="true"
    android:src="@drawable/ic_play"
    style="?android:attr/borderlessButtonStyle"/>

edited Sep 03 '15 at 11:09

answered Sep 03 '15 at 06:28

Derek Fung

8,171
1
25
28

what do you mean by doesn't have? style is available to all view – Derek Fung Sep 03 '15 at 11:06
just add it and run, and remember it is NOT `android:style`, just `style` – Derek Fung Sep 03 '15 at 11:07

score 0 · Answer 2 · answered Sep 02 '15 at 22:37

Change

android:scaleType="centerCrop"

and add

android:background="@android:color/transparent"

for each ImageButton

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar_bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    android:elevation="4dp"
    android:layout_alignParentBottom="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="3"
        android:background="@android:color/black"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/playButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:scaleType="centerCrop"
            android:clickable="true"
            android:padding="0dp"
            android:src="@drawable/ic_action_email" />

        <ImageButton
            android:id="@+id/stopButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:clickable="true"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_action_email_blue" />

        <ImageButton
            android:id="@+id/bookmarkButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:clickable="true"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_action_email" />

    </LinearLayout>


</android.support.v7.widget.Toolbar>

Android: ImageButton's not matching parent whole size

2 Answers2