CODEWITHSUNDEEP
android-constraintlayout
Sakhi
Sakhi

Reputation: 1

Different margins in constraintlayout

I created a launchpad using constraintlayout for Android. I added buttons for the launchpad and used the chain functionality for arrange some buttons in rows and columns.

As you can see in picture, the space between the rows (marked with red color) are larger than the space between the columns (marked with blue color) are now equal, which is a problem i could not solve alone. How can I get the same space?

Buttons in constrainslayout

Here are my button definitions:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/taalsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp">

<com.mapani.launchpad.XButton
    android:id="@+id/geda"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:elevation="0dp"
    android:fontFamily="monospace"
    android:text="@string/geda"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/mogholi"
    app:layout_constraintEnd_toStartOf="@+id/kehrwa"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.mapani.launchpad.XButton
    android:id="@+id/kehrwa"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/kehrwa"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/rupak"
    app:layout_constraintEnd_toStartOf="@+id/dadra"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/geda"
    app:layout_constraintTop_toTopOf="@+id/geda" />

<com.mapani.launchpad.XButton
    android:id="@+id/dadra"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/dadra"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/tapea"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/kehrwa"
    app:layout_constraintTop_toTopOf="@+id/kehrwa" />

<com.mapani.launchpad.XButton
    android:id="@+id/mogholi"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/mogholi"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/sitarkhani"
    app:layout_constraintEnd_toStartOf="@+id/rupak"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/geda" />

<com.mapani.launchpad.XButton
    android:id="@+id/rupak"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/rupak"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/japtaal"
    app:layout_constraintEnd_toStartOf="@+id/tapea"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/mogholi"
    app:layout_constraintTop_toTopOf="@+id/mogholi" />

<com.mapani.launchpad.XButton
    android:id="@+id/tapea"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/tapea"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/teentaal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/rupak"
    app:layout_constraintTop_toTopOf="@+id/rupak" />

<com.mapani.launchpad.XButton
    android:id="@+id/sitarkhani"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/sitarkhani"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/ektaal"
    app:layout_constraintEnd_toStartOf="@+id/japtaal"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/mogholi" />

<com.mapani.launchpad.XButton
    android:id="@+id/japtaal"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/japtaal"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/C"
    app:layout_constraintEnd_toStartOf="@+id/teentaal"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/sitarkhani"
    app:layout_constraintTop_toTopOf="@+id/sitarkhani" />

<com.mapani.launchpad.XButton
    android:id="@+id/teentaal"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/teentaal"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/D"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/japtaal"
    app:layout_constraintTop_toTopOf="@+id/japtaal" />

<com.mapani.launchpad.XButton
    android:id="@+id/ektaal"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:fontFamily="monospace"
    android:text="@string/ektaal"
    android:textAllCaps="false"
    android:textSize="15sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/C"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/sitarkhani" />

<com.mapani.launchpad.XButton
    android:id="@+id/C"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="سا"
    android:textAllCaps="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/D"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/ektaal"
    app:layout_constraintTop_toTopOf="@+id/ektaal" />

<com.mapani.launchpad.XButton
    android:id="@+id/D"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    android:textAllCaps="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/C"
    app:layout_constraintTop_toTopOf="@+id/C" />
</android.support.constraint.ConstraintLayout>

Upvotes: 0

Views: 43

Answers (1)

vikraman r
vikraman r

Reputation: 21

This is Because Row And Column Size Differs in Height and Width Of the Layout.Reducing The Button Width Will Allow U to Equalise Column Height.

Upvotes: 1

Related Questions