How to create square layouts (grid) in Android

Download

In this post we will explain how to create our own custom design in Android, specifically we are interested in creating a square design that looks as follows:

Ejemplo de un layout cuadrado en android

For this we must choose a previously existing layout in Android such as the RelativeLayout or the LinearLayout, and this is to use all its attributes, methods and structure in general and overwrite what we are interested in, which is a simple function; for this example we will use a LinearLayout and override the method:

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

Our layout is defined as follows:

public class SquareLayout extends LinearLayout {

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

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

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

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

As we can see, all we have to do is modify this simple line super.onMeasure(widthMeasureSpec, widthMeasureSpec); with this we indicate that the width and length of the container must be the same, which by definition is a square.

Now, creating the following layout for our activity:

<?xml version="1.0" encoding="utf-8"?>
<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: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.insta.andre.customlayout.MainActivity">

   <com.insta.andre.customlayout.layout.SquareLayout
       android:id="@+id/squareContainer"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:padding="5dp"
       android:orientation="vertical"
       android:background="#00FF00">

       <ImageView
           android:id="@+id/iIcono"
           style="@style/ImageViewSquareRegular"/>

       <TextView
           android:id="@+id/tvNombre"
           android:layout_below="@id/iIcono"
           style="@style/TextViewSquareRegular" />

   </com.insta.andre.customlayout.layout.SquareLayout>

</RelativeLayout>

We only need to modify the line super.onMeasure(widthMeasureSpec, widthMeasureSpec); to get a square.

Note that we are instantiating the class defined above (com.insta.andre.customlayout.layout.SquareLayout), and the layouts defined by default by Android.

We can use this class that we define in the adapters for listings and grids or anything else; For example, use the Android RecyclerView: to obtain a grid system like the following:

Ejemplo de un layout cuadrado en un grid - android

You can see the complete code in the GitHub repository:

Download

Android

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy