CODEWITHSUNDEEP
androidandroid-constraintlayout
Janusz
Janusz

Reputation: 189444

Create a row of evenly distributed squares with Android Constraintlayout

I'm struggling to create a layout to consists of a chain of evenly distributed squares that grow to fill the available space.

I want the layout in the end to look like this:

Layout as desired

The idea is that on phones with a different aspect ratio this squares grow a little bit to use up the extra space.

I managed to create a chain with weights that with this layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main_inference"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="32dp"
        android:layout_height="0dp"
        android:text="All"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="32dp"
        android:layout_height="0dp"
        android:text="2"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/textView1"
        app:layout_constraintRight_toLeftOf="@id/textView4"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="32dp"
        android:layout_height="0dp"
        android:text="4"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/textView2"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

This looks like this:

Constraints

This is fine except that the width of the Textviews is fix to 32dp. I hoped, that if I set the width also to zero, match constraints would first determine the needed width to cover all the space and then set the height to width to make the views square.

Sadly my layout looks like this:

enter image description here

Is this idea of a layout that I want to achieve possible with ContraintLayout?

Upvotes: 1

Views: 979

Answers (2)

Cheticamp
Cheticamp

Reputation: 62831

Here is one way to do what you are looking for that depends on the proper sizing of the first TextView. There may be some additional refinement (do you need all the ratios set, for instance), but this will give you a start.

Portrait

Landscape

XML Layout

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main_inference"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="All"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toStartOf="@+id/textView2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="0dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="2"
        app:layout_constraintBottom_toBottomOf="@id/textView1"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toStartOf="@id/textView4"
        app:layout_constraintStart_toEndOf="@+id/textView1"
        app:layout_constraintTop_toTopOf="@+id/textView1" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="0dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="4"
        app:layout_constraintBottom_toBottomOf="@+id/textView1"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="@+id/textView2" />

</android.support.constraint.ConstraintLayout>

Upvotes: 3

Teovald
Teovald

Reputation: 4389

I hope there is a more elegant way to do it, but I have been able to create this kind of design with the help of guidelines :

<?xml version="1.0" encoding="utf-8"?>


<TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="All"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.50" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

Upvotes: 1

Related Questions