Imagebutton does not display properly image background

Question

I have a school system with schedule of each course and I have an Activity where the user must select his course to have access to his schedule. This Activity has 5 imageButtons but these imageButtons are not being displayed correctly, even though they have a transparent background in the image originally drawn, the background displayed in the app is a gray around the icon.

The xml code of Activity is this:

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/fundo_iff"
    android:orientation="vertical">


    <ImageButton
        android:id="@+id/botao_horario_informatica"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_marginLeft="112dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/ti"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/botao_horario_agropecuaria" />

    <ImageButton
        android:id="@+id/botao_horario_agroindustria"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="35dp"
        android:src="@drawable/ai"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/botao_horario_agropecuaria"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="35dp"
        android:src="@drawable/ap"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/botao_horario_quimica"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/tq"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/botao_horario_informatica"
        app:layout_constraintVertical_bias="0.0" />

    <ImageButton
        android:id="@+id/botao_horario_meio_ambiente"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/ma"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/botao_horario_informatica" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="Integrado"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#000000"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

And the way it’s appearing in the app is this:

Answer 1

This is the background pattern of a imageButton. You can change it by changing the attribute android:background of the component itself. Some people use the background as @null (android:background="@null") to remove the background from the view. It works, but it’s not recommended as it will cause you to miss the view click effects, which are the animations that occur when it is pressed.

To solve this problem of yours, do this:

<ImageButton
        style="?attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        />

The click effect will be maintained, and the gray background will fade.