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%

Answer 1

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>