Sunday, August 23, 2015

How to set an ImageButton background transparent in Android

activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity"
    android:background="#f0d945"
    >
    <!-- No Transparency -->
    <ImageButton
        android:id="@+id/ib"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/transparent_image_button"
        />
    <!-- Background Transparent by XML -->
    <!--
        You can also use
            android:background="@android:color/transparent"
            android:background="@null"
     -->
    <!--
        It keep the button click effect.
            android:background="?android:selectableItemBackground"
    -->
    <ImageButton
        android:id="@+id/ib2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/transparent_image_button"
        android:layout_toRightOf="@id/ib"
        android:background="?android:selectableItemBackground"
        />
    <!-- Background Transparent Programmatically -->
    <ImageButton
        android:id="@+id/ib3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/transparent_image_button"
        android:layout_toRightOf="@id/ib2"
        />
</RelativeLayout>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.os.Bundle;
import android.app.Activity;
import android.util.TypedValue;
import android.widget.ImageButton;
import android.widget.RelativeLayout;


public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get the widgets reference from XML layout
        final RelativeLayout rl = (RelativeLayout) findViewById(R.id.rl);
        ImageButton ib = (ImageButton) findViewById(R.id.ib);
        ImageButton ib2 = (ImageButton) findViewById(R.id.ib2);
        ImageButton ib3 = (ImageButton) findViewById(R.id.ib3);

        // Set the third image button background transparent
        // This method allow us to show click effect
        TypedValue outValue = new TypedValue();
        getApplicationContext().getTheme().resolveAttribute(
                android.R.attr.selectableItemBackground, outValue, true);
        ib3.setBackgroundResource(outValue.resourceId);

        // Another way (No button click effect)
        //ib3.setBackgroundColor(Color.TRANSPARENT);
   }
}
More android examples