List image with two columns android

Question

Can anyone help me create an android layout like the image below. It has two columns to store images. Each image has the same width.

Thanks so much,

Screen

Have you tried putting two listview side by side? – sebataz Feb 08 '12 at 16:16 — sebataz, Feb 08 '12 at 16:16
They need to scroll all together? – Macarse Feb 08 '12 at 16:20 — Macarse, Feb 08 '12 at 16:20
@Macarse: Yes, they need to scoll together. – Thanh Le Feb 08 '12 at 16:24 — Thanh Le, Feb 08 '12 at 16:24

score 3 · Accepted Answer · answered Feb 08 '12 at 16:27

3

The easiest way would be to have two list views side by side and connect their onScroll() methods to scroll each other whenever one them is scrolled. (Don't forget to use a flag that you're scrolling programmatically, or you'll get StackOverflowError (kinda ironic, yeah :) due to infinite recursion). You can shift one of them by scrolling by half the images's height.

This is kind of a cheat though. Better way would be to make a custom layout derived from RelativeLayout that can store ids of last and second to last Views added to it. When next one is added, lay it out to be layout_below="@id/second_to_last", then the newly added View becomes last, the previous last - second to last and next time you'll be adding a view under it. (Yeah, i know, not exactly what you'd call a clear description :) but feel free to ask further questions)

answered Feb 08 '12 at 16:27

Ivan Bartsov

19,664
7
61
59

Thanks for your answer, I will try the second way now. But if is potsible if I want to use it like "endlessList"? – Thanh Le Feb 08 '12 at 16:47
@ThànhLê: If you are going to have endless lists, use a `ListView`. – Macarse Feb 08 '12 at 16:51
Well, nothing wrong with endlesness there. You can either create a component that consists of two listviews with bound scrolling or make a listview-like class yourself. Depends on how many images you're really going to display. If it's some kind of an endless web-originating gallery (like google image search) and you want to scroll throught thousands of them - you'll definitely need to have view recycling logic one way or another. You might have a hard time sorting out data sets for the two-list-views approach. – Ivan Bartsov Feb 08 '12 at 16:51
But then again, going for a custom list view-like component, you'll have to implement view recycling yourself, that's not an easy thing either. ListView is a pretty compicated component. – Ivan Bartsov Feb 08 '12 at 16:57
Also, in case of two-list-views approach, here's how you add elements to the list views: http://stackoverflow.com/questions/4540754/add-dynamically-elements-to-a-listview-android you'll just need to switch between the two on every addition. – Ivan Bartsov Feb 08 '12 at 17:00
So, yeah, @Macarse is right. I too think you should go for the two-list-views approach fist. If you bump into too many problems there, then check out the source for ListView here before you start developing your own component : http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/1.5_r4/android/widget/ListView.java Note how the scrollbar is really tiny :) That class is huge; afaik Romain Guy is the wizard behind it. – Ivan Bartsov Feb 08 '12 at 17:06
OK, I will try two-listviews approach. – Thanh Le Feb 08 '12 at 17:11
@Macarse, Ivan Bartsov : Thanks for your help – Thanh Le Feb 08 '12 at 17:12
@Ivan : Can I ask you one more question? How I can connect onscroll() of two listview? – Thanh Le Feb 09 '12 at 01:31
This will give you an idea: http://stackoverflow.com/questions/8847042/android-simultaneously-scrolling-horizontal-listview but scratch what is said there about using setSelectionFromTop() instead of scrollTo() - scrollTo() is what you need in your case, because views are shifted and have to stay aligned all the time. Also, make some kind of syncronized flag like boolean isScrolling check it and set it to true when in a OnScrollListener.onScroll(). Because when you call scrollTo() - it will trigger onScroll() of the other view's listener, and so on to infinite cycle and StackOverflowError. – Ivan Bartsov Feb 09 '12 at 10:19

score 1 · Answer 2 · answered Nov 08 '14 at 16:03

1

look at pinterest like image gallery loader: https://github.com/etsy/AndroidStaggeredGrid

answered Nov 08 '14 at 16:03

erhanasikoglu

1,685
1
21
33

score 1 · Answer 3 · answered Feb 08 '12 at 16:57

Quick tip - remember about adding "android:adjustViewBounds="true"" in your xml-layout file for images. Without this, images have big margins on top and bottom.

Just tip, maybe you have problems with this. Also remember about scaling functions in Android

score 0 · Answer 4 · answered Feb 08 '12 at 16:52

You could create a ScrollView that contains two columns (one vertical LinearLayout for each column). To populate it you simply create an ImageView object for each image and add it to the list by calling linearLayout1.addView(myImageView). PLease note that you might run into memory problems if you add a lot of images...

Your layout file would look something like this:

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal" >

         <!-- Left column -->
         <LinearLayout
             android:id="@+id/linearLayout1"
            android:layout_width="160dp"
            android:layout_height="fill_parent"
            android:orientation="verical" />

         <!-- Right column -->
         <LinearLayout
             android:id="@+id/linearLayout2"
            android:layout_width="160dp"
            android:layout_height="fill_parent"
            android:orientation="verical" />
    </LinearLayout>
</ScrollView>

this is not good. ListView loads layout only for items currently visible. This layout will hold all the items loaded. it will work slower and use much more memory. — babay, Feb 27 '13 at 20:11
Yes I know. That's why I wrote "PLease note that you might run into memory problems if you add a lot of images...". But the question does not specify how many images the view should contain. If almost everything fits on screen the memory usage will be about the same as the ListView. Anyway, it doesn't hurt to point it out again. — TofferJ, Feb 28 '13 at 12:08

List image with two columns android

4 Answers4