Develop Reference

Create layout using only constraint layout and text view

I am new to android and constraint layout, can you please help me create this layout using only Constraint Layout and Text Views? Don't bother with text/color, just the layout itself.
This is what I have so far, layout seems ok but not quite like in the picture. I don't know if just the different resolution or aspect ratio.
<?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">
<TextView
android:id="#+id/textView45"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/blackk"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView49"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView47"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/teal_200"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView46"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/darker_gray"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView50" />
<TextView
android:id="#+id/textView48"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/Accent"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
</androidx.constraintlayout.widget.ConstraintLayout>

Did some modifications in the margins of these two. Now, the layout is looking similar to the one in the image you showed:
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
You can further increase the margins but that's upto you.
Edit: I would suggest you playing with layout_constraintHeight_percent attribute to solve those height irregularities.

Proper menaging buttons in layout - Android Studio

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

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

Two buttons side-by-side with auto fill horizontally

Here is what I'm trying to achieve: The buttons should have equals widths if the button titles are short, but the longer text should stretch the corresponding button at the expense of the other.
Here is my layout, which works used in a Fragment's or Activity's layout. But it does not correctly displayed used in a custom view of an AlertDialog
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
app:columnCount="2"
app:rowCount="1"
app:alignmentMode="alignBounds"
app:useDefaultMargins="true"
android:layout_height="wrap_content">
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
app:layout_columnWeight="1"
app:layout_gravity="fill_horizontal"
android:text="Cancel" />
<com.google.android.material.button.MaterialButton
app:layout_columnWeight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill_horizontal"
android:text="Very long button title" />
</androidx.gridlayout.widget.GridLayout>
This is the failed result, displayed in the Layout Inspector. Any ideas on how to make this layout work in this case?

Here copy the layout to archive the result you want.
<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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:text="large text Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout: How to center a text between two buttons of varying sizes

I'm making a dialog with a header that contains a "Cancel" button, a title and finally a "Save" button. See image. The title is constrained between the buttons. However, when one of the buttons are longer than the other the title moves to one side as it is told to stay in the middle between the buttons.
How can I make the title view be centered below the drag handle and at the same time let it expand all the way to the buttons without overlapping them?
Thanks!

I just implement the same functionality on three buttons that align horizontal and don't overlap each other.
Please create views in the same way below implementation.
<Button
android:id="#+id/btnExit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dp_1"
android:background="#drawable/bluebtn_gradient_rectangle"
android:text="#string/exit"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnMemoryPreview"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvFill" />
<Button
android:id="#+id/btnMemoryPreview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dp_1"
android:background="#drawable/bluebtn_gradient_rectangle"
android:text="#string/user_memory_preview"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/UserMemoryWrite"
app:layout_constraintStart_toEndOf="#+id/btnExit"
app:layout_constraintTop_toBottomOf="#+id/tvFill" />
<Button
android:id="#+id/UserMemoryWrite"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dp_1"
android:background="#drawable/bluebtn_gradient_rectangle"
android:text="#string/rfid_write"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btnMemoryPreview"
app:layout_constraintTop_toBottomOf="#+id/tvFill" />

this is the only hack where you can set title without overlapping in centre of the screen
make one temp button same as long button in invisible mode
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="long cancel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="long cancel"
android:visibility="invisible"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/black"
android:gravity="center"
android:padding="#dimen/_10sdp"
android:text="title"
android:textColor="#color/white"
app:layout_constraintLeft_toRightOf="#id/btn1"
app:layout_constraintRight_toLeftOf="#id/btn3"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
EDIT
this is another way, but this will be a mess when you have a very large title
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="long cancel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/txt"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
app:layout_constraintLeft_toRightOf="#id/txt"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black"
android:gravity="center"
android:padding="#dimen/_10sdp"
android:text="title dfgfd gdg dfgdfg dfgdfg fdgfdfgd fgddf dfgdgdfgdfg dfg dfgfdg df"
android:textColor="#color/white"
app:layout_constraintLeft_toRightOf="#id/guideline"
app:layout_constraintRight_toRightOf="#id/guideline"
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="vertical"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
Edit
if you know max length of long cancel button you can set app:layout_constraintWidth_percent to TextView based on that button width
<TextView
android:id="#+id/txt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/black"
android:gravity="center"
android:padding="#dimen/_10sdp"
android:text="title dfgfd gdg dfgdfg dfgdfg fdgfdfgd fgddf dfgdgdfgdfg dfg dfgfdg df"
android:textColor="#color/white"
app:layout_constraintLeft_toRightOf="#id/guideline"
app:layout_constraintRight_toLeftOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4" />

