Buttons won't fill the whole space - android-studio

I want my layout to display 6 buttons that fill the whole screen equally but at the moment each button fills just its padding.
Those 6 buttons are displayed inside a ConstraintLayout that is inside a ScrollView in order to display the layout well on any device.
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".MainActivity" >
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/idbutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON1"
app:layout_constraintBottom_toTopOf="#+id/idbutton3"
app:layout_constraintEnd_toStartOf="#+id/idbutton2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#f0eb79"
android:foreground="?attr/selectableItemBackground"
android:drawableTop="#drawable/default_icon"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
android:padding="25dp" />
<Button
android:id="#+id/idbutton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON2"
app:layout_constraintBottom_toTopOf="#+id/idbutton4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/idbutton1"
app:layout_constraintTop_toTopOf="parent"
android:background="#000"
android:foreground="?attr/selectableItemBackground"
android:drawableTop="#drawable/default_icon"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
android:padding="25dp" />
<Button
android:id="#+id/idbutton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON3"
app:layout_constraintEnd_toStartOf="#+id/idbutton4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/idbutton1"
app:layout_constraintBottom_toTopOf="#+id/idbutton5"
android:background="#f0eb79"
android:foreground="?attr/selectableItemBackground"
android:drawableTop="#drawable/default_icon"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
android:padding="25dp" />
<Button
android:id="#+id/idbutton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON4"
app:layout_constraintBottom_toTopOf="#+id/idAppointments"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/idbutton3"
app:layout_constraintTop_toBottomOf="#+id/idbutton2"
android:background="#000"
android:foreground="?attr/selectableItemBackground"
android:drawableTop="#drawable/default_icon"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
android:padding="25dp" />
<Button
android:id="#+id/idbutton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/idAppointments"
app:layout_constraintTop_toBottomOf="#+id/idbutton3"
app:layout_constraintStart_toStartOf="parent"
android:background="#f0eb79"
android:foreground="?attr/selectableItemBackground"
android:drawableTop="#drawable/default_icon"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
android:padding="25dp" />
<Button
android:id="#+id/idAppointments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/idbutton5"
app:layout_constraintTop_toBottomOf="#+id/idbutton4"
android:background="#000"
android:foreground="?attr/selectableItemBackground"
android:drawableTop="#drawable/default_icon"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
android:padding="25dp" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
This is the result I'm getting with the above code:
https://i.imgur.com/7mH0sZy.png
As you can see around the buttons there is the space that I don't want. Is there any way to make the buttons fill the whole space?


Try to use the code below (in this sample i removed android:drawableTop="#drawable/default_icon" but just add it again).
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".MainActivity"
>
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/idbutton1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f0eb79"
android:foreground="?attr/selectableItemBackground"
android:padding="25dp"
android:text="BUTTON1"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/idbutton3"
app:layout_constraintEnd_toStartOf="#+id/idbutton2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/idbutton2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#000"
android:foreground="?attr/selectableItemBackground"
android:padding="25dp"
android:text="BUTTON2"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/idbutton4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/idbutton1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/idbutton3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f0eb79"
android:foreground="?attr/selectableItemBackground"
android:padding="25dp"
android:text="BUTTON3"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/idbutton5"
app:layout_constraintEnd_toStartOf="#+id/idbutton4"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/idbutton1" />
<Button
android:id="#+id/idbutton4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#000"
android:foreground="?attr/selectableItemBackground"
android:padding="25dp"
android:text="BUTTON4"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/idAppointments"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/idbutton3"
app:layout_constraintTop_toBottomOf="#+id/idbutton2" />
<Button
android:id="#+id/idbutton5"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f0eb79"
android:foreground="?attr/selectableItemBackground"
android:padding="25dp"
android:text="BUTTON5"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/idAppointments"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/idbutton3" />
<Button
android:id="#+id/idAppointments"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#000"
android:foreground="?attr/selectableItemBackground"
android:padding="25dp"
android:text="BUTTON6"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/idbutton5"
app:layout_constraintTop_toBottomOf="#+id/idbutton4" />
</android.support.constraint.ConstraintLayout>

Related

How to center text under image

