CODEWITHSUNDEEP
androidandroid-drawablelayerdrawable
Jeevan
Jeevan

Reputation: 8772

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

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

Upvotes: 0

Views: 1736

Answers (1)

Jeevan
Jeevan

Reputation: 8772

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

Upvotes: 1

Related Questions