Develop Reference

Widgets changing position in Emulator

Whenever I run this program on Emulator, the positions of the widgets change, I tried changing the emulator, size of the layout(Device For Preview), but it wasn't helpful. Please Help me Out.
One solution I got was by decreasing the size of widgets, and arranging widgets to the top of the layout, but it was very time consuming. Also any widget placed at the bottom of the layout wouldn't even show up in the Emulator.
Layout
Emulator
XML file
<?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=".button">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/addition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="76dp"
android:layout_marginEnd="116dp"
android:background="#D2F0FD"
android:padding="15dp"
android:text="10 + 5"
android:textColor="#000000"
android:textSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/scoreBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="23dp"
android:layout_marginEnd="273dp"
android:background="#F44336"
android:padding="10dp"
android:text="0/0"
android:textSize="25dp" />
<TextView
android:id="#+id/result"
android:layout_width="183dp"
android:layout_height="61dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginTop="487dp"
android:layout_marginEnd="49dp"
android:layout_marginBottom="92dp"
android:padding="5dp"
android:text="result"
android:textSize="30dp" />
<Button
android:id="#+id/play"
android:layout_width="127dp"
android:layout_height="64dp"
android:layout_marginStart="150dp"
android:layout_marginTop="-417dp"
android:layout_marginEnd="133dp"
android:layout_marginBottom="528dp"
android:onClick="playAgain"
android:text="Play Again!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="18dp"
android:layout_marginTop="23dp"
android:layout_marginEnd="26dp"
android:background="#FF9800"
android:padding="10dp"
android:text="30s"
android:textSize="25dp" />
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginTop="167dp"
android:layout_marginEnd="0dp"
android:layout_marginBottom="182dp"
app:columnCount="2"
app:rowCount="2">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#2196F3"
android:onClick="chosAns"
android:tag="1"
android:text="Button"
android:textSize="30dp"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#E80909"
android:onClick="chosAns"
android:tag="2"
android:text="Button"
android:textSize="30dp"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#62F806"
android:onClick="chosAns"
android:tag="3"
android:text="Button"
android:textSize="30dp"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#8448E4"
android:onClick="chosAns"
android:tag="4"
android:text="Button"
android:textSize="30dp"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_rowWeight="1" />
</androidx.gridlayout.widget.GridLayout>
<Button
android:id="#+id/go"
android:layout_width="268dp"
android:layout_height="146dp"
android:layout_marginStart="64dp"
android:layout_marginTop="433dp"
android:background="#3FED46"
android:onClick="hideIt"
android:text="GO!!"
android:textSize="60dp"
android:visibility="invisible" />
</RelativeLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Because you are nesting Constraint Layout with Relative Layout which contains widget that may lead to overflowing.

Connect 3, Tic Tac Toe, Play Again button crashes

