Android ScrollView not respecting child's bottom margin - android

I have an android layout_file that looks something like the following
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/post_ride_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_margin"
android:padding="#dimen/activity_margin"
android:background="#drawable/google_now_style_card"
android:orientation="vertical" >
...
</LinearLayout
</ScrollView
#dimen/activity_margin is 16dp
When I'm running the app, I am unable to scroll to the bottom of the entire layout, as in, it won't display the bottom margin. This picture clarifies
Note that the hint that the bottom of the layout has been reached (the glow from the bottom), yet the scrollbar on the right indicates that there is more to scroll down to.
What I expect to happen is to be able to see the margin at the bottom, just like the margins at the side of the layout.

Try setting
android:fillViewport="true"
in your ScrollView. It will give it full height and then you can apply bottom margin.

I ran into the same problem. To solve, I used padding instead of margin and then I set android:fillViewport="true" for ScrollView. Anything goes well now!

add android:clipToPadding="false" and android:paddingBottom="32dp" to LinearLayout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/post_ride_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_margin"
android:background="#drawable/google_now_style_card"
android:orientation="vertical"
android:paddingBottom="32dp"
android:clipToPadding="false">
...
</LinearLayout
</ScrollView
this worked for ConstraintLayout.
also add android:fillViewport="true" to fill whole of height.

It will work for child of child of scrollview.
if you put one child under scrollview it wont consider bottom margin of child.
but if you put child under child as shown in code it works fine.
<ScrollView>
<LinearLayout>
<LinearLayout>
...
</LinearLayout>
</LinearLayout>
</ScrollView>

Related

How to add space below scroll view

I have wrapped an activity in an scroll view like following.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<include layout="#layout/content_form" />
</ScrollView>
I have around 15 fields in the content_form layout, the issues is that the last item in content_form layout is attached with bottom.
I need to add a margin below the scroll view, i have tried giving margin to scrollviewand the last item of content_form field, but nothing is working.
I need to know how to add margin at the bottom of page when using scroll view.
If you want the scrolling margin to be within the content, it would be best to add it to content_form. You should be able to accomplish this by either adding paddingBottom to your parent container in that layout, or layout_marginBottom on your last view aligned to the parent bottom.
This make padding under the last item in scroll view. may be good for you
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:paddingBottom="80dp"
android:clipToPadding="false"
android:layout_height="match_parent">
You can either use Space or View for the purpose like
<Space
android:layout_width="100dp"
android:layout_height="match_parent"/>
Or,
<View
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
Here, you need to give padding, not margin.
Try giving padding to the ScrollView.
I've had issues with ScrollView being ill-behaved when it's direct childview is not a LinearLayout. So please try LinearLayout as direct child of your scrollView and place <include> layout inside LinearLayout.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
... your layouts go here ...
</LinearLayout>
</ScrollView>

Scrollview doesn't scroll after resizing it's child using animation

I have a LinearLayout inside a ScrollView. At some point I collapse and expand the LinearLayout. After that the scrollview does scroll. Any ideas?
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false">
<LinearLayout
android:id="#+id/detailsView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="visible"
>
........
</LinearLayout>
</ScrollView>
Expand and collapse is done using ValueAnimator over LayoutParams (height) of the LinearLayout.
Update: I think important is that it breaks down after animated expansion/collapse. Until that it works fine.
Update 2: For expanding again, I measured the expected height as follows:
int expectedHeight = detailsView.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
and animate expansion to that height. This measured the height to 2000+ instead of expected 800 something. Thus the sizes were equal and scrollview didn't scroll, although it didn't show the full hierarchy.
As a quick-fix I save the current height before collapsing and use it as the target height on expanding. The question is, can this be done automatically without dirty-height saving?
your scrollview is android:layout_height="wrap_content" just make it match_parent. I'm not sure but you can remove android:fillViewport too
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/detailsView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="visible"
>
........
</LinearLayout>
</ScrollView>

ScrollView white space at bottom

