Creating an Image Gallery

Question

I want to create an image gallery (with lots of pictures). I need a GridView to show the various categories, and in every row there's an ImageView and a TextView. All the pictures are loaded in the drawable folder. According to the category the user chooses, I need to show all the pictures of a folder in a new Activity. My problem is with the adapter for the gridview. I'm trying to create a custom one but with little success. All the examples I found aren't useful for my task...

Answer 1

Here is a sample code for creating a GridView gallery with text.

At first, add GridView to your main layout(ex: activity_main.xml).

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <GridView
     android:numColumns="auto_fit"
     android:gravity="center"
     android:columnWidth="100dp"
     android:stretchMode="columnWidth"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:id="@+id/grid"/>
</LinearLayout>

Then, you need to create a layout to inflate the view of Custom Adapter.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/grid_image"
        android:layout_width="50dp"
        android:layout_height="50dp">
    </ImageView>

    <TextView
        android:id="@+id/grid_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textSize="9sp" >
    </TextView>

</LinearLayout> 

Create a custom adapter which will receive array of image resources and string.

public class CustomGrid extends BaseAdapter{
      private Context mContext;
      private final String[] names;
      private final int[] Imageid;

        public CustomGrid(Context c,String[] names,int[] Imageid ) {
            mContext = c;
            this.Imageid = Imageid;
            this.names = names;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return names.length;
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            View grid;
            LayoutInflater inflater = (LayoutInflater) mContext
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            if (convertView == null) {

                grid = new View(mContext);
                grid = inflater.inflate(R.layout.grid_single, null);
                TextView textView = (TextView) grid.findViewById(R.id.grid_text);
                ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image);
                textView.setText(names[position]);
                imageView.setImageResource(Imageid[position]);
            } else {
                grid = (View) convertView;
            }

            return grid;
        }
}

Finally set this Custom Adapter to the GridView adapter in your activity:

 public class MainActivity extends Activity
    {
        GridView grid;
        String[] names =
        {
            "String1",
            "String2",
            "String3",
            "String4",
            "String5",
            "String6",
            "String8",
            "String9",
            "String10"
        } ;
        int[] imageId =
        {
            R.drawable.image1,
            R.drawable.image2,
            R.drawable.image3,
            R.drawable.image4,
            R.drawable.image5,
            R.drawable.image6,
            R.drawable.image7,
            R.drawable.image8,
            R.drawable.image9,
            R.drawable.image10
        };

        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            CustomGrid adapter = new CustomGrid(MainActivity.this, names, imageId);
            grid=(GridView)findViewById(R.id.grid);
            grid.setAdapter(adapter);
            grid.setOnItemClickListener(new AdapterView.OnItemClickListener()
            {
                @Override
                public void onItemClick(AdapterView<?> parent, View view,
                                        int position, long id)
                {
                    Toast.makeText(MainActivity.this, "You Clicked at " +names[+ position], Toast.LENGTH_SHORT).show();

                }
            });    
        }
    }

Hope this helps. :)