ImageButtons In GrdView Different Screen Sizes

Question

I am reviewing and fixing some issues at an Android application that was developed from other developer.

He created a screen layout for normal screen size and inserted a GridView in it.

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridview"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:verticalSpacing="45dp"
    android:horizontalSpacing="10dp"
    android:columnWidth="120dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    android:layout_marginTop="30dp"
    android:scrollbars="none"
/>

At code side images defined as integer array.

Integer[] a1 = {                R.drawable.image1,R.drawable.image2,R.drawable.image3,R.drawable.image4,                R.drawable.image5,R.drawable.image6,R.drawable.image6,R.drawable.image7,R.drawable.image8,              R.drawable.image9,R.drawable.image10,R.drawable.image11
        };

Integer array binded gridview with this code.

GridView gridview = (GridView) findViewById(R.id.gridview);     
gridview.setAdapter(new ImageButtonAdapter(this,infox));

So here ise ImageButtonAdapter class

public class ImageButtonAdapter extends BaseAdapter {

        private Context mContext;

        public ImageButtonAdapter(Context c, Integer[] imageIds) {
            mContext = c;           
            mThumbIds = imageIds;
        }

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

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

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

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

            ImageButton imageButtonx;
            if (convertView == null) {  
                imageButtonx = new ImageButton(mContext);
                imageButtonx.setBackgroundColor(Color.TRANSPARENT);                         
                **imageButtonx.setLayoutParams(new GridView.LayoutParams(160, 160));**
                imageButtonx.setScaleType(ImageView.ScaleType.CENTER_CROP);
                imageButtonx.setPadding(5, 5, 5, 5);
                /* if ( position == 10 )
                {
                    imageButtonx.setVisibility(ImageButton.GONE);
                }
                */

            } else {
                imageButtonx = (ImageButton) convertView;
            }

                setMyTag(imageButtonx,mThumbIds[position]);
            imageButtonx.setImageResource(mThumbIds[position]);

            return imageButtonx;
            }
        private Integer[] mThumbIds;
    }

Also, res\\drawable-hdpi folder contains high resolution images that is 167x161 px and res\\drawable-mdpi folder contains normal resolution images that is 82x72 px.

But at small screened devices, images streched. I think the bold code line cause this; but i couldn't fix it.

Do you have any suggestion how can i fix this problem and support large-normal and small screens?

Answer 1

yes due to this you are getting that problem

imageButtonx.setLayoutParams(new GridView.LayoutParams(160, 160))

change this code like this

imageButtonx.setLayoutParams(new GridView.LayoutParams(
                      (int) getResources().getDimension(R.dimen.width),                                                                                   
                      (int) getResources().getDimension(R.dimen.height)));

store width, height value in the values-->dimentions.xml folder like this

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="width">80dp</dimen>  // your desired values 
   <dimen name="height">80dp</dimen>
</resources> 

HTH..

Answer 2

LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

这是我通常所做的，希望这会有所帮助。