Ok, so inspired by some of your answers I started looking at guidelines. The idea was to use two guidelines, one on each side of the view, and set the distance from the parent to the guideline as the width of the biggest button plus any margin. Final code looks like this:
val biggestWidth = if (cancelButton.width > saveButton.width) {
cancelButton.width + cancelButton.marginStart
} else {
saveButton.width + saveButton.marginEnd
}
guidelineRight.setGuidelineEnd(biggestWidth)
guidelineLeft.setGuidelineBegin(biggestWidth)
The title is centered between the two guidelines.
Note that this width calculation must happen after the view has been laid out. Use view.doOnLayout { } and call your calculation from there.

Your drag handle seems to be at the center of the layout. So you can relate the title to left and right of the parent instead buttons. But still overlapping could be possible if title and cancel button text is lengthy.

You can center the title with respect to the drag handle but then cannot expand the TextView between cancel and save button. I think both cannot be done simultaneoulsy.
You can use the below code to center the title w.r.t the drag handle
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view"
android:layout_width="#dimen/dp_80"
android:layout_height="#dimen/dp_8"
android:layout_marginTop="#dimen/dp_8"
android:background="#color/divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp_8"
android:text="title"
android:textSize="#dimen/sp_24"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#id/view"
app:layout_constraintStart_toStartOf="#id/view"
app:layout_constraintTop_toBottomOf="#id/view" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="cancel"
android:textSize="#dimen/sp_16"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/view" />
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:textSize="#dimen/sp_16"
app:layout_constraintStart_toEndOf="#id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/view" />
</androidx.constraintlayout.widget.ConstraintLayout>

TextView
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
Cancel button
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/your_text_view_id"
Save button
app:layout_constraintStart_toEndOf="#id/your_text_view_id"
app:layout_constraintEnd_toEndOf="parent"
That way your buttons can expand freely without overlapping the text at the centre.

Remove Constrainsts button to textView and set TextView Constraints to left and right of layout.
<?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="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="ButtonButtonButtonButtonButtonButtonButtonButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="wTextViewTextViewTextViewTextViewTextViewTextViewTextVwTextViewTextView
TextViewTextViewTextViewTextViewTextVwTextViewTextViewTextViewTextViewTextViewTextView
TextVwTextViewTextViewTextViewTextViewTextViewTextViewTextVTextViewTextViewTextViewTextView
TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView
TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Without fixed button size
<?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="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="ButtonButtonButtonButtonButtonButtonButtonButton"
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_weight="1"
android:text="wTextViewTextViewTextViewTextViewTextViewTextViewTextVwTextViewTextView
TextViewTextViewTextViewTextViewTextVwTextViewTextViewTextViewTextViewTextViewTextView
TextVwTextViewTextViewTextViewTextViewTextViewTextViewTextVTextViewTextViewTextViewTextView
TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView
TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_weight="1"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Graphic view layout in Android Studio is blank

I'm trying to lay out a simple vertical array of 4 buttons using a Constraint Layout. Initially the graphic layout showed the elements; I don't know what happened, but now all it shows is an empty blue rectangle. All the layout elements show up in the list hierarchy, with correct attributes—it's just that nothing is drawn for them. I have tried suggestions I've found here like changing themes, but nothing works.
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".TestActivity"
tools:showIn="#layout/activity_test">
<!--
<LinearLayout
android:layout_width="784dp"
android:layout_height="1127dp"
android:orientation="vertical"
android:visibility="visible"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
-->
<Button
android:id="#+id/temp_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 1"
android:visibility="visible"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/fan_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:id="#+id/update_temp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Update Temp" />
<TextView
android:id="#+id/current_temp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="--" />
</Button>
<Button
android:id="#+id/fan_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 2"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="#id/temp_button"
app:layout_constraintBottom_toTopOf="#id/setpoint_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:id="#+id/toggle_fan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fan Control" />
<TextView
android:id="#+id/fan_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="--" />
</Button>
<Button
android:id="#+id/setpoint_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 3"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="#id/fan_button"
app:layout_constraintBottom_toTopOf="#id/pid_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="parent">
<TextView
android:id="#+id/set_temp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Temp" />
<TextView
android:id="#+id/temp_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="--" />
</Button>
<Button
android:id="#+id/pid_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 4"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="#id/setpoint_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="parent">
<TextView
android:id="#+id/toggle_pid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PID Control" />
<TextView
android:id="#+id/pid_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="--" />
</Button>
<!--
</LinearLayout>
-->
</android.support.constraint.ConstraintLayout>

There are a couple of things going on with your layout.
TextViews belong in ViewGroups: ContraintLayout, LinearLayout, etc. I am not sure what you intention of placing TextViews within Buttons, so I just removed them. Hopefully, this answer can help you decide how to reintroduce them.
A couple of your buttons have their starts and ends constrained to just one side of the parent, so their widths were zero and not visible.
Here is a rework of the layout to get you on the right road:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/temp_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 1"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#id/fan_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/fan_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 2"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#id/setpoint_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/temp_button" />
<Button
android:id="#+id/setpoint_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 3"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#id/pid_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/fan_button" />
<Button
android:id="#+id/pid_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 4"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/setpoint_button" />
</android.support.constraint.ConstraintLayout>