CardView bottom border is cut off inside ScrollView android - android

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

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.

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>

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.

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.

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>

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>

Related

Drag and drop between overlapping views

I am trying to move items between two recyclerviews, one of them into a bottom sheet.
I get this working without problems if the bottom sheet is in the same LinearLayout that the target recylcerview, as you can see in this gif:
This is the working layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical"
app:layout_constraintBaseline_toTopOf="parent"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="25sp"
android:paddingTop="20dp"
android:paddingBottom="10dp"
android:text="Target RecyclerView" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:paddingBottom="16dp"/>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/bottom_sheet_dialog" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
My problem is when I try it with the bottom sheet overlapping the main content, I mean using a FrameLayout or Relativelayout as parent. In this case onDrag() is not fired outside the bottom sheet. Not working:
Not working layout, using a RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical"
app:layout_constraintBaseline_toTopOf="parent"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="25sp"
android:paddingTop="20dp"
android:paddingBottom="10dp"
android:text="Target RecyclerView" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:paddingBottom="16dp"/>
</LinearLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/bottom_sheet_dialog" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
I need the bottom sheet over the main content. Any idea?
Thanks!
Edit: Further investigations point that the problem is the CoordinatorLayout (which is a Bottom Sheet requirement). CoordinatorLayout is a "super-powered FrameLayout" and it acts at "top-level application decor", and I do not know why it does not allow onDrag events get views outside of CoordinatorLayout.
Workaround: For the moment my workaround is setting CorrdinatorLayout visibility to GONE when one of its views is dragged. This allow me to drop the view outside of CoordinatorLayout successfully, but I think should be some other way, some CoordinatorLayout parameter to allow dragging outside it.

Add shadow to bottom of view

I've been having a lot of trouble with this layout.
Basically I have 2 linears, one that is slightly grey with that shadow on bottom and below another linear just white. My trouble here is adding that shadow to the end of the first linear. I tried "elevation" but that is now what i need since i want the shadow to be inside the linear kinda if the last 10dp are from a different color but I'm not getting it right.
This is my layout so far, i thought of putting a view inside the first linear but its not working that good.
Any ideas how to do this?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#f8f8f8"
android:layout_height="0dp">
<android.support.v7.widget.CardView
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
android:layout_width="312dp"
android:layout_height="204dp"
app:cardBackgroundColor="#android:color/holo_red_light"/>
</LinearLayout>
<LinearLayout
android:background="#ffffff"
android:layout_weight="1"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="0dp">
</LinearLayout>
</LinearLayout>
Try using below line in the linearlayout under which your cardview is sitting.
android:elevation="8dp"
Let the cardElevation part in your cardView be as it is.
card_view:cardElevation="10dp"
card_view:cardPreventCornerOverlap="false"
Also just a suggestion :
If you're using android:layout_weight in both child linearLayout put android:weightSum="2" in your parent linearLayout as mentioned in answer given by #Ming Leung here
For more information on android:weightSum="2" you can refer to answers on this page
This page would help you for elevation in cardview
Hope that helps.
I was able to get it to work using a ConstraintLayout:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="312dp"
android:layout_height="204dp"
app:cardBackgroundColor="#android:color/holo_red_light"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView content goes behind and not over TextView above

