Android Constraints - Buttons out of screen

Android Constraints - Buttons out of screen - android

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:

Related

How to create responsive GridView to cover whole screen?

I have the following layout in an Activity of my Android app:
There are 3 sections and 10 buttons, with icon and text.
As you can see on large screen (most of phones nowadays) I get a lot of blank space at the bottom of the screen.
Do you know how to make the GridView using all the room and filling that white part?
Is it possible to make it responsive so every row and column of the grid could adapt according to screen size?
Here are my XML files:
my_activity.xml (used by my Activity)
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/logo"
android:src="#drawable/company_logo" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:textColor="#ffffff"
android:text="#string/menu1"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="3"
android:verticalSpacing="5dp" >
</GridView>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:layout_marginTop="10dp"
android:textColor="#ffffff"
android:text="#string/menu2"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="auto_fit"
android:verticalSpacing="5dp" >
</GridView>
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:layout_marginTop="10dp"
android:textColor="#ffffff"
android:text="#string/menu3"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="2"
android:verticalSpacing="5dp" >
</GridView>
gridview_row.xml (used by a GridViewAdapter)
<ImageView
android:layout_height="32dp"
android:id="#+id/imageView1"
android:layout_width="32dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</ImageView>
<TextView
android:text="TextView"
android:layout_height="wrap_content"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_marginTop="5dp"
android:layout_centerHorizontal="true"
android:textSize="18sp"
android:ellipsize="marquee">
</TextView>
</RelativeLayout>

You better use ConstraintLayout if you want to have a responsive layout for all devices, here is an example of constraint layout with some guidelines:
<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:id="#+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.MenusDesign.ExpandableCategoriesMenu.ExpandableCategoriesMenu"
tools:layout_editor_absoluteY="81dp">
<Button
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="logo"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/firstsection"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="first section"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="5"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toStartOf="#+id/guideline6"
app:layout_constraintHorizontal_bias="0.548"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="1"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="6"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline6"
app:layout_constraintTop_toTopOf="#+id/button3" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="4"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="3"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline6"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="2"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toStartOf="#+id/guideline6"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="second section"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="7"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toStartOf="#+id/guideline8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="8"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toBottomOf="#+id/button" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="third section"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline9" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline8"
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:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="10"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toBottomOf="#+id/button10" />
Here is how the layout will look on your screen:
Remember that this is just an example and you can change the ratio/height/width of the views as you like.
A small note on guidelines - they are very comfortable to use and in the above example you can see that I gave the guidelines Percents in order to tell them how to be placed (relatively to the screen) on the screen.

Hide or Add Button in Constraint Layout based on some condition

I have this layout on Fragment. It has 3 Buttons. Below Button3 there is one TextView.When this layout is set I am checking some conditions. If that condition is satisfied I am showing the Button3. But if the condition is not satisfied I need to hide the button.
This is how the layout looks after hiding Button3
It appears to be a lot of blank space between the TextView and Button2 when the button is hidden but in my XML layout, it is present there. How to avoid this so that it doesn't appear blank space?
This is code for XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/myConstraint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/allscreenbackground">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tabIndicator"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Table: "
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/tableName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.03"
app:layout_constraintStart_toStartOf="#+id/toolbar2" />
<TextView
android:id="#+id/tableName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text=""
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/full_name"
app:layout_constraintEnd_toEndOf="#+id/toolbar2"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintStart_toEndOf="#+id/name" />
<TextView
android:id="#+id/full_name"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="10dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ellipsize="marquee"
android:gravity="center"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text=""
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/toolbar2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tableName"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="28dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="0dp"
android:text="Pax -"
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/people"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Occupied Since :"
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/lapsedTime"
app:layout_constraintStart_toStartOf="#+id/guideline4" />
<TextView
android:id="#+id/people"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text=""
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/toolbar2"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lapsedTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text=""
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.06"
app:layout_constraintStart_toEndOf="#+id/textView10"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.18" />
<Button
android:id="#+id/shift"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:gravity="center"
android:text="Button 1"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.283" />
<Button
android:id="#+id/end"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:text="Button 2"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.387" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="40dp" />
<Button
android:id="#+id/freeThisTable"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:text="Button 3"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/isBday"
android:visibility="invisible"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.65"
app:srcCompat="#drawable/birthday" />
<ImageView
android:visibility="invisible"
android:id="#+id/isAniversary"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.78"
app:srcCompat="#drawable/ring_new" />
<TextView
android:visibility="visible"
android:id="#+id/isBdayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Hello"
android:textSize="18sp"
android:textColor="#color/textTitles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.64" />
<TextView
android:visibility="invisible"
android:id="#+id/isAniversaryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textSize="18sp"
android:textColor="#color/textTitles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.76" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />
</android.support.constraint.ConstraintLayout>