I'm having an issue with ScrollView which leaves a blank space at the bottom. It is filled with few TextViews and GridViews and should fill the whole RelativeLayout parent.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".showPictures">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView.../>
<GridView.../>
...
</LinearLayout>
</ScrollView>
</RelativeLayout>
Does anybody have an idea what's wrong?
Make your relative layout height match parent, also use android:fillViewPort = "true" in your scroll view
<RelativeLayout 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"
tools:context=".showPictures">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
//...
you can use this code to avoid extra padding on bottom of scroll view:
android:overScrollMode="never"
In my case I had a GridView inside a ScrollView that was causing this issue. It turns out the the layout_gravity in the GridLayout as 'center' was causing this issue.
'center_horizontal' makes more sense for a ScrollView anyway, but I added the ScrollView after the original layout was done (using 'center'), when I saw that the elements were going off-screen on some devices, hence the issue.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" // having this as android:layout_gravity="center" causes extra space at bottom!
android:columnCount="2">
....
Give weight to every child in the scroll view including linear layout with value 1

Elements get hidden in ScrollView

I have the following:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout_question_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="18sp"
android:layout_marginTop="18sp"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- some content -->
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="18sp"
android:gravity="right"
android:orientation="vertical" >
<!-- some more content -->
</RelativeLayout>
</LinearLayout>
</ScrollView>
However, when I turn the phone horizontal to force the scrollbar, the scrollbar appears but the content at the bottom of the screen gets hidden.
Any ideas? There are similar questions on SO but they don't seem to fix the problem. Thanks.
Reason of this are margins and ScrollView parent FrameLayout which has some margin problems. Margins are ignored in measuring and scroll view measure its size without these margins and that is why the bottom part of inner views in ScrollView is not visible.
You can solve it simple wrapping child LinearLayout with another LinearLayout without margins.

ScrollView not scrolling to the end of inner LinearLayout's bottom margin

I'm having issues with a Fragment consisting of a ScrollView containing a LinearLayout. I'm trying to create an effect where the LinearLayout has a white background and looks like a piece of paper scrolling on a coloured background. The way that I'm trying to achieve this is by having the ScrollView occupy the full space of the fragment and then the LinearLayout inside has android:layout_margin="16dp" to create the space around the "paper".
This way, the scroll bar of the ScrollView appears in the coloured background area, the margin at the top scrolls away along with the content and the margin at the bottom only scrolls in when one reaches the end.
Unfortunately in this configuration the ScrollView won't scroll all the way to the end and in fact cuts off a very small amount of the text at the bottom. I suspect that the ScrollView isn't taking into account its child's margins in its vertical scrolling distance. To solve this I've wrapped the LinearLayout in a FrameLayout which solves the issue, but seems superfluous. Any pointers on how to eliminate this unneeded container would be appreciated.
Note: setting android:padding="16dp" on the ScrollView and scrapping the margins doesn't have the desired effect, as then the padding appears on all four edges continuously, regardless of scroll position.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
tools:context=".ArticleFragment" >
<!-- This FrameLayout exists purely to force the outer ScrollView to respect
the margins of the LinearLayout -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:layout_margin="16dp"
android:background="#color/page_background" >
<TextView
android:id="#+id/article_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textIsSelectable="true" />
<TextView
android:id="#+id/article_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textIsSelectable="true" />
</LinearLayout>
</FrameLayout>
</ScrollView>
I remember having trouble with the ScrollView somehow not making it to the end of it's contents when the content layout had a top margin. I solved the problem with a little hack, adding an empty view to the end of the LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".ArticleFragment" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:layout_margin="16dp" >
<TextView
android:id="#+id/article_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textIsSelectable="true"
android:background="#color/page_background" />
<TextView
android:id="#+id/article_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:background="#color/page_background" />
<!-- Add a little space to the end -->
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
</LinearLayout>
</ScrollView>
I used a similar empty view also in the beginning of the LinearLayout to avoid top/bottom margins completely.
EDIT: I just realised that you also wanted the end of the "paper" to show up when reaching the end of the view. In that case you might want to set the background color to the TextViews instead of the layout itself. Then make sure there's no margin between the title and the article (use padding as separation).
EDIT2: I should learn to check when the questions were asked... Well, maybe this still helps someone. :)
The question is old, but I've had issues with ScrollView being ill-behaved when wrapping FrameLayout. It also doesn't seem to consider the margins of contained layouts. You could replace the FrameLayout with another single-child LinearLayout, which should measure correctly. I would've removed the FrameLayout completely and simply added summed margin with padding on the inner layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="26dp"
android:background="#color/page_background" >
<!--...-->
I'd get rid of the FrameLayout and make the LinearLayout the child of the ScrollView with match_parent set as the layout height. If that still doesn't work, consider replacing the bottom margin with another arbitrary View with the desired height and background as the last item in the LinearLayout.

Categories

Resources