CODEWITHSUNDEEP
androidandroid-viewandroid-xmlandroid-imageandroid-selector
Ben Ezard
Ben Ezard

Reputation: 463

Android Overlay Image On Top Of Background Image Using XML Selector

Basically what the title says:
I have a View that I have set the background image for (via the android:background attribute in XML), and I'd like to overlay another image when the user presses on the view
I know that you can use XML selectors to CHANGE the background image when the view is pressed, but is it possible to overlay an image instead?
Or will I just have to have 2 images - the plain one and then the one with the overlay added?

Thanks in advance :)

Upvotes: 0

Views: 9948

Answers (3)

David Chen
David Chen

Reputation: 11

You could just use an ImageView for the background image and set the android:tint property to be the color with an alpha filter.

<ImageView
    android:scaleType="fitXY"
    android:tint="#8c000000"
    android:src="mipmap/background.png"/>

Upvotes: 0

Ben Ezard
Ben Ezard

Reputation: 463

Thanks to Chaosit, I came up with this solution:
In res/xml you create a selector file, e.g. selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image_with_overlay" android:state_pressed="true" />
    <item android:drawable="@drawable/image" />
</selector>

In res/drawable, you then create a layer-list, e.g. image_with_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image" />
    <item android:drawable="@drawable/overlay_image" />
</layer-list>

Then in the View that you want to have this property, you simply use android:background="@xml/selector"

Then you're all done :-)

Upvotes: 3

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

// xml 
 <ImageView
    android:id="@+id/img"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_gravity="center"
    android:adjustViewBounds="true"
    android:background="@drawable/ijoomer_btn_hover"
    android:padding="5dp"
    android:scaleType="fitXY" />

//  Activity 
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
            setContentView("xml");
    img = (ImageView) findViewById(R.id.img);
    img.setImageDrawable(null);
}

   img.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            if(img.getDrawable()!=null){
                img.setImageDrawable(null);
            }else{
                img.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher));
            }
        }
    });

Upvotes: 0

Related Questions