Android - How can I create a ScrollView with many Layouts inside it? - android

I am trying to create this following screen layout for my movie app:
I created this layout to accomplish it:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#+id/ButtonPanel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="25dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="#+id/id_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<TextView
android:id="#+id/identification_label"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fontFamily="#font/roboto"
android:gravity="bottom"
android:text="Movie Identification"
android:textColor="#color/BaseColor_1"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/edit_identification"
style="#style/IconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="TODO"
android:src="#drawable/ic_edit_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.55"
app:layout_constraintStart_toStartOf="#id/identification_label"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="226dp" />
<ImageButton
android:id="#+id/help_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_help"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/IconButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sample_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Movie Name"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/sample_description_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Movie Description"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sample_name_label" />
<ImageButton
android:id="#+id/sample_show_content_description"
style="#style/IconButton"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginStart="10dp"
android:src="#drawable/btn_reveal_sample_description"
app:layout_constraintBottom_toBottomOf="#+id/sample_description_label"
app:layout_constraintStart_toEndOf="#+id/sample_description_label" />
<TextView
android:id="#+id/sample_description_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/roboto_light"
android:maxLines="0"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sample_description_label" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/identification_data_divider"
style="#style/Divider" />
</LinearLayout>
<LinearLayout
android:id="#+id/location_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_layout">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:id="#+id/location_label"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fontFamily="#font/roboto"
android:gravity="bottom"
android:text="Other Information"
android:textColor="#color/BaseColor_1"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/diretor_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Director Name"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp" />
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Main actor"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp" />
<TextView
android:id="#+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Movie Genre"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp" />
<TextView
android:id="#+id/f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Critics rating"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp" />
<View style="#style/Divider" />
</LinearLayout>
<LinearLayout
android:id="#+id/picture_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/location_layout"
app:layout_constraintVertical_bias="1.0">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:id="#+id/picture_label"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fontFamily="#font/roboto"
android:gravity="bottom"
android:text="#string/sample_images_label"
android:textColor="#color/BaseColor_1"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="5dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/first_picture"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_weight="1"
app:srcCompat="#drawable/outcrop_placeholder" />
<ImageView
android:id="#+id/second_picture"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_weight="1"
app:srcCompat="#drawable/outcrop_placeholder" />
<ImageView
android:id="#+id/third_picture"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_weight="1"
app:srcCompat="#drawable/outcrop_placeholder" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/ButtonPanel"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/BaseColor_4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageButton
android:id="#+id/delete_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:src="#drawable/btn_delete"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/confirm_button"
app:layout_constraintHorizontal_bias="0.004"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
style="#style/IconButton" />
<Button
android:id="#+id/confirm_button"
android:layout_marginEnd="25dp"
android:text="#string/confirm_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/RoundedCornersMaterialButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see I have to set manually the images' layout_height, but I would like to get the best proportion for the pictures (adjust the images 15dp on top of the bottom toolbar). I have tried to use app:layout_constraintBottom_toBottomOf in the LinearLayout that contains these pictures, but when I click on the collpasible and the description is shown I need to scroll through the screen to see the pictures, but using app:layout_constraintBottom_toBottomOf the images simply disappear.
I know that app:layout_constraintBottom_toBottomOf should not be used in this case, but is there any other way to change the layout_height of my pictures to wrap_content and get the best size for them when I have to scroll down?
Basically, I want another option (besides app:layout_constraintBottom_toBottomOf) that will adjust the images 15dp on top of the bottom toolbar when I am scrolling down.
I would really appreciate if someone could help me with this.
Thanks!

Related

Using Margin or Padding with LinearLayout

