Grid view images not occupy whole activity

Question

I try to make Main Menu Activity with 4 images using Grid View like Image1. But the images not occupy whole space of Activity. Image2 shows my grid view. How to align the 4 images without scrolling and to fit all screen like Image1?

Image1- I try to make like this

Image2-My Grid View-How to fit on screen like image1

activity_main_menu.xml

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"
    tools:context=".MainMenuActivity"
     />

MainMenuActivity.java

public class MainMenuActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main_menu);
            GridView gridView = (GridView) findViewById(R.id.gridview);
            gridView.setAdapter(new ImageAdapter(this));
    }
}

ImageAdapter.java

public View getView(int position, View convertView, ViewGroup parent) {

        ImageView imageView ;

        if(convertView==null)
        {
            imageView = new ImageView(mcontext);

            WindowManager wm = (WindowManager) mcontext.getSystemService(Context.WINDOW_SERVICE);

            Display display = wm.getDefaultDisplay();
            DisplayMetrics outMetrics = new DisplayMetrics ();
            display.getMetrics(outMetrics);

            float density  = mcontext.getResources().getDisplayMetrics().density;
            float dpHeight = outMetrics.heightPixels / density;
            float dpWidth  = outMetrics.widthPixels / density;

            int width=(int) (dpWidth/2);
            int height=(int) (dpHeight/2);


            imageView.setLayoutParams(new GridView.LayoutParams(parent.getWidth()/2,parent.getHeight()/2));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

            //imageView.setLayoutParams(new GridView.LayoutParams(width,height));
            //imageView.setLayoutParams(new GridView.LayoutParams(imageView.getWidth(),imageView.getHeight()));
            //imageView.setBackgroundColor(000000);
            //imageView.setLayoutParams(new GridView.LayoutParams(400,200));
            //imageView.setLayoutParams(new GridView.LayoutParams());
            //imageView.setPadding(40,40,40,40);
        }
        else
        {
            imageView=(ImageView)convertView;
        }

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


    // references to our images
    private Integer[] mThumbIds = {
            R.drawable.mainmenu1, R.drawable.mainmenu2,
            R.drawable.mainmenu3, R.drawable.mainmenu4
    };

show us the xml layout for the item in the gridview.Do you have that? — Nezam, Feb 25 '13 at 04:32
shall i want to inflate layout file for each imageView? How to make common layout xml for all? — Ramprasad, Feb 25 '13 at 04:58
You just make a layout file with `RelativeLayout` and within it you declare `ImageView` with a given `id`.Let the xml be `popa.xml` so when you inflate the imageview in your adapter you inflate this `popa.xml` — Nezam, Feb 25 '13 at 05:27

score 1 · Answer 1 · answered Feb 25 '13 at 04:32

You need to specify a separate layout that will represent each item in your gridview. Most likely if you're trying to emulate your image1 you'll have to create a separate layout with a RelativeLayout as parent and an ImageView and TextView as children. Set the height and width of the imageview to match parent(with some padding), and position the TextView on top of the image.

You'll also have to modify your adapter to inflate this custom view and bind your data sources to it(images and text).

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

Do this in your code:

 float density  = mcontext.getResources().getDisplayMetrics().density;
                float dpHeight = outMetrics.heightPixels / density;
                float dpWidth  = outMetrics.widthPixels / density;

                int width=(int) (dpWidth);
                int height=(int) (dpHeight);

                imageView.setLayoutParams(new GridView.LayoutParams(width,height));
                imageView.setBackgroundColor(000000);
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

It will remove all spacing b/w images. you can disable the scrolling on gridview.

Link here

Link Here2

edited May 23 '17 at 12:19

Community

1
1

answered Feb 25 '13 at 06:38

Asad Iqbal

304
4
16

After changind as following code, int width=(int) (dpWidth);int height=(int) (dpHeight); It removes unwanted space but it does not fit to screen. they are out of screen. – Ramprasad Feb 25 '13 at 06:50
@Ram you need to adjust the height factor according to image that you are setting in imageView. for example set the heght like this int height=(int) (dpHeight/1.2); it will set the image not outside the screen. but 1.2 is hardcoded value you need such scale factor mathmatically from imageView image resource. e.g. R.drawable.mainmenu1 etc. – Asad Iqbal Feb 25 '13 at 07:05
@Ram : also you this on your gridview : gridView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); gridView.setVerticalScrollBarEnabled(false); – Asad Iqbal Feb 25 '13 at 07:09
i need to show 4 images as like Image1 in my above question. It should be independent of screen size and density.So hard coded value is not good. – Ramprasad Feb 25 '13 at 07:10
@Ram: yes I was saying not go with hardcoded value try to find some adjustment factor for you imageView. hope you understand it. thanks. – Asad Iqbal Feb 25 '13 at 07:18

Grid view images not occupy whole activity

2 Answers2