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

enter image description here

score 3 · Accepted Answer · answered Apr 01 '14 at 17:43

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);

Thanks this worked for me with some few changes that I had to make! — Vyper, Apr 24 '14 at 08:40

score 0 · Answer 2 · answered Apr 01 '14 at 17:38

0

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.

answered Apr 01 '14 at 17:38

nathansizemore

3,028
7
39
63

score 0 · Answer 3 · answered Apr 01 '14 at 17:49

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.

score 0 · Answer 4 · answered Apr 01 '14 at 17:54

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.

Just go through this problem http://stackoverflow.com/questions/22790003/horizontal-scroll-over-a-list-of-image-views This is the reason I have to do this. I solved this by Horizontal Scroll View with its root element as the Linear Layout and within the Linear Layout I am programatically adding the these images — Vyper, Apr 01 '14 at 18:07
OK, I've added an answer to the question you've shown me. hope this helps. — android developer, Apr 01 '14 at 19:15

Android Overlapping Image Views

4 Answers4