I'm having trouble lining up a LinearLayout in a XML file. I'm trying to use a LinearLayout because I have TextViews that have to be hidden/shown upon certain options being selected, which I have that down. My problem is that I'm trying to use margin to line everything up centered, but if I run it on my Pixel 5 emulator, it's shift to the right when I have everything centered in my XML. Should I be using padding instead in my LinearLayout, or what should I be doing? Thank you!
App Screen
XML Design
dialog_job_request_confirmation.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BF090909">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="560dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
app:cardBackgroundColor="#color/background_view"
app:cardCornerRadius="8dp"
app:cardElevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/main_purple"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="125dp"
android:layout_height="56dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/skedaddle_service_logo"
android:scaleType="fitXY"
android:src="#drawable/skedaddle_services_"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="70dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/app_bar_layout">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="12dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/confirmJobRequestLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="495dp"
android:text="#string/confirm_job_request_details"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fullnameLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="110dp"
android:layout_marginTop="12dp"
android:text="#string/full_name_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fullnameDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="95dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/addressLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="115dp"
android:layout_marginTop="12dp"
android:text="#string/address_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/addressDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="95dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/dateAndTimeLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="120dp"
android:layout_marginTop="12dp"
android:text="#string/dates_and_times_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/firstDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/secondDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/thirdDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/timeConstraintsLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="110dp"
android:layout_marginTop="12dp"
android:text="#string/time_constraints_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/timeConstraintsDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/jobDescriptionLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="115dp"
android:layout_marginTop="12dp"
android:text="#string/job_description_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/jobDescriptionDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/cancelConfirmJobButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="120dp"
android:layout_height="48dp"
android:layout_marginStart="48dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
android:background="#color/black"
android:text="#android:string/cancel"
android:textAllCaps="false"
android:textColor="#color/white" />
<Button
android:id="#+id/confirmJobRequestButton"
android:layout_width="120dp"
android:layout_height="48dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="45dp"
android:background="#color/main_purple"
android:text="#string/confirm_job"
android:textAllCaps="false"
android:textColor="#color/white"
style="?android:attr/buttonBarButtonStyle" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

You shouldn't center anything using just padding or margin. In your case it's enough to use the layout_gravity in each TextView:
android:layout_gravity="center_horizontal"
More details here.

Why is my view stretching over list view boundaries?

The problem consists of, in this case, two views going out of planed boundaries of a list view. First of all the whole list view should be under the text view:
app:layout_constraintTop_toBottomOf="#+id/tptp"
Second, right side of the view stretches out of screen even though its width is set to match_parent.
android:layout_width="match_parent"
My Activity:
<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=".ListOfChatsActivity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/picture"
android:layout_width="120dp"
android:layout_height="120dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="#drawable/slika1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="126dp" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="#string/name"
android:textColor="#color/logoBlue"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="#+id/picture"
app:layout_constraintStart_toStartOf="#+id/picture"
app:layout_constraintTop_toBottomOf="#+id/picture" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/email"
android:textColor="#color/logoBlue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/name" />
<TextView
android:id="#+id/phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/phone"
android:textColor="#color/logoBlue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email" />
<TextView
android:id="#+id/tptp"
android:layout_width="match_parent"
android:layout_height="41dp"
android:background="#color/logoBlue"
android:text="#string/contacts"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<ListView
android:id="#+id/list"
android:layout_width="410dp"
android:layout_height="269dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tptp"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
And the View:
<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="wrap_content"
android:orientation="vertical"
android:background="#drawable/customborder">
<TextView
android:id="#+id/chatName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/name"
android:textAlignment="center"
android:textColor="#color/logoBlue"
android:textSize="22sp"
android:textStyle="bold"
android:layout_marginBottom="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center_horizontal" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/last_seen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/chatName" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:gravity="start"
android:text="#string/date"
app:layout_constraintBottom_toBottomOf="#+id/textView6"
app:layout_constraintStart_toEndOf="#+id/textView6"
app:layout_constraintTop_toTopOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
Picture of the error:
Most likely its a simple mistake since i never got an similar error, but i still can't seem to find it.

inner recyclerview inside holder cuts cut

