Unable to achieve this view in constraintLayout without adjusting dp in margin - android

So, the problem is that I am unable to make the Team A and Team B centrally aligned like that even after assigning a weight of 1 each to the text views. I am using constraint layout and not Linear or Relative. Also, I don't want to make those alignments for Team A and B by setting margins or like that. So if there is an appropriate attribute then please tell.
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="com.example.pooja.courtcounter.MainActivity">
<TextView
app:layout_constraintHorizontal_weight="1"
android:id="#+id/team_nameA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Team A"
android:padding="4dp" />
<TextView
android:id="#+id/team_nameB"
app:layout_constraintHorizontal_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Team B"
android:padding="4dp"
app:layout_constraintLeft_toRightOf="#+id/team_nameA" />
<TextView
android:id="#+id/team_a_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="0"
android:gravity="center_horizontal"
app:layout_constraintTop_toBottomOf="#+id/team_nameA"
android:padding="4dp" />
<Button
android:id="#+id/points_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="+3 points"
android:background="#EEEEEE"
app:layout_constraintTop_toBottomOf="#+id/team_a_score"
android:layout_margin="8dp"
android:onClick="points3" />
<Button
android:id="#+id/points_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="+2 points"
android:background="#EEEEEE"
app:layout_constraintTop_toBottomOf="#+id/points_3"
android:layout_margin="8dp"
android:onClick="points2" />
<Button
android:id="#+id/free_throw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="free throw"
android:background="#EEEEEE"
app:layout_constraintTop_toBottomOf="#+id/points_2"
android:layout_margin="8dp"
android:onClick="freethrow" />
</android.support.constraint.ConstraintLayout>


You can use chain the child view in the constraint layout. I have implemented it in team name and score. You can do same for the rest.
<?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">
<TextView
android:id="#+id/team_nameA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:padding="4dp"
android:text="Team A"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/team_nameB"/>
<TextView
android:id="#+id/team_nameB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:padding="4dp"
android:text="Team B"
android:textAlignment="center"
app:layout_constraintLeft_toRightOf="#+id/team_nameA"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/team_a_score"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="0"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/team_nameA"
app:layout_constraintRight_toLeftOf="#+id/team_b_score"/>
<TextView
android:id="#+id/team_b_score"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/team_a_score"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/team_nameB"
/>
</android.support.constraint.ConstraintLayout>
If other problem arise, feel free to ask

Related

Constraint layout in Custom Dialog problem

I have such XML file for custom Dialog:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/cl_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/cl_header"
android:text="RESET FILTERS"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_distance"
app:layout_constraintTop_toBottomOf="#id/cl_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_title"
app:layout_constraintLeft_toRightOf="#id/tv_distance_title"
app:layout_constraintRight_toRightOf="parent"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
app:layout_constraintTop_toBottomOf="#id/tv_distance_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_distance"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tv_location_title"
android:hint="#string/filter_location_et_hint" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="CANCEL"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio renders it in this way:
And this is what I want to have in my Dialog.
BUT:
On physical device and on emulator it looks different than in Android Studio:
My question is: how to place "Filter" title on the left, and make the location EditText matching the parent (in the working app)?

What everybody else said is correct, keeping your layout flat is good for both performance and for these situations where you want to quickly figure out why isn't the layout being laid out the way you wanted it ;)
Try this :
<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:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Filter"
app:layout_constraintBottom_toBottomOf="#id/bt_reset"
app:layout_constraintEnd_toStartOf="#id/bt_reset"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bt_reset" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RESET FILTERS"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_distance_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_result"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#ddd"
android:gravity="center"
android:paddingHorizontal="18dp"
android:paddingVertical="3dp"
android:text="0 km - 500km"
android:textColor="#333"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bt_reset" />
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1.0"
app:labelBehavior="gone"
app:layout_constraintTop_toBottomOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_location_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Location"
app:layout_constraintTop_toBottomOf="#id/slider_distance" />
<EditText
android:id="#+id/et_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="test"
app:layout_constraintTop_toBottomOf="#id/tv_location_title" />
<Button
android:id="#+id/bt_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:backgroundTint="#ccc"
android:text="CANCEL"
android:textColor="#color/colorBlack"
app:layout_constraintEnd_toStartOf="#id/bt_save"
app:layout_constraintTop_toBottomOf="#id/et_location" />
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:text="save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_location" />
</androidx.constraintlayout.widget.ConstraintLayout>

I changed inner ConstraintLayouts into LinearLayouts and used weights. I also used this trick to fill space between e.g. "Filter" title and "reset filters" button.
There was also an issue with ll_location LinearLayout - it didn't match the parent.
I replaced:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
into:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
And then it worked.
The reason why I don't want to use flat layout (why I use nested layouts) is that IMHO the flat layout makes the code more difficult to maintain.
When you have Views splited into groups you can easily replace them, no matter how many View there are in a group.
My solution:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="reset filters"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_distance_ext"
app:layout_constraintTop_toBottomOf="#id/ll_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
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">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
</LinearLayout>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:hint="#string/filter_location_et_hint" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="cancel"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Why my layout look like this ? Here is my XML file

