Horizontal image list view can overlap in android

Question

Here is my expected layout:

As you can see, this slider only display one fully image at one time, others are overlapped. All images are add dynamically from code. I tried to use LinearLayout as container of all images but all images are overflow the screen.

 <LinearLayout
    android:id="@+id/llHorizontalImages"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp" >

 </LinearLayout>

And the code:

 for (ImageInfo image : imagesList) {
    ImageView imageView = new ImageView(context);
    // load image from internet
    ImageLoader.getInstance().displayImage(image.getImagePath(), imageView);
    llHorizontalImages.addView(imageView, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
 }

I don't know how to make image overlap others and how can I keep images don't overflow parent view when there are many images in list, they should be counted as number in more photo view.
Does anyone have any suggestions?

Answer 1

This snippnet is a clue to achieve what you want. Your question interested me and I tried to get the same result, but it's an approach, it's not complete.

Activity Class

int wScreen;        // WIDTH 1 (Screen width)

RelativeLayout mLayout, mTextLayout;        // CONTAINER (Parent's ImageViews)

ImageView imageView;           // VAR IMAGEVIEW

private Integer[] imageArray = {            // ARRAY IMAGES ITEMS
        R.drawable.img1, R.drawable.img2,   // (My test was with 18 items)
        R.drawable.img3, R.drawable.img4,
        R.drawable.img5, R.drawable.img6,
        ... };

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Init container
    mLayout = (RelativeLayout) findViewById(R.id.mContainer);
    // Init subcontainer
    mTextLayout = (RelativeLayout) findViewById(R.id.mTextCont);

    // Get width screen (int)
    DisplayMetrics display = this.getResources().getDisplayMetrics();
    wScreen = display.widthPixels;

    // Call the method
    horizontalListImage();  
}

HorizontalListImage method

private void horizontalListImage() {
    int wImage,         // WIDTH 2 (Images width)
        mChild,         // CHILD   (Count Images)
        n1,             // LOOP 1  (Creation Images)
        n2;             // LOOP 2  (BringToFont function)

    // Image width/height
    wImage = wScreen / 5;

    // Init images
    for(n1 = 0; n1 < imageArray.length; n1++) { 
        // Create new images
        imageView = new ImageView(this);
        imageView.setImageResource(imageArray[n1]);

        // Create a new params
        RelativeLayout.LayoutParams paramsImage = 
                new RelativeLayout.LayoutParams(wImage,wImage);
        // Start positioning Images from Left [1]
        paramsImage.addRule(RelativeLayout.ALIGN_PARENT_LEFT);

        // Except first Image
        if(n1 != 0) {
            // Set margins left to Images [2]
            paramsImage.setMargins((wImage/2)*n1,0,0,0);
        }

        // Add Images into Container
        mLayout.addView(imageView,paramsImage);

        /**
         *  [1] Images position from Left to Right: 0, 1, 2, 3, 4, 5..
         *  [2] Set margin left to positioning Image overlap each other
        **/

        // Screen have too much images
        if( ((wImage/2)*(n1+4)) >= wScreen && n1+1 < imageArray.length ) {
            break;
        }    
    }

    // Count children (Images) into container (RelativeLayout)
    mChild = mLayout.getChildCount();

    // Bring to front function [3]
    for(n2 = mChild - 1; n2 >= 0; n2--) {
        mLayout.getChildAt(n2).bringToFront();
        mLayout.getChildAt(n2).invalidate();
        /**
         *  [3] Bring to front method retrieve any Images in   
         *  descendant order and replace them one by one to the front
         *  Images position from Left to Right: ..5, 6, 4, 3, 2..
         *  
         *  Result: The first Image (now end position) comes to front
         *  and End Image (now start position) comes to background
         *  
        **/
    }

    // Number items total - number items displayed
    int mNbInfo = imageArray.length - (mChild-1);

    if(mNbInfo != 0) {
        // Change width/height for text
        RelativeLayout.LayoutParams paramsButton = 
                (RelativeLayout.LayoutParams) mTextLayout.getLayoutParams();
        paramsButton.height = paramsButton.width = wImage;
        mTextLayout.setLayoutParams(paramsButton);
        // Display text
        mTextLayout.setVisibility(View.VISIBLE);
        // Update text
        ((TextView) findViewById(R.id.btInfoText))
                                           .setText(mNbInfo+" More Photos");
    }

}

Images have a negative left margin of half width image and they have a width set to screen divide by 5. I added some comments to explain what I did..

Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical" >

    <RelativeLayout
        android:id="@+id/mTextCont"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/button_background"
        android:visibility="gone" >

        <TextView
            android:id="@+id/btInfoText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:textColor="#ffc4c4c4"
            android:textSize="12sp"
            android:padding="5dip"
            android:gravity="center" />

    </RelativeLayout>

</RelativeLayout>

Drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="5dip"
        android:topLeftRadius="0dip"
        android:bottomLeftRadius="@dimen/corner_bottom_left"
        android:bottomRightRadius="@dimen/corner_bottom_right" />
    <stroke
        android:width="1dip"
        android:color="#ffc4c4c4" />
    <solid
        android:color="#ffffffff" />
</shape>    

Note: android:bottomRightRadius and android:bottomLeftRadius have a bug in API lower than 12 (SDK 3.1). You should set the radius inside dimens.xml and create a new folder values-v12. See this solution: Something's wrong in Corner radius.

All is in the main Thread without any separate Thread or AsyncTask, you should create some parallel threads to avoid bad performance. I tested this on NexusOne (SDK 2.2) and GalaxyNexus (3.2). This gives me:

I hope this will be useful.
Regards.

Answer 2

Take a look at http://developer.android.com/reference/android/widget/RelativeLayout.html. It allows you to specify the exact location at which you want to display the children views. If you specify these close enough to eachother, that should give you your desired effect. The rest (making sure there's no overflow, adding the "more photos" button) should just be additional logic.