How to Create Perfectly Square Views for Android - with Examples

Square views are useful for creating balanced, stylish interfaces. Square views scale nicely to different size screens and create a sense of order. Creating square views in android apps can be tricky, because screen sizes vary greatly and the view needs to fit nicely both horizontally and vertically. Luckily, the solution to achieving this behavior is quite easy, and we will show it to you next.

Our solution includes creating a custom view class, then using that class in XML layouts. Our example includes both Java and Kotlin versions of source code. It is compatible with all android API versions up to current latest (at the time of writing this, Android 10 / API 29), as well as much older API versions — we successfully tested this implementation down to API level 16.

Implementation Details

You can easily create square views by creating a custom view that extends, for example, LinearLayout or RelativeLayout. When implementing this view, the trick is to override the onMeasure method, where the dimensions of the view are calculated. Then, we choose the shorter of the two dimensions (width or height) and pass that single dimension as the width and height to the parent onMeasure method.

Kotlin class implementation of a square view

import android.content.Context
import android.util.AttributeSet
import android.widget.LinearLayout

class SquareView : LinearLayout {

    constructor(context: Context) : super(context) {}

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : 
        super(context, attrs, defStyleAttr) {}

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        if (widthMeasureSpec < heightMeasureSpec)
            super.onMeasure(widthMeasureSpec, widthMeasureSpec)
        else
            super.onMeasure(heightMeasureSpec, heightMeasureSpec)
    }
}

Java class implementation of a square view

import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class SquareView extends LinearLayout {

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

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

    public SquareView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

Layout Usage

After creating this custom view, you are ready to use it in your layouts!

Here is an example how:

<com.mobilefirst.myappname.SquareView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" />

Notice this sample specifies android:orientation="vertical" because SquareView class extended LinearLayout. If you decided to extend RelativeLayout or some other view, this attribute is not required. Beyond that, set your layout_width and layout_height as usual. You can also combine this view with a CardView to create perfectly square cards with rounded corners and elevation.

---

Happy Coding!