buttons in Constraint Layout not stretching to parent

buttons in Constraint Layout not stretching to parent - android

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

Related

Why is scrollview hiding buttons behind other views?

I have a bunch of buttons in a scrollview and then below the scrollview is a horizontal linear layout with some buttons for controls and then below that is an Ad Mob banner ad. I can't seem to figure out why when I scroll to the bottom of the list of buttons, approximately half of the last row of buttons are hidden behind the controls and banner ad. Can anybody tell me how to make it scroll to show the full bottom row of buttons so they aren't hidden behind the linear layout for the controls and the ad banner?
Here is a screenshot:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 1"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 2"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 3"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 4"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/button2" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text=" Button 5"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 6"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:text=" Button 7"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button8"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 8"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:text=" Button 9"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button10"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 10"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button8" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="0dp"
android:text=" Button 11"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button12"
app:layout_constraintTop_toBottomOf="#+id/button9" />
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 12"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="0dp"
android:text=" Button 13"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button14"
app:layout_constraintTop_toBottomOf="#+id/button11" />
<Button
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 14"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button12" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="87dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<LinearLayout
android:id="#+id/controlslayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
app:layout_constraintBottom_toTopOf="#+id/adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/play"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Play/Pause" />
<Button
android:id="#+id/timer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Timer" />
<Button
android:id="#+id/volume"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Volume" />
</LinearLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
app:adSize="SMART_BANNER"
app:adUnitId="ca-app-pub-3940256099942544/6300978111"
app:layout_constraintBottom_toBottomOf="#+id/scrollView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"></com.google.android.gms.ads.AdView>
</androidx.constraintlayout.widget.ConstraintLayout>
The bottom row of buttons should be fully visible when scrolled down and not hidden behind the other views.

app:layout_constraintBottom_toBottomOf="parent" in your ScrollView needs to be app:layout_constraintBottom_toTopOf="#+id/controlslayout". Currently, your list is filling the entire screen, and the buttons are drawn over it.
Also, there isn't much point using ConstraintLayout if you're going to nest ViewGroups like this.

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.

grid in constraintlayout

I want to have 2 columns grid with square button in constraint layout this is my xml but it shows one big button when I add 4 button :
screen
and when I delete 2 button every thing works great:
screen2
<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="wrap_content"
tools:context="com.example.poory.myapplication.MainActivity">
<Button
android:id="#+id/button"
app:layout_constraintTop_toBottomOf="#id/slider"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginTop="0dp" />
<Button
android:id="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/slider"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
tools:layout_editor_absoluteY="232dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button" />
<Button
android:id="#+id/button3"
app:layout_constraintTop_toBottomOf="#id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2" />
<Button
android:id="#+id/button4"
app:layout_constraintTop_toBottomOf="#id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
this grid should be in scrollview , so I cant use bottom of parent .

I added a Guideline which is working for me.
<Button
android:id="#+id/button"
app:layout_constraintTop_toBottomOf="#id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginTop="0dp" />
<Button
android:id="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
tools:layout_editor_absoluteY="232dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button" />
<Button
android:id="#+id/button3"
app:layout_constraintTop_toBottomOf="#id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
/>
<Button
android:id="#+id/button4"
app:layout_constraintTop_toBottomOf="#id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="87dp"
android:orientation="horizontal" />

Replace GridLayout with LinearLayout

I have a GridLayout that displays a calculator screen. It looks very nice on many devices but utterly fails on small displays and even some big displays. There is a bug in GridLayout implementation but Google is not working on it. You can see details in my half year old question and an accepted answer: GridLayout collapses on small display
I tried to reimplement my layout. I started with new ConstraintLayout without luck. LinearLayout is quite close but I failed to stretch individual cells. They do not fill the available space. When I change a width from wrap_content to match_parent, the layout breaks totally.
All source code and a sample application is available at https://github.com/literakl/CalcTrouble.
Current Linear Layout
GridLayout when it works
Broken GridLayout on Nexus 5
Broken GridLayout on Nexus S
Layout source code
<LinearLayout
android:id="#+id/calc_content"
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:background="#color/bg_calc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Display row-->
<TextView
android:id="#+id/assignment"
android:text="50 + 40 = 90"
style="#style/Formula"
android:focusable="false"
android:layout_width="match_parent"
android:layout_height="#dimen/calc_display_height"
tools:ignore="HardcodedText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- row with 7-9,+ -->
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent">
<Button
android:id="#+id/digit7"
android:text="7"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit8"
android:text="8"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit9"
android:text="9"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonPlus"
android:text="+"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 4-6, - -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit4"
android:text="4"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit5"
android:text="5"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit6"
android:text="6"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonMinus"
android:text="-"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 1-3, * -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit1"
android:text="1"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit2"
android:text="2"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit3"
android:text="3"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonMultiply"
android:text="\u22C5"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 0, backspace and / -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit0"
android:text="0"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonBackspace"
android:text="←"
style="#style/KeypadFunctionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_columnSpan="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonDivide"
android:text=":"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>
<!--row with button submit -->
<Button
android:id="#+id/buttonSubmit"
android:text="#string/action_next_formula"
style="#style/KeypadNextButton"
android:layout_width="match_parent"
android:layout_height="#dimen/calc_next_height"
app:layout_gravity="fill_horizontal"/>
</LinearLayout>
How can I achieve desired look that will work on all devices?

