Develop Reference

Proper menaging buttons in layout - Android Studio

I want to put 4 buttons in in 2x2 way, but I would like to make their width constance as half of a screen. How to do it, when I want to keep it on horizontal mode too (so in horiozontal mode they have the same place and half of screen width)?
This is current my layout.xml:
<?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"
android:background="#EB0808">
<!-- tools:context=".MainActivity">-->
<Button
android:id="#+id/buttonSecondAnswer"
android:layout_width="186dp"
android:layout_height="104dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.967"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/questionContentTextView"
app:layout_constraintVertical_bias="0.054" />
<TextView
android:id="#+id/questionNumberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:text="Question 1"
android:textAlignment="center"
android:textSize="32sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/questionContentTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:text="someQuestionContent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/buttonFirstAnswer"
android:layout_width="186dp"
android:layout_height="104dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.022"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/questionContentTextView"
app:layout_constraintVertical_bias="0.054" />
</androidx.constraintlayout.widget.ConstraintLayout>

So if you put items in a horizontal/vertical chain, if you set the width/height to 0dp, it will occupy whatever space is available on the x/y axis. For more info visit: https://developer.android.com/training/constraint-layout
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EB0808">
<!-- tools:context=".MainActivity">-->
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#id/button2"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button1" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/button1"
app:layout_constraintEnd_toStartOf="#id/button4"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toTopOf="#id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button3" />
</androidx.constraintlayout.widget.ConstraintLayout>

How do I divide the View below using weights and constraint layout

I used LinearLayout to create the UI but I'm unable to centre the horizontal gray line in alignment to centre of the circle. I placed the circles and text in a vertical linear layout.
Find the code below:
<LinearLayout
android:id="#+id/step_indicator"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_margin="#dimen/margin_10"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/step1_layout"
style="#style/StepIndividualLayout">
<ImageView
android:id="#+id/step1_imageView"
style="#style/StepImageView"
android:layout_gravity="center"
android:src="#drawable/active"
app:layout_constraintDimensionRatio="1:1" />
<TextView
android:id="#+id/step1_textView"
style="#style/StepTextView"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Text1"
android:textColor="#color/dark_blue_color" />
</LinearLayout>
<View
android:id="#+id/step_1_2_view"
style="#style/StepLine"></View>
<LinearLayout
android:id="#+id/step2_layout"
style="#style/StepIndividualLayout">
<ImageView
android:id="#+id/step2_imageView"
style="#style/StepImageView"
android:layout_gravity="center"
android:src="#drawable/step_2_deactivated"
app:layout_constraintDimensionRatio="1:1" />
<TextView
android:id="#+id/step2_textView"
style="#style/StepTextView"
android:layout_gravity="center"
android:text="Text 2" />
</LinearLayout>
<View
android:id="#+id/step_2_3_view"
style="#style/StepLine"/>
</LinearLayout>
The above code produces the following result:

You can use constraitnLyaout as you want to, and give your lines proper constraints so they will be centered according to your images.
In addition, I think that in here chain (Horizontal) will make your life easier, for more info ConstraintLayout chains
something like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.2"
app:layout_constraintHeight_percent="0.1"
android:text="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/view4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:text="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/view"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view5"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.2" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.2"
app:layout_constraintHeight_percent="0.1"
android:text="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/view5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view4"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/cardview_dark_background"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button2"
app:layout_constraintTop_toTopOf="#+id/button2" />
<View
android:id="#+id/view4"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/cardview_dark_background"
app:layout_constraintBottom_toBottomOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/button4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/view" />
<View
android:id="#+id/view5"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/cardview_dark_background"
app:layout_constraintBottom_toBottomOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button4"
app:layout_constraintTop_toTopOf="#+id/view" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this:
now just replace your buttons with your custom view and you are done.

instead of doing manually, you can use this libarary to manage your step status.
OR
use the following code. just replace Imageview with your custom view.
<?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="#dimen/dp75"
android:layout_marginHorizontal="#dimen/dp4"
android:gravity="center"
android:weightSum="7">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/blank_profile_picture"/>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginHorizontal="#dimen/dp4"
android:layout_weight="1"
android:background="#color/black"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/blank_profile_picture"/>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginHorizontal="#dimen/dp4"
android:layout_weight="1"
android:background="#color/black"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/blank_profile_picture"/>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginHorizontal="#dimen/dp4"
android:layout_weight="1"
android:background="#color/black"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/blank_profile_picture"/>
</LinearLayout>

