CardView bottom border is cut off inside ScrollView android

Question

I am putting the cardview inside scrollview, we expect to see that at the bottom, the border should be shown（see pic below）. But its not. The problem is that I cannot scroll to the bottom to see the border of cardview.

All the solutions on SO is to change layout_margins to paddings, but its not the case for cardview if we want to show the border. I basically tried everything. But still doesnt work.

Picture 1. scroll to bottom cannot see the border

Picture 2. We can see the top border

Following is xml code

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp">
                    <LinearLayout
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:orientation="vertical"
                      >
                     ...
                    </LinearLayout>
           </CardView>
  </LinearLayout>

references: ScrollView doesn't scroll to the bottom

ScrollView cuts off the top and leaves space at the bottom

I can't show LinearLayout at bottom to scroll view

Android ScrollView refuses to scroll to bottom

Can you attach a screenshot to help us better understand what is going on? — Vucko, Jul 25 '16 at 16:16

Ray Hunter · Answer 1 · 2020-06-19T15:13:41.517

UPDATED

This will work better now with a NestedScrollView and a MaterialCardView. I added this NestedScrollView to a ConstraintLayout.

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.card.MaterialCardView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:cardUseCompatPadding="true">

This is working for me without the LinearLayout wrapper.

===========================================================================

OLD WAY LEFT HERE

I ran into the same problem and had to do the following (the key is the LinearLayout wrapper around the cardview where I added the paddingBottom):

<ScrollView
    android:id="@+id/item_scrollview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"
    tools:visibility="visible">

    <LinearLayout
        android:id="@+id/item_wrapper_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/content_margin"
        android:paddingBottom="32dp"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            android:id="@+id/item_cardview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            card_view:cardBackgroundColor="@color/colorPrimary"
            card_view:cardCornerRadius="4dp"
            card_view:cardUseCompatPadding="true">

Adding the LinearLayout wrapper around the cardview is what worked for me.

Also note, I had to add card_view:cardUseCompatPadding="true" on the cardview to get the border shadow looking correct.

Here is the end result where the red box shows where the padding has been added when the cardview is expanded and scrolled up.

I am not a big fan of adding an extra layer to wrap the cardview, it will take extra time to traverse the view tree, especially true when view is deep. If you are not care about the performance, that should work — Cheng, Aug 01 '17 at 15:59
Adding a LinearLayout as a wrapper is not going to cause a huge performance increase on this design. If this was all contained in a RecyclerView, then I could see that it might be an issue. A view like this should not be that deep anyways - esp above the card. — Ray Hunter, Aug 03 '17 at 01:17
There is apparently a margin or padding issue if you see the screen shot above. The scrollbar can not be scrolled anymore even if it reached to the bottom. So fixing this padding/margin issue is the right way to do. Wrapping a linearlayout just a hack way, or IMHO, it works by coincidence. — Cheng, Aug 04 '17 at 20:56
I couldn't make this work and the only thing that worked was adding `app:cardUseCompatPadding="true"` in `CardView` as explained in this answer. Thanks! — Franco, Nov 06 '17 at 06:38

score 8 · Answer 2 · answered Dec 25 '18 at 13:21

Setting clipToPadding to false on a ScrollView usually works for me:

    <ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingBottom="16dp">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        app:contentPadding="8dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:text="Lorem ipsum..." />

    </com.google.android.material.card.MaterialCardView>

</ScrollView>

just adding `clipToPadding` to `false` to the parent of the MaterialCardView worked for me — Sphig316, Jan 07 '19 at 22:29
This requires `clipToPadding="false"` and `paddingBottom`. If just the `clipToPadding` is added, it will not work. — Ray Hunter, Dec 15 '20 at 05:15

score 6 · Accepted Answer · answered Aug 15 '16 at 21:25

6

One solution I just found is to wrap CardView with a LinearLayout or RelativeLayout and set its padding. For example, If you want some drop shadow effect in cardView, lets say 8dp, you can set 4dp padding of your LinearLayout or RelativeLayout and 4dp layout_margin of CardView.

answered Aug 15 '16 at 21:25

Cheng

775
2
12
28

yeah, but adding an extra layer will take the extra time to traverse the view tree, which is not optimized. Well, if you're not care about the performance, that should work – Cheng Aug 01 '17 at 15:56
I did not even had to set the padding. Just added the linear layout and it solved the problem – Bertram Gilfoyle Aug 01 '17 at 18:31

score 2 · Answer 4 · answered Nov 01 '18 at 01:39

2

In my case I just have to change ScrollView with NestedScrollView to solve the problem.

FYI, my NestedScrollView is placed inside a fragment which is a child of CoordinatorLayout with appbar_scrolling_view_behavior set.

answered Nov 01 '18 at 01:39

Untung Suryono

69
2
8

score 0 · Answer 5 · answered Apr 04 '18 at 05:28

The best solution is adding View with marginTop at last

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"> 

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">


      ...................
      ...................

       <View
         android:layout_width="match_parent"
         android:layout_height="0.1dp"
         android:layout_marginTop="10dp"/>

   </LinearLayout>

</ScrollView>

score 0 · Answer 6 · answered Mar 21 '20 at 07:34

I had same issue. Moving margin from child to ScrollView worked for me

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:layout_margin="8dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                    <LinearLayout
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:orientation="vertical"
                      >
                     ...
                    </LinearLayout>
           </CardView>
  </LinearLayout>

CardView bottom border is cut off inside ScrollView android

6 Answers6