how do i create stackable images in android?

Question

I have a requirement where i have to rotate the image and stack 3 images on top of each other .

 <RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:id="@+id/rellay"
    tools:context=".MainActivity" >

  <com.example.stackableimages.ImageRotatedView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/square"
        android:id="@+id/image" />
    <com.example.stackableimages.ImageRotatedView2
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/square2"
        android:id="@+id/image1" />

</RelativeLayout>

Note : it should be stacked in haphazard manner . That is each time the angle of rotation is different . The rotate animation is not the solution . I used relative layout with three imageviews . Do i need to create custom view and override the onDraw method

View.setRotation helps to achieve this but it is available after api 11 . My app should be compatible from api 7 . How do i achieve this in android. Using the above code i am able to see only single image even though i have used relative layout ?

Answer 1

Custom view:

public class MyImageView extends ImageView{

    private int mHeight;
    private int mWidth;
    private float mRotate;

    public MyImageView(Context context) {
        super(context);
        initRotate();
    }

    public MyImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initRotate();
    }

    private void initRotate(){
        mRotate = (new Random().nextFloat() - 0.5f) * 30;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mWidth = bottom - top;
        mHeight = right - left;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int borderWidth = 2;
        canvas.save();
        canvas.rotate(mRotate, mWidth / 2, mHeight / 2);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(0xffffffff);
        canvas.drawRect(getPaddingLeft() - borderWidth, getPaddingTop() - borderWidth, mWidth - (getPaddingRight() - borderWidth), mHeight - (getPaddingBottom() - borderWidth), paint);
        super.onDraw(canvas);
        canvas.restore();
    }
}

And layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Hello World, MyActivity"
            />
    <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="30dp">

        <com.capitan.TestRotation.MyImageView
                android:id="@+id/image_view1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/your_drawable"
                android:padding="10dp"/>
        <com.capitan.TestRotation.MyImageView
                android:id="@+id/image_view2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/your_drawable"
                android:padding="10dp"/>
        <com.capitan.TestRotation.MyImageView
                android:id="@+id/image_view3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/your_drawable"
                android:padding="10dp"/>

    </FrameLayout>
</LinearLayout>

Paddings are required in ImageViews. If you forget to add them, your pictures would be clipped.