Here Is my
and XML code first i use a Linear Layout then card View and other views so why my view overwrite where is the problem please watch the AVD picture and tell me where is the error.Sorry for bad english.
<?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:id="#+id/item_linerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintStart_toEndOf="#+id/item_id"
app:layout_constraintTop_toTopOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Author"
app:layout_constraintStart_toStartOf="#+id/item_title"
app:layout_constraintTop_toBottomOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

Try to use android:fitsSystemWindows="true" in your root layout(In your case LinearLayout). I recommend you to read this article to understand system overlapping. I hope it helps)

I have removed redundant LinearLayout parent and made CardView parent. Also your TextView with id item_pages is not overlapping.
<androidx.cardview.widget.CardView
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:layout_margin="5dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Title"
app:layout_constraintBottom_toTopOf="#id/item_AuthorName"
app:layout_constraintStart_toEndOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Author"
app:layout_constraintBottom_toBottomOf="#id/item_id"
app:layout_constraintStart_toStartOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

View get packed in ConstraintLayout, Views run out of screen in LinearLayout

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.

Can I put a Button to bottom of a ConstraintLayout inside ScrollView?

I have a ScrollView contains a ConstraintLayout. Inside the ConstraintLayout, I put many views with an attribute layout_constraintTop_toBottomOf to make a relation between the view and the view top of it, and I used layout_marginTop to put spaces between the views.
In my design, I have a Button that should be in the bottom of the layout and it cannot happen with the layout_marginTop because it should have a relation with the bottom of the ConstraintLayout.
Here's my code:
<ScrollView 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.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="120dp"
android:text="Logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/un_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="25dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="User name"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo" />
<EditText
android:id="#+id/pw_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="13dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/un_et" />
<RelativeLayout
android:id="#+id/save_pw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingLeft="28dp"
android:paddingRight="28dp"
app:layout_constraintTop_toBottomOf="#id/pw_et">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:buttonTint="#bebebe"
android:text="Save account"
android:textColor="#bebebe" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Forget password?"
android:textColor="#a40000" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="17dp"
android:layout_marginRight="28dp"
android:text="Login"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/save_pw" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/btn" />
</android.support.constraint.ConstraintLayout>
</ScrollView>

Replace ScrollView with NestedScrollView & also add android:fillViewport="true" like this
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
// rest of code
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#id/btn"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

Just set this property to your button:
app:layout_constraintBottom_toBottomOf="parent"
Then add this to your last view this property:
app:layout_constraintBottom_toTopOf="#+id/button"
Also, add to your last view:
android:layout_marginBottom="height_of_button"
However, if you are adding a lot of views it would be better to populate them inside a RecyclerView using an Adapter. Decide what you want to do. Also, tell me if I understood your question correctly, it was a bit confusing.

I found one solution to keep the button at the bottom, doesn't matter is your text is dynamic, read about app:layout_constraintVertical_bias https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#Bias
<?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">
<TextView
android:id="#+id/text_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
android:text="Title"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#id/text_gallery"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true">
<androidx.appcompat.widget.AppCompatTextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/texto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text=" Text \n Text" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Buton1"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#+id/texto"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

How can make the two buttons to be center when I use ConstraintLayout?

I hope to make two buttons on the center of screen just like Image A when I use Code A, but in fact the two button located on the left screen just like Image B, what error code do I made in my Code A? I know that I can do it by adding a Guideline control, but why can't the Code A do it? Thanks!
Image A
Image B
Code A
<?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">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginRight="7dp"
android:layout_marginTop="2dp"
android:text="One"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLefttOf="#+id/btnCancel"
app:layout_constraintBottom_toBottomOf="parent"
/>
<Button
android:id="#+id/btnCancel"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginLeft="7dp"
android:layout_marginTop="2dp"
android:text="Two"
app:layout_constraintLeft_toRightOf="#+id/btnAddEdit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
To Cheticamp:
Thanks!
Code AA works well, why can I delete the app:layout_constraintRight_toLefttOf="#+id/btnCancel" ?
Code AA
<Button
android:id="#+id/btnAddEdit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginRight="7dp"
android:layout_marginTop="2dp"
android:text="One"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnCancel"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
/>
Code BB works well , why can I replace app:layout_constraintEnd_toEndOf="parent" with app:layout_constraintRight_toRightOf="parent"
Code BB
<Button
android:id="#+id/btnCancel"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginLeft="7dp"
android:layout_marginTop="2dp"
android:text="Two"
app:layout_constraintStart_toEndOf="#+id/btnAddEdit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
And more, could you tell me what are different between app:layout_constraintEnd_toEndOf="parent" and app:layout_constraintRight_toRightOf="parent"

Here is the corrected XML that will lay out like "Image A" without any hard coding or margins:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnCancel"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintRight_toLefttOf="#+id/btnCancel"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btnAddEdit" />
</android.support.constraint.ConstraintLayout>
The key thing to do is to constrain button "one" to the left side of the parent and button two to the right side. A packed chain is create between the two buttons. See Chains in the documentation.
You can set a start/end margin on the buttons to separate them while maintaining the centering.
CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

For your button try using this attribute for button one
app:layout_constraintHorizontal_bias="0.4"
and for button two use
app:layout_constraintHorizontal_bias="0.6"

I've updated your code, it should be working now!
<?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">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLefttOf="#+id/btnCancel" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginEnd="80dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>

Categories

Resources