Open top menu

Make Square GridView Cells Height and Width in android?






In this blog we will explain how to implement square gridview cells in GridView Layout. The GridView Cells measuring height and width automatically.

Step:1 create imageview class inside src folder .
...................................................................................................................................................................

public class SquareImageView extends ImageView {
public SquareImageView(Context context)
   {
       super(context);
   }

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

   public SquareImageView(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());  
   }

}

Step:2 create griview cell view class inside res/layout folder.
gridview_item,xml
...................................................................................................................................................................

<?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"
    android:background="#ffffff">
    
    <com.example.androidtestcode.SquareImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:scaleType="fitXY"
        android:padding="10dp"
        android:background="@drawable/border" />       
</FrameLayout>


Step:3 create expandable gridview class inside src folder..

ExpandableHeightGridView .java
...................................................................................................................................................................



public class ExpandableHeightGridView extends GridView {

boolean expanded = false;

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

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

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

public boolean isExpanded()
{
    return expanded;
}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    // HACK! TAKE THAT ANDROID!
    if (isExpanded())
    {
        // Calculate entire height by providing a very large height hint.
        // View.MEASURED_SIZE_MASK represents the largest height possible.
        int expandSpec = MeasureSpec.makeMeasureSpec(MEASURED_SIZE_MASK,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);

        ViewGroup.LayoutParams params = getLayoutParams();
        params.height = getMeasuredHeight();
    }
    else
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

public void setExpanded(boolean expanded)
{
    this.expanded = expanded;
} }


Step:3create main xml class inside res/layout folder.
activity_main.xml.
...................................................................................................................................................................

<RelativeLayout 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:background="#000000"
    android:gravity="center"
     >

    <com.example.androidtestcode.ExpandableHeightGridView
        android:id="@+id/gridview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:verticalSpacing="4dp"
        android:horizontalSpacing="4dp"   
        android:stretchMode="columnWidth"               
        android:numColumns="3"
        android:layout_margin="3dp"
        android:direction="top_to_bottom|left_to_right"
       />
</RelativeLayout>




Step:4 create gridview adatpter class inside src folder.
Adapter.java.
...................................................................................................................................................................


public class Adapter  extends BaseAdapter{
private List<Item> items = new ArrayList<Item>();
     private LayoutInflater inflater;

     public Adapter(Context context)
     {
         inflater = LayoutInflater.from(context);
         items.add(new Item("Image 1", R.drawable.logo));
         items.add(new Item("Image 2", R.drawable.logo));
         items.add(new Item("Image 3", R.drawable.logo));
         items.add(new Item("Image 4", R.drawable.logo));
         items.add(new Item("Image 5", R.drawable.logo));
         items.add(new Item("Image 6", R.drawable.logo));
         items.add(new Item("Image 7", R.drawable.logo));
         items.add(new Item("Image 8", R.drawable.logo));
         items.add(new Item("Image 9", R.drawable.logo));
     }

     @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;
     }

     @SuppressLint("NewApi")
@Override
     public View getView(int i, View view, ViewGroup viewGroup)
     {
         View v = view;
         SquareImageView picture;
         

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

         picture = (SquareImageView)v.getTag(R.id.picture);
         

         Item item = (Item)getItem(i);

         picture.setImageResource(item.drawableId);
        
         

         return v;
     }

     private class Item
     {
          
         final int drawableId;

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


Step:5 create main java class inside src folder.
MainActivity.java.
...................................................................................................................................................................

public class MainActivity extends  Activity {
ExpandableHeightGridView gridView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
 
gridView = (ExpandableHeightGridView) findViewById(R.id.gridview);
 
gridView.setAdapter(new Adapter(this));
 }
}


Tagged

2 comments:

Subscribe to: Post Comments (Atom)