Created a "Play Again" button which clears all the grids containing crosses and circles so user can play the game again. The issue is Caused by: java.lang.ClassCastException: android.widget.RelativeLayout cannot be cast to androidx.gridlayout.widget.GridLayout
at com.example.glow.MainActivity.playAgain
public void playAgain(View view) {
gameIsActive = true;
LinearLayout layout = (LinearLayout) findViewById(R.id.playAgainLayout);
layout.setVisibility(View.INVISIBLE);
activePlayer = 0;
for (int i = 0; i < gameState.length; i++) {
gameState[i] = 2;
}
GridLayout gridLayout = (GridLayout) findViewById(R.id.gridLayout);
for (int i = 0; i < gridLayout.getChildCount(); i++) {
((ImageView) gridLayout.getChildAt(i)).setImageResource(0);
}
Tried lots of solutions provided on stackoverflow but none seems to work and also note that I am on Android Studio 4.0.1.
This is my XML file:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/gridLayout"
android:layout_width="415dp"
android:layout_height="858dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:layout_marginEnd="1dp"
android:layout_marginBottom="1dp"
android:background="#drawable/grid"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView15"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginStart="120dp"
android:layout_marginTop="180dp"
android:contentDescription="#string/img"
android:onClick="dropIn"
android:tag="0"
app:layout_constraintBottom_toTopOf="#+id/imageView16"
app:layout_constraintEnd_toStartOf="#+id/playAgainLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView22"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginTop="180dp"
android:layout_marginBottom="55dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="1"
app:layout_constraintBottom_toTopOf="#+id/imageView24"
app:layout_constraintEnd_toStartOf="#+id/imageView21"
app:layout_constraintStart_toEndOf="#+id/imageView15"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView21"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginTop="180dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="2"
app:layout_constraintBottom_toTopOf="#+id/imageView23"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView22"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView16"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginStart="20dp"
android:layout_marginTop="110dp"
android:contentDescription="#string/circle"
android:longClickable="true"
android:onClick="dropIn"
android:tag="3"
app:layout_constraintBottom_toTopOf="#+id/imageView17"
app:layout_constraintEnd_toStartOf="#+id/imageView24"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView15" />
<ImageView
android:id="#+id/imageView24"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginStart="10dp"
android:layout_marginBottom="350dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView23"
app:layout_constraintStart_toEndOf="#+id/imageView16"
app:layout_constraintTop_toBottomOf="#+id/imageView22" />
<ImageView
android:id="#+id/imageView23"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="330dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView24"
app:layout_constraintTop_toBottomOf="#+id/imageView21" />
<ImageView
android:id="#+id/imageView17"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView26"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/playAgainLayout" />
<ImageView
android:id="#+id/imageView26"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginBottom="150dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView25"
app:layout_constraintStart_toEndOf="#+id/imageView17" />
<ImageView
android:id="#+id/imageView25"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="100dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView26"
app:layout_constraintTop_toBottomOf="#+id/playAgainLayout" />
<LinearLayout
android:id="#+id/playAgainLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="34dp"
android:layout_marginLeft="34dp"
android:layout_marginTop="212dp"
android:layout_marginEnd="34dp"
android:layout_marginRight="34dp"
android:layout_marginBottom="69dp"
android:alpha="1"
android:background="#76FF03"
android:gravity="start|end"
android:orientation="vertical"
android:padding="30dp"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/imageView25"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="#+id/winnerMessage"
android:layout_width="wrap_content"
android:layout_height="59dp"
android:layout_marginStart="30dp"
android:layout_marginTop="40dp"
android:alpha="1"
android:autofillHints=""
android:clickable="false"
android:contentDescription="#string/message"
android:duplicateParentState="false"
android:ems="10"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center"
android:inputType="textPersonName"
android:textSize="30sp" />
<Button
android:id="#+id/playAgain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="playAgain"
android:text="#string/button" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Seems like you have RelativeLayout here findViewById(R.id.gridLayout), please open the layout XML and check it.

Found the solution guys and thanks for your responses as they gave me hints on what to look into. The issue was in the XML code where for gridlayout I was not using <androidx.gridlayout.widget.GridLayout instead I used the XML I posted in the question. Below is the XML that worked and also did some re-positioning to make it work.
<androidx.gridlayout.widget.GridLayout
android:id="#+id/gridLayout"
android:layout_width="300dp"
android:layout_height="297dp"
android:background="#drawable/grid"
app:columnCount="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="3">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="0"
app:layout_column="0"
app:layout_row="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="1"
app:layout_column="1"
app:layout_row="0" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="2"
app:layout_column="2"
app:layout_row="0" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="3"
app:layout_column="0"
app:layout_row="1" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="4"
app:layout_column="1"
app:layout_row="1" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="5"
app:layout_column="2"
app:layout_row="1" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="6"
app:layout_column="0"
app:layout_row="2" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="7"
app:layout_column="1"
app:layout_row="2" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/circle"
android:onClick="dropIn"
android:tag="8"
app:layout_column="2"
app:layout_row="2" />
</androidx.gridlayout.widget.GridLayout>
<LinearLayout
android:id="#+id/playAgainLayout"
android:layout_width="231dp"
android:layout_height="170dp"
android:addStatesFromChildren="false"
android:alpha="1"
android:animationCache="false"
android:background="#FFEB3B"
android:baselineAligned="false"
android:clipToPadding="false"
android:elevation="1dp"
android:gravity="top"
android:measureWithLargestChild="false"
android:orientation="vertical"
android:padding="30dp"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/gridLayout"
app:layout_constraintEnd_toStartOf="#+id/gridLayout"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/gridLayout"
app:layout_constraintTop_toBottomOf="#+id/gridLayout">
<TextView
android:id="#+id/winnerMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/textview"
android:textSize="30sp" />
<Button
android:id="#+id/playAgainButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="0dp"
android:onClick="playAgain"
android:text="#string/play_again" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

So error basically tells yous that the layout you are using is androidx layout and you are assigning it to Android layout so to correct it try:
androidx.gridlayout.widget.GridLayout var_name = (GridLayout) findViewById(R.id.gridLayout);
Hence problem will be solved

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.

ConstraintLayout ListView RTL some lines are not RTL

On my ListView some lines are not RTL aligned.
After scrolling and redrawing the lines are correct.
My layout of the line item:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/clFrontView"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<ImageView
android:id="#+id/ivCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/circle"
tools:ignore="ContentDescription"
android:layout_marginTop="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<ImageView
android:id="#+id/ivReminderType"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
tools:ignore="ContentDescription"
app:layout_constraintTop_toTopOf="#id/ivCircle"
app:layout_constraintBottom_toBottomOf="#id/ivCircle"
app:layout_constraintStart_toStartOf="#id/ivCircle"
app:layout_constraintEnd_toEndOf="#id/ivCircle"
app:layout_constraintLeft_toLeftOf="#id/ivCircle"
app:layout_constraintRight_toRightOf="#id/ivCircle" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civContactImage"
android:layout_width="42dp"
android:layout_height="42dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<ImageView
android:id="#+id/icivCircleSmall"
android:layout_width="15dp"
android:layout_height="15dp"
app:layout_constraintEnd_toEndOf="#id/civContactImage"
app:layout_constraintRight_toRightOf="#id/civContactImage"
app:layout_constraintBottom_toBottomOf="#id/civContactImage"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/tvTextLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
tools:text="Line of Text"
android:textSize="18sp"
android:maxLines="2"
app:layout_constraintLeft_toRightOf="#id/ivCircle"
app:layout_constraintStart_toEndOf="#id/ivCircle"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"/>
<TextView
android:id="#+id/tvTextLine2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textSize="16sp"
android:visibility="gone"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTextLine" />
<TextView
android:id="#+id/tvTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
tools:text="Wed, 01.05.2018 10:10"
android:textColor="#FF909090"
android:textSize="12sp"
android:drawablePadding="5dp"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTextLine2" />
<TextView
android:id="#+id/tvRepeat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
tools:text="Every 2nd Friday"
android:textColor="#FF909090"
android:textSize="12sp"
android:drawablePadding="5dp"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTime" />
</android.support.constraint.ConstraintLayout>
First start it looks like this, the first line is not RTL:
After scrolling down and again up to the top it is correct:
build.gradle dependency:
implementation 'com.android.support.constraint:constraint-layout:1.1.2'

These changes may work:
<ImageView
android:id="#+id/ivCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bg_circle_win"
app:layout_constraintBottom_toBottomOf="#+id/civContactImage"
app:layout_constraintStart_toStartOf="#+id/civContactImage"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/ivReminderType"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:layout_constraintEnd_toEndOf="#+id/civContactImage"
app:layout_constraintTop_toTopOf="#+id/civContactImage"
tools:ignore="ContentDescription" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civContactImage"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/icivCircleSmall"
android:layout_width="15dp"
android:layout_height="15dp"
app:layout_constraintEnd_toEndOf="#id/civContactImage"
app:layout_constraintRight_toRightOf="#id/civContactImage"
app:layout_constraintBottom_toBottomOf="#id/civContactImage"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/tvTextLine"
android:layout_width="wrap_content"
android:layout_height="23dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:maxLines="2"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
tools:text="Line of Text" />
<TextView
android:id="#+id/tvTextLine2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textSize="16sp"
android:visibility="gone" />
<TextView
android:id="#+id/tvTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:textColor="#FF909090"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
app:layout_constraintTop_toBottomOf="#+id/tvTextLine"
tools:text="Wed, 01.05.2018 10:10" />
<TextView
android:id="#+id/tvRepeat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:textColor="#FF909090"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
app:layout_constraintTop_toBottomOf="#+id/tvTime"
tools:text="Every 2nd Friday" />
I hope to work. good luck

Try this maybe it could solve the problem. Small testing changes are there you can remove them according to your need, Firstly, I have changed the tools:text to android:text so that it shows dummy data.Secondly, The two imageview named as ivReminderType and icivCircleSmall I have put two default images just for testing purpose so do change that. Also there is one imageview named icivCircleSmall I didnt know where it should be constarined to so I have not edited any code written for it. Below is the edited code of the xml.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/clFrontView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="10dp">
<ImageView
android:id="#+id/ivCircle"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/tvRepeat"
app:layout_constraintEnd_toStartOf="#+id/tvTime"
app:layout_constraintTop_toBottomOf="#+id/tvTextLine"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/ivReminderType"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#+id/tvRepeat"
app:layout_constraintEnd_toStartOf="#+id/tvRepeat"
app:layout_constraintTop_toBottomOf="#+id/tvTime"
tools:ignore="ContentDescription" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civContactImage"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/icivCircleSmall"
android:layout_width="15dp"
android:layout_height="15dp"
app:layout_constraintBottom_toBottomOf="#id/civContactImage"
app:layout_constraintEnd_toEndOf="#id/civContactImage"
app:layout_constraintRight_toRightOf="#id/civContactImage"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/tvTextLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:maxLines="2"
android:text="Line of Text"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
app:layout_constraintTop_toTopOf="#+id/civContactImage" />
<TextView
android:id="#+id/tvTextLine2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textSize="16sp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTextLine" />
<TextView
android:id="#+id/tvTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:text="Wed, 01.05.2018 10:10"
android:textColor="#FF909090"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/civContactImage"
app:layout_constraintTop_toBottomOf="#id/tvTextLine2" />
<TextView
android:id="#+id/tvRepeat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:text="Every 2nd Friday"
android:textColor="#FF909090"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#+id/tvTime"
app:layout_constraintLeft_toLeftOf="#id/tvTextLine"
app:layout_constraintStart_toStartOf="#id/tvTextLine"
app:layout_constraintTop_toBottomOf="#id/tvTime" />
</android.support.constraint.ConstraintLayout>
Hope it helps!

RecyclerView scrolls slowly and with lag on Samsung note 4

I have a RecyclerView that each row of that has a GridLayout. I inserted some rows (about 10) in the RecyclerView. It scrolls smoothly in Nexus 5 and Nexus 7 and Sony. But when I run it on Samsung Note 4, it scrolls very slowly and with lots of lag!!
This is my layout for each row:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
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="wrap_content"
android:padding="16dp"
app:orientation="vertical"
app:columnCount="4"
>
<TextView
android:id="#+id/start_time_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="left|center_vertical"
app:layout_row="0"
app:layout_column="0"
android:textAppearance="#style/TextAppearance.AppCompat.Caption"
android:text="test"
/>
<View
android:layout_width="1dp"
android:layout_height="0dp"
app:layout_row="0"
app:layout_column="1"
app:layout_rowSpan="3"
app:layout_gravity="fill"
android:background="#color/dim_foreground_disabled_material_dark"
/>
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_row="0"
app:layout_column="2"
android:singleLine="true"
app:layout_gravity="right|center_vertical|fill"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:ellipsize="end"
android:layout_margin="10dp"
android:text="test"
/>
<ImageView
android:id="#+id/event_icon"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_row="0"
app:layout_column="3"
app:layout_gravity="center_vertical"
android:src="#mipmap/ic_launcher"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_row="1"
app:layout_column="1"
app:layout_columnSpan="2"
app:layout_gravity="center_horizontal|center_vertical"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="center_horizontal|center_vertical|fill"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/button_material_dark"
android:layout_margin="6dp"
android:text="test"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="25dp"
android:layout_height="25dp"
app:layout_gravity="center_horizontal|center_vertical"
android:src="#mipmap/ic_supervisor_account_black_24dp"/>
</LinearLayout>
<TextView
android:id="#+id/end_time_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_row="2"
app:layout_column="0"
app:layout_gravity="left|center_vertical"
android:paddingRight="10dp"
android:textAppearance="#style/TextAppearance.AppCompat.Caption"
android:text="test"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_row="2"
app:layout_column="2"
app:layout_gravity="right|center_vertical"
android:textAppearance="#style/TextAppearance.AppCompat.Caption"
android:textColor="#color/button_material_dark"
android:layout_margin="10dp"
android:text="test"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="15dp"
android:layout_height="15dp"
app:layout_gravity="center_vertical"
app:layout_row="2"
app:layout_column="3"
android:src="#mipmap/location"/>
<ProgressBar
android:id="#+id/time_progressbar"
app:layout_row="3"
app:layout_column="0"
app:layout_columnSpan="3"
app:layout_gravity="fill"
android:max="100"
android:progress="100"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminate="false" />
<TextView
android:id="#+id/time_text_view"
app:layout_row="3"
app:layout_column="3"
app:layout_gravity="right|center_vertical|fill"
android:textAppearance="#style/TextAppearance.AppCompat.Caption"
android:text="test"
/>
</android.support.v7.widget.GridLayout>
How can I fix this problem?