Android Overlapping Image Views

Question

I want to create this sort of a view where the cross should be separate image view as I want it to be clickable. How can I achieve this ?

It would be great If I can create this view programatically as I am a dynamic list of images and I am programatically creating the image Views. All I need now is to add the overlapping imageview as well.

Thanks in advance

Answer 1

Use FrameLayout and you can overlay views on top of each other

Ex:

FrameLayout frame = (FrameLayout) findViewById(R.id.frame);
ImageView image = new ImageView(this);
iv.setImageResource(R.drawable.image);
ImageView cross = new ImageView(this);
i.setImageResource(R.drawable.cross);

FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.RIGHT | Gravity.TOP;
i.setLayoutParams(layoutParams); 
frame.addView(image);
frame.addView(cross);

Answer 2

Create a RelativeLayout programmatically, which contains two ImageViews . Place your image in the first one, and your second image in the second one. Adjust the margins accordingly to place it in the top right corner.

Answer 3

First create a completely new layout to use as an placeholder for example "partial_layout.xml". Then in your code first make a LayoutInflater with something like this:

LayoutInflater mInflater = (LayoutInflater) this.getSystemService(this.LAYOUT_INFLATER_SERVICE);

then try to get a fresh copy of this layout with something like this:

View convertView = mInflater.inflate(R.layout.partial_layout, null);

now put your current data to this view, and finally add this view to your content view.

Answer 4

If you create a list of views, you can still use XML by inflating it only when needed - just watch the lecture "the world of listView" in order to do it correctly. Using ListView is much more efficient than creating as many views as the number of items to show (for example, if there are 100 images to show, only those that are on screen need to be created).

Anyway, the xml can contain either FrameLayout or RelativeLayout as the root view, and you just put the 2 imageViews according to the right position you wish to have. You can use the UI designer for this, or edit the XML itself by adding margin-top for the larger image. also, make sure the larger image is written there before the small one.

as for the clicking, you can use setOnClickListener on the small imaveView.

BTW, if it's just images, you should probably use GridView instead of ListView.