Android - ImageView with Another Views in Universal Image Loader

Question

I been struggling right now to customize the such that I can include another types of views in the gridview(Image). I want to achieve the layout below but in the Universal Image Loader it only displays images. Any experience with this?

enter image description here

Xml:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="fill_parent"
    android:layout_height="120dip"
    android:adjustViewBounds="true"
    android:contentDescription="@string/descr_image"
    android:scaleType="centerCrop" />

JAva

public View getView(int position, View convertView, ViewGroup parent) {
            final ImageView imageView;
            if (convertView == null) {
                imageView = (ImageView) getLayoutInflater().inflate(R.layout.item_grid_image, parent, false);
            } else {
                imageView = (ImageView) convertView;
            }

            imageLoader.displayImage(imageUrls[position], imageView, options);



            return imageView;
        }

I tried this code but it's not working. Basically I wanted to have the layout above.

XML

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widget44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_x="201px"
android:layout_y="165px"
android:gravity="center_horizontal"
>
<ImageView 
android:id="@+id/image"
android:layout_width="fill_parent"
android:layout_height="120dip"
android:adjustViewBounds="true"
android:contentDescription="@string/descr_image"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/icon_text"
android:typeface="serif"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textStyle="bold"
android:lines="2">
</TextView>
</LinearLayout>

Java

 public View getView(final int position, View convertView, ViewGroup parent) {
        View view = convertView;
        final ViewHolder holder;
        if (convertView == null) {
            view = getLayoutInflater().inflate(R.layout.item_grid_image, parent, false);
            holder = new ViewHolder();
            holder.text = (TextView) view.findViewById(R.id.icon_text);
            holder.image = (ImageView) view.findViewById(R.id.image);
            view.setTag(holder);
        } else {
            holder = (ViewHolder) view.getTag();
        }

        holder.text.setText(album[position].getName());

        imageLoader.displayImage(albumsPhoto[position], holder.image, options, animateFirstListener);

        return view;
    }

Your code seems to work coz I have implemented like this one. What problem you are facing? — Chintan Rathod, Jul 10 '13 at 06:43
ViewHolder cannot be resolved to a type, and I did not get the layout example above. — rahstame, Jul 10 '13 at 06:52
aw. I don't have any ViewHolder Class and dont know how to do it. I am sorry. — rahstame, Jul 10 '13 at 06:56

Chintan Rathod · Accepted Answer · 2013-07-10T07:27:20.520

ViewHolder is a custom class which is not part of Android SDK. It holds other views like TextView, ImageView and so many. This class can be used in ListView where Adapter is used. Read More to know more about Holder.

As you have layout, following can be your ViewHolder class structure.

static class ViewHolder {
    public TextView text;
    public ImageView image;
}

You can see that, there is TextView and ImageView in ViewHolder. You need to define such many views as your custom_list_item layout has.

Read -> ViewHolder Pattern – Caching View Efficiently

Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RatingBar
    android:id="@+id/ratingBar1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/linearLayout1" />

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_alignRight="@+id/ratingBar1"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:scaleType="fitXY"
    android:src="@drawable/ic_launcher" />

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/imageView1"
    android:layout_below="@+id/imageView1" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="left"
        android:text="text1" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="right"
        android:text="text2" />
</LinearLayout>

</RelativeLayout>

Thanks sir Chintan, Can you also help me forming the layout that I added above? — rahstame, Jul 10 '13 at 07:13
it's very generous of you to extending your effort in completing the layout and helping find the right resources. Thanks and it really helped me. You earned my utmost respect sir. — rahstame, Jul 10 '13 at 07:41

score 0 · Answer 2 · answered Jul 10 '13 at 07:22

Hi Universal Image Loader is an example for gallery view. In order to achieve the above layout . You need view Holder class and an adapter ,, LIstadapter. You can list you images in list adapter and use ViewHolder for Image and Subtitle. The MosT important thing will be bitmap crashing if you are loading lot of Images ,, so each tiem you scroll Do delete teh cache mem for Bit maps.

Android - ImageView with Another Views in Universal Image Loader

2 Answers2