create a linear layout of overlapping imageviews

Question

I need to create a stack of overlapping ImageViews in Android like Spider Solitaire in Windows. Also, I need to be able to dynamically add more ImageViews. Please suggest methods to do so. Can I use a LinearLayout (Its not necessary. Whatever works is fine)? If so, how do I accomplish the overlap?

Note: All the ImageViews will have the same amount of overlap, so no need to worry about the unopened cards in the give screenshot.

solitaire

Thank You

@SMR Whatever works is fine. `LinearLayout` is not necessary. — CodePro_NotYet, Jun 27 '14 at 09:44

score 0 · Answer 1 · answered Jun 27 '14 at 09:42

User LayerList

A LayerDrawable is a drawable object that manages an array of other drawables. 
Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" >
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" >
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

Note : the below images uses item attributes as android:left="10dp", android:left="20dp".

enter image description here

How do I add new Layers in it dynamically? – CodePro_NotYet Jun 27 '14 at 12:08 — CodePro_NotYet, Jun 27 '14 at 12:08

score 0 · Answer 2 · answered Jun 27 '14 at 09:45

You can use FrameLayout. Following layout is an example with 3 ImageViews:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:background="#f00" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:background="#0f0" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        android:background="#00f" />

</FrameLayout>

I need to add more `ImageView`s dynamically. How do I do that? I dont see a function to edit the `layout_margin...` attribute of the view. — CodePro_NotYet, Jun 27 '14 at 13:20
Refer this: http://stackoverflow.com/questions/8101532/android-set-margins-in-a-framelayout-programmatically-not-working — JiTHiN, Jun 27 '14 at 16:08

score 0 · Answer 3 · answered Jun 27 '14 at 09:46

I don't think you can achieve this using Linearlayout only.

But you can use LayerList

A LayerDrawable is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.

with help of LayerList you can achieve the following:

preview

Syntax

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

How do I add more layers in it dynamically? – CodePro_NotYet Jun 27 '14 at 11:37 — CodePro_NotYet, Jun 27 '14 at 11:37

create a linear layout of overlapping imageviews

3 Answers3

Syntax