I am creating a home page for my android application in Android Studios. In the layouts folder I have my home page activity XML file. The home page will contain 3 clickable "boxes" which are CardViews. They are functioning correctly but I am working to change the CardViews sizes without hard-coding XML width and height (or other objects in the future). So that the sizes change properly according to different screen sizes.
In this specific case I want to increase the height of the CardViews.
Capture Receipt and Create Invoice CardViews I want to modify size of.
I am using a Linear Layout inside a Constraint Layout. The CardViews layout_width and layout_height are selected to match parent. I have modified the layout_weight, but this does not get the result I am looking for. I want to increase the heights without increasing the width.
Is this something to be done in XML or the Java part of the code?
Here is my home page activity XML code (without the Bottom Nav bar and Add Item part):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomePageActivity">
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/lightComplimentGrey"
android:gravity="center|top"
android:orientation="vertical"
tools:context=".MainActivity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="290dp"
android:background="#drawable/curved_top"
android:orientation="horizontal"
android:paddingBottom="-50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="#+id/ll">
<TextView
android:id="#+id/currentUserTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="188dp"
android:layout_marginBottom="8dp"
android:gravity="left"
android:text="Current User"
android:textColor="#99E8F3"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.922"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.352" />
<TextView
android:id="#+id/userNameEntryTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="left"
android:hint="Not Signed In"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/currentUser"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/changeUserSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:backgroundTint="#FFFFFF"
app:layout_constraintBottom_toBottomOf="#+id/
app:layout_constraintStart_toEndOf="#+id/userNameEntry"
app:layout_constraintTop_toTopOf="#+id/currentUserTextView"
app:layout_constraintVertical_bias="0.558" />
<ImageButton
android:id="#+id/menuButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="4"
android:background="#drawable/ic_menu_light_blue_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.048" />
<ImageButton
android:id="#+id/notificationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="
android:background="#drawable/ic_tooLongToPost"
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="0.0" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-70dp"
android:clipToPadding="false"
android:gravity="center"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/capture_receipt"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_margin="#dimen/view_margin_normal_screen"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:background="#drawable/circle_background_green"
android:padding="10dp"
android:src="#drawable/ic_photo_camera_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Capture Receipt"
android:textStyle="bold" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#color/lightComplimentGrey" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:text="Scan receipt to recognize items"
android:textColor="#android:color/darker_gray" />
</LinearLayout>
</android.support.v7.widget.CardView>
How is it possible to modify the heights and widths (just like you would when hard coding the XML) without hard-coding?
Related
How to create a recyclerview with items having variable height as per the length of content text like the below image. Recyclerview also supports swipeable items.
Expected
Actual
My layout
<?xml version="1.0" encoding="utf-8"?>
<com.voiro.phoenix.custom.swipe_layout.SwipeRevealLayout 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/swipe_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:dragFromEdge="right">
<RelativeLayout
android:id="#+id/rl_mark_read"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#color/green"
android:clickable="true"
android:focusable="true"
android:visibility="visible">
<TextView
android:id="#+id/tv_mark_read"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:drawablePadding="2dp"
android:fontFamily="#font/roboto_medium"
android:gravity="center"
android:text="#string/mark_as_read"
android:textColor="#color/white"
android:textSize="12sp"
app:drawableTopCompat="#drawable/ic_double_check" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<androidx.cardview.widget.CardView
android:id="#+id/view_foreground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/background"
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:id="#+id/cl_main_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="90dp"
android:padding="16dp">
<ImageView
android:id="#+id/iv_notification_thumbnail"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="#drawable/ic_avatar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/tv_notification_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto"
android:text="#string/value_place_holder"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#id/tv_notification_time"
app:layout_constraintStart_toEndOf="#id/iv_notification_thumbnail"
app:layout_constraintTop_toTopOf="#id/iv_notification_thumbnail" />
<TextView
android:id="#+id/tv_notification_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto"
android:text="#string/value_place_holder"
android:textColor="#color/text_desc"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_notification_title" />
<TextView
android:id="#+id/tv_notification_desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/value_place_holder"
android:textColor="#color/text_desc"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/tv_notification_title"
app:layout_constraintStart_toStartOf="#id/tv_notification_title"
app:layout_constraintTop_toBottomOf="#id/tv_notification_title"
tools:ignore="SmallSp" />
<ImageButton
android:id="#+id/ib_unread_dot"
android:layout_width="8dp"
android:layout_height="8dp"
android:background="#drawable/shape_circle_orange"
android:clickable="false"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</FrameLayout>
</com.voiro.phoenix.custom.swipe_layout.SwipeRevealLayout>
If you can see in the actual image the subtext is getting cropped whenever I try to set longer text on title text.
My Actual requirement is I want a layout something like notification tray of android where depending on the size of context list item height adjusts to accommodate the content also the height of swipe layout behind the list item adjusts accordingly.
I don't want to set height of item programmatically or manually. It should be auto adjusted as per the content length.
I searched through all over the internet but could not able to find the solution.
I created a component for my app which I use like a card. It has some textviews and an end image, but the image always appears with some withe border liek in the image bellow:
I tried everything to fix it but I can figure out how and it's important because the component it's used in almost all the app and in all of them the all the images appear with some withe border.
Component code:
<androidx.cardview.widget.CardView 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="106dp"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/image_card_end"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/txt_card_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dp"
app:textType="semibold"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/second_description_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:visibility="gone"
tools:visibility="visible">
<TextView
android:id="#+id/txt_card_second_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:textSize="14dp"
app:textType="regular"
/>
</LinearLayout>
</LinearLayout>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_card_end"
android:layout_width="98dp"
android:layout_height="106dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/card_appointment_image" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
And this is how I use it:
<com.univer.components.card.BasicCard
android:id="#+id/home_card_auto_evaluation_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardCornerRadius="8dp"
app:cardDescription="#string/home_card_selfdiagnosis_description"
app:cardEndImage="#string/image_home_card_symptomchecker"
app:cardHeader="#string/home_card_selfdiagnosis_header" />
Set a background which is easily visible(eg: red) to your cardview and run the app.
If the red section gets visible it means the inner constraint layout isn't wrapping the cardview completely . If that is the case I would suggest experimenting with scale type as so
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_card_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center-crop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/card_appointment_image" />
I have 2 imageviews in a linear layout inside a constraint layout. There should be no gap between them, but when I run it, on some large devices it shows the gap even though I didnt give any margin or padding between them. The imageviews are with ids onboarding_image and image_line. I linear layout must be between the two guidelines showing images one upon the other without any space should take up whatever the space is left between the guideline in all devices.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/swipe_layer"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/blue1"
>
<ImageView
android:id="#+id/app_tour_group"
android:layout_width="70dp"
android:layout_height="9dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/group_1" />
<RelativeLayout
android:id="#+id/next_layout"
android:layout_width="277dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/app_tour_group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline1">
<View
android:id="#+id/app_tour_next"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:background="#drawable/rectangle_2" />
<TextView
android:id="#+id/next_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:gravity="center"
android:text="NEXT"
android:textColor="#ffffff"
android:textSize="18sp" />
</RelativeLayout>
<TextView
android:id="#+id/onboarding_title"
android:layout_width="375dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="TextView"
android:textColor="#ffffff"
android:textSize="29sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/onboarding_description"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="TextView"
android:textColor="#50287d"
android:textSize="17sp"
android:layout_marginBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/onboarding_title"
app:layout_constraintBottom_toTopOf="#id/guideline2"/>
<LinearLayout
android:layout_width="315dp"
android:layout_height="0dp"
android:id="#+id/image_layout"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/guideline1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:layout_constraintVertical_weight="1"
android:weightSum="417"
>
<ImageView
android:id="#+id/onboarding_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginBottom="-8dip"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:layout_weight="414"
/>
<ImageView
android:id="#+id/image_line"
android:layout_width="wrap_content"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginTop="-8dip"
app:srcCompat="#drawable/line"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
</LinearLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.88"
app:layout_constraintBottom_toTopOf="#+id/next_layout"
app:layout_constraintTop_toBottomOf="#+id/image_layout"/>
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.245"
app:layout_constraintBottom_toTopOf="#+id/image_layout"
app:layout_constraintTop_toBottomOf="#+id/onboarding_description"
/>
</android.support.constraint.ConstraintLayout>
You say: I didn't give any margin or padding between them.
However, I can see android:layout_marginBottom="-8dip". I know you are setting also android:layout_marginTop="-8dip" to the other image. It's a little weird.
If you want to make your Images fill all the contents, use:
android:scaleType="fitxy"
or
android:scaleType="centerCrop"
in both images
I'm trying to create a two-row ConstraintLayout, each row has two views. The problem with what I have now is the left views is overlapping the right views, as you can see in the screenshot:
This is the code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I would like the left views (title, date) to stop where the download image and duration start. I haven't worked with ConstraintLayouts much so it might be something easy.
There are a lot of different ways to achieve this, one way would be to constraint your text into the image and give them the same height.
They won't overlap each other if you will do something like this :
In your example, you used android:layout_width="match_parent" on the text so it was expanded throw all of the row and overlapped your other view.You should use android:layout_width="0dp" (it is match_constraint) so your views won't overlap each other.
Here is an example of a layout that looks like the row you want to achieve:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="loot at this text that wont everlap the image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:src="#tools:sample/avatars[1]" />
</androidx.constraintlayout.widget.ConstraintLayout>
For those who believe this is a duplicate question I have already consulted the current solutions available on stack overflow Such as:
Last Item in recyclerview is cut off
RecyclerView cutting off last item
However, no matter what I try I am unable to completely see, on in some cases see at all the last element. I have already checked my adapter to make sure the last item is being rendered.
Here are the screenshots and xml. Thanks
// This is the card view that I render using the adapter
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_border_background">
<ImageView
android:layout_width="100dp"
android:layout_height="90dp"
tools:srcCompat="#tools:sample/avatars"
android:id="#+id/collectionImage"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:text="collectionName"
android:layout_width="142dp"
android:layout_height="49dp"
android:id="#+id/collectionName"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/collectionImage"
/>
<TextView
android:text="productName"
android:layout_width="141dp"
android:layout_height="35dp"
android:id="#+id/productName"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/collectionImage" android:layout_marginTop="56dp"
/>
<TextView
android:layout_width="107dp"
android:layout_height="25dp"
android:id="#+id/productName2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/productName"
android:text="# available :"
/>
<TextView
android:layout_width="32dp"
android:layout_height="24dp"
android:id="#+id/numberOfInventoryItems"
android:text="123"
app:layout_constraintTop_toBottomOf="#+id/productName2" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
</android.support.constraint.ConstraintLayout>
This is the main layout that contains the recylerview that is inside a
nested scrollview. Like I said I tried this solution by reading other threads.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_constraint"
tools:context=".CollectionDetailsPage">
<android.support.constraint.ConstraintLayout
android:id="#+id/top_card"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
android:background="#drawable/card_border_background"
android:layout_marginTop="8dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/collection_image_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/collection_title_card"
android:text="Collection Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintStart_toEndOf="#+id/collection_image_card"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:textStyle="bold" android:textSize="18sp" android:textColor="#android:color/black"
tools:ignore="HardcodedText"/>
<TextView
android:id="#+id/collection_html_card"
android:text="sample body html"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/collection_image_card"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/collection_title_card"
tools:ignore="HardcodedText"/>
</android.support.constraint.ConstraintLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#+id/top_card"
android:id="#+id/nestedScrollView"
android:scrollbars="vertical" app:layout_constraintStart_toStartOf="parent"
>
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/recyclerView_Collections_Data"
tools:ignore="MissingConstraints"/>
</android.support.v4.widget.NestedScrollView>
<TextView
android:text="Loading..."
android:layout_width="125dp"
android:layout_height="40dp"
android:id="#+id/loading_title"
android:textStyle="bold"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/top_card"
tools:ignore="HardcodedText"/>
<View
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#color/colorPrimary"
android:id="#+id/view"
tools:ignore="MissingConstraints"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
this obviously is because of:
<View
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#color/colorPrimary"
android:id="#+id/view"
tools:ignore="MissingConstraints"
app:layout_constraintBottom_toBottomOf="parent"/>
have you ever had a closer look at the first one CardView ??
android:fillViewport="true" and tools:ignore="MissingConstraints" look suspicious;
replace these ConstraintLayout with LinearLayoutCompat, because these are linear layouts.
that NestedScrollView just would need weight 1.00 and height 0dp, to fill the space.