在片段中的对话框内显示网格视图

Question

I'm a beginner to android programming and this is my first question in StackOverflow . I have a preference fragment and on click of a preference, I'm trying to display a grid view inside a dialog . The grid view is dynamically loaded. I tried many ways of doing this but none worked for me.

This is my code in MyPreferenceFragment that is extending PreferenceFragment

Preference iconPref = (Preference)findPreference("pref_icon");
iconPref.setOnPreferenceClickListener(new OnPreferenceClickListener() {    
    @Override
    public boolean onPreferenceClick(Preference arg0) {
        Log.i(TAG, "Preparing grid view layout");
        GridView gridview = (GridView)getActivity().findViewById(R.id.icons_gridview);
        gridview.setAdapter(new ImageAdapter(getActivity()));
        Log.i(TAG, "Icons image adapter ready");

        gridview.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(getActivity(), "" + position, Toast.LENGTH_SHORT).show();
            }
        });

        Log.i(TAG, "Creating dialog");
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());   
        builder.setView(gridview);
        builder.show();
        return false;
    }
});

This is my ImageAdapter.java code

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

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

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

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) 
    {
        ImageView imageView;
        if (convertView == null) {  
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } 
        else 
        {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // references to our images
    private Integer[] mThumbIds = {
        R.drawable.ic_img1, R.drawable.ic_img2,
        R.drawable.ic_img3, R.drawable.ic_img4,
        R.drawable.ic_img5, R.drawable.ic_img6,
        R.drawable.ic_img7
    };
}

And finally, this is my Xml layout file: icon_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/icons_gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

I'm looking forward for any help or alternative . And thanks in advance...

Answer 1

Step 1: Use an image view inside layout to store the image.

image_item.xml

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

     <ImageView 
          android:id="@+id/icon_item"
          android:layout_width="75dp"
          android:layout_height="75dp"
          android:padding="5dp"
          android:layout_centerInParent="true"
          android:contentDescription="@string/desc_list_item_icon"
          android:src="@drawable/ic_img_default"
           />
</RelativeLayout>

Step 2: Create a class to hold the information about the items to be put in the grid view. I've put only image for the item.

GridViewItem.java

public class GridViewItem {
    public final int icon;       // the drawable id for the ListView item ImageView

    public GridViewItem(int icon) {
        this.icon = icon;
    }
    public int getIcon(){
        return this.icon;
    }
}

Step 3: We need an adapter class to set the adapter.

ImageAdapter.java

public class ImageAdapter extends BaseAdapter
{
    private Context context;
    private ArrayList<GridViewItem> gridViewItems;  

    public ImageAdapter(Context context, ArrayList<GridViewItem> gridViewItems)
    {
        this.context = context;
        this.gridViewItems = gridViewItems;
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) 
    {
        if (convertView == null) 
        {
             LayoutInflater mInflater = (LayoutInflater)
                  context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
             convertView = mInflater.inflate(R.layout.image_item, null);
        }

        ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon_item);
        imgIcon.setImageResource(gridViewItems.get(position).getIcon());

        return convertView;
    }
}

Step 4: Finally, we need to create and populate the grid view and set it inside the dialog.

In the fragment,

AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
GridView gridView = new GridView(getActivity());

ArrayList<GridViewItem>  mList = new ArrayList<GridViewItem>();

mList.add(new GridViewItem(R.drawable.ic_img1));
mList.add(new GridViewItem(R.drawable.ic_img2));
:
mList.add(new GridViewItem(R.drawable.ic_img9));
mList.add(new GridViewItem(R.drawable.ic_img10));

ImageAdapter iconItems = new ImageAdapter(getActivity(), mList);

gridView.setAdapter(iconItems);
gridView.setNumColumns(4);               // Number of columns
gridView.setChoiceMode(GridView.CHOICE_MODE_SINGLE);       // Choice mode
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        // do something here
        Toast.makeText(getActivity(), "Position: " + position, Toast.LENGTH_SHORT).show();
        iconDialog.dismiss(); // Dismiss dialog after click on item
    }
});
builder.setView(gridView);
builder.setTitle("Select an icon");
iconDialog = builder.create();
iconDialog.show();