Question

I’m experiencing a rather weird issue with the Gallery widget in one of my applications, and I think it’s time I ask someone else about it, as it’s been bothering me for a very long time.

I’m using a custom Adapter for the Gallery widget, and I inflate a custom layout for each item in the Gallery in this Adapter. You can see the code for the Adapter and layouts below. The Gallery widget currently doesn’t re-use Views, so I’m not using any ViewHolder tricks, etc.

The problem

The problem is that I’m experiencing “jumps” in the Gallery widget when it’s running on tablet screens, but it’s working perfectly on mobile phones. I’m using different layouts for both types of devices and I know they’re being used correctly – I’ve tested that quite thoroughly.

What I’ve tried

• Changing the Gallery item layout width / height – no change. But if I set a background color, it appears.
• Tried removing Gallery spacing, but that makes the Gallery items overlap each other
• Made sure that the Adapter is working and the correct layout is being loaded
• Made sure that I’m not changing any Adapter settings in the code
• Cleaning the project

Video examples of the issue

The two devices are using the exact same application package with the same code base, only difference is the layouts, as seen below.

NOT WORKING – On a tablet (Acer Iconia A500 – 10-inch, 1280 x 800, mdpi): http://www.youtube.com/watch?v=vN2d61_Ojsc

WORKING – On a mobile phone (Samsung Galaxy Nexus – 4.7 inch, 720 x 1280, xhdpi): http://www.youtube.com/watch?v=j8s-JfwWofo

Code – Gallery adapter

public class ImageAdapter extends BaseAdapter {

        LayoutInflater inflater;

        public ImageAdapter() {
            inflater = (LayoutInflater) Main.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        public int getCount() {
            return coverFileNames.size();
        }

        public Object getItem(int position) {
            return position;
        }

        public long getItemId(int position) {
            return position;
        }

        public View getView(int position, View convertView, ViewGroup parent) {

            convertView = (ImageView) inflater.inflate(R.layout.main_large_img, null);

            ((ImageView) convertView).setImageBitmap(coverFileNames.get(position));

            return convertView;
        }

    }

Code – Main layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:alwaysDrawnWithCache="true"
    android:animationCache="true"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/txtMainTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="0sp"
        android:paddingLeft="30sp"
        android:paddingTop="20sp"
        android:shadowColor="#000000"
        android:shadowDx="1.0"
        android:shadowDy="1.0"
        android:shadowRadius="1.0"
        android:text="@string/mainMyMoviesTitle"
        android:textAppearance="?android:attr/textAppearanceLarge" >
    </TextView>

    <TextView
        android:id="@+id/txtNumberofMovies"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="30sp"
        android:shadowColor="#000000"
        android:shadowDx="1.0"
        android:shadowDy="1.0"
        android:shadowRadius="1.0"
        android:text="@string/mainNumberofMovies"
        android:textAppearance="?android:attr/textAppearanceSmall" >
    </TextView>

    <Gallery
        android:id="@+id/gallery1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:spacing="20dp"
        android:unselectedAlpha="1.0" >
    </Gallery>

</LinearLayout>

Code – Gallery item layout (tablet, layout-xlarge-land-mdpi)

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLargeImg"
    android:layout_width="374dp"
    android:layout_height="600dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:maxHeight="600dp"
    android:maxWidth="374dp"
    android:minHeight="600dp"
    android:minWidth="374dp"
    android:scaleType="fitXY"
    android:src="@drawable/noposterxl" />

Code – Gallery item layout (phone, layout-normal-port-xhdpi)

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLargeImg"
    android:layout_width="188dp"
    android:layout_height="300dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:maxHeight="300dp"
    android:maxWidth="188dp"
    android:src="@drawable/noposterxl" />

PS. The app in question is Mizuu – there’s a free version on Market that you can try out to see the problem yourself. It occurs when you swipe the horizontal scroll view and the next image is just about to be shown. The free version is currently tablets only.

Answer 1

I’ve just found out that this is a bug in Android 3.x, and that it’s fixed in Android 4.0 – which explains why it works on the Galaxy Nexus and why it wouldn’t work on my Acer Iconia A500 on Honeycomb. I’ve upgraded to a Transformer Prime and it works flawlessly on that as well.

The problem now is the fact that users on Android 3.x will experience the bug and blame me for it when it’s not my fault…