Stacking image views with overlapping

Question

I am trying to stack image views beside each other (with 70% overlapping). I used a frameLayout and gave each elemnet padding of 10. It worked but this padding is killing me when it comes to handling events. Is there any better way of overlapping views (use different layout..etc)? I am developing for Android 2.3

   <RelativeLayout android:layout_height="fill_parent"  
android:layout_width="fill_parent" >

    <FrameLayout     
    android:id="@+id/frameLayoutBottom"      
    android:layout_width="wrap_content"      
    android:layout_height="wrap_content"     
    android:layout_alignParentBottom="true"      
    android:layout_centerHorizontal="true" > 
    <ImageView          
    android:id="@+id/ivBottom1"          
    android:layout_width="wrap_content"          
    android:layout_height="wrap_content"          
    android:src="@drawable/c10" />      
    <ImageView      
    android:id="@+id/ivBottom2"          
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"                        
    android:paddingLeft="10dp"          
    android:src="@drawable/c11" />

By the way, when I try the margin instead of padding, the images are still on top of eachother 100%

By handling events means what ? click events ? – Android Killer Mar 23 '12 at 14:12 — Android Killer, Mar 23 '12 at 14:12
Yes or more specifically touch events – Snake Mar 23 '12 at 14:53 — Snake, Mar 23 '12 at 14:53

score 2 · Answer 1 · answered Mar 23 '12 at 14:17

2

I have this layout:

Hand of cards

I do it by overriding FrameLayout to create the hand container and ImageView to create the cards. Then I can dictate how they layout in any way I want.

answered Mar 23 '12 at 14:17

CaseyB

24,780
14
77
112

Thats exactly what I want to display but I need a pointer to the some code to see what you mean – Snake Mar 23 '12 at 14:40
I don't have the code on this computer. I'll post it when I get home. – CaseyB Mar 23 '12 at 14:43
1

Please do (and I will make it aceppeted answer :) – Snake Mar 23 '12 at 14:57
@ShylendraMadda no I didn't I sticked to the accepted answer – Snake Sep 15 '18 at 18:13
Okay no issues. – Shailendra Madda Sep 15 '18 at 18:28

drasticp · Accepted Answer · 2012-03-23T16:09:03.960

Create a custom ViewGroup that lays out it's children in onLayout. There are quite a few examples if you search for "custom ViewGroup onLayout". In general, the onLayout method override looks like this:

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {}

Inside that method, you will want to use getChildCount() and getChildAt(index) to get references to your child views. Once you have them, you can use the l,t,r, and b values to compare the bounds of your ViewGroup and figure out where to layout the children.

Once you find the children and calculate where you want them, you'll use child.layout(l,t,r,b) to place the child view inside your new custom ViewGroup.

Hope this helps. if you REALLY need to hack this into XML, you can try the following :

<RelativeLayout    
android:layout_width="fill_parent"      
android:layout_height="fill_parent"> 
<ImageView 
android:id="@+id/spacer1"         
android:layout_width="10dp"          
android:layout_height="wrap_content" />         
<ImageView       
android:layout_width="wrap_content"
android:layout_height="wrap_content"         
android:src="@drawable/whatever1" /> 
<ImageView       
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
android:layout_toRightOf="id/spacer1"        
android:src="@drawable/whatever2" /> 
</RelativeLayout>

Oh Ok. that makes sense, however I am trying to do it in XML layout not in the code — Snake, Mar 23 '12 at 14:41
edited the answer to include a way to get it done with xml. Basically, you can use a RelativeLayout and declare a "spacer" ala the days of the 1px gif. — drasticp, Mar 23 '12 at 16:10

Stacking image views with overlapping

2 Answers2

Linked

Related