grid in constraintlayout - android

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

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

Related

How to make buttons responsive in ConstraintLayout?

I am a beginner in Android and want to build 4 buttons on the bottom like in the picture. One button in the middle is not possible because I tried to set it responsive and it disappeared. Can you explain to me how I set those buttons next to each other with the same distance and make it responsive the right way?
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"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/button12"
app:layout_constraintWidth_percent="0.2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button13" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/button14"
app:layout_constraintTop_toTopOf="#+id/guideline2"
app:layout_constraintHeigth_percent="0.1"
app:layout_constraintWidth_percent="0.2" />
<Button
android:id="#+id/button14"
app:layout_constraintWidth_percent="0.2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button15"
app:layout_constraintTop_toTopOf="#+id/button13" />
<Button
android:id="#+id/button15"
app:layout_constraintWidth_percent="0.2"
android:layout_height="wrap_content"
android:text="Button"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/button13" />
</androidx.constraintlayout.widget.ConstraintLayout>
Try 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"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/btnOne"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnTwo"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnTwo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnThree"
app:layout_constraintStart_toEndOf="#id/btnOne" />
<Button
android:id="#+id/btnThree"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Three"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnFour"
app:layout_constraintStart_toEndOf="#id/btnTwo" />
<Button
android:id="#+id/btnFour"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Four"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/btnThree" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT
.
Adding to Nilesh Rathod answer you can do something like this if you want to control the button height your :
<?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="#f4f4f4"
tools:context="MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/btnOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="One"
android:layout_marginBottom="10dp"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnTwo"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toStartOf="#+id/btnThree"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnOne"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
<Button
android:id="#+id/btnThree"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Three"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toStartOf="#+id/btnFour"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnTwo"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
<Button
android:id="#+id/btnFour"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Four"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btnThree"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
</androidx.constraintlayout.widget.ConstraintLayout>
now btnOne got the height of 10% of the screen height, all other buttons are constrained to top of btnOne and have the android:layout_height="0dp" attribute, making them all the same size.
And if you want to change your button size just change the value of app:layout_constraintHeight_percent="0.1" on btnOne
Here is how it will look like
Try adding all the buttons inside a linear layout with it's orientation set to horizontal and the buttons will take i
Equal distance. To make buttons responsive use the onclicklistener(); to get the response

Why is scrollview hiding buttons behind other views?

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

Android Constraints - Buttons out of screen

