Programmatically set the width and height of GridView And ImageView

Question

I have seen SO questions regarding how to set the height and width of an ImageView, and a GridView separately. Here, here and here for starters

But, I'm wondering how to set both.

Here's my setup. In my GridView, I have an ImageView and a TextView. I have a few images of various widths and sizes, which I want to resize to always be 1/3 the size of the screen square. Underneath, I have a text description.

Here's the code for what I have so far...

gallerygridview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/bg_light_blue"
    android:orientation="vertical" >

        <GridView
            android:id="@+id/gridGallery"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:numColumns="3"
            android:padding="0dp"
            android:verticalSpacing="4dp" >
        </GridView>

        <ImageView
            android:id="@+id/imgNoMedia"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:contentDescription="@string/app_name"
            />
        
        <TextView
           android:id="@+id/textView1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textSize="12sp"
           android:textStyle="bold"
           android:typeface="sans"
           android:layout_below="@+id/imageView1"
           android:layout_marginTop="2dp"
           android:layout_centerHorizontal="true"
           android:textColorHighlight="#000000"
           android:gravity="center"
         />
</LinearLayout>

In my Activity...

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.gallerygridview);
            
     GridView gridView = (GridView) findViewById(R.id.gridGallery);

     m_adapter = new PhotoImageAdapter(getBaseContext(),m_images);
     gridView.setAdapter(m_adapter); // uses the view to get the context instead of getActivity().
     registerForContextMenu(gridView);
     

 }

And in my Adapter class...

public View getView(int position, View convertView, ViewGroup parent) {
 
   View view = convertView;
   Holder holder=new Holder();

         if (view == null) {
             LayoutInflater inflater = LayoutInflater.from(mContext);
                view = inflater.inflate(R.layout.gallerygridview, parent, false);
              

            holder.img = new ImageView(mContext);
            holder.img = (ImageView) view.findViewById(R.id.imgNoMedia);
            holder.tv = (TextView) view.findViewById(R.id.textView1);
            
            
            int iDisplayWidth = mContext.getResources().getDisplayMetrics().widthPixels ;
            int iImageWidth = (iDisplayWidth / 3)-15 ; 
            GridView.LayoutParams glp = (GridView.LayoutParams) view.getLayoutParams();
            glp.width = iImageWidth;
            glp.height = iImageWidth ;
            view.setLayoutParams(glp);
       
            view.setTag(holder);
            
        } else {
            holder = (Holder) view.getTag();
        }

        holder.tv.setText(m_images.get(position).key);
        holder.img.setImageURI(Uri.parse(m_images.get(position).value));
        
    return view;
  }

For now, the GridView is exactly 1/3rd the size of the screen. And the image and text in both display. But I would like the ImageView to fill the remaining space inside the GridView cell.

Here's what I would like...

enter image description here

But this is what it looks like...

enter image description here

What am I doing wrong? And, How do I programmatically set both the height of the GridView, And the ImageView inside it?

Thanks in advance.

score 4 · Accepted Answer · edited May 23 '17 at 12:34

Here's a relatively easy method to do this. Throw a GridView into your layout, setting the stretch mode to stretch the column widths, set the spacing to 0 (or whatever you want), and set the number of columns to 2:

<?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="match_parent"
    >
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:stretchMode="columnWidth"
        android:numColumns="2" 
        />
</FrameLayout>

and refer this to know more about GridView and ImageView

+1 for the link. That was exactly what I was looking for. Thanks! — wizurd, Aug 14 '14 at 04:24

score 1 · Answer 2 · edited Jan 11 '16 at 12:33

After seeing your out put images ,here is what I understood and the reason for that problem

When ever you scale an image ,must be scaled as per aspect ratio of that image. ex: lets say your image dimensions are 900 1200 (w h) to scale its width to 400 need to do like this

newWidth = 400; newHeight = 1200 * (400/900) = 533.33
If you want image of a imageview should scale automatically then check scaleType properties of ImageView in xml layout(fitCenter,centerInside etc)
Add this line in your getView

holder.img.setScaleType(ScaleType.CENTER_INSIDE);

Programmatically set the width and height of GridView And ImageView

2 Answers2