Buttons not showing up in Android Studio - android

Making an app, and none of the buttons are showing up! Tried running on different phones. Googled around, and got nothing! Please help! If you need any more details, please let me know!
Snippet of code from activity with no buttons:
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="55dp"
android:layout_marginTop="157dp"
android:text="Text2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="244dp"
android:layout_marginEnd="128dp"
android:text="Text3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="145dp"
android:layout_marginStart="45dp"
android:text="Text4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="89dp"
android:layout_marginEnd="32dp"
android:text="Text5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="27dp"
android:layout_marginEnd="80dp"
android:text="Text1"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent" />


I just pasted your code directly into a new project and it works fine. Make sure that you're wrapping your components in another layout. Here is what I wrapped your XML with:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.MainActivity">
<!-- The rest of your code goes here -->
</android.support.constraint.ConstraintLayout>
Here is what it looks like on my tablet:


You're using android.support.constraint.Guideline, when you should be using android.support.constraint.ConstraintLayout.
Just change that and you should be good to go!


<?xml version="1.0" encoding="utf-8"?>
<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">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="55dp"
android:layout_marginTop="157dp"
android:text="Text2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="244dp"
android:layout_marginEnd="128dp"
android:text="Text3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="145dp"
android:layout_marginStart="45dp"
android:text="Text4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="89dp"
android:layout_marginEnd="32dp"
android:text="Text5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="27dp"
android:layout_marginEnd="80dp"
android:text="Text1"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent" />

Related

White space at the top of the screen in android app, but I don't know why (Android)

I am currently making a very simple app. However, there is this massive white space at the top of the screen and I don't know what is causing it or how I could remove it. All I have in my XML are a few textviews and a radiogroup, so I'm not sure what is causing the black space.
Here is my XML code:
<?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=".ui.home.HomeFragment"
android:layout_margin="20sp">
<TextView
android:id="#+id/text_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Find fragment"
android:textStyle="bold"
android:textColor="#color/design_default_color_primary_dark"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="50sp"
android:text="Select the desired type of tea"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.155" />
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/textView2">
<RadioButton
android:id="#+id/greentea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Green Tea" />
<RadioButton
android:id="#+id/blacktea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Black Tea" />
<RadioButton
android:id="#+id/herbaltea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Herbal Tea" />
<RadioButton
android:id="#+id/alltea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All" />
</RadioGroup>
<com.google.android.material.button.MaterialButton
android:layout_width="170sp"
android:layout_height="60sp"
android:layout_marginTop="20sp"
android:text="Go to results"
android:textSize="15sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup" />
</androidx.constraintlayout.widget.ConstraintLayout>
Any help would be greatly appreciated!

It's the layout_margin that is pushing down the margin at the top. When you use layout_margin, it applies to all direction.
<?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=".ui.home.HomeFragment"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp">
<TextView
android:id="#+id/text_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Find fragment"
android:textStyle="bold"
android:textColor="#color/design_default_color_primary_dark"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="50sp"
android:text="Select the desired type of tea"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.155" />
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/textView2">
<RadioButton
android:id="#+id/greentea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Green Tea" />
<RadioButton
android:id="#+id/blacktea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Black Tea" />
<RadioButton
android:id="#+id/herbaltea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Herbal Tea" />
<RadioButton
android:id="#+id/alltea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All" />
</RadioGroup>
<com.google.android.material.button.MaterialButton
android:layout_width="170sp"
android:layout_height="60sp"
android:layout_marginTop="20sp"
android:text="Go to results"
android:textSize="15sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup" />
</androidx.constraintlayout.widget.ConstraintLayout>

Layout problems in a resource file

I have installed Java SDK and Android Studio 3.5.3 - set The target device and the Android OS as Pie.
I have a simple form with some constrained controls but no code behind at present.
When I run the project - I get the warning shown attached and when the form is rendered in the emulator the formatting of the controls is wrong (see design view image)....?
I have tried to update the drivers for the display adapter but it reports they are at current version.
Any ideas I am getting this issue?
Thanks in advance
Here is the code behind activitiy_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textViewNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="308dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="175dp"
android:text="TextView"
android:textSize="#android:dimen/notification_large_icon_height"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="569dp" />
<View
android:id="#+id/divider"
android:layout_width="409dp"
android:layout_height="1dp"
android:layout_marginTop="80dp"
android:background="?android:attr/listDivider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/divider2"
android:layout_width="409dp"
android:layout_height="8dp"
android:background="?android:attr/listDivider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="650dp" />
<TextView
android:id="#+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:text="RANDOM NUMBER GENERATOR"
android:textColor="#9C27B0"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Switch
android:id="#+id/switchMode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Switch"
tools:layout_editor_absoluteX="500dp"
tools:layout_editor_absoluteY="32dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