Consider this video from material design on drag & dropping items:
Material design reordering list
In the video you see a RecyclerView and above it a TextView with the text "Playlist". When the row is dragged up you see it going over the Playlist.
In my code the row goes behind the Textview. I've put RecyclerView's layout_height to match_parent. And I used a FrameLayout and placed the TextView below the RecyclerView. Why isn't it going over it?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
android:layout_gravity="start|top" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
Use Constraint layout as a parent layout and add textview at the top by giving top constraints to the textview. then add
recyclerview's top constraint to the the bottom of textview and recyclerview bottom constraint to the bottom of parent then set height 0 it will work
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/txtTitle"
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</androidx.constraintlayout.widget.ConstraintLayout>
Have you tried elevation? the problem might be that in the z axis the TextView is higher than the RecyclerView. try adding android:elevation="10dp" or higher... like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
android:layout_gravity="start|top" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="10dp" (if it doesn't work try maybe higher elevation, 20dp etc.)
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
Hope it works for you (: let me know!
What is the parent layout of this?
Because you set match_parent in recyclerview and list have many content that's why this issue facing.
Please give fix height or use relative layout and apply position above of text view in recyclerview
Problem with your layout code:
You're using a FrameLayout
Inside FrameLayout, you're also using top margin on your RecyclerView
android:layout_marginTop="96dp" <-- This causing the issue.
Solution:
You should LinearLayout instead of FrameLayout. And, also set LinearLayout's orientation as vertical.
android:orientation="vertical"
Also remove this line from your RecyclerView:-
android:layout_marginTop="96dp"
Solution Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Hello World"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</LinearLayout>
The issue is not that the dragged view is going behind the TextView but, rather, the dragged view is not being drawn outside the bounds of the RecyclerView. The effect is the same.
To allow the RecyclerView to draw outside of itself, set the following for the parent of the RecyclerView:
android:clipChildren="false"
For the RecyclerView set
android:clipToPadding="false"
That should solve the problem.
The RecyclerView is above the text view in your FrameLayout. Currently, it appears that the underlying TextView is above the RecyclerView as you have given the background for the RecyclerView as:
android:background="#android:color/transparent"
To make this work as normal, either remove this line or change the background of RecyclerView to any value other than transparent.
There is 1 more issue. You need to place the recycler view first. Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Hello World"/>
</LinearLayout>

Right way to have a scrollable bottom view

What is the right way to have a scrollable bottom view?
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/wrnTextP1"
android:text="Ok , batatas "/>
<android.support.v4.widget.Space
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1" />
<Button
style="#style/FullWidthButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Chega por hoje!" />
</LinearLayout>
at the preview its looke fine, but when I run it on the emulator the view(in this case: the button) its not at bottom at all.
I think you are misunderstanding how ScrollView is meant to be used. The LinearLayout child of your ScrollView has a match_parent height... if your ScrollView is the same height as the screen, and the LinearLayout is the same height as the ScrollView, then there's nothing to scroll (all the content is the size of the screen).
The direct child of a ScrollView should either have a fixed height (like 2000dp) or use wrap_content.
If you use a fixed height, then the rest of your code "works"; you can have a Space element that uses layout_weight to push the last view down to the bottom of your LinearLayout. However, if you're using wrap_content, this is impossible (since there's no "extra" space for the layout_weight to consume).
Instead, you could consider putting the "bottom" view outside of the ScrollView. Something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
...
</ScrollView>
<Button
style="#style/FullWidthButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chega por hoje!" />
</LinearLayout>

Dynamically adding RecyclerViews to a LinearLayout does not increase the height

I am trying to add many RecyclerViews dynamically to a LinearLayout depending upon the x coordinate of a 2-D array (Set). All the children of each view are not visible (it appears on scrolling the view).
In short, making the RecyclerView's height to WRAP_CONTENT is not stretching the height of RecyclerView.
I want all the children of all the RecyclerViews to be visible and not let any RecyclerView to be scrollable.
Following is the table_layout which I add dynamically:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Engine"
android:padding="6dp"
android:gravity="center"
android:id="#+id/tv_label"
android:layout_marginTop="16dp"
android:background="#color/light_gray"
android:textSize="#dimen/bid_report_label_text_size"
android:textColor="#color/white"
android:textStyle="bold"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/recycler_view"/>
</LinearLayout>
Following is the activity_main layout of activity:
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button_bid_now"
android:id="#+id/scrollView">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linear_layout_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="210dp"
android:id="#+id/bike_image"
android:onClick="startImageSlideshow"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linear_layout_details"
android:orientation="vertical"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
I add table_layout to activity_main dynamically.
Please tell me how to make the RecyclerView WRAP_CONTENT?
The problem was with ScrollView. Changing it to NestedScrollView solved the problem.

Categories

Resources