Search code examples
androidviewimageviewandroid-custom-viewlayered

How can I implement dynamic Layered ImageView Programmatically?


I want to have layered images as attached below.

Currently, I am doing it like this

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">


      <View
            android:id="@+id/view1"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="10dp"    
            android:background="@drawable/images1">
        </View>
        <View
            android:id="@+id/view2"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/images1">
        </View>
        <View
            android:id="@+id/view3"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="20dp"
            android:background="@drawable/images1">
        </View>

</RelativeLayout>

But I feel this manual method using XML may vary and react based on different devices and screen types. So, How can I achieve it in the better or best way? How can I make it dynamic?

Thank You.

enter image description here


Solution

  • I used the following to implement the layered imageview programatically. However, this does not feel the best solution. Hope, it will help others as well.

    class ThumbView extends RelativeLayout {
        private ImageView vLayer1;
        private ImageView vLayer2;
        private ImageView vLayer3;
    
        public ThumbView(Context context, String pathToFile) {
            super(context);
            LayoutInflater inflater = (LayoutInflater) getContext()
              .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    
            View view = inflater.inflate(R.layout.view_thumb, this, true);
            vLayer1 = view.findViewById(R.id.view1);
            vLayer2 = view.findViewById(R.id.view2);
            vLayer3 = view.findViewById(R.id.view3);
    
            Drawable drawable = Drawable.createFromPath(pathToFile);
    
            vLayer1.setImageDrawable(drawable);
            vLayer2.setImageDrawable(drawable);
            vLayer3.setImageDrawable(drawable);
        }
    }