If you do it this way, there are benefits like lesser attributes and easy to understand code
Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="70dp"
android:text="RANDOM NUMBER GENERATOR"
android:textColor="#9C27B0"
android:textSize="20sp" />
<Switch
android:id="#+id/switchMode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textViewTitle"
android:layout_centerHorizontal="true"
android:text="Switch" />
<TextView
android:id="#+id/textViewNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="TextView"
android:textSize="#android:dimen/notification_large_icon_height" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:paddingHorizontal="100dp"
android:text="Button" />
</RelativeLayout>

Some of Your Views or Buttons did not have constraints, so they would jump to (0,0) at runtime. Here is the proper xml code
You could clearly read it from Warnings (red icon)
In Constraint Layout it is critical to add constraints to all your controls because they would just jump to (0,0) if not, which can later broke next control 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">
<TextView
android:id="#+id/textViewNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="308dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="175dp"
android:text="TextView"
android:textSize="#android:dimen/notification_large_icon_height"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/divider2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/divider"
android:layout_width="409dp"
android:layout_height="1dp"
android:layout_marginTop="80dp"
android:background="?android:attr/listDivider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/divider2"
android:layout_width="409dp"
android:layout_height="8dp"
android:layout_marginBottom="32dp"
android:background="?android:attr/listDivider"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:text="RANDOM NUMBER GENERATOR"
android:textColor="#9C27B0"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Switch
android:id="#+id/switchMode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="150dp"
android:layout_marginLeft="150dp"
android:layout_marginTop="32dp"
android:text="Switch"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textViewTitle" />

How to make buttons responsive in ConstraintLayout?

I am a beginner in Android and want to build 4 buttons on the bottom like in the picture. One button in the middle is not possible because I tried to set it responsive and it disappeared. Can you explain to me how I set those buttons next to each other with the same distance and make it responsive the right way?
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/button12"
app:layout_constraintWidth_percent="0.2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button13" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/button14"
app:layout_constraintTop_toTopOf="#+id/guideline2"
app:layout_constraintHeigth_percent="0.1"
app:layout_constraintWidth_percent="0.2" />
<Button
android:id="#+id/button14"
app:layout_constraintWidth_percent="0.2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button15"
app:layout_constraintTop_toTopOf="#+id/button13" />
<Button
android:id="#+id/button15"
app:layout_constraintWidth_percent="0.2"
android:layout_height="wrap_content"
android:text="Button"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/button13" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/btnOne"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnTwo"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnTwo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnThree"
app:layout_constraintStart_toEndOf="#id/btnOne" />
<Button
android:id="#+id/btnThree"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Three"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/btnFour"
app:layout_constraintStart_toEndOf="#id/btnTwo" />
<Button
android:id="#+id/btnFour"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Four"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/btnThree" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT
.

Adding to Nilesh Rathod answer you can do something like this if you want to control the button height your :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
tools:context="MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:gravity="center_horizontal"
android:shadowColor="#000000"
android:text="This app has 50000 downloads!"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.70"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.77" />
<Button
android:id="#+id/btnOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="One"
android:layout_marginBottom="10dp"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnTwo"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toStartOf="#+id/btnThree"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnOne"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
<Button
android:id="#+id/btnThree"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Three"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toStartOf="#+id/btnFour"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnTwo"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
<Button
android:id="#+id/btnFour"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Four"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="#+id/btnOne"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btnThree"
app:layout_constraintTop_toTopOf="#+id/btnOne" />
</androidx.constraintlayout.widget.ConstraintLayout>
now btnOne got the height of 10% of the screen height, all other buttons are constrained to top of btnOne and have the android:layout_height="0dp" attribute, making them all the same size.
And if you want to change your button size just change the value of app:layout_constraintHeight_percent="0.1" on btnOne
Here is how it will look like

Try adding all the buttons inside a linear layout with it's orientation set to horizontal and the buttons will take i
Equal distance. To make buttons responsive use the onclicklistener(); to get the response

Solver for ConstraintLayout doesn't measure include correctly