View get packed in ConstraintLayout, Views run out of screen in LinearLayout

I am implementing a signup/login screen like below
I have tried this using ConstraintLayout like below
<?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"
android:layout_margin="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginBottom="72dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="12dp"
android:text="Button 1"
app:layout_constraintBottom_toTopOf="#+id/btn2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="48dp"
android:text="Button 2"
app:layout_constraintBottom_toTopOf="#+id/txt_already_member"
app:layout_constraintEnd_toEndOf="#+id/btn1"
app:layout_constraintStart_toStartOf="#+id/btn1"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/txt_agreement"
app:layout_constraintEnd_toEndOf="#+id/btn2"
app:layout_constraintStart_toStartOf="#+id/btn2"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By continuing you agree to our terms and privacy policy"
android:layout_marginTop="32dp"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Summary of XML:
Vertical chain is applied on four top most views
vertical chain style is set to packed
last text view is constraint to bottom and sides
margin is set on views to separate items.
Problem is when I run this on my phone, bottom text views get tight packed as shown here.
Next I tried LinearLayout like below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:layout_margin="16dp"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginBottom="72dp"
android:layout_marginTop="72dp"
android:src="#drawable/ic_launcher_background"/>
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="8dp"
android:text="Button 1" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_height="56dp"
android:layout_marginBottom="32dp"
android:text="Button 2" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already Member? Sign In"
android:textSize="16sp"
android:layout_weight="1"/>
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By continuing you agree to our terms and privacy policy "
android:textSize="12sp"/>
</LinearLayout>
In this case bottom text views are not visible as shown here.
My device resolution is 720 * 1280 pixels.
I suppose the problem is with the hard margins. How could I make the screen look like in the sketch above, regardless of screen height? either using LinearLayout or ConstraintLayout?

I would recommend you you use all screen densities rather than one for this you can use the famous library SDP or follow the guideline provided by android.
Second use Guideline class for Constraintlayout.
Here is the sample code snippet you can also use this one.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp">
<ImageView
android:id="#+id/img"
android:layout_width="#dimen/_200sdp"
android:layout_height="#dimen/_200sdp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintBottom_toTopOf="#+id/btn2"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/img" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintBottom_toTopOf="#+id/txt_already_member"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/divider"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="By continuing you agree to our terms and privacy policy"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toTopOf="#+id/divider"
app:layout_constraintVertical_bias="1.0" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="#dimen/_16sdp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="#dimen/_16sdp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintGuide_percent="0.7"
app:layout_constraintTop_toBottomOf="#+id/txt_already_member" />

Actually solution to my problem is using Guidelines in ConstraintLayout with Guidelines app:layout_constraintGuide_percentattribute and constraining the views to Guidelines.
Since value for app:layout_constraintGuide_percent is a percentage rather than a dp value, it works responsively regardless of screen width/height.
example :
<?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"
android:layout_margin="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="200dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:text="Button 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline5" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="8dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:text="Button 2"
app:layout_constraintEnd_toEndOf="#+id/btn1"
app:layout_constraintStart_toStartOf="#+id/btn1"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/txt_agreement"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="By continuing you agree to our terms and privacy policy "
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".6" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thank you very much Rehan Sarwar for remembering me about Guidelines.

How to use constraint layout so the card views are always in one place?