I'm learning Android Development. I followed the google guide on developing a simple app if you already have programming experience. Now, I'm attempting to make a simple calculator. I seem to have some misunderstanding with constraints still. Below is how it looks in preview vs on my device (I can't simulate as my processor doesn't have the appropriate intrinsics).
Here's a pic:
I've tried watching some tutorials and reading online, what I've gotten is to have one constraint following another, parent<- child1 <- child2, etc.
<?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/button11"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10"
app:layout_constraintVertical_bias="0.052" />
<Button
android:id="#+id/button12"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toEndOf="#+id/button11"
app:layout_constraintTop_toBottomOf="#+id/button5"
app:layout_constraintVertical_bias="0.052" />
<Button
android:id="#+id/button13"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button9"
app:layout_constraintVertical_bias="0.052" />
<Button
android:id="#+id/button10"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button9"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button8"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="60dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space" />
<Button
android:id="#+id/button6"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button5"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button9"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<EditText
android:id="#+id/calcResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:ems="10"
android:inputType="numberDecimal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.54"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Space
android:id="#+id/space"
android:layout_width="8dp"
android:layout_height="18dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="44dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="44dp"
android:layout_marginEnd="4dp"
android:layout_marginRight="4dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/space"
app:layout_constraintStart_toEndOf="#+id/button30"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="44dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button33"
app:layout_constraintStart_toEndOf="#+id/space"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button8" />
<Button
android:id="#+id/button2"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/space" />
<Button
android:id="#+id/button3"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space" />
</androidx.constraintlayout.widget.ConstraintLayout>
As can be seen from the pic, the buttons are off the bottom of the screen. It also seems the spaces I design in the preview are different on the hardware. Thanks!
Now, I'm attempting to make a simple calculator. I seem to have some
misunderstanding with constraints still
Here, as for this layout, I overlooked and fixed it and hopefully according to your desire. And Reduced each button height to match with the resolution of the device screen.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="#+id/button11"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button12"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button11"
app:layout_constraintTop_toBottomOf="#+id/button5"
app:layout_constraintVertical_bias="0.012" />
<Button
android:id="#+id/button13"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button9"
app:layout_constraintVertical_bias="0.018" />
<Button
android:id="#+id/button10"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button9"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button8"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="52dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space" />
<Button
android:id="#+id/button6"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button5"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button9"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<EditText
android:id="#+id/calcResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:ems="10"
android:inputType="numberDecimal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Space
android:id="#+id/space"
android:layout_width="8dp"
android:layout_height="18dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/space"
app:layout_constraintStart_toEndOf="#+id/button30"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button33"
app:layout_constraintStart_toEndOf="#+id/space"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button8" />
<Button
android:id="#+id/button2"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="52dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHorizontal_bias="0.507"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/space" />
<Button
android:id="#+id/button3"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space" />
</android.support.constraint.ConstraintLayout>
layout_marginStart and layout_marginLeft are same, so just use one of them.
Some design suggestions:
Try and fix all the yellow warnings, fixing all the warnings for layouts will have 40% of your work done as per designing. And 10% depends on the size and position of each items on the layout. Rest 50% is a bit hard but not that hard. For showing you a example for this, when designing is ready for the layout and having fixed all the warning, press the "Orientation For Preview" button to set the Landscape mode. You will see that everything is messed up. Fixing this will need to make a separate layout for the landscape view. Now, why am I saying about Landscape ?
Here comes the second part of the answer of your question:
the buttons are off the bottom of the screen
Layout size is not same for all devices which you already know. So, when designing layouts, you have to keep track of the resolution of the screen. This is the reason the buttons are out off the screen. The resolution of the preview screen and the device screen are not same for your case. Try to select the preview resolution according to the device you are testing with by clicking the "Device For Preview" or 'Pixel' button of the layout preview.
Last but not the least, for both better understanding the design criteria along with best practices of performance, complete all the 11 lessons from Udacity on "Developing Android Apps" course (free).
Please choose relativeLayout as your parent layout. In that use a linearLayout with vertical orientation. Inside this place your calculator screen(EditText) first with center-horizontal orientation. Then place a center-horizontal oriented horizontalLinearLayout and populate this with the top most row buttons. Next for the numeric keypad, use a table layout with center orientation. You can then easily populate this table layout with your buttons.
Hope this helps.
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).
You can use Use ConstraintLayout with guidelines and Chains to support different screen sizes.
Here is an example of a similar layout using ConstraintLayout without any fixed size values (one layout for all screen sizes):
<?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/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button4"
app:layout_constraintStart_toEndOf="#+id/button2"
app:layout_constraintTop_toTopOf="#+id/button2" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button3"
app:layout_constraintTop_toTopOf="#+id/button3" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button6"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintStart_toEndOf="#+id/button9"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toStartOf="#+id/button16"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toStartOf="#+id/button14"
app:layout_constraintStart_toEndOf="#+id/button11"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button15"
app:layout_constraintStart_toEndOf="#+id/button12"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button10"
app:layout_constraintEnd_toStartOf="#+id/button5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button11"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button9" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button12"
app:layout_constraintEnd_toStartOf="#+id/button7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10" />
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button11" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button7"
app:layout_constraintTop_toBottomOf="#+id/button16" />
<Button
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button8"
app:layout_constraintTop_toBottomOf="#+id/button14" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button13" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center_horizontal"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".3" />
</androidx.constraintlayout.widget.ConstraintLayout>
And it will look like this:

buttons in Constraint Layout not stretching to parent

