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
Related
I want to create this type of layout where in the boxes are of equal shape and are arranged like this:
I have think of creating two Linear Layout with horizontal orientation where in I can fit the two boxes. Any help would be much appreciated.
Here is the code, I have written:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
....
<LinearLayout
android:id="#+id/share_app_row_one_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/box_1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginEnd="46dp"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="Box #1"
android:textAllCaps="false"
android:textColor="#color/white"
/>
<Button
android:id="#+id/box_2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="Box #2"
android:textAllCaps="false"
android:textColor="#color/white"/>
</LinearLayout>
<LinearLayout
android:id="#+id/share_app_row_two_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/share_app_row_one_container">
<Button
android:id="#+id/box_3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginEnd="46dp"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="Box #3"
android:textAllCaps="false"
android:textColor="#color/white"
/>
<Button
android:id="#+id/box_4"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="Box #4"
android:drawableTint="#color/white"
android:textAllCaps="false"
android:textColor="#color/white"/>
</LinearLayout>
...
</androidx.constraintlayout.widget.ConstraintLayout>
But the boxes are not uniform.
You can use the constraints to reach the goal:
And the 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"
android:padding="16dp">
<TextView
android:id="#+id/boxOneTextView"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="16dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#id/boxThreeTextView"
app:layout_constraintEnd_toStartOf="#id/boxTwoTextView"
app:layout_constraintStart_toStartOf="parent"
tools:text="Box 1" />
<TextView
android:id="#+id/boxTwoTextView"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="16dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#id/boxFourTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/boxOneTextView"
tools:text="Box 4" />
<TextView
android:id="#+id/boxThreeTextView"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_marginEnd="8dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/boxFourTextView"
app:layout_constraintStart_toStartOf="parent"
tools:text="Box 3" />
<TextView
android:id="#+id/boxFourTextView"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_marginStart="8dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/boxThreeTextView"
tools:text="Box 4" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can also set a drawable like this:
<TextView
android:id="#+id/box_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:drawableLeft="#drawable/box_ic"
android:text="Item 0"/>
I would like to have a layout in which I put other layouts (e.g. constrained layout) and those layouts should have rims and colored areas. So I guess I have to change the background but I do not know how. Here is a screenshot of my current fragment and I highlited the things that I would like to add:
Basically it should look somehow similar to Desired layout.
Here is the XML-layout file that I have
<?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">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_marginTop="#dimen/_28sdp"
android:layout_width="#dimen/_220sdp"
android:layout_height="#dimen/_240sdp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.93"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.75">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_30sdp"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_190sdp"
android:orientation="vertical"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_20sdp"
android:orientation="horizontal"></LinearLayout>
</LinearLayout>
<Button
android:id="#+id/navigation_button_language"
android:layout_width="#dimen/_31sdp"
android:layout_height="#dimen/_31sdp"
android:background="#drawable/navigation_buttom"
android:text="Dummy"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="#dimen/_9ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.02" />
<TextView
android:id="#+id/textView_language"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_3ssp"
android:text="Dummy"
android:textColor="#121212"
android:textSize="#dimen/_9ssp"
app:layout_constraintEnd_toEndOf="#+id/navigation_button_language"
app:layout_constraintStart_toStartOf="#+id/navigation_button_language"
app:layout_constraintTop_toBottomOf="#+id/navigation_button_language" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="#dimen/_240sdp"
app:layout_constraintBottom_toBottomOf="#+id/linearLayout"
app:layout_constraintEnd_toStartOf="#+id/linearLayout"
android:layout_marginLeft="#dimen/_6sdp"
android:layout_marginRight="#dimen/_6sdp"
android:background="#color/colorGrey"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/linearLayout"
app:layout_constraintVertical_bias="0.447">
<ScrollView
android:layout_width="47dp"
android:layout_height="44dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test Name"
android:textColor="#000000"
android:textSize="#dimen/_14ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_QuantityText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_1sdp"
android:text="Quantity: "
android:textSize="#dimen/_9ssp"
app:layout_constraintEnd_toEndOf="#+id/textView_Name"
app:layout_constraintStart_toStartOf="#+id/textView_Name"
app:layout_constraintTop_toBottomOf="#+id/textView_Name" />
<TextView
android:id="#+id/textView_QuantityNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textSize="#dimen/_9ssp"
app:layout_constraintBottom_toBottomOf="#+id/textView_QuantityText"
app:layout_constraintStart_toEndOf="#+id/textView_QuantityText"
app:layout_constraintTop_toTopOf="#+id/textView_QuantityText" />
<TextView
android:id="#+id/textView_TableNumberText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_1sdp"
android:text="Table: "
android:textSize="#dimen/_9ssp"
app:layout_constraintEnd_toEndOf="#+id/textView_QuantityText"
app:layout_constraintStart_toStartOf="#+id/textView_QuantityText"
app:layout_constraintTop_toBottomOf="#+id/textView_QuantityText" />
<TextView
android:id="#+id/textView_TableNumberValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:textSize="#dimen/_9ssp"
app:layout_constraintBottom_toBottomOf="#+id/textView_TableNumberText"
app:layout_constraintStart_toEndOf="#+id/textView_TableNumberText"
app:layout_constraintTop_toTopOf="#+id/textView_TableNumberText" />
<ImageButton
android:id="#+id/imageButton_message"
android:layout_width="#dimen/_25sdp"
android:layout_height="#dimen/_25sdp"
android:layout_marginTop="8dp"
android:background="#drawable/ic_baseline_markunread_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.221"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView_TableNumberText" />
<ImageButton
android:id="#+id/imageButton_video"
android:layout_width="#dimen/_25sdp"
android:layout_height="#dimen/_25sdp"
android:background="#drawable/ic_baseline_videocam_24"
app:layout_constraintBottom_toBottomOf="#+id/imageButton_message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.827"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageButton_message" />
<TextView
android:id="#+id/textView_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_1sdp"
android:text="Message"
app:layout_constraintEnd_toEndOf="#+id/imageButton_message"
app:layout_constraintStart_toStartOf="#+id/imageButton_message"
app:layout_constraintTop_toBottomOf="#+id/imageButton_message" />
<TextView
android:id="#+id/textView_Video"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Video"
android:layout_marginTop="#dimen/_1sdp"
app:layout_constraintEnd_toEndOf="#+id/imageButton_video"
app:layout_constraintStart_toStartOf="#+id/imageButton_video"
app:layout_constraintTop_toBottomOf="#+id/imageButton_video" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Any idea how I can do that? I'd highly appreciate every comment and would be thankful for your help.
Reminder: Does nobody have any idea how I can do that? I have seen such layouts quite often so it should not be extremely unsual what I want to do.
Answer:
Make a drawable -> rim.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="#dimen/space_lg"
android:height="#dimen/space_lg"
android:color="#color/#fff"
android:dashGap="#dimen/space_sm" />
</shape>
and in the layout just use:
android:background="#drawable/rim"
drawable -> rim.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<stroke
android:width="3dp"
android:color="#0FECFF"/>
</shape>
Then, following your desired layout (in the picture), I made a simplified corresponding 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:id="#+id/outerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<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.35" />
<View
android:id="#+id/v_left_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#drawable/rim"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Left Side"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toTopOf="#id/v_left_background" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/ll_navbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/holo_green_dark"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toBottomOf="#id/textView_Name">
<ImageView
android:id="#+id/iv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toStartOf="#id/iv_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<ImageView
android:id="#+id/iv_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toStartOf="#id/iv_3"
app:layout_constraintStart_toEndOf="#id/iv_1"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<ImageView
android:id="#+id/iv_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iv_2"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<TextView
android:id="#+id/tv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Order sheet"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_1"
app:layout_constraintStart_toStartOf="#id/iv_1"
app:layout_constraintTop_toBottomOf="#id/iv_1" />
<TextView
android:id="#+id/tv_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Order"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_2"
app:layout_constraintStart_toStartOf="#id/iv_2"
app:layout_constraintTop_toBottomOf="#id/iv_2" />
<TextView
android:id="#+id/tv_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Arrange products"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_3"
app:layout_constraintStart_toStartOf="#id/iv_3"
app:layout_constraintTop_toBottomOf="#id/iv_3" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintBottom_toTopOf="#id/button_okay"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toBottomOf="#id/ll_navbar" />
<Button
android:id="#+id/button_okay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/holo_green_light"
android:text="Okay"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#id/v_left_background"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background" />
<View
android:id="#+id/v_right_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#drawable/rim"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The screen then looks somewhat like this:
Constraint-wise:
(You can check the previews in the xml's design tab, I hope the constraints in the code are verbose enough for you to be able to follow)
UPDATE
Code without guideline:
<?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:id="#+id/outerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<View
android:id="#+id/v_left_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#drawable/rim"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.35" />
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Left Side"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toTopOf="#id/v_left_background" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/ll_navbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/holo_green_dark"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toBottomOf="#id/textView_Name">
<ImageView
android:id="#+id/iv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toStartOf="#id/iv_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<ImageView
android:id="#+id/iv_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toStartOf="#id/iv_3"
app:layout_constraintStart_toEndOf="#id/iv_1"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<ImageView
android:id="#+id/iv_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iv_2"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<TextView
android:id="#+id/tv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Order sheet"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_1"
app:layout_constraintStart_toStartOf="#id/iv_1"
app:layout_constraintTop_toBottomOf="#id/iv_1" />
<TextView
android:id="#+id/tv_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Order"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_2"
app:layout_constraintStart_toStartOf="#id/iv_2"
app:layout_constraintTop_toBottomOf="#id/iv_2" />
<TextView
android:id="#+id/tv_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Arrange products"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_3"
app:layout_constraintStart_toStartOf="#id/iv_3"
app:layout_constraintTop_toBottomOf="#id/iv_3" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintBottom_toTopOf="#id/button_okay"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toBottomOf="#id/ll_navbar" />
<Button
android:id="#+id/button_okay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/holo_green_light"
android:text="Okay"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#id/v_left_background"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background" />
<View
android:id="#+id/v_right_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#drawable/rim"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="1"
app:layout_constraintStart_toEndOf="#id/v_left_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.6" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am developing android app and I want to show full texts on the left side and imageview on the right side but textviews not fitting all screen and imageview not showing at all
below my xml where I have implemented view logic with constrainlayout
below my xml where I have implemented view logic with constrainlayout
<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"
android:background="#color/colorWhite">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55" />
<ImageView
android:id="#+id/postImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/userId"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="25dp"
android:layout_marginLeft="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/postTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Secondary"
app:layout_constraintEnd_toStartOf="#id/postImage"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/userId" />
<TextView
android:id="#+id/postTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTitle" />
<TextView
android:id="#+id/postDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTime" />
</androidx.constraintlayout.widget.ConstraintLayout>
Use layout_constraintStart_toEndOf="#id/guideline" to your TextView. Check below Layout:
<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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55" />
<ImageView
android:id="#+id/postImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/userId"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginLeft="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/postTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Secondary"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/userId" />
<TextView
android:id="#+id/postTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintTop_toBottomOf="#id/postTitle" />
<TextView
android:id="#+id/postDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTime" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output:
With android:justificationMode="inter_word" to TextView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/userId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Placeholder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/postTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Secondary"
app:layout_constraintEnd_toStartOf="#id/postImage"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/userId" />
<TextView
android:id="#+id/postTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTitle" />
<TextView
android:id="#+id/postDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTime" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/postImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
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" />
I am working with ConstraintLayout and I want to set a percentage margin top to the Textview Sample from the Button 2 placed at 52% of the screen.
3% is of course compared to the height of the screen.
The position should be relative from another UI components, guidelines reference only from the top (or bottom) of the screen
It's possible to do this exclusively via xml?
I know that is possibile to do this programmatically and with standard layouts with weight but I need (if exist) the XML solution.
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">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="32dp"
android:layout_weight="10"
android:background="#00FF00"
android:text="SAMPLE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:text="BUTTON 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>
After some research I finally found a workaround.
With the beta version of the ConstraintLayoutLibrary 1.1.0-beta you can define the height in a percent mode.
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.03"
So I created an empty view for create space. Anyway, there isn't yet a method to define the marginTop in percent mode.
So for my specific case:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="10"
android:background="#00FF00"
android:text="SAMPLE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spaceView" />
<View
android:id="#+id/spaceView"
android:layout_width="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.03"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:text="BUTTON 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>
I copied your code and added a guideline and used it inside the TextView
<?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="match_parent">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<android.support.constraint.Guideline
android:id="#+id/text_view_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.53" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_weight="10"
android:background="#00FF00"
android:text="SAMPLE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3"
app:layout_constraintTop_toTopOf="#+id/text_view_guideline" />
</android.support.constraint.ConstraintLayout>
You can do this without guide line. Just make sure to set the child of the ConstraintLayout to hold:
app:layout_constraintVertical_bias="0.52"
app:layout_constraintHeight_default="wrap"
For example, we can place a self sized container in screen location of 0.52 vertically:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.52"
app:layout_constraintHeight_default="wrap"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"/>
</androidx.constraintlayout.widget.ConstraintLayout>