CODEWITHSUNDEEP
androidandroid-imagebutton
wanderingProgrammer
wanderingProgrammer

Reputation: 191

ImageButton displays odd behaviour on background color overwrite

While setting up an ImageButton, I noticed that it had some gray background color that didn't go with the rest of the UI.

enter image description here

This was the code for the ImageButton

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_material"/>

But when I tried to overwrite the background to transparent like so:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_material"
    android:background="@android:color/transparent"/>

The button completely lost its shape and padding

enter image description here

Does anyone know why this is happening?

Upvotes: 3

Views: 526

Answers (3)

Umair
Umair

Reputation: 6426

The reason imageButton have a background is because it's a button basically with an image instead of text. So according to android documentation:

ImageButton public class ImageButton extends ImageView

Displays a button with an image (instead of text) that can be pressed or clicked by the user. By default, an ImageButton looks like a regular Button, with the standard button background that changes color during different button states. The image on the surface of the button is defined either by the android:src attribute in the XML element or by the setImageResource(int) method. To remove the standard button background image, define your own background image or set the background color to be transparent. To indicate the different button states (focused, selected, etc.), you can define a different image for each state. E.g., a blue image by default, an orange one for when focused, and a yellow one for when pressed. An easy way to do this is with an XML drawable "selector." For example: 

version="1.0" encoding="utf-8"?>  <selector
> xmlns:android="http://schemas.android.com/apk/res/android">
>      <item android:state_pressed="true"
>            android:drawable="@drawable/button_pressed" /> <!-- pressed -->
>      <item android:state_focused="true"
>            android:drawable="@drawable/button_focused" /> <!-- focused -->
>      <item android:drawable="@drawable/button_normal" /> <!-- default -->  </selector>

Save the XML file in your project res/drawable/ folder and then reference it as a drawable for the source of your

ImageButton (in the android:src attribute). Android will automatically change the image based on the state of the button and the corresponding images defined in the XML. The order of the elements is important because they are evaluated in order. This is why the "normal" button image comes last, because it will only be applied after android:state_pressed and android:state_focused have both evaluated false. See the Buttons guide.

for more info take a look at the documentation: Image Button

Upvotes: 3

RBK
RBK

Reputation: 2417

It's happening because you set the color as a background, and color doesn't have size/dimension.

You can check it with any of image as background and the view will adopt the size of that image. We can say that background image doesn't support scale type.

Only src support scale type in ImageView or other class that extends ImageView

Upvotes: 1

Fathima km
Fathima km

Reputation: 2699

Use android:background="#000000" or

imageButton.setBackgroundDrawable(null);

Upvotes: 0

Related Questions