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>
Related
Textview fills all the space and leaves no room for the other text view.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/cv_prof"
android:layout_toEndOf="#id/cv_prof"
android:layout_alignParentEnd="true"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_other_user_chat"
android:fontFamily="#font/sf_pro_display_light"
android:padding="#dimen/_10sdp"
android:textColor="#color/blue_theme"
android:textSize="#dimen/_11ssp" />
<TextView
android:id="#+id/tv_time_sent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_5sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:fontFamily="#font/sf_pro_display_light"
android:text="#string/placeholder_time"
android:textColor="#color/white"
android:textSize="#dimen/_8ssp" />
</LinearLayout>
How can i achieve this results?
Please help me
Result 1:
Result 2:
You should add layout_weight element into child view of LinearLayout. Ex:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/cv_prof"
android:layout_toEndOf="#id/cv_prof"
android:layout_alignParentEnd="true"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_other_user_chat"
android:fontFamily="#font/sf_pro_display_light"
android:padding="#dimen/_10sdp"
android:textColor="#color/blue_theme"
android:textSize="#dimen/_11ssp"
android:layout_weight="1"/>
<TextView
android:id="#+id/tv_time_sent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_5sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:fontFamily="#font/sf_pro_display_light"
android:text="#string/placeholder_time"
android:textColor="#color/white"
android:textSize="#dimen/_8ssp"
android:layout_weight="1"/>
</LinearLayout>
set weight = 1 for 2 TextViews that mean width of them will be the same.
Edit:
If you want to use constrain layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_pdf"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#id/tv_content"/>
<TextView
android:id="#+id/tv_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_pdf"
android:text="abcdjhfjdgfgfdgdfgfdgfdg gfdg hgjkdfhgj fdghjkfdhg hgjkfdh sdgdfg fgnjkdfgh fghfdhg fgjk"
app:layout_constraintBottom_toBottomOf="#+id/imageview"
app:layout_constraintEnd_toStartOf="#id/tv_time_sent"
app:layout_constraintStart_toEndOf="#id/imageview"
app:layout_constraintTop_toTopOf="#+id/imageview" />
<TextView
android:id="#+id/tv_time_sent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="10:00pm"
app:layout_constraintBottom_toBottomOf="#+id/imageview"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_content"
app:layout_constraintTop_toTopOf="#+id/imageview" />
</androidx.constraintlayout.widget.ConstraintLayout>
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>
I am trying to place a TextView below Guideline. I have tried as below,
<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/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/package_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="20sp"
android:text="Package Name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintTop_toBottomOf="#id/start_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/start_guideline"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.05"/>
<TextView
android:id="#+id/sub_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subscription"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#id/package_name_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
My Package name TextView is not displaying below Guideline...I am new to use ConstraintLayout. Not able to find my mistake...Anybody help me to solve this.
Remove constraintTop_toTopOf in package_name_text_view
<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/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/package_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="20sp"
android:text="Package Name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/start_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/start_guideline"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.05"/>
<TextView
android:id="#+id/sub_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subscription"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#id/package_name_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I have used animateLayoutChanges in my layout, I have 3 child that second visibility is gone, so third is in first below. When I click the first child, I change second visibility to visible, vice versa.
When I see the animation order look bad, I want the animation run parallel when it is show and pull down or it is hide and pull up.
There is the gif.
Animation Gif
All I want is the animation when it is hide and pull down or show and pull up is run parallel.
There is my xml
<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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/space_medium"
android:animateLayoutChanges="true"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_primary_rounded_top"
android:paddingLeft="#dimen/space_medium"
android:paddingTop="#dimen/space_small"
android:paddingRight="#dimen/space_medium"
android:paddingBottom="#dimen/space_small">
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/username"
android:textColor="#color/white" />
<com.mikepenz.iconics.view.IconicsImageView
android:id="#+id/detail"
android:layout_width="16dp"
android:layout_height="16dp"
app:iiv_color="#color/divider"
app:iiv_icon="#string/gmd_keyboard_arrow_down"
app:layout_constraintBottom_toBottomOf="#+id/username"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/username" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:visibility="gone"
android:id="#+id/center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/secondaryDarkColor"
app:layout_constraintTop_toBottomOf="#id/top">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/white"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/space_medium"
android:paddingTop="#dimen/space_small"
android:paddingRight="#dimen/space_medium"
android:paddingBottom="#dimen/space_small"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/city"
android:textColor="#color/white"
android:gravity="left"
android:textSize="5pt" />
<TextView
android:id="#+id/city"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Jakarta"
android:textAlignment="textEnd"
android:textColor="#color/white"
android:textSize="5pt"
android:gravity="end" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/divider"
android:layout_marginTop="#dimen/space_small"
android:layout_marginBottom="#dimen/space_small"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/status"
android:textColor="#color/white"
android:textSize="5pt" />
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Started"
android:textAlignment="textEnd"
android:textColor="#color/white"
android:textSize="5pt"
android:gravity="end" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_primary_rounded_bottom"
android:paddingLeft="#dimen/space_medium"
android:paddingTop="#dimen/space_small"
android:paddingRight="#dimen/space_medium"
android:paddingBottom="#dimen/space_small"
app:layout_constraintTop_toBottomOf="#+id/center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
app:layout_constraintLeft_toLeftOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<com.mikepenz.iconics.view.IconicsImageView
android:id="#+id/start"
android:layout_width="24dp"
android:layout_height="24dp"
app:iiv_color="#color/white"
app:iiv_icon="#string/faw_play"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/space_small"
android:enabled="true"
android:text="#string/start"
android:textAlignment="center"
android:textColor="#color/text_button"
android:textSize="5pt"
app:layout_constraintTop_toBottomOf="#+id/start" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<com.mikepenz.iconics.view.IconicsImageView
android:id="#+id/pause"
android:layout_width="24dp"
android:layout_height="24dp"
app:iiv_color="#color/grey"
app:iiv_icon="#string/faw_pause"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/space_small"
android:enabled="false"
android:text="#string/pause"
android:textAlignment="center"
android:textColor="#color/text_button"
android:textSize="5pt"
app:layout_constraintTop_toBottomOf="#+id/pause" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<com.mikepenz.iconics.view.IconicsImageView
android:id="#+id/stop"
android:layout_width="24dp"
android:layout_height="24dp"
app:iiv_color="#color/grey"
app:iiv_icon="#string/faw_stop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/space_small"
android:enabled="false"
android:text="#string/stop"
android:textAlignment="center"
android:textColor="#color/text_button"
android:textSize="5pt"
app:layout_constraintTop_toBottomOf="#+id/stop" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
And there is the show hide code
if (detailExpanded) {
detail.setIcon(
new IconicsDrawable(getContext())
.icon(GoogleMaterial.Icon.gmd_keyboard_arrow_down)
.color(getResources().getColor(R.color.divider))
.sizeDp(16));
detailExpanded = false;
detailGroup.setVisibility(View.GONE);
} else {
detail.setIcon(
new IconicsDrawable(getContext())
.icon(GoogleMaterial.Icon.gmd_keyboard_arrow_up)
.color(getResources().getColor(R.color.divider))
.sizeDp(16));
detailExpanded = true;
detailGroup.setVisibility(View.VISIBLE);
}
I study constraint layout. I use the chains for join two textviews tvNameReview and tvTimePeriodReview. But as you can see if text in tvNameReview is very large, it is superimposed on tvTimePeriodReview. How can I fix it?
[So it looks like in studio editor][1]
[1]: https://i.stack.imgur.com/COsd8.png Code my layout:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/gl2Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin ="20dp"/>
<android.support.constraint.Guideline
android:id="#+id/gl1Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"/>
<TextView
android:id="#+id/timeReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/gl1Review"
app:layout_constraintTop_toTopOf="#+id/gl2Review"
tools:text="10:15" />
<Space
android:id="#+id/space1Review"
android:layout_width="40dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/timeReview"/>
<android.support.constraint.Guideline
android:id="#+id/gl3Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="20dp"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<android.support.constraint.Barrier
android:id="#+id/b1Constraint"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:constraint_referenced_ids="imageView, textView5, textView4"
app:barrierDirection="left"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="#+id/viewReview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintLeft_toRightOf="#+id/space1Review"
app:layout_constraintRight_toLeftOf="#+id/b1Constraint"/>
<TextView
android:id="#+id/tvNameReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/viewReview"
app:layout_constraintRight_toLeftOf="#+id/tvTimePeriodReview"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
tools:text="Very very long name reviewwwww"
app:layout_constraintHorizontal_chainStyle="spread_inside"
android:ellipsize="end"/>
<TextView
android:id="#+id/tvTimePeriodReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintLeft_toRightOf="#+id/tvNameReview"
app:layout_constraintRight_toRightOf="#+id/viewReview"
tools:text="10:15-11:45"
android:layout_marginTop="-1dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
</android.support.constraint.ConstraintLayout>
Can be done using weighted chains.
<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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/gl2Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin ="20dp"/>
<android.support.constraint.Guideline
android:id="#+id/gl1Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"/>
<TextView
android:id="#+id/timeReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/gl1Review"
app:layout_constraintTop_toTopOf="#+id/gl2Review"
tools:text="10:15" />
<Space
android:id="#+id/space1Review"
android:layout_width="40dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/timeReview"/>
<android.support.constraint.Guideline
android:id="#+id/gl3Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="20dp"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<android.support.constraint.Barrier
android:id="#+id/b1Constraint"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:constraint_referenced_ids="imageView, textView5, textView4"
app:barrierDirection="left"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="#+id/viewReview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintLeft_toRightOf="#+id/space1Review"
app:layout_constraintRight_toLeftOf="#+id/b1Constraint"/>
<TextView
android:id="#+id/tvNameReview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/viewReview"
app:layout_constraintRight_toLeftOf="#+id/tvTimePeriodReview"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
tools:text="Very very long name reviewwwww"
app:layout_constraintHorizontal_chainStyle="spread"
android:ellipsize="end"/>
<TextView
android:id="#+id/tvTimePeriodReview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintLeft_toRightOf="#+id/tvNameReview"
app:layout_constraintRight_toRightOf="#+id/viewReview"
tools:text="10:15-11:45"
android:layout_marginTop="-1dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
</android.support.constraint.ConstraintLayout>
Just set the text views' width to 0dp.