If you want to hide the spaces of the object use it:
boolean myCondition = true;
if(myCondition) {
Button3.setVisibility(View.GONE);
}
else {
Button3.setVisibility(View.VISIBLE);
}

The problem was because of incorrect constraint. You have constrained most of your views TOP to parent and set bias to align it. Instead of that, do align under your consecutive views. It will work as your requirement.
For better understanding, I have edited your xml file. Replace and check it out.
<........./>
<android.support.constraint.Guideline
android:id="#+id/guideline4"
.............../>
<Button
android:id="#+id/freeThisTable"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:background="#drawable/yes_button"
android:text="Button 3"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/end" />
<ImageView
android:id="#+id/isBday"
android:layout_width="40dp"
android:layout_height="40dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/isBdayText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/isBdayText"
app:srcCompat="#drawable/birthday" />
<ImageView
android:id="#+id/isAniversary"
android:layout_width="40dp"
android:layout_height="40dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/isAniversaryText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/isAniversaryText"
app:srcCompat="#drawable/ring_new" />
<TextView
android:id="#+id/isBdayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Hello"
android:textColor="#color/textTitles"
android:textSize="18sp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toBottomOf="#+id/freeThisTable" />
<TextView
android:id="#+id/isAniversaryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="TextView"
android:textColor="#color/textTitles"
android:textSize="18sp"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toBottomOf="#+id/isBdayText" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
.............. />

How to put 'spinner' on top of button

Is there a way I can make my spinner be put on top of my button? (There will be various things on top of my button and when you press the button everything thats on it including the button will disappear)(the button spans the width of the screen) Now it's my spinner under my button. I tried looking at different RelativeLayout settings but it didn't work. Here's the xml code below
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackground"
android:minHeight="170dp"
tools:context=".create"
tools:layout_editor_absoluteY="81dp">
<View
android:id="#+id/view"
android:layout_width="320dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:background="#color/colorText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="296dp"
android:layout_height="49dp"
android:layout_marginEnd="56dp"
android:layout_marginRight="56dp"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="95dp" />
<Button
android:id="#+id/button"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginBottom="312dp"
android:background="#drawable/button_shadow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="320dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:background="#color/colorText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/done_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="128dp"
android:layout_marginRight="128dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/aisle_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginEnd="44dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="44dp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:fontFamily="#font/droid_sans"
android:text="#string/qty_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.973"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="0.7" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/item_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
Edit: I put my button and spinner into a frame layout, and when I tested it on my phone it works. However I tested it on a phone of a bigger size (and a newer android version) and the spinner doesn't show up (probably hidden again?) No idea why it would work on one phone but not the other,
<FrameLayout
android:layout_width="327dp"
android:layout_height="63dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.195"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view">
<Button
android:id="#+id/buttontest"
android:layout_width="313dp"
android:layout_height="63dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="102dp" />
<Spinner
android:id="#+id/spinner"
android:layout_width="249dp"
android:layout_height="58dp"
android:layout_marginBottom="344dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.237"
app:layout_constraintStart_toStartOf="parent" />
</FrameLayout>

Try calling
findViewById(R.id.spinner).bringToFront();

You can use this
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/browser_actions_bg_grey"
android:minHeight="170dp"
tools:layout_editor_absoluteY="81dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="25dp"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Done"
android:textSize="20sp"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" aisle_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" qty_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.973"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="0.7" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" item_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
</LinearLayout>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#a4a4a4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="49dp"
android:layout_gravity="center"
android:layout_margin="10dp"
/>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#a4a4a4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

I think I managed to sort something out - I created a 'FrameLayout' and put both my spinner & button in there.
Should do the job, unless I find an issue, in which I'll come back here,this should be solved. :) Thank you

In case anyone was wondering:
I put my 'button' into a FrameLayout then put the elements I want 'ontop' of it, under it (as in the code under it) like so:
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="357dp"
android:layout_height="58dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.195"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.016">
<Button
android:id="#+id/buttontest"
android:layout_width="393dp"
android:layout_height="63dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="102dp" />
</FrameLayout>
<EditText
android:id="#+id/editText"
android:layout_width="44dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="184dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="184dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="qty"
android:inputType="number"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/spinner"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
app:layout_constraintVertical_bias="1.0" />
<Spinner
android:id="#+id/spinner"
android:layout_width="85dp"
android:layout_height="45dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.06"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/editText" />

How to dynamically adapt textview size in constraint layout to different screen sizes?

