How To Overlay An Icon Image On Top Of An Exisiting View

This is a two part question. I have an image of a warehouse that I would like to divide it into regions (A,B,C,D,E & F) where each letter represents a storage in the warehouse.

Solution 1:

Answer to 1: You can use Framelayout; FrameLayout is the general mechanism for overlaying a view on top of another.

Here's an example:

 <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<ImageView  
    android:id="@+id/image"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/my_image"/>
<View
    android:id="@+id/overlay"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
</FrameLayout>

Then in your Java code you can dynamically set the transparency of your overlay:

View overlay = (View) findViewById(R.id.overlay);
int opacity = 200; // from 0 to 255
overlay.setBackgroundColor(opacity * 0x1000000); // black with a variable alpha
FrameLayout.LayoutParams params =
    new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT, 100);
params.gravity = Gravity.BOTTOM;
overlay.setLayoutParams(params);
overlay.invalidate(); // update the view

See here

Question 2: In framelayout, you can set the icons on top of where you want by dragging them:: So simple!

Hope this helped:: XD