Making calculator UI using Constraint Layout but unable to stretch buttons to parent in different size of device. Want layout like first image in every device.
This is what I made.
This is what where it changing alignment.
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="330dp"
android:layout_margin="0dp"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:background="#android:color/background_dark"
android:gravity="bottom|right"
android:maxLength="17"
android:maxLines="2"
android:nestedScrollingEnabled="false"
android:text="#string/_0"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="70sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
<Button
android:id="#+id/button25"
android:layout_width="195px"
android:layout_height="wrap_content"
android:background="?attr/colorButtonNormal"
android:text="AC"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button26"
android:layout_width="195px"
android:layout_height="0dp"
android:layout_margin="0dp"
android:background="?attr/colorButtonNormal"
android:text="+/-"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/button25"
app:layout_constraintStart_toEndOf="#+id/button25" />
Code is big so adding starting Lines only.
You can add an 50%(or other percnet whatever you want) percnet horizontal Guideline,and create some chains.Use layout_constraintHorizontal_weight to proportionate the bottom buttons' width.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/button9"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button4"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button5"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="="
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/button4"
app:layout_constraintTop_toTopOf="#+id/button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="."
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="1"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button17" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button7"
app:layout_constraintStart_toEndOf="#+id/button5"
app:layout_constraintTop_toTopOf="#+id/button5" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="3"
app:layout_constraintBottom_toBottomOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button8"
app:layout_constraintStart_toEndOf="#+id/button6"
app:layout_constraintTop_toTopOf="#+id/button5" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+"
app:layout_constraintBottom_toBottomOf="#+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button7"
app:layout_constraintTop_toTopOf="#+id/button5" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="AC"
app:layout_constraintBottom_toTopOf="#+id/button21"
app:layout_constraintEnd_toStartOf="#+id/button10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+/-"
app:layout_constraintBottom_toBottomOf="#+id/button9"
app:layout_constraintEnd_toStartOf="#+id/button11"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/button9"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="%"
app:layout_constraintBottom_toBottomOf="#+id/button9"
app:layout_constraintEnd_toStartOf="#+id/button12"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+"
app:layout_constraintBottom_toBottomOf="#+id/button9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button11"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button17"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:text="4"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button18"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button21" />
<Button
android:id="#+id/button18"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="5"
app:layout_constraintBottom_toBottomOf="#+id/button17"
app:layout_constraintEnd_toStartOf="#+id/button19"
app:layout_constraintStart_toEndOf="#+id/button17"
app:layout_constraintTop_toTopOf="#+id/button17" />
<Button
android:id="#+id/button19"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="6"
app:layout_constraintBottom_toBottomOf="#+id/button17"
app:layout_constraintEnd_toStartOf="#+id/button20"
app:layout_constraintStart_toEndOf="#+id/button18"
app:layout_constraintTop_toTopOf="#+id/button17" />
<Button
android:id="#+id/button20"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="-"
app:layout_constraintBottom_toBottomOf="#+id/button17"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button19"
app:layout_constraintTop_toTopOf="#+id/button17" />
<Button
android:id="#+id/button21"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="7"
app:layout_constraintBottom_toTopOf="#+id/button17"
app:layout_constraintEnd_toStartOf="#+id/button22"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button9" />
<Button
android:id="#+id/button22"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="8"
app:layout_constraintBottom_toBottomOf="#+id/button21"
app:layout_constraintEnd_toStartOf="#+id/button23"
app:layout_constraintStart_toEndOf="#+id/button21"
app:layout_constraintTop_toTopOf="#+id/button21" />
<Button
android:id="#+id/button23"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="#+id/button21"
app:layout_constraintEnd_toStartOf="#+id/button24"
app:layout_constraintStart_toEndOf="#+id/button22"
app:layout_constraintTop_toTopOf="#+id/button21" />
<Button
android:id="#+id/button24"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="x"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="#+id/button21"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button23"
app:layout_constraintTop_toTopOf="#+id/button21" />
</android.support.constraint.ConstraintLayout>
It looks like:
Using fixed width will cause issue on different screen
If you want it to be dynamically adjusted to every screen i suggest you to use constraint layout horizontal chaining
something like this:
<Button
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View 1"
app:layout_constraintRight_toLeftOf="#+id/view2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View 2"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#+id/view1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
It works pretty similar like weight in linear layout
further reference you can see here:
https://medium.com/#nomanr/constraintlayout-chains-4f3b58ea15bb

