Set ImageButton background transparent in android XML

How to create image button with transparent background using android:background=”?android:selectableItemBackground” attribute.

In this tutorial we are creating two image buttons with same images and apply android:background=”?android:selectableItemBackground” attribute on one image button to make that particular imagebutton transparent. This attribute requires minimum api level as 11 . So here is the compete step by step tutorial for Set ImageButton background transparent in android XML.

android-project-download-code-button

Note: Download below sample image and put inside drawable-hdpi folder.

drawable hdpi folder

Download below image and copy into drawable-hdpi folder.

demo_img

How to Set ImageButton background transparent in android XML.

Code for MainActivity.java file.

package com.imagebuttonbackgroundtransparent_android_examples.com;
import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

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

}

Code for activity_main.xml layout file.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.imagebuttonbackgroundtransparent_android_examples.com.MainActivity" >

 <ImageButton
 android:id="@+id/imageButton1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="56dp"
 android:src="@drawable/demo_img"
 android:background="?android:selectableItemBackground" />

 <ImageButton
 android:id="@+id/imageButton2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/imageButton1"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="85dp"
 android:src="@drawable/demo_img" />

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:text="ImageButton With background transparent"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:gravity="center" />

 <TextView
 android:id="@+id/textView2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignLeft="@+id/textView1"
 android:layout_below="@+id/imageButton1"
 android:layout_marginTop="27dp"
 android:text="ImageButton Without background transparent"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:gravity="center" />

</RelativeLayout>

Code for AndroidManifest.xml file.

 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.imagebuttonbackgroundtransparent_android_examples.com"
 android:versionCode="1"
 android:versionName="1.0" >

 <uses-sdk
 android:minSdkVersion="11"
 android:targetSdkVersion="21" />

 <application
 android:allowBackup="true"
 android:icon="@drawable/ic_launcher"
 android:label="@string/app_name"
 android:theme="@style/AppTheme" >
 <activity
 android:name=".MainActivity"
 android:label="@string/app_name" >
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />

 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 </application>

</manifest>

Screenshot:

Set ImageButton background transparent in android XML

Click here to download Set ImageButton background transparent in android XML project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *