Develop Reference

Which layout should replace LinearLayout in this calculator

I've implemented this simple calculator layout using LinearLayout, but faced with "nested weights" warning from Android Studio.
This is my first attempt to do something for android, so I started reading: TableLayout and GridLayout would have the same problem as I understand, and ConstraintLayout is recommended everywhere.
But I can't figure it out, how to achieve the same result using ConstraintLayout.
Is it possible? Is it even worth it to ditch LinearLayout in this case?
My layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingRight="0dp"
android:paddingTop="10dp"
android:orientation="vertical"
android:background="#F5F5F6"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="2 + 2"
android:textSize="30sp"
android:gravity="right"
android:layout_marginRight="10dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="4"
android:textSize="30sp"
android:textColor="#000"
android:gravity="right"
android:layout_marginRight="10dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="horizontal"
>
<Button
android:id="#+id/keyboard_num7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="7"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="8"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num9"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="9"
style="#style/Operand"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="horizontal"
>
<Button
android:id="#+id/keyboard_num4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="4"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="5"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="6"
style="#style/Operand"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="horizontal"
>
<Button
android:id="#+id/keyboard_num1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="2"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="3"
style="#style/Operand"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="horizontal"
>
<Button
android:id="#+id/keyboard_num_dot"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="."
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num0"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="0"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num_del"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="del"
style="#style/Operand"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#E1E2E1"
>
<Button
android:id="#+id/keyboard_division"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="÷"
style="#style/Operator"
/>
<Button
android:id="#+id/keyboard_multiplication"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/Operator"
android:text="×"
/>
<Button
android:id="#+id/keyboard_minus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/Operator"
android:text="−"
/>
<Button
android:id="#+id/keyboard_plus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/Operator"
android:text="+"
/>
<Button
android:id="#+id/keyboard_equal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/Equal"
android:text="="
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Well, to answer my own question "how to achieve the same result using ConstraintLayout"
I've made it flat using ConstraintLayout, but still don't know whether it was worth it, and how to decide which layout to use when you can use any.
And is using guidelines with app:layout_constraintGuide_percent and/or chainStyle="spread_inside" with 0 size is somehow better than "nested weights" from performance point of view.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineH"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.33"
android:orientation="horizontal"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.75"
android:orientation="vertical"
/>
<TextView
android:id="#+id/formula"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/result"
app:layout_constraintVertical_chainStyle="packed"
tools:text="2+2"
android:textSize="36sp"
android:gravity="right"
android:layout_marginRight="10dp"
/>
<TextView
android:id="#+id/result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/formula"
app:layout_constraintBottom_toTopOf="#id/guidelineH"
app:layout_constraintVertical_chainStyle="packed"
tools:text="4"
android:textSize="30sp"
android:textColor="#000"
android:gravity="right"
android:layout_marginRight="10dp"
/>
<Button
android:id="#+id/keyboard_num7"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/keyboard_num8"
app:layout_constraintTop_toBottomOf="#id/guidelineH"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="7"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num8"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num5"
app:layout_constraintLeft_toRightOf="#id/keyboard_num7"
app:layout_constraintRight_toLeftOf="#id/keyboard_num9"
app:layout_constraintTop_toBottomOf="#id/guidelineH"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="8"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num9"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num6"
app:layout_constraintLeft_toRightOf="#id/keyboard_num8"
app:layout_constraintRight_toLeftOf="#id/guidelineV"
app:layout_constraintTop_toBottomOf="#id/guidelineH"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="9"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/keyboard_num5"
app:layout_constraintTop_toBottomOf="#id/keyboard_num7"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="4"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num5"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num2"
app:layout_constraintLeft_toRightOf="#id/keyboard_num4"
app:layout_constraintRight_toLeftOf="#id/keyboard_num6"
app:layout_constraintTop_toBottomOf="#id/keyboard_num8"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="5"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num6"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num3"
app:layout_constraintLeft_toRightOf="#id/keyboard_num5"
app:layout_constraintRight_toLeftOf="#id/guidelineV"
app:layout_constraintTop_toBottomOf="#id/keyboard_num9"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="6"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num_dot"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/keyboard_num2"
app:layout_constraintTop_toBottomOf="#id/keyboard_num4"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="1"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num0"
app:layout_constraintLeft_toRightOf="#id/keyboard_num1"
app:layout_constraintRight_toLeftOf="#id/keyboard_num3"
app:layout_constraintTop_toBottomOf="#id/keyboard_num5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="2"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_num_del"
app:layout_constraintLeft_toRightOf="#id/keyboard_num2"
app:layout_constraintRight_toLeftOf="#id/guidelineV"
app:layout_constraintTop_toBottomOf="#id/keyboard_num6"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="3"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num_dot"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/keyboard_num0"
app:layout_constraintTop_toBottomOf="#id/keyboard_num1"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="."
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num0"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/keyboard_num_dot"
app:layout_constraintRight_toLeftOf="#id/keyboard_num_del"
app:layout_constraintTop_toBottomOf="#id/keyboard_num2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="0"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_num_del"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/keyboard_num0"
app:layout_constraintRight_toLeftOf="#id/guidelineV"
app:layout_constraintTop_toBottomOf="#id/keyboard_num3"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="del"
style="#style/Operand"
/>
<Button
android:id="#+id/keyboard_division"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_multiplication"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/guidelineH"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="÷"
style="#style/Operator"
/>
<Button
android:id="#+id/keyboard_multiplication"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_minus"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/keyboard_division"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
style="#style/Operator"
android:text="×"
/>
<Button
android:id="#+id/keyboard_minus"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_plus"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/keyboard_multiplication"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
style="#style/Operator"
android:text="−"
/>
<Button
android:id="#+id/keyboard_plus"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/keyboard_equal"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/keyboard_minus"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
style="#style/Operator"
android:text="+"
/>
<Button
android:id="#+id/keyboard_equal"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/keyboard_plus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/guidelineV"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
style="#style/Equal"
android:text="="
/>
</androidx.constraintlayout.widget.ConstraintLayout>

buttons in Constraint Layout not stretching to parent

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.

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:

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

android rounded button number pad with weights

i am trying to make dynamic number pad view with rounded shape but the problem is this when i assign background it not showing properly i am using weights so it works on all screen sizes and orientation how can i achieve this is my layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/pin_code_first_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/pin_code_button_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/rounded"
android:text="1" />
<Button
android:id="#+id/pin_code_button_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
<LinearLayout android:id="#+id/pin_code_second_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/pin_code_first_row"
android:weightSum="3">
<Button
android:id="#+id/pin_code_button_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
<LinearLayout android:id="#+id/pin_code_third_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/pin_code_second_row"
android:weightSum="3">
<Button
android:id="#+id/pin_code_button_7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
<LinearLayout android:id="#+id/pin_code_fourth_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/pin_code_third_row"
android:weightSum="3">
<Button
android:id="#+id/pin_code_button_10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_clear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
</LinearLayout>
this is my rounded shape
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- fill color -->
<solid android:color="#color/colorAccent" />
<!-- radius -->
<stroke
android:width="1dp"
android:color="#color/colorAccent" />
<!-- corners -->
<corners
android:radius="2dp"/>
</shape>
but i want to make my layout look like this
how can i make this layout without using static spacing and sizes with weights please help me what i am doing wrong?

Use ConstraintLayout as below:
Here is your code:
your_layout.xml
<?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"
android:background="#75A5CB"
android:padding="40dp">
<TextView
android:id="#+id/tvEnterCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="Enter Access Code"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:background="#ffffff"
android:gravity="center"
android:minWidth="100dp"
android:padding="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvEnterCode"
tools:text="..." />
<Button
android:id="#+id/pin_code_button_1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="30dp"
android:background="#drawable/shape_circle_blue"
android:text="1"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvCode" />
<Button
android:id="#+id/pin_code_button_2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="2"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_1"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_1"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_3"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="3"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_2"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_4"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="#dimen/_16sdp"
android:background="#drawable/shape_circle_blue"
android:text="4"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_5"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="5"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_4"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_1"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="6"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_5"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_7"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="#dimen/_16sdp"
android:background="#drawable/shape_circle_blue"
android:text="7"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="8"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_4"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_7" />
<Button
android:id="#+id/pin_code_button_9"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="9"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_8"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_7" />
<Button
android:id="#+id/pin_code_button_0"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="#dimen/_16sdp"
android:background="#drawable/shape_circle_blue"
android:text="0"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="#+id/pin_code_button_8"
app:layout_constraintStart_toStartOf="#+id/pin_code_button_8"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_8" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Delete"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_0" />
</android.support.constraint.ConstraintLayout>
Shape Drawable:
your_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#4588C0" />
<stroke
android:width="2dp"
android:color="#ffffff" />
</shape>
If you want to display pressed/selected button with white color then you have to create selector drawable and give it in background of button.
Edit: If you don't want to give static vertical margin, use below code
<?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"
android:background="#75A5CB"
android:padding="40dp">
<TextView
android:id="#+id/tvEnterCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="Enter Access Code"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:background="#ffffff"
android:gravity="center"
android:minWidth="100dp"
android:padding="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvEnterCode"
tools:text="..." />
<Button
android:id="#+id/pin_code_button_1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="30dp"
android:background="#drawable/shape_circle_blue"
android:text="1"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvCode" />
<Button
android:id="#+id/pin_code_button_2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="2"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_1"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_1"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_3"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="3"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_2"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="4"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_5"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="5"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_4"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_1"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="6"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_5"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_7"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="7"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/pin_code_button_0"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="8"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_4"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_7" />
<Button
android:id="#+id/pin_code_button_9"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="9"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_8"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_7" />
<Button
android:id="#+id/pin_code_button_0"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="0"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/tvDelete"
app:layout_constraintEnd_toEndOf="#+id/pin_code_button_8"
app:layout_constraintStart_toStartOf="#+id/pin_code_button_8"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_8" />
<TextView
android:id="#+id/tvDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Delete"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_0" />
</android.support.constraint.ConstraintLayout>

Change Your background drawable with this
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- fill color -->
<solid android:color="#color/colorAccent"/>
<!-- radius -->
<stroke
android:width="1dp"
android:color="#color/colorAccent"/>
<size
android:width="50dp"
android:height="50dp"/>
<!-- corners -->
<corners
android:radius="2dp"/>
Change size as per your need,
You can use constraint layout or something else to achieve this kind of design
for u #Mateen Chaudhry
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/margin_30">
<Button
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:text="1"
android:textColor="#color/body_text_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:text="2"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toStartOf="#+id/three"
app:layout_constraintStart_toEndOf="#+id/one"/>
<Button
android:id="#+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:text="3"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="#+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:text="4"
android:textColor="#color/body_text_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<Button
android:id="#+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:text="5"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toStartOf="#+id/three"
app:layout_constraintStart_toEndOf="#+id/one"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<Button
android:id="#+id/six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:text="6"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:text="7"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/four"/>
one alternative solution is use textview instead of buttons
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/margin_30">
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="1"
android:textColor="#color/body_text_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="2"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toStartOf="#+id/three"
app:layout_constraintStart_toEndOf="#+id/one"/>
<TextView
android:id="#+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="3"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="#+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="4"
android:textColor="#color/body_text_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<TextView
android:id="#+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="5"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toStartOf="#+id/three"
app:layout_constraintStart_toEndOf="#+id/one"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<TextView
android:id="#+id/six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="6"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="7"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/four"/>
</android.support.constraint.ConstraintLayout>

First i will tell you to use Contraint Layout that is latest one and more efficient in designing. #Viraj Patel answer he did with constraint layout.
But you want to acheive same design in relative layout. It quite be easy. Have a look at this
Step 1
Create center button first to make it center vertically & horizontally. All you need is add this line to your center button.
android:layout_centerInParent="true"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
</RelativeLayout>
Am added static width & height to make it background circle. If you want to make circle of button using WRAP_CONTENT or MATCH_PARENT you done at runtime in java code. Here am using static value.
Above xml code will give you like this
Step 2
Then you can add more buttons depending on the center buttons and this two more property values.
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
Now i add Digit4 & Digit6 which is vertically aligned to Digit5. Below code will give you the results
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/btn_digit4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toLeftOf="#+id/btn_digit5"
android:layout_marginRight="20dp"
android:text="4"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toRightOf="#+id/btn_digit5"
android:layout_marginLeft="20dp"
android:text="6"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
</RelativeLayout>
Add to_leftof & to_rightof property and vertically align property to this buttons & add margins value as well.
Above code will give you
Step 3
Now i add Digit2 & Digit8 which is horizontally aligned to Digit5. Below code will give you the results
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/btn_digit2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_above="#+id/btn_digit5"
android:layout_marginBottom="20dp"
android:text="2"
android:layout_centerHorizontal="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toLeftOf="#+id/btn_digit5"
android:layout_marginRight="20dp"
android:text="4"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toRightOf="#+id/btn_digit5"
android:layout_marginLeft="20dp"
android:text="6"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="8"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_below="#+id/btn_digit5"
android:textColor="#android:color/white" />
</RelativeLayout>
Add layout_below & layout_above property and horizontal align property to this buttons & add margins value as well.
Above code will give you
Step 4
Add corner digits with help of relative layout property to_leftof to_right_of layout_above layout_below. Have a look at this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/btn_digit2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_above="#+id/btn_digit5"
android:layout_marginBottom="20dp"
android:text="2"
android:layout_centerHorizontal="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toLeftOf="#+id/btn_digit5"
android:layout_marginRight="20dp"
android:text="4"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toRightOf="#+id/btn_digit5"
android:layout_marginLeft="20dp"
android:text="6"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="8"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_below="#+id/btn_digit5"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit1"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="1"
android:layout_above="#+id/btn_digit4"
android:layout_toLeftOf="#+id/btn_digit2"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit3"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="3"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"
android:layout_toRightOf="#+id/btn_digit2"
android:layout_above="#+id/btn_digit6"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit7"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="7"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_below="#+id/btn_digit4"
android:layout_toLeftOf="#id/btn_digit8"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit9"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="9"
android:layout_below="#+id/btn_digit6"
android:layout_toRightOf="#id/btn_digit8"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:textColor="#android:color/white" />
</RelativeLayout>
And your output is
Step 4
Finally add zero as well.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/btn_digit2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_above="#+id/btn_digit5"
android:layout_marginBottom="20dp"
android:text="2"
android:layout_centerHorizontal="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toLeftOf="#+id/btn_digit5"
android:layout_marginRight="20dp"
android:text="4"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toRightOf="#+id/btn_digit5"
android:layout_marginLeft="20dp"
android:text="6"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="8"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_below="#+id/btn_digit5"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit1"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="1"
android:layout_above="#+id/btn_digit4"
android:layout_toLeftOf="#+id/btn_digit2"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit3"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="3"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"
android:layout_toRightOf="#+id/btn_digit2"
android:layout_above="#+id/btn_digit6"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit7"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="7"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_below="#+id/btn_digit4"
android:layout_toLeftOf="#id/btn_digit8"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit9"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="9"
android:layout_below="#+id/btn_digit6"
android:layout_toRightOf="#id/btn_digit8"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit0"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="0"
android:layout_below="#+id/btn_digit8"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:textColor="#android:color/white" />
</RelativeLayout>
FINAL OUTPUT
Added
This will centering your layout on all device size & also centering on landscape mode.
shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<corners android:radius="30dp"/>
<stroke android:color="#FFFFFF"
android:width="2dp"/>
<solid android:color="#color/colorPrimary"/>
UPDATED
You need to use ConstraintLayout. Have a look at this
<?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.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="#+id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toEndOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="#+id/guideline">
<Button
android:id="#+id/btn_digit5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="5"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit8"
app:layout_constraintEnd_toStartOf="#+id/btn_digit6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit4"
app:layout_constraintTop_toBottomOf="#+id/btn_digit2" />
<Button
android:id="#+id/btn_digit2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="2"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit5"
app:layout_constraintEnd_toStartOf="#+id/btn_digit3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_digit4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="4"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit7"
app:layout_constraintEnd_toStartOf="#+id/btn_digit5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_digit1" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="6"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit5"
app:layout_constraintTop_toBottomOf="#+id/btn_digit3" />
<Button
android:id="#+id/btn_digit8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="8"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit0"
app:layout_constraintEnd_toStartOf="#+id/btn_digit9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit7"
app:layout_constraintTop_toBottomOf="#+id/btn_digit5" />
<Button
android:id="#+id/btn_digit1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="1"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit4"
app:layout_constraintEnd_toStartOf="#+id/btn_digit2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_digit3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="3"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit2"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_digit7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="7"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit0_Left"
app:layout_constraintEnd_toStartOf="#+id/btn_digit8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_digit4" />
<Button
android:id="#+id/btn_digit9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/btn_digit6"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="9"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit0_right"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit8"
app:layout_constraintTop_toBottomOf="#+id/btn_digit6" />
<Button
android:id="#+id/btn_digit0"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="0"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btn_digit0_right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit0_Left"
app:layout_constraintTop_toBottomOf="#+id/btn_digit8" />
<Button
android:id="#+id/btn_digit0_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:visibility="invisible"
android:text="0"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit0"
app:layout_constraintTop_toBottomOf="#+id/btn_digit9" />
<Button
android:id="#+id/btn_digit0_Left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:visibility="invisible"
android:text="0"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btn_digit0"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_digit7" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
OUTPUT on 5" inch display

It is better to use table layout when you want to create such layout. In table layout handling weight is so easy. Another point is you have to put weight on button container layout. Not for button itself.
<TableRow android:layout_margin="#dimen/margin_half">
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="1"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="2"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="3"/>
</FrameLayout>
</TableRow>
<TableRow android:layout_margin="#dimen/margin_half">
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="4"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="5"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_6"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="6"/>
</FrameLayout>
</TableRow>
<TableRow android:layout_margin="#dimen/margin_half">
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_7"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="7"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_8"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="8"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_9"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="9"/>
</FrameLayout>
</TableRow>
And this is final view and you can change distances and margin and get your desired layout:
Hope helpful!

I think you could work with this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="1"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="2"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="4"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="5"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="6"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="7"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="8"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="9"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="0"/>
</LinearLayout>
</LinearLayout>
The result looks like this:
And if you using "dp" for margin and padding, you shouldn't have any problems with different devices and screen sizes.

Linearlayout and text with app:autoSizeTextType=uniform and Lollipop

im trying to build a keypad in 4 rows and splitted equally thru columns and using autoTextSizetype
app:autoSizeTextType="uniform"
something is broken in android 5.0 i guess:
this is the preview in the android studio:
real world android 5.0:
obs: android 7.0 it works normally :|
this kind of legacy thing make me crazy
my .xml:
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:weightSum="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_1"
android:layout_width="wrap_content"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:text="1" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:text="2"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:text="3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_4"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:text="4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"/>
<!--Button 5-->
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_5"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:text="5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"/>
<!--Button 6-->
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_6"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:text="6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_7"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:text="7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_8"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:text="8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_9"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:text="9"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_apagar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:text="#string/keypad_apagar"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:layout_marginRight="2dp" />
<!--Button 0-->
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_0"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:text="0"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp"
android:layout_marginRight="2dp" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_ok"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:text="OK"
app:autoSizeTextType="uniform"
android:padding="#dimen/_8ssp" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

fixed using pure constraint layout + guidelines
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="1"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="2"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="3"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline5"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66"
app:layout_constraintStart_toStartOf="#+id/guideline4" />
<android.support.constraint.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="4"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline8"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline6" />
<!--Button 5-->
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="5"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline8"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/guideline6" />
<!--Button 6-->
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="6"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline5"
app:layout_constraintTop_toTopOf="#+id/guideline6" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="7"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline8" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="8"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/guideline8" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="9"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline5"
app:layout_constraintTop_toTopOf="#+id/guideline8" />
<android.support.constraint.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_apagar"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="#string/keypad_apagar"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline9" />
<!--Button 0-->
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_0"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="0"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/guideline9" />
<Button
android:id="#+id/btn_ok"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#drawable/button_selector_cinza"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/_8ssp"
android:text="OK"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline5"
app:layout_constraintTop_toTopOf="#+id/guideline9" />
</android.support.constraint.ConstraintLayout>

android app not displaying as expected

