Develop Reference

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>

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>

How can I align Text next to an Image Button inside a vertical Scrollview

I want to align some text next to an Imagebutton inside of a vertically oriented Scrollview, but I am out of ideas.
This is an App for my Grandma, to help her understand her phone and the Symbols better.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/SrcBtn1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
I can't manage to get the Text next to the Imagebutton

<ScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<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">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_menu_gallery"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp"/>
</LinearLayout>
</LinearLayout>

I would suggest to replace LinearLayout with RelativeLayout which is made just for this!
here are all of its attributes:
link
look for the LEFT_OF and RIGHT_OF attributes.

You Can use ConstraintLayout to make this layout super fast.
Here us an example layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<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="20dp"
app:layout_constraintGuide_percent=".5" />
<ImageView
android:id="#+id/imageView"
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:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button6"
android:src="#drawable/ic_launcher_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button8"
android:src="#drawable/wolverine"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toStartOf="#+id/button7"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button7"
app:layout_constraintVertical_bias="1.0"
android:src="#drawable/shadow" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button5"
android:src="#drawable/rose" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
It will look like this:
This will work for your Grandmas phone, but please notice that If you want to make a responsive layout using ConstraintLayout you will have to avoid using fixed sizes on your views and that's because different phones got different screen size so using fixed size value will not look the same on all devices.
You can use ConstraintLayout with guidelines and Chains to support different screen sizes.

To align some text next to an Imagebutton inside of a vertically oriented Scrollview. we can use linear layout with horizontal orientation
Like This
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/srcbtn1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>

How to add textview to the left side of the button in android

I'm developing the Quiz application in android and I have to display options A, B, C, D inside the button on the left side.
So I know one way, which can be setting the image by drawableLeft property of the button. But putting the four images is not so good.
So I want to know that if there is any other way of doing this may be setting textview inside the button or some other way?
Here is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.QuizDashboardActivity">
<ScrollView
android:id="#+id/scrollView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_banner" />
<TextView
android:id="#+id/tv_question_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="1"
android:gravity="center"
android:textAlignment="center"
android:background="#drawable/custom_textview"
android:textColor="#android:color/white"
android:textSize="#dimen/question_no"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_appname" />
<TextView
android:id="#+id/tv_appname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="90dp"
android:fontFamily="#font/sansita_one"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textSize="#dimen/app_title"
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/tv_question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="16dp"
android:text="#string/q1"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="#dimen/question"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question_no" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question">
<Button
android:id="#+id/A"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/button_margin"
android:layout_marginBottom="#dimen/button_margin"
android:background="#drawable/custom_button"
android:text="#string/q1_a"
android:textColor="#android:color/black" />
<Button
android:id="#+id/B"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/button_margin"
android:background="#drawable/custom_button"
android:text="#string/q1_b"
android:textColor="#android:color/black" />
<Button
android:id="#+id/C"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/button_margin"
android:background="#drawable/custom_button"
android:text="#string/q1_c"
android:textColor="#android:color/black" />
<Button
android:id="#+id/D"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/button_margin"
android:background="#drawable/custom_button"
android:text="#string/q1_d"
android:textColor="#android:color/black" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
Here is the output:

Yes you can add textview at left of the button by giving it an elevation. Set constraints of textview : top to the top of button, start to the start of button and bottom to the bottom of button. And then add elevation, so that textview will be displayed above the button.

Just use LinearLayout instead of a button,set gravity to left, set the option first (A,B,C,D) and then the text view with an answer instead.
No difference visible since you are using custom background for the buttons.
Don't forget to add an OnClickListener() to the new LinearLayout button.

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>