Android GridView on Home Page with auto resized images.

When looking for a way to get a grid view with images like the above, my final result is something I want with icons and an image to depict a task.

I had to follow the below steps:

  1. Create a main fragment and add your grid view to it.
  2. Define a grid view item with an image and a text on its footer.
  3. Add an Adapter to the GridView for it to be compatible.
  4. Add the GridView adapter to the Main Fragment.

In you home fragment, for example ‘fragment_main.xml’ 

<FrameLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.nomoreboundary.propertymanagerpro.MainActivity.MainFragment"
    android:id="@+id/frameLayout_main">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/gridView_main"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:verticalSpacing="5dp"
        android:horizontalSpacing="5dp"
        android:stretchMode="columnWidth"
        android:numColumns="2"
        android:smoothScrollbar="true" />

</FrameLayout>

We will create a new layout for an image that is to be shown on a grid.  Let say it includes and image and a text on its footer.

grid_image.xml

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

    <com.nomoreboundary.propertymanagerpro.util.GridImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />

</FrameLayout>

 

Image View class with overridable sizing

GridImageView.java

public class GridImageView extends ImageView {

    public GridImageView(Context context) {
        super(context);
    }

    public GridImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public GridImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); 
    }

}

 

An adapter for showing the grid view

MainGridAdapter.java

class MainGridAdapter extends BaseAdapter {

        private List<Item> items = new ArrayList<>();
        private LayoutInflater inflater;

        public MainGridAdapter(Context context)
        {
            inflater = LayoutInflater.from(context);

            items.add(new Item("Image 1", R.drawable.bk_beach));
            items.add(new Item("Image 2", R.drawable.bk_bluecoffee));
            items.add(new Item("Image 3", R.drawable.bk_purple_yellow));
            items.add(new Item("Image 4", R.drawable.bk_railroad));
            items.add(new Item("Image 5", R.drawable.bk_lines));
        }

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

        @Override
        public Object getItem(int i)
        {
            return items.get(i);
        }

        @Override
        public long getItemId(int i)
        {
            return items.get(i).drawableId;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup)
        {
            View v = view;
            ImageView picture;
            TextView name;

            if(v == null)
            {
                v = inflater.inflate(R.layout.grid_main, viewGroup, false);
                v.setTag(R.id.picture, v.findViewById(R.id.picture));
                v.setTag(R.id.text, v.findViewById(R.id.text));
            }

            picture = (ImageView)v.getTag(R.id.picture);
            name = (TextView)v.getTag(R.id.text);

            Item item = (Item)getItem(i);

            picture.setImageResource(item.drawableId);
            name.setText(item.name);

            return v;
        }

        private class Item
        {
            final String name;
            final int drawableId;

            Item(String name, int drawableId)
            {
                this.name = name;
                this.drawableId = drawableId;
            }
        }
}

 

Add the grid adapter to the Main Fragment

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
	View rootView = inflater.inflate(R.layout.fragment_main, container, false);

	// Set up the grid view.
	GridView gridView = (GridView) rootView.findViewById(R.id.gridView_main);
	gridView.setAdapter(new MainGridAdapter(getActivity()));

	return rootView;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s