GalleryView with Cross Button

Question

I used Universal Image Loader.
I Successfully implemented the UIL.
I was Able to select a Picture then put it in the galleryview.
The gallery has a OnClickListener when onCLick the image will be removed.
My problem is I want the Image to have a button Cross above the Image.
Tried to change the layout but no luck..
I wanted it to look like this.

Here's my Activity..

package com.thesis.juandirection.juandirectionfinale.fragments;



import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.content.res.TypedArrayUtils;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

import java.util.ArrayList;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer;
import com.thesis.juandirection.juandirectionfinale.R;
import com.thesis.juandirection.juandirectionfinale.Constants;
import com.thesis.juandirection.juandirectionfinale.SimpleImageActivity;

public class ImageGalleryFragment extends ReviewAdapter {

    public static final int INDEX = 3;
    private ImageAdapter mAdapter;

    @SuppressWarnings("deprecation")
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fr_image_gallery, container, false);
        final Gallery gallery = (Gallery) rootView.findViewById(R.id.gallery);
        final ImageView imageview = (ImageView) rootView.findViewById(R.id.imgAdd);

        mAdapter = new ImageAdapter(getActivity());
        gallery.setAdapter(mAdapter);

        DisplayMetrics metrics = new DisplayMetrics();
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
        ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) gallery.getLayoutParams();
        mlp.setMargins(-((metrics.widthPixels * 2 + 500) / 3), mlp.topMargin,
                mlp.rightMargin, mlp.bottomMargin);
        gallery.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Constants.IMAGES_SELECTED.remove(position);
                mAdapter.notifyDataSetChanged();

            }
        });

        imageview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getContext(), SimpleImageActivity.class);
                intent.putExtra(Constants.Extra.FRAGMENT_INDEX, ImageGridFragment.INDEX);
                startActivity(intent);
            }
        });

        if (Constants.IMAGES_SELECTED.size()>0) {
            imageview.setVisibility(View.INVISIBLE);
        }else{
            imageview.setVisibility(View.VISIBLE);
        }
        return rootView;
    }


    /*private void startImagePagerActivity(int position) {
        Intent intent = new Intent(getActivity(), SimpleImageActivity.class);
        intent.putExtra(Constants.Extra.FRAGMENT_INDEX, ImagePagerFragment.INDEX);
        intent.putExtra(Constants.Extra.IMAGE_POSITION, position);
        startActivity(intent);
    }*/

    private static class ImageAdapter extends BaseAdapter {
        //private static final String[] IMAGE_URLS = Constants.IMAGES_SELECTED;
        ArrayList<String> IMAGE_URLS = new ArrayList<>();
        private LayoutInflater inflater;

        private DisplayImageOptions options;

        ImageAdapter(Context context) {
            inflater = LayoutInflater.from(context);
            options = new DisplayImageOptions.Builder()
                    .showImageOnLoading(R.drawable.ic_stub)
                    .showImageForEmptyUri(R.drawable.ic_empty)
                    .showImageOnFail(R.drawable.ic_error)
                    .cacheInMemory(true)
                    .cacheOnDisk(true)
                    .considerExifParams(true)
                    .bitmapConfig(Bitmap.Config.RGB_565)
                    .displayer(new RoundedBitmapDisplayer(20))
                    .build();
        }

        @Override
        public int getCount() {
            return Constants.IMAGES_SELECTED.size();
        }

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

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

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            IMAGE_URLS = (ArrayList<String>) Constants.IMAGES_SELECTED.clone();
            ImageView imageView = (ImageView) convertView;
            if (imageView == null) {
                imageView = (ImageView) inflater.inflate(R.layout.item_gallery_image, parent, false);
            }
            ImageLoader.getInstance().displayImage(IMAGE_URLS.get(position), imageView, options);

            return imageView;
        }
    }
}

My Layout.. item_gallery_image.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dip"
    android:background="#b6b6b6">


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


    <Button
        android:id="@+id/btn"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:text="X"
        />
</FrameLayout>

Thanks in Advance!.. EDIT: Post sample output. BTW. When i run the program using the XML,program closed.

Answer 1

In your ImadgeAdapter#getView,you infalte a framelayout contains an imageview and a cross button,so result of

inflater.inflate(R.layout.item_gallery_image, parent, false)

will be FrameLayout type,but you cast it to an imageView,that's why app will crash.so you should use ViewHolder to hold imageView,like this:

 @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        IMAGE_URLS = (ArrayList<String>) Constants.IMAGES_SELECTED.clone();
        FrameLayout layout = (FrameLayout) convertView;
        if (layout == null) {
            layout = (FrameLayout) inflater.inflate(R.layout.item_gallery_image, parent, false);
        }
        ImageView imageView = (ImageView)layout.findViewById(R.id.image);
        ImageLoader.getInstance().displayImage(IMAGE_URLS.get(position), imageView, options);

        return layout;
    }

Ofcourse you should also use ViewHolder to hold the view.