Make your button's width to 0dp, height to match_parent and layout_weight to 1 as in below sample for a single row
<!-- row with 7-9,+ -->
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum ="4"
android:orientation="horizontal"
android:layout_width="match_parent">
<Button
android:id="#+id/digit7"
android:text="7"
style="#style/KeypadLeftButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit8"
android:text="8"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit9"
android:text="9"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonPlus"
android:text="+"
style="#style/KeypadFunctionRightButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>

Using ConstraintLayouts you can achieve this :
Layout 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">
<Button
android:id="#+id/button_top"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_bottom"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="9dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout_content"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/button_bottom"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_top">
<android.support.constraint.ConstraintLayout
android:id="#+id/first_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/second_row"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button_first_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_first_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_first"
app:layout_constraintRight_toLeftOf="#+id/button_first_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_second"
app:layout_constraintRight_toLeftOf="#+id/button_first_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/second_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/third_row"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/first_row">
<Button
android:id="#+id/button_second_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_second_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_first"
app:layout_constraintRight_toLeftOf="#+id/button_second_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_second"
app:layout_constraintRight_toLeftOf="#+id/button_second_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/third_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/fouth_row"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/second_row">
<Button
android:id="#+id/button_third_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_third_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_first"
app:layout_constraintRight_toLeftOf="#+id/button_third_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_second"
app:layout_constraintRight_toLeftOf="#+id/button_third_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/fouth_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/third_row">
<Button
android:id="#+id/button_fourth_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_fourth_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_fourth_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/button_fourth_first"
app:layout_constraintRight_toLeftOf="#+id/button_fourth_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_fourth_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintLeft_toRightOf="#+id/button_fourth_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

ConstraintLayout - Even Space Between Buttons

I'm trying to make space between 2 buttons (Send and Clear) to be even.
It's adjusting to borders and vertical guideline which is in the center of the screen.
It seems to be fine on the project but it doesn't look like that in the app itself.
Please check below screenshots.
Project
App
<?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.f3nr1r.testkeyboard.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/buttonClear"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:onClick="clearText"
android:text="Clear"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button8"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="9"
app:layout_constraintBaseline_toBaselineOf="#+id/button8"
app:layout_constraintLeft_toRightOf="#+id/button8"
android:layout_marginLeft="8dp" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="7"
app:layout_constraintRight_toLeftOf="#+id/button8"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button8" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="6"
app:layout_constraintLeft_toRightOf="#+id/button5"
android:layout_marginLeft="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button5" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button2"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="8"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button5"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="4"
app:layout_constraintRight_toLeftOf="#+id/button5"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button5" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:ems="10"
android:hint="Type something here..."
android:inputType="textPersonName"
android:maxLines="1"
android:selectAllOnFocus="false"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="3"
app:layout_constraintLeft_toRightOf="#+id/button2"
android:layout_marginLeft="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="2"
app:layout_constraintTop_toTopOf="#+id/guideline3"
android:layout_marginTop="60dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="1"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" />
<Button
android:id="#+id/buttonSend"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:onClick="sendText"
android:text="Send"
app:layout_constraintRight_toLeftOf="#+id/guideline2"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_end="192dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
app:layout_constraintGuide_begin="154dp"
android:orientation="horizontal" />
</android.support.constraint.ConstraintLayout>

I figured it out.
Constraint to the middle guideline should be removed and you can adjust the place with margins.
In XML, below lines should be removed from these buttons ("buttonSend" and "buttonClear").
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
app:layout_constraintRight_toLeftOf="#+id/guideline2"

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

buttons in Constraint Layout not stretching to parent - android

Related

Why is scrollview hiding buttons behind other views?

android rounded button number pad with weights

grid in constraintlayout

Replace GridLayout with LinearLayout

ConstraintLayout - Even Space Between Buttons

Categories

Resources