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>
Related
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>
In context of the attached image (as a concept, my actual list has single text field),
I've a list view that I want to constraint to the top and constraint two buttons to the bottom (side by side), what's the best way to achieve the constraints?
Problem: I've some items hidden under both Support Action Bar and the buttons
<?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">
<ListView
android:id="#+id/myList"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:id="#+id/done"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:text="#string/done" />
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text="#string/cancel" />
</androidx.constraintlayout.widget.ConstraintLayout>
Edit
<ListView
android:id="#+id/listView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/cancel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"></ListView>
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:text="#string/cancel"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/done"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/done"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text="#string/ok"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/cancel" />
I am implementing a signup/login screen like below
I have tried this using ConstraintLayout like below
<?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:layout_margin="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginBottom="72dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="12dp"
android:text="Button 1"
app:layout_constraintBottom_toTopOf="#+id/btn2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="48dp"
android:text="Button 2"
app:layout_constraintBottom_toTopOf="#+id/txt_already_member"
app:layout_constraintEnd_toEndOf="#+id/btn1"
app:layout_constraintStart_toStartOf="#+id/btn1"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/txt_agreement"
app:layout_constraintEnd_toEndOf="#+id/btn2"
app:layout_constraintStart_toStartOf="#+id/btn2"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By continuing you agree to our terms and privacy policy"
android:layout_marginTop="32dp"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Summary of XML:
Vertical chain is applied on four top most views
vertical chain style is set to packed
last text view is constraint to bottom and sides
margin is set on views to separate items.
Problem is when I run this on my phone, bottom text views get tight packed as shown here.
Next I tried LinearLayout like below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:layout_margin="16dp"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginBottom="72dp"
android:layout_marginTop="72dp"
android:src="#drawable/ic_launcher_background"/>
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="8dp"
android:text="Button 1" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_height="56dp"
android:layout_marginBottom="32dp"
android:text="Button 2" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already Member? Sign In"
android:textSize="16sp"
android:layout_weight="1"/>
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By continuing you agree to our terms and privacy policy "
android:textSize="12sp"/>
</LinearLayout>
In this case bottom text views are not visible as shown here.
My device resolution is 720 * 1280 pixels.
I suppose the problem is with the hard margins. How could I make the screen look like in the sketch above, regardless of screen height? either using LinearLayout or ConstraintLayout?
I would recommend you you use all screen densities rather than one for this you can use the famous library SDP or follow the guideline provided by android.
Second use Guideline class for Constraintlayout.
Here is the sample code snippet you can also use this one.
<?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"
android:layout_margin="16dp">
<ImageView
android:id="#+id/img"
android:layout_width="#dimen/_200sdp"
android:layout_height="#dimen/_200sdp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintBottom_toTopOf="#+id/btn2"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/img" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintBottom_toTopOf="#+id/txt_already_member"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/divider"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="By continuing you agree to our terms and privacy policy"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toTopOf="#+id/divider"
app:layout_constraintVertical_bias="1.0" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="#dimen/_16sdp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="#dimen/_16sdp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintGuide_percent="0.7"
app:layout_constraintTop_toBottomOf="#+id/txt_already_member" />
Actually solution to my problem is using Guidelines in ConstraintLayout with Guidelines app:layout_constraintGuide_percentattribute and constraining the views to Guidelines.
Since value for app:layout_constraintGuide_percent is a percentage rather than a dp value, it works responsively regardless of screen width/height.
example :
<?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:layout_margin="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="200dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:text="Button 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline5" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="8dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:text="Button 2"
app:layout_constraintEnd_toEndOf="#+id/btn1"
app:layout_constraintStart_toStartOf="#+id/btn1"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/txt_agreement"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="By continuing you agree to our terms and privacy policy "
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".6" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thank you very much Rehan Sarwar for remembering me about Guidelines.
I am new to ConstraintLayout, Below is my xml file in this I am trying to achieve my Textview width dynamically. If my #+id/btn1 visibility is gone then TextView (#+id/tv1) should expand to full width. Please suggest what approach I should use to solve this problem with in the same way.
<?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:layout_margin="#dimen/default_gap"
app:layout_anchorGravity="right">
<TextView
android:id="#+id/tv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="First thing first, if you have a min SDK lower than 17, you can now shift to using only start and end attribute and don’t repeat yourself for right and left"
app:layout_constraintEnd_toEndOf="#+id/guideline_center"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/tv_cur_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RS"
app:layout_constraintTop_toBottomOf="#+id/tv1" />
<android.support.constraint.Guideline
android:id="#+id/guideline_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline_center" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Payment Mode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline_center"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
</android.support.constraint.ConstraintLayout>
Below is the screenshot,enter image description here how it's looks now
Required UIenter image description here
Remove textview endconstraint and connect to button & make horizontal chain between button & textview then textview takes fullwdith when button view is gone.
Try this
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:layout_marginBottom="20dp"
android:layout_marginEnd="21dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="21dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
app:layout_anchorGravity="right">
<TextView
android:id="#+id/tv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="First thing first, if you have a min SDK lower than 17, you can now shift to using only start and end attribute and don’t repeat yourself for right and left"
app:layout_constraintEnd_toStartOf="#+id/btn1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/tv_cur_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RS"
app:layout_constraintTop_toBottomOf="#+id/tv1" />
<android.support.constraint.Guideline
android:id="#+id/guideline_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/tv2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tv1"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Payment Mode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline_center"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
</android.support.constraint.ConstraintLayout>
I use constraint layout in Android Studio 3.01, I hope to the four buttons have the same weight, I have set app:layout_constraintHorizontal_weight="1" for the four buttons.
But the four buttons have different weight, what wrong I made?
XML file
<?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">
<LinearLayout
android:id="#+id/linearLayoutToolBar"
style="#style/myToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/btnBackup"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/btnRestore"
android:text="Backup" />
<Button
android:id="#+id/btnRestore"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/btnBackup"
app:layout_constraintRight_toLeftOf="#+id/btnMore"
android:text="Restore" />
<Button
android:id="#+id/btnMore"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/btnRestore"
app:layout_constraintRight_toLeftOf="#+id/btnExit"
android:text="More" />
<Button
android:id="#+id/btnExit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/btnMore"
app:layout_constraintRight_toRightOf="parent"
android:text="Exit" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
To : Lalit Singh Fauzdar
Your code works well when screen dimension is 4.65''
But not good when screen dimension is 4''
Try giving the containing LinearLayout a horizontal orientation, and then use android:layout_weight to give each of the 4 buttons the same layout weight:
<LinearLayout
android:id="#+id/linearLayoutToolBar"
android:orientation="horizontal"
style="#style/myToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/btnBackup"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Backup" /> <!-- one fourth of horizontal space -->
<Button
android:id="#+id/btnRestore"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Restore" />
<Button
android:id="#+id/btnMore"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="More" />
<Button
android:id="#+id/btnExit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Exit" />
</LinearLayout>
Why are you using a LinearLayout in ConstraintLayout, Just do it without the LinearLayout, and you're also using Constraints in all the buttons when their parent is a LinearLayout.
Here's the needed answer:
<?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">
<Button
android:id="#+id/btnBackup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
android:layout_marginStart="10dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/btnRestore"
android:text="Backup" />
<Button
android:id="#+id/btnRestore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/btnBackup"
app:layout_constraintRight_toLeftOf="#+id/btnMore"
android:text="Restore" />
<Button
android:id="#+id/btnMore"
android:layout_width="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/btnRestore"
app:layout_constraintRight_toLeftOf="#+id/btnExit"
android:text="More" />
<Button
android:id="#+id/btnExit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/btnMore"
app:layout_constraintRight_toRightOf="parent"
android:text="Exit" />
</android.support.constraint.ConstraintLayout>
I've removed the style attribute from the buttons to test it in my project. Just add them.
Screenshot: