buttons in Constraint Layout not stretching to parent

Question

Making calculator UI using Constraint Layout but unable to stretch buttons to parent in different size of device. Want layout like first image in every device.

This is what I made. This is what where it changing alignment.

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="330dp"
    android:layout_margin="0dp"
    android:layout_marginStart="2dp"
    android:layout_marginEnd="2dp"
    android:background="@android:color/background_dark"
    android:gravity="bottom|right"
    android:maxLength="17"
    android:maxLines="2"
    android:nestedScrollingEnabled="false"
    android:text="@string/_0"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textSize="70sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="RtlHardcoded" />

<Button
    android:id="@+id/button25"
    android:layout_width="195px"
    android:layout_height="wrap_content"
    android:background="?attr/colorButtonNormal"
    android:text="AC"
    android:textSize="20sp"
    android:textStyle="bold"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<Button
    android:id="@+id/button26"
    android:layout_width="195px"
    android:layout_height="0dp"
    android:layout_margin="0dp"
    android:background="?attr/colorButtonNormal"
    android:text="+/-"
    android:textSize="20sp"
    android:textStyle="bold"
    app:layout_constraintBaseline_toBaselineOf="@+id/button25"
    app:layout_constraintStart_toEndOf="@+id/button25" />

Code is big so adding starting Lines only.

Answer 1

You can add an 50%(or other percnet whatever you want) percnet horizontal Guideline,and create some chains.Use layout_constraintHorizontal_weight to proportionate the bottom buttons' width.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@+id/button9"
        app:layout_constraintGuide_percent="0.5"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button5"
        app:layout_constraintVertical_bias="1.0" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="="
        app:layout_constraintBottom_toBottomOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button4"
        app:layout_constraintTop_toTopOf="@+id/button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="."
        app:layout_constraintBottom_toBottomOf="@+id/button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="@+id/button" />

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="1"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button17" />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="2"
        app:layout_constraintBottom_toBottomOf="@+id/button5"
        app:layout_constraintEnd_toStartOf="@+id/button7"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintTop_toTopOf="@+id/button5" />

    <Button
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="3"
        app:layout_constraintBottom_toBottomOf="@+id/button5"
        app:layout_constraintEnd_toStartOf="@+id/button8"
        app:layout_constraintStart_toEndOf="@+id/button6"
        app:layout_constraintTop_toTopOf="@+id/button5" />

    <Button
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="+"
        app:layout_constraintBottom_toBottomOf="@+id/button5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button7"
        app:layout_constraintTop_toTopOf="@+id/button5" />

    <Button
        android:id="@+id/button9"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="AC"
        app:layout_constraintBottom_toTopOf="@+id/button21"
        app:layout_constraintEnd_toStartOf="@+id/button10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="+/-"
        app:layout_constraintBottom_toBottomOf="@+id/button9"
        app:layout_constraintEnd_toStartOf="@+id/button11"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@+id/button9"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button11"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="%"
        app:layout_constraintBottom_toBottomOf="@+id/button9"
        app:layout_constraintEnd_toStartOf="@+id/button12"
        app:layout_constraintStart_toEndOf="@+id/button10"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button12"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="+"
        app:layout_constraintBottom_toBottomOf="@+id/button9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button11"
        app:layout_constraintTop_toTopOf="@+id/guideline" />


    <Button
        android:id="@+id/button17"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:text="4"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintEnd_toStartOf="@+id/button18"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button21" />

    <Button
        android:id="@+id/button18"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="5"
        app:layout_constraintBottom_toBottomOf="@+id/button17"
        app:layout_constraintEnd_toStartOf="@+id/button19"
        app:layout_constraintStart_toEndOf="@+id/button17"
        app:layout_constraintTop_toTopOf="@+id/button17" />

    <Button
        android:id="@+id/button19"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="6"
        app:layout_constraintBottom_toBottomOf="@+id/button17"
        app:layout_constraintEnd_toStartOf="@+id/button20"
        app:layout_constraintStart_toEndOf="@+id/button18"
        app:layout_constraintTop_toTopOf="@+id/button17" />

    <Button
        android:id="@+id/button20"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="-"
        app:layout_constraintBottom_toBottomOf="@+id/button17"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button19"
        app:layout_constraintTop_toTopOf="@+id/button17" />

    <Button
        android:id="@+id/button21"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="7"
        app:layout_constraintBottom_toTopOf="@+id/button17"
        app:layout_constraintEnd_toStartOf="@+id/button22"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button9" />

    <Button
        android:id="@+id/button22"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="8"
        app:layout_constraintBottom_toBottomOf="@+id/button21"
        app:layout_constraintEnd_toStartOf="@+id/button23"
        app:layout_constraintStart_toEndOf="@+id/button21"
        app:layout_constraintTop_toTopOf="@+id/button21" />

    <Button
        android:id="@+id/button23"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="9"
        app:layout_constraintBottom_toBottomOf="@+id/button21"
        app:layout_constraintEnd_toStartOf="@+id/button24"
        app:layout_constraintStart_toEndOf="@+id/button22"
        app:layout_constraintTop_toTopOf="@+id/button21" />

    <Button
        android:id="@+id/button24"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="x"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="@+id/button21"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button23"
        app:layout_constraintTop_toTopOf="@+id/button21" />

</android.support.constraint.ConstraintLayout>

It looks like:

Answer 2

Using fixed width will cause issue on different screen If you want it to be dynamically adjusted to every screen i suggest you to use constraint layout horizontal chaining

something like this:

<Button
    android:id="@+id/view1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="View 1"
    app:layout_constraintRight_toLeftOf="@+id/view2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/view2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="View 2"
    app:layout_constraintRight_toLeftOf="parent"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintLeft_toRightOf="@+id/view1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

It works pretty similar like weight in linear layout

further reference you can see here: https://medium.com/@nomanr/constraintlayout-chains-4f3b58ea15bb