I'm currently practicing UI designing in Android and needed to make a layout be included in multiple layouts as a header. So I made this quite complex layout 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5">
<include
android:id="#+id/includeItem"
layout="#layout/dialog_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginTop="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/includeItem">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<EditText
android:id="#+id/editText4"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toTopOf="#+id/imageView5" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/btn_bg" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/border_transparent_bg"
android:drawableRight="#drawable/ic_chevron_right_black_24dp"
android:gravity="start|center_vertical"
android:padding="8dp"
android:text="#string/select_category"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/editText4"
app:layout_constraintStart_toStartOf="#+id/editText4"
app:layout_constraintTop_toBottomOf="#+id/editText4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/tap_to_edit"
android:textColor="#color/textDarkSecondary"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/imageView5"
app:layout_constraintStart_toStartOf="#+id/imageView5"
app:layout_constraintTop_toBottomOf="#+id/imageView5" />
<TableRow
android:id="#+id/tableRow4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/border_transparent_bg"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/tableRow3"
app:layout_constraintStart_toStartOf="#+id/tableRow3"
app:layout_constraintTop_toBottomOf="#+id/tableRow3">
<EditText
android:id="#+id/editText7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/price"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/sku"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
</TableRow>
<TextView
android:id="#+id/textView11"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="#string/variations"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<TableRow
android:id="#+id/tableRow3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/border_transparent_bg"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView11"
app:layout_constraintTop_toBottomOf="#+id/textView11">
<EditText
android:id="#+id/editText8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
</TableRow>
<Button
android:id="#+id/button6"
style="#style/CommonButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/add_variation"
app:layout_constraintEnd_toEndOf="#+id/tableRow4"
app:layout_constraintStart_toStartOf="#+id/tableRow4"
app:layout_constraintTop_toBottomOf="#+id/tableRow4" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/add_variation_msg"
android:textColor="#color/textDarkSecondary"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<TextView
android:id="#+id/textView13"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="#string/modifier_sets"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView13">
</android.support.v7.widget.RecyclerView>
<TextView
android:id="#+id/textView14"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="#string/taxes"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/recyclerView" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView2"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<TextView
android:id="#+id/textView17"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/select_kitchen_location"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/recyclerView2" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="8dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/available"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/spinner" />
<EditText
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/checkBox" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
This is the include layout.
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgDlgHeaderAction"
android:layout_width="90dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/lblDlgHeaderTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add_24dp" />
<Button
android:id="#+id/btnDlgHeaderSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/border_bg_pressed"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingEnd="32dp"
android:paddingBottom="16dp"
android:text="#string/save"
android:textColor="#color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblDlgHeaderTitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="TextView"
android:textColor="#color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/btnDlgHeaderSave"
app:layout_constraintStart_toEndOf="#id/imgDlgHeaderAction"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave" />
</android.support.constraint.ConstraintLayout>
In the layout editor, it looks fine. But when I compile my code, the ScrollView is clipping through the include without that much marginTop. I might file an issue if this is a bug.
From the suggestions below, I tried to change ScrollView to a NestedScrollView. As I have guessed, it still didn't work.
I also want to emphasized that my question is not about the RecyclerViews not being able to scroll, because I know that would happen, but about the clipping of the ScrollView through the include layout.

Change your include layout constraint like below
Remove bottom constarint and used NestedScrollView in main layout instead of ScrollView
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgDlgHeaderAction"
android:layout_width="90dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/lblDlgHeaderTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave"
app:srcCompat="#drawable/ic_email" />
<Button
android:id="#+id/btnDlgHeaderSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#color/bg_toolbar"
android:gravity="center"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingEnd="32dp"
android:paddingBottom="16dp"
android:text="#string/save"
android:textColor="#android:color/white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/lblDlgHeaderTitle"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblDlgHeaderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/btnDlgHeaderSave"
app:layout_constraintStart_toEndOf="#+id/imgDlgHeaderAction"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave" />
</androidx.constraintlayout.widget.ConstraintLayout>
Main layout
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f5f5f5">
<include
android:id="#+id/includeItem"
layout="#layout/test_include"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/includeItem">
<!.. Remining one as it is>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Bug in Barrier in Constraint Layout

I was using the Barrier helper in the android studio. There was a bug in that barrier not showing in the layout screen even if all the references are set and the direction of the barrier is also set. Please help me.ScreenShot of The Problem
code is here
<?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">
<ImageView
android:id="#+id/imageViewHeader"
android:layout_width="0dp"
android:layout_height="232dp"
android:contentDescription="#null"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/header" />
This is poster view reference of barrier
<ImageView
android:id="#+id/imageViewPoster"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="#+id/imageViewHeader"
app:layout_constraintDimensionRatio="w,2:3"
app:layout_constraintStart_toStartOf="#+id/guidelinePoster"
app:layout_constraintTop_toBottomOf="#+id/imageViewHeader"
app:layout_constraintVertical_bias="0.594"
app:srcCompat="#drawable/poster" />
<android.support.constraint.Guideline
android:id="#+id/guidelinePoster"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="8dp" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/beauty_and_the_beast"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
app:layout_constraintEnd_toStartOf="#+id/imageButton"
app:layout_constraintStart_toEndOf="#+id/imageViewPoster"
app:layout_constraintTop_toBottomOf="#+id/imageViewHeader" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="8dp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="?attr/selectableItemBackground"
android:contentDescription="#string/bookmark"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintTop_toBottomOf="#+id/imageViewHeader"
app:srcCompat="#drawable/ic_bookmark"
tools:srcCompat="#drawable/ic_bookmark" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="March 2017 | PG | 123 minutes"
android:textAppearance="#style/TextAppearance.AppCompat.Caption"
app:layout_constraintStart_toEndOf="#+id/imageViewPoster"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Rent From R29.99"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guidelinePoster"
app:layout_constraintTop_toTopOf="#id/barrier3" />
<Button
android:id="#+id/button2"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Buy From R129.99"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#id/barrier3" />
//This is the barrier
<android.support.constraint.Barrier
android:id="#+id/barrier3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageViewPoster"
tools:layout_editor_absoluteX="411dp"
tools:layout_editor_absoluteY="731dp" />
</android.support.constraint.ConstraintLayout>

Categories

Resources