Android: Placing 6 Squares Horizontally using XML

Question

I need to place 6 squares horizontally across the width of the screen. I know that I can achieve this as follows:

            <LinearLayout
                android:weightSum="6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <View
                    android:id="@+id/firstSquare"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="60dp"/>

                <View
                    android:id="@+id/secondSquare"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="60dp"/>

                             .
                             .
                             .

            </LinearLayout>

I want to ensure that the height of each View in LinearLayout is equal to its width.

Is there any way I can achieve it directly via XML without using GridLayout, since weights are supported from API 21. My minimum SDK is API 16. I know that I can achieve this programmatically by getting the width of each View object and then setting its height equal to its width, but I want to avoid it.

Something similar was asked here: https://stackoverflow.com/a/32291319/5408578 — Jack F., Jun 27 '17 at 12:28
Possible duplicate of [GridLayout (not GridView) how to stretch all children evenly](https://stackoverflow.com/questions/10016343/gridlayout-not-gridview-how-to-stretch-all-children-evenly) — Jack F., Jun 27 '17 at 12:28
@Vij: Correct. I do not want to fix the height, but I want to ensure that the height stays the same as width across all the screen sizes. — androidnoob, Jun 27 '17 at 13:51
also you can make customview place of linearlayout chek https://stackoverflow.com/questions/14017738/android-draw-squares-in-xml — Vij, Jun 27 '17 at 13:56
@Vij: The custom view solution seems really the prudent thing to do. Please write this as an answer and I'll accept it. — androidnoob, Jun 27 '17 at 14:21

score 1 · Accepted Answer · answered Jun 28 '17 at 06:13

here is java code for CustomView.java

public class CustomView extends LinearLayout {

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

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
    int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
    this.setMeasuredDimension(parentWidth, parentWidth);
    super.onMeasure(widthMeasureSpec, widthMeasureSpec);
 }

}

and sample_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="6">

<CustomView
    android:id="@+id/firstSquare"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:layout_height="wrap_content"/>


<CustomView
    android:id="@+id/secondSquare"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:layout_height="wrap_content"/>

<CustomView
    android:id="@+id/thirdSquare"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:layout_height="wrap_content"/>

<CustomView
    android:id="@+id/fourthSquare"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:layout_height="wrap_content"/>

<CustomView
    android:id="@+id/fifthSquare"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:layout_height="wrap_content"/>
<CustomView
    android:id="@+id/sixthSquare"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:layout_height="wrap_content"/>

may be helpful..

score -1 · Answer 2 · answered Jun 27 '17 at 13:07

<LinearLayout
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="50dp">

    <View
        android:layout_width="50dp"
        android:layout_height="match_parent"/>

    <View
        android:layout_width="50dp"
        android:layout_height="match_parent"/>
    <View
        android:layout_width="50dp"
        android:layout_height="match_parent"/>

    <View
        android:layout_width="50dp"
        android:layout_height="match_parent"/>

    <View
        android:layout_width="50dp"
        android:layout_height="match_parent"/>

    <View
        android:layout_width="50dp"
        android:layout_height="match_parent"/>
</LinearLayout>

Android: Placing 6 Squares Horizontally using XML

2 Answers2