I am using constraint layout for my page and it is working good if it in portrait but views are overlapping when it is landscape mode. I have added scroll view also , but still it is overlapping only.I need the card view should be present in the bottom and in landscape mode it should be visible while scrolling... I know the issue is because of that card view (cv_items).I don't know how to fix this issue.
Here is my xml,
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
android:background="#000000"
android:layout_height="match_parent">
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/cv_item">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_title"
style="#style/semiBoldTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/_20sdp"
android:text="#string/you_got_req"
android:textColor="#color/light3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cv_center"
android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:layout_gravity="center"
android:layout_marginTop="#dimen/_30sdp"
android:orientation="vertical"
app:cardBackgroundColor="#color/light3"
app:cardCornerRadius="#dimen/_150sdp"
app:cardElevation="#dimen/_10sdp"
app:contentPadding="#dimen/_2sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title">
<androidx.cardview.widget.CardView
android:id="#+id/cv_accept"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/_10sdp"
app:cardBackgroundColor="#555555"
app:cardCornerRadius="#dimen/_150sdp">
<androidx.appcompat.widget.AppCompatTextView
style="#style/semiBoldTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/accept"
android:textColor="#color/white"
android:textSize="#dimen/_15ssp" />
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.cardview.widget.CardView
android:id="#+id/cv_item"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:layout_marginBottom="-25dp"
app:cardCornerRadius="#dimen/_15sdp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_max="#dimen/_200sdp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_order_number"
style="#style/semiBoldTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_20sdp"
android:gravity="center_vertical"
android:textColor="#color/black"
android:textSize="16sp"
tools:text="#123456789" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_no_of_items"
style="#style/regularTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_order_number"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_5sdp"
android:gravity="center_vertical"
android:textColor="#color/gray"
tools:text="6" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_items"
style="#style/regularTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_order_number"
android:layout_alignBaseline="#+id/tv_no_of_items"
android:layout_marginStart="5dp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_toEndOf="#+id/tv_no_of_items"
android:gravity="center_vertical"
android:text="#string/items"
android:textColor="#color/gray"
/>
<androidx.cardview.widget.CardView
android:id="#+id/cv_price"
android:layout_width="#dimen/_50sdp"
android:layout_height="#dimen/_30sdp"
android:layout_alignParentEnd="true"
android:layout_marginTop="#dimen/_10sdp"
android:layout_marginEnd="20dp"
android:gravity="center"
app:cardBackgroundColor="#color/colorPrimaryDark"
app:cardCornerRadius="#dimen/_15sdp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_amount"
style="#style/semiBoldTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#color/white"
android:textSize="#dimen/_10ssp"
tools:text="1233 RS" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<View
android:id="#+id/divider1"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_half"
android:layout_below="#id/tv_items"
android:layout_margin="#dimen/_10sdp"
android:background="#color/light4" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_items"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/divider1"
android:layout_marginStart="#dimen/_10sdp"
android:layout_marginEnd="#dimen/_10sdp"
android:layout_marginBottom="#dimen/_20sdp"
tools:itemCount="20"
tools:listitem="#layout/recycler_test_details" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Please refer the screenshots.
Try to put everything inside ScrollView. Check below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:background="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/cv_item">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_title"
style="#style/semiBoldTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/_20sdp"
android:text="#string/you_got_req"
android:textColor="#color/light3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cv_center"
android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:layout_gravity="center"
android:layout_marginTop="#dimen/_30sdp"
android:orientation="vertical"
app:cardBackgroundColor="#color/light3"
app:cardCornerRadius="#dimen/_150sdp"
app:cardElevation="#dimen/_10sdp"
app:contentPadding="#dimen/_2sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title">
<androidx.cardview.widget.CardView
android:id="#+id/cv_accept"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/_10sdp"
app:cardBackgroundColor="#555555"
app:cardCornerRadius="#dimen/_150sdp">
<androidx.appcompat.widget.AppCompatTextView
style="#style/semiBoldTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/accept"
android:textColor="#color/white"
android:textSize="#dimen/_15ssp" />
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.cardview.widget.CardView
android:id="#+id/cv_item"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:layout_marginBottom="-25dp"
app:cardCornerRadius="#dimen/_15sdp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_max="#dimen/_200sdp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_order_number"
style="#style/semiBoldTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_20sdp"
android:gravity="center_vertical"
android:textColor="#color/black"
android:textSize="16sp"
tools:text="#123456789" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_no_of_items"
style="#style/regularTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_order_number"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_5sdp"
android:gravity="center_vertical"
android:textColor="#color/gray"
tools:text="6" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_items"
style="#style/regularTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_order_number"
android:layout_alignBaseline="#+id/tv_no_of_items"
android:layout_marginStart="5dp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_toEndOf="#+id/tv_no_of_items"
android:gravity="center_vertical"
android:text="#string/items"
android:textColor="#color/gray"
/>
<androidx.cardview.widget.CardView
android:id="#+id/cv_price"
android:layout_width="#dimen/_50sdp"
android:layout_height="#dimen/_30sdp"
android:layout_alignParentEnd="true"
android:layout_marginTop="#dimen/_10sdp"
android:layout_marginEnd="20dp"
android:gravity="center"
app:cardBackgroundColor="#color/colorPrimaryDark"
app:cardCornerRadius="#dimen/_15sdp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_amount"
style="#style/semiBoldTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#color/white"
android:textSize="#dimen/_10ssp"
tools:text="1233 RS" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<View
android:id="#+id/divider1"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_half"
android:layout_below="#id/tv_items"
android:layout_margin="#dimen/_10sdp"
android:background="#color/light4" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_items"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/divider1"
android:layout_marginStart="#dimen/_10sdp"
android:layout_marginEnd="#dimen/_10sdp"
android:layout_marginBottom="#dimen/_20sdp"
tools:itemCount="20"
tools:listitem="#layout/recycler_test_details" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Related
I have 4 components(boxes) in an ConstraintLayout but the issues is the space between those components is more than the spaces around them
I know the issue is because of the margin i have given to each individual component, but what is the work around? to achieve the design given below
Above is what i have achieved so far.
The main issue bothering is the space between those 4 components, it looks more away from each other than looking compact.
here is my xml code
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/view_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<!-- Top Left-->
<FrameLayout
android:id="#+id/frameLayout_top_left"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/view_horizontal"
app:layout_constraintEnd_toStartOf="#+id/frameLayout_top_right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_17sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_17sdp"
android:layout_marginBottom="#dimen/_18sdp"
android:backgroundTint="#color/gradient_end_dashboard"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginBottom="#dimen/_20sdp"
android:backgroundTint="#color/white"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</FrameLayout>
<!-- Top Right-->
<FrameLayout
android:id="#+id/frameLayout_top_right"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/view_horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/frameLayout_top_left"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_17sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_17sdp"
android:layout_marginBottom="#dimen/_18sdp"
android:backgroundTint="#color/gradient_end_dashboard"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginBottom="#dimen/_20sdp"
android:backgroundTint="#color/white"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</FrameLayout>
<!-- Bottom Left-->
<FrameLayout
android:id="#+id/frameLayout_bottom_left"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/frameLayout_bottom_right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view_horizontal">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_17sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_17sdp"
android:layout_marginBottom="#dimen/_18sdp"
android:backgroundTint="#color/gradient_end_dashboard"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginBottom="#dimen/_20sdp"
android:backgroundTint="#color/white"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</FrameLayout>
<!-- Bottom Right-->
<FrameLayout
android:id="#+id/frameLayout_bottom_right"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/frameLayout_bottom_left"
app:layout_constraintTop_toBottomOf="#id/view_horizontal">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_17sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_17sdp"
android:layout_marginBottom="#dimen/_18sdp"
android:backgroundTint="#color/gradient_end_dashboard"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginBottom="#dimen/_20sdp"
android:backgroundTint="#color/white"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Try using relative layout instead of frame layout and shift your layout/imageview inside the second cardView
<RelativeLayout
android:id="#+id/rl_top_left"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintBottom_toTopOf="#+id/rl_bottom_left"
app:layout_constraintEnd_toStartOf="#+id/rl_top_right"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:backgroundTint="#163042"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_marginBottom="3dp"
android:layout_marginEnd="7dp"
android:layout_marginStart="7dp"
android:layout_marginTop="7dp"
android:layout_width="match_parent"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:backgroundTint="#ffffff"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_margin="7dp"
android:layout_width="match_parent"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:elevation="10dp"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_gravity="center"
android:layout_height="40dp"
android:layout_width="40dp"
android:src="#drawable/ic_apple" />
<TextView
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="Some Text"
android:textColor="#abcdef"
android:textSize="22sp"
android:textStyle="bold" />
<TextView
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="sub text"
android:textColor="#009688"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_top_right"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintBottom_toTopOf="#+id/rl_bottom_right"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rl_top_left"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:backgroundTint="#163042"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_marginBottom="3dp"
android:layout_marginEnd="7dp"
android:layout_marginStart="7dp"
android:layout_marginTop="7dp"
android:layout_width="match_parent"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:backgroundTint="#ffffff"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_margin="7dp"
android:layout_width="match_parent"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:elevation="10dp"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_gravity="center"
android:layout_height="40dp"
android:layout_width="40dp"
android:src="#drawable/ic_apple" />
<TextView
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="Some Text"
android:textColor="#abcdef"
android:textSize="22sp"
android:textStyle="bold" />
<TextView
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="sub text"
android:textColor="#009688"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_bottom_left"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/rl_bottom_right"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rl_top_left">
<androidx.cardview.widget.CardView
android:backgroundTint="#163042"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_marginBottom="3dp"
android:layout_marginEnd="7dp"
android:layout_marginStart="7dp"
android:layout_marginTop="7dp"
android:layout_width="match_parent"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:backgroundTint="#ffffff"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_margin="7dp"
android:layout_width="match_parent"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:elevation="10dp"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_gravity="center"
android:layout_height="40dp"
android:layout_width="40dp"
android:src="#drawable/ic_apple" />
<TextView
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="Some Text"
android:textColor="#abcdef"
android:textSize="22sp"
android:textStyle="bold" />
<TextView
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="sub text"
android:textColor="#009688"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_bottom_right"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rl_bottom_left"
app:layout_constraintTop_toBottomOf="#+id/rl_top_right">
<androidx.cardview.widget.CardView
android:backgroundTint="#163042"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_marginBottom="3dp"
android:layout_marginEnd="7dp"
android:layout_marginStart="7dp"
android:layout_marginTop="7dp"
android:layout_width="match_parent"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:backgroundTint="#ffffff"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_margin="7dp"
android:layout_width="match_parent"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:elevation="10dp"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_gravity="center"
android:layout_height="40dp"
android:layout_width="40dp"
android:src="#drawable/ic_apple" />
<TextView
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="Some Text"
android:textColor="#abcdef"
android:textSize="22sp"
android:textStyle="bold" />
<TextView
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="sub text"
android:textColor="#009688"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
No need to use that GuideLine. All your components must be constrained to each other to enable dynamic size of each component (since you are 0dp for the width and height). The spacing between the components and between components and the edges of the screen can be defined using margins:
<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"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/frameLayout_top_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/full_margin"
android:layout_marginTop="#dimen/full_margin"
android:layout_marginEnd="#dimen/half_margin"
android:layout_marginBottom="#dimen/half_margin"
android:background="#android:color/black"
app:layout_constraintBottom_toTopOf="#id/frameLayout_bottom_left"
app:layout_constraintEnd_toStartOf="#id/frameLayout_top_right"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="#+id/frameLayout_top_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/half_margin"
android:layout_marginTop="#dimen/full_margin"
android:layout_marginEnd="#dimen/full_margin"
android:layout_marginBottom="#dimen/half_margin"
android:background="#android:color/black"
app:layout_constraintBottom_toTopOf="#id/frameLayout_bottom_right"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/frameLayout_top_left"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="#+id/frameLayout_bottom_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/full_margin"
android:layout_marginTop="#dimen/half_margin"
android:layout_marginEnd="#dimen/half_margin"
android:layout_marginBottom="#dimen/full_margin"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/frameLayout_bottom_right"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/frameLayout_top_left" />
<FrameLayout
android:id="#+id/frameLayout_bottom_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/half_margin"
android:layout_marginTop="#dimen/half_margin"
android:layout_marginEnd="#dimen/full_margin"
android:layout_marginBottom="#dimen/full_margin"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/frameLayout_bottom_left"
app:layout_constraintTop_toBottomOf="#id/frameLayout_top_right" />
</androidx.constraintlayout.widget.ConstraintLayout>
here's what i found-->
i included your cardviews inside the combination of linear and relative
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#242425"
android:gravity="center"
android:layout_marginBottom="-19dp"
android:orientation="vertical" >
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="17dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="17dp"
android:layout_marginBottom="18dp"
android:backgroundTint="#color/colorPrimary"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:backgroundTint="#FFFFFF"
android:layout_marginStart="15dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="40dp"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#242425"
android:gravity="center"
android:layout_marginBottom="-19dp"
android:orientation="vertical" >
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="17dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="17dp"
android:layout_marginBottom="18dp"
android:backgroundTint="#color/colorPrimary"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:backgroundTint="#FFFFFF"
android:layout_marginStart="15dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="40dp"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#242425"
android:gravity="center"
android:orientation="vertical" >
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="17dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="17dp"
android:layout_marginBottom="18dp"
android:backgroundTint="#color/colorPrimary"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:backgroundTint="#FFFFFF"
android:layout_marginStart="15dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="40dp"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#242425"
android:gravity="center"
android:orientation="vertical" >
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="17dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="17dp"
android:layout_marginBottom="18dp"
android:backgroundTint="#color/colorPrimaryDark"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:backgroundTint="#FFFFFF"
android:layout_marginStart="15dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="40dp"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
app:cardMaxElevation="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>
</LinearLayout>
OUTPUT
I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/content_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_32"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/step7_next_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:id="#+id/online_card_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="25dp"
android:background="#color/white"
app:cardCornerRadius="#dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="#dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="#+id/online_card_rb"
android:layout_width="#dimen/margin_22"
android:layout_height="#dimen/margin_22"
android:layout_marginStart="#dimen/margin_16"
app:layout_constraintBottom_toBottomOf="#id/online_card_ll"
app:layout_constraintEnd_toStartOf="#id/online_card_ll"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/online_card_ll" />
<LinearLayout
android:id="#+id/online_card_ll"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:background="#color/white"
android:gravity="start"
android:orientation="vertical"
android:paddingVertical="#dimen/padding_16"
app:layout_constraintEnd_toStartOf="#id/cards_iv"
app:layout_constraintStart_toEndOf="#id/online_card_rb"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/online_card_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/online_card_title"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_14" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0.4"
android:text="#string/online_card_now"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_12" />
</LinearLayout>
<ImageView
android:id="#+id/cards_iv"
android:layout_width="80dp"
android:layout_height="#dimen/margin_20"
android:layout_marginEnd="#dimen/margin_16"
android:src="#drawable/ic_visa_master"
app:layout_constraintBottom_toBottomOf="#id/online_card_ll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/online_card_ll"
app:layout_constraintTop_toTopOf="#id/online_card_ll" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/online_card_expanded_info_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#id/online_card_ll">
<View
android:id="#+id/online_card_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_16"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/cards_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_32"
app:layout_constraintTop_toBottomOf="#id/online_card_divider" />
<View
android:id="#+id/cards_list_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="10dp"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toBottomOf="#id/cards_list" />
<TextView
android:id="#+id/read_more_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginBottom="#dimen/margin_8"
android:text="#string/read_more"
android:textColor="#color/read_more_color"
android:textSize="#dimen/default_text_size_12"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cards_list_divider" />
<LinearLayout
android:id="#+id/additional_info_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginBottom="#dimen/margin_8"
android:orientation="vertical"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cards_list_divider">
<TextView
android:id="#+id/online_card_less_info_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/online_card_less_info"
android:textColor="#color/read_more_color"
android:textSize="#dimen/default_text_size_12" />
<TextView
android:id="#+id/check_card_type_title_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_check_card"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_12"
android:textStyle="bold" />
<TextView
android:id="#+id/check_card_type_info_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:alpha="0.75"
android:text="#string/online_check_card_info"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_12" />
<TextView
android:id="#+id/online_card_data_title_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_data"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_12"
android:textStyle="bold" />
<TextView
android:id="#+id/online_card_data_info_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:alpha="0.75"
android:text="#string/online_card_data_info"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_12" />
<TextView
android:id="#+id/online_card_confirmation_title_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_confirmation"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_12"
android:textStyle="bold" />
<TextView
android:id="#+id/online_card_confirmation_info_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:alpha="0.75"
android:text="#string/online_card_confirmation_info"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_12" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="25dp"
android:background="#color/white"
app:cardCornerRadius="#dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="#dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="#+id/bank_account_rb"
android:layout_width="#dimen/margin_22"
android:layout_height="#dimen/margin_22"
android:layout_marginStart="#dimen/margin_16"
app:layout_constraintBottom_toBottomOf="#id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/bank_account_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginVertical="#dimen/margin_16"
android:layout_marginStart="#dimen/margin_14"
android:text="#string/title_on_bank"
android:textAlignment="textStart"
android:textColor="#color/new_text_color"
android:textSize="#dimen/default_text_size_14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/bank_account_expanded_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#id/bank_account_tv">
<View
android:id="#+id/bank_account_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_16"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/iban_hint_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:layout_marginTop="15dp"
android:text="#string/step7_iban_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/bank_account_divider" />
<com.google.android.material.textfield.TextInputLayout
style="#style/LoginTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_2"
app:layout_constraintTop_toBottomOf="#id/iban_hint_tv">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/iban_number_et"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/step7_next_btn"
android:layout_width="#dimen/width_button_next"
android:layout_height="#dimen/height_button_next"
android:layout_marginBottom="#dimen/margin_10"
android:background="#drawable/rounded_button_next"
android:text="#string/next"
android:textColor="#color/button_text_green"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
I need to tie the button to the bottom of the screen. For this purpose I added attribute app:layout_constraintBottom_toBottomOf="parent" for the button. But when I run the app my screen looks in this way:
So, why it behaves like this and what should I add to tie it to the bottom of the screen. I will appreciate any help, thanks in advance!
Add android:fillViewport="true" in NestedScrollView
<androidx.core.widget.NestedScrollView 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:fillViewport="true">
I have a FoodCardFragment that has a CardView at the bottom. I want the CardView to have a height of at least 120dp and fill the rest of the space (so I set its layout_weight to 1).
The FoodCardFragment is put in the RandomFragment (the first tab of MainAcitivity), and also has its layout_weight set to 1 as I want it to fill the rest of the space.
However, as you can tell from the image I posted below, the yellow CardView I mentioned above doesn't fill the rest of the space. How can I achieve my goal?
In case the links won't work:
Code for FoodCardFragment:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:background="#android:color/white">
<android.support.v7.widget.CardView
android:id="#+id/food_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:elevation="2dp">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/food_image"
android:layout_width="320dp"
android:layout_height="320dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/food_image_place_holder" />
<ImageView
android:id="#+id/liked_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_undo_like" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/food_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textStyle="bold"
android:layout_weight="1"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginEnd="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/food_card" />
<ImageButton
android:id="#+id/more_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/ic_dropdown" />
</LinearLayout>
<FrameLayout
android:id="#+id/tags_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="10dp" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:minHeight="120dp">
<TextView
android:id="#+id/food_note_back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/food_note_background"
android:scrollbars="vertical"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingHorizontal="8dp" />
<TextView
android:id="#+id/food_note_front"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/food_note_background"
android:scrollbars="vertical"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingHorizontal="8dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
Code for RandomFragment:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/whiteSmoke">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorBackgroundFloating"
android:elevation="2dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/random"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/filter_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/menu_button"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_filter" />
<ImageButton
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_menu" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:id="#+id/food_card_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="30dp"
android:background="#android:color/white"
app:cardCornerRadius="4dp"
app:cardElevation="4dp">
<FrameLayout
android:id="#+id/food_card_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:padding="10dp">
<ImageButton
android:id="#+id/check_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="8dp"
app:srcCompat="#drawable/ic_check" />
<ImageButton
android:id="#+id/cross_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="8dp"
app:srcCompat="#drawable/ic_cross" />
<ImageButton
android:id="#+id/refresh_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="8dp"
app:srcCompat="#drawable/ic_refresh" />
</LinearLayout>
</LinearLayout>
Here is my code and I want ViewPager to above LinearLayout and below ImageView. It is coming below ImageView but overlaps LinearLayout. I tried layout_constarintBottom_toTopOf property but it's not working. Which property use correctly to solve this issue
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<ImageView
android:id="#+id/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:src="#drawable/app_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="4:3"/>
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/get_started_text"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#color/white"
android:layout_gravity="center"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sign_in_text"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo"/>
</android.support.constraint.ConstraintLayout>
Use match_constraint property for view pager height from design tab->attributes. It will adjust view pager according to its constraints.
<ImageView
android:id="#+id/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:src="#drawable/home"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintHorizontal_bias="0.501"
android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="get started"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#color/white"
android:layout_gravity="center"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign In"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.0" android:id="#+id/viewPager"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo"
app:layout_constraintBottom_toTopOf="#+id/linear_layout_registration"/>
You probably want something like this...
<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">
<ImageView
android:id="#+id/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:src="#drawable/app_logo"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/linear_layout_registration"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo" />
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="20dp"
android:text="#string/get_started_text"
android:textColor="#color/white"
android:textSize="18sp" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:background="#color/white" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="20dp"
android:text="#string/sign_in_text"
android:textColor="#color/white"
android:textSize="18sp" />
</LinearLayout>
I have a XML layout as follows:
<?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:card_view="http://schemas.android.com/tools"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/accounts_details_page_background_color">
<android.support.v7.widget.CardView
android:id="#+id/overview_cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
card_view:cardElevation="2dp"
card_view:ignore="PrivateResource">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp">
<TextView
android:id="#+id/fragment_compliance_details_overview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/compliance_details_fragment_overview"
android:textColor="#color/compliance_overview_title_color"
android:textSize="#dimen/text_size_small"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/policy_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:textColor="#color/black"
android:textSize="#dimen/text_size_large"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/fragment_compliance_details_overview" />
<TextView
android:id="#+id/last_check_time_only"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size_small"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/policy_name" />
<View
android:id="#+id/horizontal_line_compliance"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="16dp"
android:background="?android:attr/listDivider"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/last_check_time_only" />
<TextView
android:id="#+id/compliance_policy_status_explanation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:textSize="#dimen/text_size_small"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/horizontal_line_compliance" />
<TextView
android:id="#+id/last_check_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="#string/last_compliance_check_time"
android:textSize="#dimen/text_size_small"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/compliance_policy_status_explanation" />
<TextView
android:id="#+id/compliance_user_action_advice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="#string/compliance_user_advice"
android:textSize="#dimen/text_size_small"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/last_check_time" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/details_cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/overview_cardview"
app:layout_constraintVertical_bias="0.0"
card_view:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/policy_details_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/policy_details_title"
android:textColor="#color/compliance_overview_title_color"
android:textSize="14sp"
android:textStyle="bold"
android:visibility="gone" />
<ListView
android:id="#+id/compliance_rules_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:visibility="gone" />
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
When the ListView has more than 3-4 rows the page does not scroll. The ListView does not scroll either.
I tried wrapping the whole thing in a NestedScrollView but that just gets the ListView scrolling and not even entirely.
I want the entire page to scroll and end scrolling when the ListView ends. Any ideas would help.
You don't need constraint layout for what you are doing.
Read about view weights.
Try this. (replace androix.* for your components)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/overview_cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#color/white"
app:cardUseCompatPadding="true"
app:contentPadding="4dp"
card_view:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/fragment_compliance_details_overview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/policy_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test"
android:textColor="#color/black"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/fragment_compliance_details_overview" />
<TextView
android:id="#+id/last_check_time_only"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/policy_name" />
<View
android:id="#+id/horizontal_line_compliance"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="16dp"
android:background="?android:attr/listDivider" />
<TextView
android:id="#+id/compliance_policy_status_explanation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="test"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/horizontal_line_compliance" />
<TextView
android:id="#+id/last_check_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="test"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/compliance_policy_status_explanation" />
<TextView
android:id="#+id/compliance_user_action_advice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="#string/has_accepted_your_invitation_to_fynd"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/last_check_time" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/details_cardview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white"
app:cardUseCompatPadding="true"
app:contentPadding="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/overview_cardview"
app:layout_constraintVertical_bias="0.0"
card_view:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/policy_details_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="test"
android:textSize="14sp"
android:textStyle="bold" />
<ListView
android:id="#+id/compliance_rules_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>