I have the following XML layout -
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/shopping_cart_holder_root_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/very_light_grey"
android:paddingBottom="#dimen/marketplace_15dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:background="#drawable/shopping_cart_image_border"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/activity_checkout_cart_imageView"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/shopping_cart_holder_item_quantity_tv"
android:layout_width="35dp"
android:layout_height="25dp"
android:layout_gravity="end"
android:alpha="0.6"
android:background="#color/color_black"
android:elevation="1dp"
android:gravity="center"
android:maxLines="1"
android:textAlignment="center"
android:textColor="#color/white"
android:textStyle="bold"
app:autoSizeMaxTextSize="16sp"
app:autoSizeMinTextSize="10sp"
app:autoSizeStepGranularity="2sp"
app:layout_constraintStart_toEndOf="#+id/activity_checkout_cart_imageView"
app:layout_constraintTop_toTopOf="parent"
tools:text="1" />
</FrameLayout>
<LinearLayout
android:id="#+id/shopping_cart_holder_infobox_viewgroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:layout_marginTop="#dimen/marketplace_15dp"
android:layout_marginEnd="0dp"
android:orientation="vertical">
<TextView
android:id="#+id/shopping_cart_holder_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="#font/noto_sans"
android:lines="1"
android:textSize="16sp"
android:textStyle="bold"
app:autoSizeMaxTextSize="16sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeStepGranularity="2sp"
tools:text="Unavailable Name" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/marketplace_cart_holder_by" />
<TextView
android:id="#+id/shopping_cart_holder_vendor_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:fontFamily="#font/noto_sans"
android:text="#string/activity_shopping_cart_vendor_name" />
</LinearLayout>
<TextView
android:id="#+id/shopping_cart_holder_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/noto_sans"
android:text="#string/marketplace_cart_holder_0_price"
android:textSize="16sp"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/marketplace_cart_holder_attribute_recyclerview"
tools:itemCount="2"
android:orientation="vertical"
tools:listitem="#layout/marketplace_cart_attribute_holder"
tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/shopping_cart_holder_quantity_viewgroup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_marginTop="#dimen/marketplace_15dp"
android:orientation="horizontal"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/shopping_cart_holder_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/noto_sans"
android:text="#string/activity_shopping_cart_qty"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="#+id/shopping_cart_holder_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/shopping_cart_holder_quantity_picker_viewgroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/shopping_cart_holder_delete"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_qty"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/shopping_cart_holder_imgMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/minus"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/shopping_cart_holder_product_quantity_picked_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:text="#string/shopping_cart_holder_0"
android:textColor="#android:color/black"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#id/shopping_cart_holder_imgMinus"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_imgMinus"
app:layout_constraintTop_toTopOf="#+id/shopping_cart_holder_imgMinus" />
<ImageView
android:id="#+id/shopping_cart_holder_imgPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:src="#drawable/plus"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_product_quantity_picked_tv"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/shopping_cart_holder_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/noto_sans"
android:src="#drawable/remove3x"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have inside this holder a ConstraitLayout that is disabled from view in a certain stage in my app.
As you can see, once I disable the ConstraintLayout from sight the inner RecyclerView gets cut in half.
here is the layout of the inner RV -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/very_light_grey"
android:orientation="horizontal">
<TextView
android:id="#+id/marketplace_cart_attribute_holder_attribute_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:textSize="16sp"
tools:text="Attribute Name:" />
<TextView
android:id="#+id/marketplace_cart_attribute_holder_attribute_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:textSize="16sp"
tools:text="Value" />
</LinearLayout>
What am I missing the causes the RV to get cut in half that does not happen when I have the bottom layout visible?

Add margin bottom -
android:layout_marginBottom="15dp"
to your LinearLayout to avoid the issue for a number of different screen sizes:
<LinearLayout
android:id="#+id/shopping_cart_holder_infobox_viewgroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginEnd="0dp"
android:orientation="vertical">

Solved - I have a redundant marginTop in my LinearLayout.

Move one particular view up when opening a keyboard not the entire layout

I want functionality like Facebook like when we create any post with an image on it only they push one bar on top of the image, not the entire layout. In my case, I am using NestedScrollView as a parent with child ConstraintLayout and the bar is designed in Linear layout.
This is my app:
I want something like this:
This is my XML
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.03" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.97" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/select_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:clipChildren="false"
android:focusable="true"
android:foreground="#drawable/ripple"
android:paddingTop="#dimen/dimen_5dp"
android:paddingEnd="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:src="#drawable/left_arrow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.00"
app:layout_constraintStart_toStartOf="#id/guideline1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/back_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/opensans_bold"
android:paddingTop="#dimen/dimen_5dp"
android:paddingEnd="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:text="#string/new_post"
android:textColor="#color/colorPrimaryDark"
android:textSize="#dimen/dimen_16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/select_back"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/postTextview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/dimen_15dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/roboto_regular"
android:foreground="?android:selectableItemBackground"
android:paddingStart="#dimen/dimen_5dp"
android:paddingTop="#dimen/dimen_5dp"
android:paddingBottom="#dimen/dimen_5dp"
android:text="#string/post"
android:textColor="#color/colorPrimaryDark"
android:textSize="#dimen/dimen_16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/back_title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.00" />
<View
android:id="#+id/line"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginTop="12dp"
android:background="#color/grey_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/select_back"
app:layout_constraintVertical_bias="0.0" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:src="#drawable/rock"
app:civ_border_color="#color/white"
app:civ_border_width="2dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_10dp"
android:layout_marginTop="20dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="#font/opensans_bold"
android:text="Dwayne johnson"
android:textColor="#color/textview_black"
android:textSize="#dimen/dimen_14sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/profile_image"
app:layout_constraintTop_toBottomOf="#+id/line" />
<com.skyfishjy.library.RippleBackground
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line"
app:rb_color="#29B6F6"
app:rb_duration="2000"
app:rb_radius="5dp"
app:rb_rippleAmount="3"
app:rb_scale="4">
<ImageView
android:id="#+id/world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="TODO"
android:padding="10dp"
android:src="#drawable/world" />
</com.skyfishjy.library.RippleBackground>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/down_arrow"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:foreground="?attr/selectableItemBackground"
android:padding="10dp"
android:src="#drawable/ic_arrow_down_sign_to_navigate"
app:layout_constraintStart_toEndOf="#+id/content"
app:layout_constraintTop_toBottomOf="#+id/line" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_below="#+id/rel"
android:layout_marginTop="8dp"
android:background="#DCDCDC"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_image" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/button_background"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/personal"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/post_btn_bg"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/awareness"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="#+id/category1"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/category3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="#drawable/post_btn_bg"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:foreground="?android:selectableItemBackground"
android:padding="5dp"
android:text="#string/scheme"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="#+id/category2"
app:layout_constraintTop_toBottomOf="#+id/view"
app:textAllCaps="false" />
<View
android:id="#+id/line1"
android:layout_width="match_parent"
android:layout_height="0.4dp"
android:layout_marginTop="8dp"
android:background="#color/grey_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/category3" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/write_post"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_100dp"
android:layout_below="#+id/line1"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/post_edit_text_bg"
android:fontFamily="#font/roboto_regular"
android:gravity="start"
android:hint="What's on your mind..."
android:inputType="textMultiLine"
android:textColor="#color/textview_black"
android:textColorHint="#color/grey2_text"
android:textCursorDrawable="#drawable/cursor_color"
android:textSize="#dimen/dimen_16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line1" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/timelineImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone"
android:layout_marginBottom="#dimen/dimen_20dp"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/write_post">
</androidx.appcompat.widget.AppCompatImageView>
<VideoView
android:id="#+id/timelineVideo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
android:layout_marginBottom="#dimen/dimen_20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/write_post"
app:layout_constraintVertical_bias="0.072">
</VideoView>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:background="#drawable/item_bg"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:foreground="?android:selectableItemBackground"
android:padding="10dp"
android:src="#drawable/ic_camera" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="?android:selectableItemBackground"
android:padding="10dp"
android:src="#drawable/gallery" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Tried everything in the manifest
android:windowSoftInputMode="adjustPan"
android:windowSoftInputMode="adjustResize"
android:windowSoftInputMode="adjustNothing"
but nothing worked. All are pushing my entire layout up.