I'm using android studio to create a simple calculator app using the GridLayout. However, it's not displaying on my device (yes, running it on my old note5 rather than emulator because it's goes a lot faster). In android studio in the design tab of the xml file it shows how I'd expect it to be, however when I run the app on my phone, thing's are a little weird. I'll post the screenshot of the app running on my phone as well as a screenshot of android studio design tab. I'll also post my full xml code in my activity_main.xml.
My Phone:
Android Studio:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.pvtboromeo.test.MainActivity"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/editText"
android:background="#android:color/black"
android:textColor="#android:color/white"
android:layout_row="0"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:enabled="false"
android:gravity="bottom|right"
android:paddingRight="15sp"
android:paddingBottom="15sp"
android:textAlignment="gravity"
android:textSize="40sp"
android:text="TEST" />
<Button
android:id="#+id/buttonC"
android:layout_column="0"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="C"/>
<Button
android:id="#+id/buttonNegative"
android:layout_column="1"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="+/-"/>
<Button
android:id="#+id/buttonPercent"
android:layout_row="2"
android:layout_column="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="%" />
<Button
android:id="#+id/buttonDivide"
android:layout_row="2"
android:layout_column="3"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/button2"
android:textSize="20sp"
android:text="/" />
<Button
android:id="#+id/buttonSeven"
android:layout_column="0"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="7"/>
<Button
android:id="#+id/buttonEight"
android:layout_column="1"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="8"/>
<Button
android:id="#+id/buttonNine"
android:layout_row="3"
android:layout_column="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="9" />
<Button
android:id="#+id/buttonMultiply"
android:layout_row="3"
android:layout_column="3"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/button2"
android:textSize="20sp"
android:text="X" />
</GridLayout>
What am I doing wrong?

android:layout_rowWeight="1"
android:layout_columnWeight="1"
this attribute is only used in API21 and higher. you should use supportv7
GridLayout instead.
add this
compile 'com.android.support:gridlayout-v7:26.0.0-alpha1'
in your module's build.gradle.
then change you xml like this.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.pvtboromeo.test.MainActivity"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/editText"
android:background="#android:color/black"
android:textColor="#android:color/white"
app:layout_row="0"
app:layout_column="0"
app:layout_columnSpan="4"
app:layout_rowSpan="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:enabled="false"
android:gravity="bottom|right"
android:paddingRight="15sp"
android:paddingBottom="15sp"
android:textAlignment="gravity"
android:textSize="40sp"
android:text="TEST" />
<Button
android:id="#+id/buttonC"
app:layout_column="0"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="C"/>
<Button
android:id="#+id/buttonNegative"
app:layout_column="1"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="+/-"/>
<Button
android:id="#+id/buttonPercent"
app:layout_row="2"
app:layout_column="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="%" />
<Button
android:id="#+id/buttonDivide"
app:layout_row="2"
app:layout_column="3"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="/" />
<Button
android:id="#+id/buttonSeven"
app:layout_column="0"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="7"/>
<Button
android:id="#+id/buttonEight"
app:layout_column="1"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="8"/>
<Button
android:id="#+id/buttonNine"
app:layout_row="3"
app:layout_column="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="9" />
<Button
android:id="#+id/buttonMultiply"
app:layout_row="3"
app:layout_column="3"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="X" />
</android.support.v7.widget.GridLayout>
notice, this is android.support.v7.widget.GridLayout not android.widget.GridLayout, and the attribute is
app:layout_rowWeight="1" not android:layout_rowWeight="1"

I suggest you to use a ConstraintLayout. Is the better way to do layouts with a lot of view.
It's the best way to have good performance too (and you need less time to program it).
More neasted view you have, more slowly works your activity.
For a simple layout of a calculator you can try to see my code:
<?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="com.example.moris.calcolatricelayoutconstraint.MainActivity">
<TextView
android:id="#+id/textView24"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="/"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView21" />
<TextView
android:id="#+id/textView25"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="x"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView22" />
<TextView
android:id="#+id/textView26"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="="
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView23" />
<TextView
android:id="#+id/textView21"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="-"
app:layout_constraintBottom_toTopOf="#+id/textView24"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView18" />
<TextView
android:id="#+id/textView22"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="+"
app:layout_constraintBottom_toTopOf="#+id/textView25"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView19" />
<TextView
android:id="#+id/textView23"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="%"
app:layout_constraintBottom_toTopOf="#+id/textView26"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView20" />
<TextView
android:id="#+id/textView18"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="8"
app:layout_constraintBottom_toTopOf="#+id/textView21"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView15" />
<TextView
android:id="#+id/textView19"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="7"
app:layout_constraintBottom_toTopOf="#+id/textView22"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView16" />
<TextView
android:id="#+id/textView20"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="9"
app:layout_constraintBottom_toTopOf="#+id/textView23"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<TextView
android:id="#+id/textView15"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="5"
app:layout_constraintBottom_toTopOf="#+id/textView18"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="4"
app:layout_constraintBottom_toTopOf="#+id/textView19"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<TextView
android:id="#+id/textView17"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="6"
app:layout_constraintBottom_toTopOf="#+id/textView20"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="6dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="6dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="Insert numbers"
android:inputType="textPersonName"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="2"
app:layout_constraintBottom_toTopOf="#+id/textView15"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="1"
app:layout_constraintBottom_toTopOf="#+id/textView16"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="3"
app:layout_constraintBottom_toTopOf="#+id/textView17"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
To do the border, I've created this xml file call "border", in drawable resource, and use that in the TextView's background:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#color/colorPrimaryDark"
android:width="2dp"/>
<corners
android:radius="5dp"/>
If you want learn more about ConstraintLayout: https://developer.android.com/training/constraint-layout/index.html
In particulary, watch the video 4.