Screenshots
1)Samsung J6
2) Lenovo Vibe X3 6 inch screen
Problem is how can i adjust the textview of lyrics to increase height when more screen is available as in J6 model and less height when screen space is less,?
Or is there any way to avoid that extra weird looking space below the play/pause control buttonsin J6 model ? when i increase the space between textview and the buttons , J6 becomes correct and in lenovo model buttons go out of the screen??
My XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg"
android:theme="#style/Base.Theme.AppCompat.Light.DarkActionBar"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="660dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="239dp"
android:layout_height="240dp"
android:layout_marginEnd="25dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:layout_marginStart="25dp"
android:layout_marginTop="25dp"
android:adjustViewBounds="false"
android:scaleType="fitCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/albumcover"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="34dp"
android:layout_height="32dp"
android:layout_marginLeft="25dp"
android:layout_marginStart="25dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#drawable/ic_baseline_surround_sound_24px" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="34dp"
android:layout_height="32dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#drawable/ic_baseline_more_vert_24px" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:text="Human Nature"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<SeekBar
android:id="#+id/seekBar2"
android:layout_width="402dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:progressTint="#color/colorAccent"
android:thumbTint="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="43dp"
android:layout_height="40dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/seekBar2"
app:srcCompat="#drawable/ic_baseline_pause_24px" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="27dp"
android:layout_height="27dp"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toTopOf="#+id/imageView5"
app:srcCompat="#drawable/ic_baseline_skip_next_24px" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="30dp"
android:layout_height="26dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/imageView5"
app:layout_constraintTop_toTopOf="#+id/imageView5"
app:srcCompat="#drawable/ic_baseline_skip_previous_24px" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="36dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="36dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toStartOf="#+id/imageView7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView7"
app:srcCompat="#drawable/ic_baseline_shuffle_24px" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="36dp"
android:layout_marginRight="8dp"
android:layout_marginStart="36dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView6"
app:layout_constraintTop_toTopOf="#+id/imageView6"
app:srcCompat="#drawable/ic_baseline_repeat_24px" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Housee De Racket"
android:textAlignment="center"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="79dp"
android:layout_marginTop="24dp"
android:text="this space is for lyrics "
android:textAlignment="center"
android:textColor="#ffffff"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="25dp"
android:layout_marginStart="25dp"
android:layout_marginTop="8dp"
android:text="01:23"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/seekBar2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="25dp"
android:layout_marginRight="25dp"
android:layout_marginTop="8dp"
android:text="01:24"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/seekBar2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>

Check this piece out about Autosizing TextViews
There are actually a lot of flexibility in determining how you want your text view to resize. One of the examples in the doc:
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:autoSizeTextType="uniform"
android:autoSizeMinTextSize="12sp"
android:autoSizeMaxTextSize="100sp"
android:autoSizeStepGranularity="2sp" />

Remove that LinearLayout;
Make the ConstraintLayout height to match_parent;
You want those controll buttons to be right at the bottom, so set bottom constraint to bottom of a parent;
ProgressBar bottom to top of controll buttons;
Time textviews bottom to top of controll buttons;
Move like that up, so you will leave only song cover to fill remaining height

ConstraintLayout - Even Space Between Buttons

I'm trying to make space between 2 buttons (Send and Clear) to be even.
It's adjusting to borders and vertical guideline which is in the center of the screen.
It seems to be fine on the project but it doesn't look like that in the app itself.
Please check below screenshots.
Project
App
<?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="com.example.f3nr1r.testkeyboard.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/buttonClear"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:onClick="clearText"
android:text="Clear"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button8"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="9"
app:layout_constraintBaseline_toBaselineOf="#+id/button8"
app:layout_constraintLeft_toRightOf="#+id/button8"
android:layout_marginLeft="8dp" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="7"
app:layout_constraintRight_toLeftOf="#+id/button8"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button8" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="6"
app:layout_constraintLeft_toRightOf="#+id/button5"
android:layout_marginLeft="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button5" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button2"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="8"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button5"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="4"
app:layout_constraintRight_toLeftOf="#+id/button5"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button5" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:ems="10"
android:hint="Type something here..."
android:inputType="textPersonName"
android:maxLines="1"
android:selectAllOnFocus="false"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="3"
app:layout_constraintLeft_toRightOf="#+id/button2"
android:layout_marginLeft="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="2"
app:layout_constraintTop_toTopOf="#+id/guideline3"
android:layout_marginTop="60dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="1"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" />
<Button
android:id="#+id/buttonSend"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:onClick="sendText"
android:text="Send"
app:layout_constraintRight_toLeftOf="#+id/guideline2"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_end="192dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
app:layout_constraintGuide_begin="154dp"
android:orientation="horizontal" />
</android.support.constraint.ConstraintLayout>

I figured it out.
Constraint to the middle guideline should be removed and you can adjust the place with margins.
In XML, below lines should be removed from these buttons ("buttonSend" and "buttonClear").
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
app:layout_constraintRight_toLeftOf="#+id/guideline2"

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Android Constraints - Buttons out of screen - android

Related

How to create responsive GridView to cover whole screen?

Hide or Add Button in Constraint Layout based on some condition

How to put 'spinner' on top of button

How to dynamically adapt textview size in constraint layout to different screen sizes?

ConstraintLayout - Even Space Between Buttons

Categories

Resources