Search code examples
androiduniversal-image-loader

Implement GridView with Text below the image in Android Universal Image Loader


I already implemented my gridview using Android Universal Image Loader, but I need to put a label below every photo. This is my ac_image_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:horizontalSpacing="4dip"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="4dip"
android:padding="4dip" />

And this is my item_grid_image.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>

I know that I have to implement it in this function, but I don't know how:

    @Override
    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(imageUrlsSmall.get(position), imageView, options);

        return imageView;
    }

UPDATE: Finally I did it with this code.

    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;
    }

Solution

  • Perhaps something like this;

     private TextView mInfoView;
    

    OnCreate():

     mInfoView = (TextView) findViewById(R.id.icon_text);
    

    getView():

     // after imageLoader.displayImage
     mInfoView.setBackgroundColor(Color.TRANSPARENT);
     mInfoView.setText("Some description");