Replace GridLayout with LinearLayout

I have a GridLayout that displays a calculator screen. It looks very nice on many devices but utterly fails on small displays and even some big displays. There is a bug in GridLayout implementation but Google is not working on it. You can see details in my half year old question and an accepted answer: GridLayout collapses on small display
I tried to reimplement my layout. I started with new ConstraintLayout without luck. LinearLayout is quite close but I failed to stretch individual cells. They do not fill the available space. When I change a width from wrap_content to match_parent, the layout breaks totally.
All source code and a sample application is available at https://github.com/literakl/CalcTrouble.
Current Linear Layout
GridLayout when it works
Broken GridLayout on Nexus 5
Broken GridLayout on Nexus S
Layout source code
<LinearLayout
android:id="#+id/calc_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:background="#color/bg_calc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Display row-->
<TextView
android:id="#+id/assignment"
android:text="50 + 40 = 90"
style="#style/Formula"
android:focusable="false"
android:layout_width="match_parent"
android:layout_height="#dimen/calc_display_height"
tools:ignore="HardcodedText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- row with 7-9,+ -->
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent">
<Button
android:id="#+id/digit7"
android:text="7"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit8"
android:text="8"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit9"
android:text="9"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonPlus"
android:text="+"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 4-6, - -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit4"
android:text="4"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit5"
android:text="5"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit6"
android:text="6"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonMinus"
android:text="-"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 1-3, * -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit1"
android:text="1"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit2"
android:text="2"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit3"
android:text="3"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonMultiply"
android:text="\u22C5"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 0, backspace and / -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit0"
android:text="0"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonBackspace"
android:text="←"
style="#style/KeypadFunctionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_columnSpan="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonDivide"
android:text=":"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>
<!--row with button submit -->
<Button
android:id="#+id/buttonSubmit"
android:text="#string/action_next_formula"
style="#style/KeypadNextButton"
android:layout_width="match_parent"
android:layout_height="#dimen/calc_next_height"
app:layout_gravity="fill_horizontal"/>
</LinearLayout>
How can I achieve desired look that will work on all devices?
Make your button's width to 0dp, height to match_parent and layout_weight to 1 as in below sample for a single row
<!-- row with 7-9,+ -->
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum ="4"
android:orientation="horizontal"
android:layout_width="match_parent">
<Button
android:id="#+id/digit7"
android:text="7"
style="#style/KeypadLeftButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit8"
android:text="8"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit9"
android:text="9"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonPlus"
android:text="+"
style="#style/KeypadFunctionRightButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>
Using ConstraintLayouts you can achieve this :
Layout code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button_top"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_bottom"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="9dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout_content"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/button_bottom"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_top">
<android.support.constraint.ConstraintLayout
android:id="#+id/first_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/second_row"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button_first_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_first_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_first"
app:layout_constraintRight_toLeftOf="#+id/button_first_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_second"
app:layout_constraintRight_toLeftOf="#+id/button_first_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/second_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/third_row"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/first_row">
<Button
android:id="#+id/button_second_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_second_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_first"
app:layout_constraintRight_toLeftOf="#+id/button_second_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_second"
app:layout_constraintRight_toLeftOf="#+id/button_second_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/third_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/fouth_row"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/second_row">
<Button
android:id="#+id/button_third_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_third_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_first"
app:layout_constraintRight_toLeftOf="#+id/button_third_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_second"
app:layout_constraintRight_toLeftOf="#+id/button_third_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/fouth_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/third_row">
<Button
android:id="#+id/button_fourth_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_fourth_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_fourth_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/button_fourth_first"
app:layout_constraintRight_toLeftOf="#+id/button_fourth_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_fourth_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintLeft_toRightOf="#+id/button_fourth_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Categories

Resources