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.
Related
I can visually show what I mean to do:
basically, something like:
app:layout_constraintBottom_toEndOf is Illegal
But, I'd like to know if there's a way to implement this sort of dynamic remapping of constraints that would in turn also rotate the views inside of the constraintLayout
I've used external library from https://github.com/rongi/rotate-layout It allows to rotate viewgroup's children.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintStart_toEndOf="#+id/button4"
app:layout_constraintTop_toBottomOf="#+id/button">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:gravity="center"
android:text="#string/hello_string"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginBottom="8dp"
android:text="Button1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginTop="8dp"
android:text="Button2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.75"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.96" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.96"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginEnd="8dp"
android:text="Button4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.03"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textCoord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Preview Child Not Rotated :
Preview Child Rotated
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
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
I have searched Android site and on here, but for the life of me, I can't seem to figure out how to get a full screen menu without spaces. I've checked margins, padding, etc. I've used percentages for guidelines too, but still have spacing between my buttons. Can anyone help? All of my buttons are set to zero db as well.
<?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:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#66bb6a"
android:elevation="0dp"
android:onClick="startFlashcardA"
android:text=" Flashcards"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline22"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"/>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#android:color/holo_purple"
android:elevation="0dp"
android:onClick="startVideoA"
android:padding="0dp"
android:text=" Videos"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline27"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline22"
app:layout_constraintVertical_bias="0.0"
/>
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="125dp"
android:backgroundTint="#f06292"
android:onClick="startSoundsMenu"
android:text=" Letter Sounds"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline28"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline27"
app:layout_constraintVertical_bias="0.0"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#android:color/holo_blue_dark"
android:text=" About Mr. Pea"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/guideline29"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline28"
app:layout_constraintVertical_bias="0.0"/>
<android.support.constraint.Guideline
android:id="#+id/guideline22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2"
tools:layout_editor_absoluteY="114dp"
tools:layout_editor_absoluteX="0dp"/>
<android.support.constraint.Guideline
android:id="#+id/guideline27"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4"
tools:layout_editor_absoluteY="227dp"
tools:layout_editor_absoluteX="0dp"/>
<android.support.constraint.Guideline
android:id="#+id/guideline28"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6"
tools:layout_editor_absoluteY="340dp"
tools:layout_editor_absoluteX="0dp"/>
<android.support.constraint.Guideline
android:id="#+id/guideline29"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8"
tools:layout_editor_absoluteY="454dp"
tools:layout_editor_absoluteX="0dp"/>
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#887c5a"
android:text=" Contributions"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline29"
app:layout_constraintVertical_bias="0.0"/>
</android.support.constraint.ConstraintLayout>
No guidelines necessary. Just make a chain well-connected in both directions. You may want to correct the padding of button.
<?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:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="25dp">
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#66bb6a"
android:elevation="0dp"
android:onClick="startFlashcardA"
android:text=" Flashcards"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#android:color/holo_purple"
android:elevation="0dp"
android:onClick="startVideoA"
android:padding="0dp"
android:text=" Videos"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/button5"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#f06292"
android:onClick="startSoundsMenu"
android:text=" Letter Sounds"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#android:color/holo_blue_dark"
android:text=" About Mr. Pea"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button6"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#887c5a"
android:text=" Contributions"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I want to have 2 columns grid with square button in constraint layout this is my xml but it shows one big button when I add 4 button :
screen
and when I delete 2 button every thing works great:
screen2
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.example.poory.myapplication.MainActivity">
<Button
android:id="#+id/button"
app:layout_constraintTop_toBottomOf="#id/slider"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginTop="0dp" />
<Button
android:id="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/slider"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
tools:layout_editor_absoluteY="232dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button" />
<Button
android:id="#+id/button3"
app:layout_constraintTop_toBottomOf="#id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2" />
<Button
android:id="#+id/button4"
app:layout_constraintTop_toBottomOf="#id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
this grid should be in scrollview , so I cant use bottom of parent .
I added a Guideline which is working for me.
<Button
android:id="#+id/button"
app:layout_constraintTop_toBottomOf="#id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginTop="0dp" />
<Button
android:id="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
tools:layout_editor_absoluteY="232dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button" />
<Button
android:id="#+id/button3"
app:layout_constraintTop_toBottomOf="#id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
/>
<Button
android:id="#+id/button4"
app:layout_constraintTop_toBottomOf="#id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="87dp"
android:orientation="horizontal" />