Sticking a view to bottom of scrollview - android

I have a weird behavior I cant figure out - I'm trying to stick a view to bottom of scrollview with no luck. I've already tried clipToPadding and fillViewport but none of them help. Any help?
My xml layout is -
<LinearLayout>
<FrameLayout/>
<ScrollView>
<LinearLayout>
<LinearLayout/>
<RelativeLayout/> <-- This is the problematic view
</LinearLayout>
</ScrollView>
</LinearLayout>
I want to stick the relative layout to bottom even when the scroll view is shorter then the screen length, it does fit the screen when clipToPadding is set to false however the relativelayout just laid in middle of screen after the linearlayout which ontop of him, when I set the fillviewport to true on the scrollview (and remove the cliptopadding) the scrollview is longer than screen but unscrollable which lead to the relativelayout being "invisible", any suggestions?

You can try using ConstraintLayout inside ScrollView:
Set fillviewport in ScrollView to True
Last element must be attached on the bottom with constraints
Last but one element (one who goes before last) should have constraint set to last element. Also you can add margin to have minimum distance between this and last element and manage its position with constraintVertical_bias.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
… Some elements with Constraints …
<TextView
android:id="#+id/last_but_one_element”
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/some_previous_element"
app:layout_constraintTop_toBottomOf="#+id/last_element"
android:layout_marginBottom=“40dp"
app:layout_constraintVertical_bias="0.1"/>
<Button
android:id="#+id/last_element”
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Try using a Relative layout instead of Linear layout inside scroll view and align the relative layout to bottom. But I'm not sure whether it will scroll after there is content.
<LinearLayout>
<FrameLayout/>
<ScrollView>
<RelativeLayout>
<LinearLayout android:alignParentTop="true" android:id="#+id/linearLayout" />
<RelativeLayout android:alignParentBottom="true" android:layoutBelow="#+id/linearLayout"/> <-- This is the problematic view
</LinearLayout>
</ScrollView>
Check if this works for you or not.

Related

ScrollView inside of a ConstraintLayout exceeds bounds of parent

I have the following structure for a fragment:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/credential_save_button">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
..................
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/credential_save_button"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textColor="#color/white"
android:textSize="#dimen/textSize"
android:text="#string/save_initialize"
android:drawableEnd="#drawable/button_right_arrow_blue"
tools:ignore="UseCompatTextViewDrawableXml"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
My expectation is that the save button would be locked to the bottom of the fragment, taking up as much height as it needs to, then the rest of the fragment would be filled with the scrollview and its fields.
Instead the scroll view exceeds the bounds of the Fragment, overlapping the save button and other elements on the page. It seems to always exceed the bounds by about half an element at the top and bottom (would guesstimate it as 20-30dp), no matter how many elements I add to it. If it has few elements in it such that it does not need to scroll, then everything appears correct and no elements are exceeding the bounds of the Fragment.
Changing it to a nested scroll view or adding the fill fillViewport attribute to it does not change anything.
Try setting
android:layout_height="0dp"
for the ScrollView to get it to expand from the top of the layout to the top of the TextView.
Also, don't specify match_parent for any child of ConstraintLayout. Always use 0dp and the appropriate constraints.

Android Constraint Layout height inside scrollview have no effect

In Android, I want to achieve a scroll view with fixed height on the screen, and the content inside also have a fixed height.
The scroll view height is 300dp, the direct child (relative layout) is 500dp, and the text view distance from top is 301dp. This means after I reached the text view, there is 200dp more bottom space for me to scroll from the relative layout height.
I manage to create the desired effect using the XML below.
<ScrollView
android:layout_width="match_parent"
android:layout_height="300dp" >
<RelativeLayout
android:layout_width="match_parent"
android:background="#FFC0CB"
android:layout_height="500dp" >
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/new_realm_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="301dp"
android:text="long text" />
</RelativeLayout>
</ScrollView>
But here is the problem, if I change the relative layout to constraint layout, now the scrolling will only scroll up to the text View at height 310dp, not of showing the 200dp empty space at the bottom.
Can someone explain why constraint layout is giving me this weird behavior?
According to Differences between ConstraintLayout and RelativeLayout, constraint layout "has dual power of both Relative Layout as well as Linear layout", it should be able to achieve what relative layout can achieve.
Try this:
<ScrollView android:layout_width="match_parent"
android:layout_height="300dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:background="#FFC0CB"
android:minHeight="500dp"
android:layout_height="500dp" >
<TextView
android:id="#+id/new_realm_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="301dp"
android:text="long text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
It seems like there is a bug in constraint layout or layout height cannot be applied to constraint layout in a scroll view but you can use minimum height attribute in constraint layout.
Adding android:fillViewport="true" to the ScrollView.

Nested layout inside CardView overlaps parent end

I have no idea how this can happen, but I have a ConstraintLayout with a CardView inside. Inside said CardView is a LinearLayout. That LinearLayout overlaps the parent on the end. Check the screenshot for more info. If I remove the android:layout_margin from the cardView, the inner layout looks good again, but adding margin to start seems to just push the entire layout to and over the end of the parent. It doesnt matter what sort of layout is used inside the CardView. The issue affects them all.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:background="#color/colorWhite">
..
<androidx.cardview.widget.CardView
android:id="#+id/wakeuptimer_status_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
.....
You need to change the Linearlayout height to match-parent instead of wrap_content. With wrap_content you aren't restricting the size of the Linearlayout view to the size of the CardView.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

View to fill and center contents in the remaining space Android

I have a LinearLayout which is a view that I need to display under another view, all within a ConstraintLayout. I want to LinearLayout's height to be dynamically equal to the space between the bottom of the above view, and the bottom of the parent. I've tried
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/sample_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:visibility="gone"
without success. I am very new at Android UI work so I'm not sure if I'm using the right layout. Can anyone suggest a better implementation, or a fix to my current attempt?
You means this?:
<TextView
android:id="#+id/your_linear_layout"
android:layout_width="200dp"
android:layout_height="0dp"
android:layout_marginEnd="56dp"
android:background="#0ff"
android:text="your LinearLayout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/above_view"
app:layout_constraintVertical_bias="0.0"/>
you can put the LinearLayout inside a RelativeLayout that is under the needed view, and make the height of the relative layout to fill the space, while you can make the linear layout to be in the center of the relative layout such as:
<RelativeLayout ... >
<LinearLayout
....
android:centerVertical="true"
</RelativeLayout>

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>

Categories

Resources