I am using a constraint layout and card views in it, but on different screen sizes the card views are not in the same place. I thought the idea of constraint is that you only have to arrange the card view for one time and it automatically aligns to the different device sizes. The first picture shows the screen I want to have on every device size and the other picture shows you the result of a different size where the CardViews are obviously not in the right place.
I already tried using guidelines but it doesn't help. Or is it better to use another Layout like RelativeLayout? But what's then the point of a ConstraintLayout?
Design as it should be
Result with different size
Thank you for your help!
Here is my XML:
<?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=".spielen_uebersicht">
<TextView
android:id="#+id/spieler_suche"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Spieler suchen:"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.484"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cardView3"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/spieler_suche">
<SearchView
android:id="#+id/searchView_spieler_suchen"
android:layout_width="match_parent"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:queryBackground="#android:color/transparent" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/zufälliger_spieler"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="0.198">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Zufälliger Spieler"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/zufaelliger_spieler" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="#+id/zufälliger_spieler"
app:layout_constraintStart_toEndOf="#+id/zufälliger_spieler"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="1.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Freunde einladen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freunde_einladen" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewFreundesübersicht"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toEndOf="#+id/cardView2"
app:layout_constraintTop_toBottomOf="#+id/cardView">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Freundes-\nübersicht"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_uebersicht" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/zufälliger_spieler">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Anfragen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_anfragen" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>```

You don't see your layout the same way on different phones because your cardviews dimensions are a fixed size , why is it bad?
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
How to fix it:
You can just use app:layout_constraintWidth_percent and app:layout_constraintHeight_percent on your cardviews to give the size in precents according to the screen.
Something like this:
<?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">
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
In this example, I have 4 buttons that represent your cardViews.
They are all equal in size and will be responsive to all screen sizes.
This layout will look like this (the arrow points to the guideline, to make it more understandable):

For Future Visitors, Chains are the magical word when trying to simulate Linear layout form. using horizontal chains with vertical ones along with using dynamic View sizes as Tamir Abutbul mentioned should be the best practice.
<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">
<TextView
android:id="#+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="?android:attr/actionBarSize"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 4"
android:textSize="24sp"
android:padding="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btn3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn3"
app:layout_constraintTop_toTopOf="#+id/btn3" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 2"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="#+id/btn4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn4"
app:layout_constraintTop_toTopOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 3"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/btn4"
app:layout_constraintEnd_toStartOf="#+id/btn1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 1"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toTopOf="#+id/btn3"
app:layout_constraintEnd_toStartOf="#+id/btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>
Best of luck ;)

ConstraintLayout button in centre and size as 1/3 of ViewPager

I'm using the ConstraintLayout and I want to display button in the centre of ViewPager but with width and height of 1/3 of this pager.I used horizontal and vertical chain. And got the next:
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="#id/view_pager"
app:layout_constraintRight_toLeftOf="#+id/button2" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintBottom_toBottomOf="#id/view_pager"
app:layout_constraintTop_toBottomOf="#id/button2"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintTop_toTopOf="#id/view_pager"
app:layout_constraintBottom_toTopOf="#id/button2"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintVertical_weight="1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="#id/button4"
app:layout_constraintBottom_toTopOf="#id/button5"
app:layout_constraintLeft_toRightOf="#+id/button1"
app:layout_constraintRight_toLeftOf="#+id/button3" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/button2"
app:layout_constraintRight_toRightOf="#id/view_pager" />
<android.support.constraint.Guideline
android:id="#+id/vertical_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="#dimen/basic_keyline"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginLeft="8dp"
android:layout_marginRight="#dimen/basic_keyline"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:text="#string/send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/vertical_guideline"
app:layout_constraintRight_toRightOf="parent" />
But I think this approach is so scary. Maybe somebody know better solution, please help me. I want to use only xml without using the code.
UPDATE
Buttons were added to easy understand what I want.

Here's what you can do without adding so many buttons and also without guidelines.
Here's the 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:fitsSystemWindows="true"
android:orientation="vertical"
android:id="#+id/apbLay1"
tools:context="studios.brilliant.com.commutech.Home">
<android.support.constraint.ConstraintLayout
android:layout_marginBottom="152dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="0dp"
android:layout_width="0dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".333"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".333"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
This will give you the exact output you need and you're getting as in the screenshot provided.
.333 is 33.3% of the parent which is almost equal to 1/3.
That extra layout is to add a container for the viewpager and button as using viewpager as the container can cause the button to hide when the fragment will be visible.

You can insert a ConstraintLayout into your PageViewer so that you can use GuideLines to constraint the Button.
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.67" />
<android.support.constraint.Guideline
android:id="#+id/top_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/bottom_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/top_guideline"
app:layout_constraintBottom_toTopOf="#id/bottom_guideline"
app:layout_constraintLeft_toRightOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline" />
</android.support.constraint.ConstraintLayout>