Array of images stacked next to each other, using LayerDrawable.(Displaying multiple image in single imageview)

Question

I have 5 images, I need to display this horizontally spaced one after the other. Instead of using 5 different images to display these 5 images in a LinearLayout with horizontal orientation, I would like to use a single image view. With LayerDrawable can I achieve this? If yes how?

All I want is to place images like in the sample below, where each of 'Querstions', 'Tags', 'Users', 'Badges', 'Unanswered' would be an image.

enter image description here

http://myandroidtipsandtricks.blogspot.in/2012/09/drawables-part-ii.html — Akarsh M, Nov 14 '13 at 13:37
@AM , In my case all the images are of same size. Can I still achieve what I need ? — Jeevan, Nov 14 '13 at 13:40
In my I have list view, rows of list view has to show 1 to 5 images next to each other based on a condition. Having 1 to 5 imageview is hitting scroll performance — Jeevan, Nov 14 '13 at 13:45
http://developer.android.com/reference/android/graphics/drawable/LayerDrawable.html#Summary .... try this may be it'll help you — Akarsh M, Nov 14 '13 at 13:52
If you'll try horizontal scroll view in this list ... this is a good way ... I suppose ... if you need the click of that 5 images — Akarsh M, Nov 14 '13 at 13:57
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/41194/discussion-between-a-m-and-jeez) — Akarsh M, Nov 14 '13 at 14:01

Jeevan · Accepted Answer · 2013-11-15T18:43:51.160

I found the answer, this is how I did

each image is of dimension 48*48. I start at left edge of imageivew hence l value for 1st layer is l = 0 and r = 52, because am providing 4 units padding and image width is 48 units (48+4 = 52), then for second image I use l = 52 (starts where 1st layer ends) and again r = 52 . If there is a third image of dimension 48*48 then l and r value for third layer would be l = 104 r = 52 and so on

activity-class

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layer_list_main);
        LayerDrawable drw = createHorizontallyStackedImages();
        ImageView iv1 = (ImageView)findViewById(R.id.imageView1);
        iv1.setImageDrawable(drw);

    }

     private LayerDrawable createHorizontallyStackedImages(){  
         BitmapDrawable d1 = (BitmapDrawable) getResources().getDrawable(R.drawable.abcgo_48_48_2x);  
         d1.setGravity(Gravity.LEFT);  
         BitmapDrawable d2 = (BitmapDrawable) getResources().getDrawable(R.drawable.amazon_48x48_2x);  
         d2.setGravity(Gravity.LEFT);  
         //BitmapDrawable d3 = (BitmapDrawable) getResources().getDrawable(R.drawable.hulu_48x48_2x);  
         //d3.setGravity(Gravity.LEFT);  

         Drawable drawableArray[]= new Drawable[]{d1,d2};  
         LayerDrawable layerDraw = new LayerDrawable(drawableArray);  
         layerDraw.setLayerInset(0, 0, 0, 52, 0);
         layerDraw.setLayerInset(1,52,0,52,0);

         return layerDraw;  
       }

activity-xml

    <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"
    tools:context=".LayerListMainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="105dp"
        android:layout_toRightOf="@+id/textView1"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

result looks as below

With this approach, we can merge several images into single LayerDrawable and display the resulting merged image in singel imageview

Can we extend above method for 2D array of images? Any suggestions/documents for both the possibilties. — Rahul Agrawal, May 31 '17 at 16:33

Array of images stacked next to each other, using LayerDrawable.(Displaying multiple image in single imageview)

1 Answers1

Linked