Right now I have 3 image buttons in constraint layout (not in tablelayout or gridlayout) and I want to have text under the image buttons that's centered with regards to the image buttons.
This is what I have right now:
I want to have my layout so that the Textview is centered rather than being right/left aligned with the image button.
Here's my code:
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topNavigationView"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/flFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topNavigationView"
app:layout_constraintVertical_bias="0.0">
<ImageButton
android:id="#+id/button"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
android:background="#xml/round_shape"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_foreground" />
<ImageButton
android:id="#+id/button2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:background="#xml/round_shape"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_foreground" />
<ImageButton
android:id="#+id/button13"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:background="#xml/round_shape"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_foreground" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/button13" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Thanks so much.

Nested textview not visible on device, but visible in Design mode

The apps top component has 4 TableRows under a TableLayout and each has a nested TextView and a Switch.
Each of these is set to Visibility:visible
And they show as expected in the Design mode for all available resolutions say NexusS(4.0,480x800,hdpi)
but when started on my Marshmallow device of the same resolution and size, only the switches show up and in their correct positions, those 4 textviews dissappear..
(http://i.stack.imgur.com/xmPqk.png)
(http://i.stack.imgur.com/6UNBo.png)![on device]
Heres the relevant 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:id="#+id/MainPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bb"
android:hapticFeedbackEnabled="false"
android:minHeight="320dp"
android:minWidth="240dp"
android:visibility="visible"
tools:context=".MainActivity">
<Button
android:id="#+id/play"
android:layout_width="120dp"
android:layout_height="34dp"
android:layout_marginBottom="188dp"
android:layout_marginEnd="205dp"
android:layout_marginStart="24dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/playBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.272"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/settings"
android:layout_width="120dp"
android:layout_height="38dp"
android:layout_marginTop="8dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/setBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintStart_toStartOf="#+id/play"
app:layout_constraintTop_toBottomOf="#+id/play" />
<Button
android:id="#+id/quit"
android:layout_width="120dp"
android:layout_height="38dp"
android:layout_marginTop="8dp"
android:background="#ad000000"
android:hapticFeedbackEnabled="false"
android:text="#string/quitBtn"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold"
android:typeface="monospace"
android:visibility="visible"
app:layout_constraintStart_toStartOf="#+id/settings"
app:layout_constraintTop_toBottomOf="#+id/settings" />
<TextView
android:id="#+id/Title"
android:layout_width="wrap_content"
android:layout_height="178dp"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/owaw"
android:textColor="#android:color/white"
android:textSize="120sp"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/play"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.418"
tools:text="#string/app_name" />
<TableLayout
android:id="#+id/OptionsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:gravity="center_vertical|start"
android:orientation="vertical"
android:paddingEnd="0dp"
android:paddingStart="100dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Title"
app:layout_constraintVertical_bias="0.0">
<TableRow
android:id="#+id/Option1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="24dp"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option2"
app:layout_constraintEnd_toEndOf="#+id/Option2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option2"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt1" />
<Switch
android:id="#+id/tutorialSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option3"
app:layout_constraintEnd_toEndOf="#+id/Option3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option3"
app:layout_constraintTop_toBottomOf="#+id/Option1">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt2" />
<Switch
android:id="#+id/musicSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:layout_marginEnd="-70dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option4"
app:layout_constraintEnd_toEndOf="#+id/Option4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option4"
app:layout_constraintTop_toBottomOf="#+id/Option2">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt3" />
<Switch
android:id="#+id/hapticSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="false"
android:hapticFeedbackEnabled="false"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/Option5"
app:layout_constraintEnd_toEndOf="#+id/Option5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/Option5"
app:layout_constraintTop_toBottomOf="#+id/Option3">
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt4" />
<Switch
android:id="#+id/sfxSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:allowUndo="true"
android:alpha="0.8"
android:background="#android:color/black"
android:checked="true"
android:hapticFeedbackEnabled="true"
android:padding="0dp"
android:showText="false"
android:splitTrack="false"
android:switchMinWidth="20dp" />
</TableRow>
<TableRow
android:id="#+id/Option5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Option4">
<TextView
android:id="#+id/saveOption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="60dp"
android:layout_marginTop="20dp"
android:clickable="true"
android:focusable="true"
android:hapticFeedbackEnabled="false"
android:paddingBottom="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
tools:text="#string/opt5" />
</TableRow>
</TableLayout>
</android.support.constraint.ConstraintLayout>
UPDATE:
I added the font family property to each of those and now the text is visible on device but I dont understand how it matters, since there is already a default option there.

Use Relative layout with Scrollable Constraint layout to achieve a freeze panes effect

I am pretty new to Android Studio, so please forgive any thing which may have been obvious but I did not pick up.
I would like help in the below situation -
I have setup two layouts:
Relative Layout & a Constraint Layout (which is nested in ScrollView).
I wanted to keep some views to be visible all the time, so I put them in a Relative Layout. I put all other views in a constraint layout which is scrollable, since the number of elements do not fit in the screen.
I am trying to get the same effect which you get when you freeze the top row of an excel worksheet.
I tried to adjust the layout height property of the Constraint Layout but I can't seem to get it right. What I want is to anchor my Constraint Layout below the Relative Layout.
I have attached my code.
Thanks a lot in advance,
Regards,
Ravi.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.android.raviagl.netlandingcostcalculate.MainActivity">
<TextView
android:id="#+id/sap"
android:layout_width="120dp"
android:layout_height="72dp"
android:layout_marginLeft="16dp"
android:layout_toRightOf="#id/nlc"
android:gravity="center_vertical"
android:text="SAP"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp" />
<Button
android:id="#+id/reset_all"
android:layout_width="120dp"
android:layout_height="72dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="13dp"
android:text="Reset" />
<TextView
android:id="#+id/nlc"
android:layout_width="120dp"
android:layout_height="72dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:gravity="center_vertical"
android:text="NLC"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint_layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp">
<EditText
android:id="#+id/dp"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="88dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/allowance"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dp" />
<EditText
android:id="#+id/gst"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/allowance" />
<EditText
android:id="#+id/slab"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/gst" />
<RadioGroup
android:id="#+id/slab_radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slab">
<RadioButton
android:id="#+id/radio_slab_value"
android:layout_width="170dp"
android:layout_height="31dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:checked="true"
android:text="Use Fixed Amount"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="248dp" />
<RadioButton
android:id="#+id/radio_slab_percent"
android:layout_width="170dp"
android:layout_height="31dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:text="Use SAP Percent"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="248dp" />
</RadioGroup>
<EditText
android:id="#+id/sell_through"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="48dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slab" />
<EditText
android:id="#+id/sell_out"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sell_through" />
<EditText
android:id="#+id/display"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sell_out" />
<RadioGroup
android:id="#+id/display_radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display">
<RadioButton
android:id="#+id/radio_display_value"
android:layout_width="170dp"
android:layout_height="31dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:checked="true"
android:text="Use Fixed Amount"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="248dp" />
<RadioButton
android:id="#+id/radio_display_percent"
android:layout_width="170dp"
android:layout_height="31dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:text="Use SAP Percent"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="248dp" />
</RadioGroup>
<EditText
android:id="#+id/tie_up"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="48dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display" />
<EditText
android:id="#+id/handling"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tie_up" />
<EditText
android:id="#+id/cash_discount"
android:layout_width="175dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:ems="10"
android:gravity="right"
android:inputType="number"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/handling" />
<TextView
android:id="#+id/d_dp"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:text="DP"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_allowance"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Allowance"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/allowance"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_gst"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="GST"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/gst"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_slab"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Slab"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/slab"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_sell_through"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Sell Through"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/sell_through"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_sell_out"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Sell Out"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/sell_out"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_display"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Display"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/display"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_tie_up"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Tie UP"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/tie_up"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_handling"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Handling"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/handling"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/d_cash_discount"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Cash Discount"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/cash_discount"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</RelativeLayout>

There are a few options to consider here but I think the one that requires the least amount of refactoring your layout is this:
Add android:layout_below attribute to your ScrollView and position it under one the views that are fixed. It doesn't matter which one as long as they are the same height:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/sap">
Decrease (or remove) the top margin from the EditText with the ID android:id="#+id/dp"to eliminate unnecessary space on the top.
All that being said since you are using fixed widths for all the views in your layout you might run into some problems with displaying it on different screen sizes. For example the three fixed views on the top might overlap each other if there is not enough horizontal space. This could possibly be resolved by using other layouts (such as ConstraintLayout or LinearLayout) as root and/or not using fixed widths. However, this would require much more refactoring that the solution above.

How to resize table of buttons to work fine with all phones

Hello i'am trying to make a Tictactoy game my problem is in the layout design how to make it when the screen grows bigger the table and buttons inside become grow bigger and When the screen is smaller, the table and buttons inside become smaller not only the table
There is any way to fix this ?
The Correct one(my sccren)
The wrong one(when i change it to a smaller sccren)
,
<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="#android:color/darker_gray"
android:orientation="vertical"
tools:context="com.example.pc.tictactoyv1.act11">
<TableLayout
android:id="#+id/Table"
android:layout_width="357dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.42"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2"
app:layout_constraintVertical_bias="0.356">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:id="#+id/Btn1"
android:layout_width="110dp"
android:layout_height="128dp"
android:layout_marginRight="5dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
tools:ignore="ButtonStyle" />
<Button
android:id="#+id/Btn2"
android:layout_width="110dp"
android:layout_height="128dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
android:textStyle="bold" />
<Button
android:id="#+id/Btn3"
android:layout_width="110dp"
android:layout_height="128dp"
android:layout_marginLeft="5dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp" />
android:textSize="24sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center"
android:weightSum="3">
<Button
android:id="#+id/Btn4"
android:layout_width="90dp"
android:layout_height="128dp"
android:layout_marginRight="5dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp" />
<Button
android:id="#+id/Btn5"
android:layout_width="110dp"
android:layout_height="128dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp" />
<Button
android:id="#+id/Btn6"
android:layout_width="110dp"
android:layout_height="128dp"
android:layout_marginLeft="5dp"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp" />
</TableRow>
</TableLayout>

You have several options:
ConstraintLayout with percentage guidelines
nested vertical and horizontal LinearLayouts with weights
creating a CustomView that handles the sizes in onMeasure
ImageViews with white rectangular background, set to fitXY and adjustViewBounds = true
These are just some options I came up with at the top of my head, there are many more. Pick whatever suits your needs best. For beginners probably the way with the ConstraintLayout is the easiest.
I still don't exactly know what you want, but I added an example, that scales evenly, using ConstraintLayout and chains. Also checkout the constraintDimensionRatio whick makes everything square. You might want to checkout Constraint Layout How To
<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="#android:color/darker_gray"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/linearLayout2">
<Button
android:id="#+id/Btn4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn7"
app:layout_constraintEnd_toStartOf="#+id/Btn5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Btn1" />
<Button
android:id="#+id/Btn9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn8"
app:layout_constraintTop_toBottomOf="#+id/Btn6" />
<Button
android:id="#+id/Btn2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/Btn5"
app:layout_constraintEnd_toStartOf="#+id/Btn3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/Btn1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn4"
app:layout_constraintEnd_toStartOf="#+id/Btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ButtonStyle" />
<Button
android:id="#+id/Btn6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn5"
app:layout_constraintTop_toBottomOf="#+id/Btn3" />
<Button
android:id="#+id/Btn5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn8"
app:layout_constraintEnd_toStartOf="#+id/Btn6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn4"
app:layout_constraintTop_toBottomOf="#+id/Btn2" />
<Button
android:id="#+id/Btn7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/Btn8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Btn4" />
<Button
android:id="#+id/Btn8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/Btn9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn7"
app:layout_constraintTop_toBottomOf="#+id/Btn5" />
<Button
android:id="#+id/Btn3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/background_light"
android:onClick="SelectBtn"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/Btn6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/Btn2"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

how to create single layout that will look same on vertical and horizontal layout using constraints layout in android

I am using constraint layout and i am a beginner ,can anyone help me for creating a single layout that will look same on both horizontal and vertical view,i have created this but this is looking different on view.
Do i need to create separate layout for both?
My code of xml for 5 inch screen:-
<?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:padding="16dp"
tools:context=".MainActivity">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="53dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginTop="85dp"
app:layout_constraintTop_toBottomOf="#+id/button2"
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="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginTop="88dp"
app:layout_constraintTop_toBottomOf="#+id/button3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
app:layout_constraintGuide_begin="1097dp"
android:orientation="horizontal" />

Use code like this
<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:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button3"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button4"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="#+id/button3" />
</android.support.constraint.ConstraintLayout>
This should work on both screen orientations.
NOTE
With ConstraintLayout, using the layout editor is far easier than using the text editor.

Resources