I think this is because, you are using NestedScrollView as parent check by replacing NestedScrollView with any other layout

add This in your meniFest file beside your activity tag
android:windowSoftInputMode="adjustResize"
and,put scrollView as a parent layout in your xml file

Responsive cards laid out in a Grid

I am trying to find the best possible way to create responsive grid layout using Layout XML in Android Studio.
Let me first explain the design.
As you can see below, I would like to develop an interface that will contain 10 cards.
As the size of device changes, I would like the cards to shrink in height and then respectively, the contest inside the cards should also shrink (based on constraints I can put for them).
So I made a few attempts.
First, I tried Constraint Layout (as described below).
This resulted in the cards height being defined by the content inside the cards, hence the card size did not change when viewed on smaller device.
Then I tried GridLayout.
Once again, this resulted in card size being determined by the content and the layout could not scale dynamically.
So, I am trying to find out what I might try next so that I can get the desired results.
Maybe using Cards is a bad idea?
Should I be using Linear Layout instead?
Are there any examples out there that I can refer?
or
Going with Different layouts for different resolutions is the option?
Too many questions at this point.
UPDATE:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/midGuide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_percent="0.50121653"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/l1_title"
android:layout_width="0dp"
android:layout_height="85dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/anton"
android:paddingStart="0dp"
android:text="1"
android:textColor="#FFFFFF"
android:textSize="50sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/bestScoretext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:text="Best Score"
android:textAlignment="textEnd"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#+id/bestScore"
app:layout_constraintEnd_toEndOf="#+id/bestScore" />
<TextView
android:id="#+id/bestScore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:fontFamily="sans-serif-medium"
android:text="1.9pt"
android:textAlignment="viewEnd"
android:textColor="#FFFFFF"
android:textSize="38sp"
app:autoSizeTextType="uniform"
app:layout_constraintBaseline_toBaselineOf="#+id/l1_title"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="30dp"
android:layout_marginBottom="20dp"
android:background="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/l1c6"
app:srcCompat="?attr/homeAsUpIndicator" />
<!-- Card 1 -->
<androidx.cardview.widget.CardView
android:id="#+id/l1c0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="10dp"
android:padding="5dp"
app:cardBackgroundColor="#color/bgHome"
app:cardCornerRadius="12dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/midGuide"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/l1_title"
app:layout_constraintBottom_toTopOf="#+id/l1c2">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded"
android:padding="10dp">
<TextView
android:id="#+id/subLevel0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".0"
android:textColor="#color/cardview_light_background"
android:textSize="30sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subScore0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3.8pt"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/c0Guide"
app:layout_constraintStart_toStartOf="#+id/subLevel0" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/subLevel0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toEndOf="#+id/c0Guide"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_1_0_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/c0Guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="75dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_begin="51dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Card 2 -->
<androidx.cardview.widget.CardView
android:id="#+id/l1c1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="20dp"
android:padding="5dp"
app:cardBackgroundColor="#color/bgHome"
app:cardCornerRadius="12dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/midGuide"
app:layout_constraintTop_toTopOf="#+id/l1c0">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded"
android:padding="10dp">
<TextView
android:id="#+id/subLevel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".1"
android:textColor="#color/cardview_light_background"
android:textSize="30sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subScore1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4.2pt"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/subLevel1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/subLevel1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toEndOf="#+id/c1Guide"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_1_1_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/c1Guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="75dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_begin="51dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Card 3 -->
<androidx.cardview.widget.CardView
android:id="#+id/l1c2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="10dp"
android:padding="5dp"
app:cardBackgroundColor="#color/bgHome"
app:cardCornerRadius="12dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/midGuide"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/l1c0"
app:layout_constraintBottom_toTopOf="#+id/l1c4">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded"
android:padding="10dp">
<TextView
android:id="#+id/subLevel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".2"
android:textColor="#color/cardview_light_background"
android:textSize="30sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subScore2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3.8pt"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/c2Guide"
app:layout_constraintStart_toStartOf="#+id/subLevel2" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/subLevel2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toEndOf="#+id/c2Guide"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_1_2_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/c2Guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="75dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_begin="51dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Card 4 -->
<androidx.cardview.widget.CardView
android:id="#+id/l1c3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="20dp"
android:padding="5dp"
app:cardBackgroundColor="#color/bgHome"
app:cardCornerRadius="12dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/midGuide"
app:layout_constraintTop_toTopOf="#+id/l1c2">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded"
android:padding="10dp">
<TextView
android:id="#+id/subLevel3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".3"
android:textColor="#color/cardview_light_background"
android:textSize="30sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subScore3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4.2pt"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/subLevel3" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/subLevel3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toEndOf="#+id/c3Guide"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_1_3_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/c3Guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="75dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_begin="51dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Card 5 -->
<androidx.cardview.widget.CardView
android:id="#+id/l1c4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="10dp"
android:padding="5dp"
app:cardBackgroundColor="#color/bgHome"
app:cardCornerRadius="12dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/midGuide"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/l1c2"
app:layout_constraintBottom_toTopOf="#+id/l1c6">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded"
android:padding="10dp">
<TextView
android:id="#+id/subLevel4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".4"
android:textColor="#color/cardview_light_background"
android:textSize="30sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subScore4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3.8pt"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/c4Guide"
app:layout_constraintStart_toStartOf="#+id/subLevel4" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/subLevel4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toEndOf="#+id/c4Guide"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_1_0_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/c4Guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="75dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_begin="51dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Card 6 -->
<androidx.cardview.widget.CardView
android:id="#+id/l1c5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="20dp"
android:padding="5dp"
app:cardBackgroundColor="#color/bgHome"
app:cardCornerRadius="12dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/midGuide"
app:layout_constraintTop_toTopOf="#+id/l1c4">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded"
android:padding="10dp">
<TextView
android:id="#+id/subLevel5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".5"
android:textColor="#color/cardview_light_background"
android:textSize="30sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subScore5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4.2pt"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/subLevel5" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/subLevel5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toEndOf="#+id/c5Guide"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_1_3_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/c5Guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="75dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_begin="51dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Card 7 -->
<androidx.cardview.widget.CardView
android:id="#+id/l1c6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="10dp"
android:padding="5dp"
app:cardBackgroundColor="#color/bgHome"
app:cardCornerRadius="12dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/midGuide"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/l1c4"
app:layout_constraintBottom_toTopOf="#+id/l1c8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded"
android:padding="10dp">
<TextView
android:id="#+id/subLevel6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".6"
android:textColor="#color/cardview_light_background"
android:textSize="30sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subScore6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3.8pt"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/c6Guide"
app:layout_constraintStart_toStartOf="#+id/subLevel6" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/subLevel6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toEndOf="#+id/c6Guide"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_1_0_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/c6Guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="75dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_begin="51dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Card 8 -->
<androidx.cardview.widget.CardView
android:id="#+id/l1c7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="20dp"
android:padding="5dp"
app:cardBackgroundColor="#color/bgHome"
app:cardCornerRadius="12dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/midGuide"
app:layout_constraintTop_toTopOf="#+id/l1c6">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded"
android:padding="10dp">
<TextView
android:id="#+id/subLevel7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".7"
android:textColor="#color/cardview_light_background"
android:textSize="30sp"
app:autoSizeTextType="uniform"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subScore7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4.2pt"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/subLevel7" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/subLevel7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toEndOf="#+id/c5Guide"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_1_3_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/c7Guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="75dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_begin="51dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Cards end -->
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="left" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try setting each card's width to 0dp and just add margins around each card. This way, the width will expand horizontally and keep height at its minimum (wrap_content).
You can also check out flexbox-layout.

Categories

Resources