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.
Related
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">
I tried to align my linearlayout at the bottom of my entire layout which is relative, and found the solution here that does it: How to align views at the bottom of the screen?
But why wouldn't this work also?
<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="com.sandbox.activities.ListActivity">
<ListView
android:id="#+id/my_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/search_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/my_listview"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/my_edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Enter Search Term" />
<Button
android:id="#+id/find_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Find"
android:onClick="findThings"/>
</LinearLayout>
If the listview turns out to be short, like 1 row, "search_footer" is just underneath it, and there is a huge gap below it.
1) "search_footer" is told to align at the bottom of the parent, which is the relativelayout. Since the relativelayout's height is match_parent, and it's the root layout, this means the whole height of the screen, so why wouldn't "search_footer" be at the bottom of the screen no matter the size of the listview?
2) Also, if I change the search_footer's height to match_parent, I expected a really tall button, but it remained unchanged-why?
Add to ListView this attribute
android:layout_above="#id/search_footer"
and remove
android:layout_below="#id/my_listview"
attribute from LinearLayout.
You specified that search_footer align to bottom of parent but also to be below the listview, so in the case that the list is short the search footer just stretches in the space between the listview and the bottom of the screen. you want to specify the footer to be aligned to the bottom of the parent and the listview to be above it:
<ListView
android:id="#+id/my_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/search_footer"
/>
<LinearLayout
android:id="#+id/search_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
When you change the height of the search_footer the buttons doe't change because they are set to android:layout_height="wrap_content". Your layout would normally change when you do this however in this case it didn't change either, due to the same reason as above
My Current Implementation
I have a HorizontalScrollView which I create in XML that houses a few LinearLayout children. I have added this code below.
There are two LinearLayout containers with the id's group_one and group_two and these are populated programmatically at run time.
I also fix the width of the HorizontalScrollView at run time depending on the amount of View objects I will be inserting.
This solution works great for when the children fit in the HorizontalScrollView without the need to scroll.
The Issue
As soon as I need to scroll (there are more children than can be displayed within the fixed width HorizontalScrollView) then the scrollbar will not go all the way to the right, even though I can see that the child layout is of the correct width, and I can see the scrollbar just will not go any further.
My Question
Why would there be a limit on the scrollbar moving any further right?
My Code
HorizontalScrollView XML
<!-- THIS IS WHERE THE PLUGIN BUTTONS ARE HOUSED -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"/>
</LinearLayout>
</HorizontalScrollView>
What Is Happening
This is an image of the correct scroll to the left. The edge of the scroll view starts on the right of the red bar. Notice the distance between the two.
This is an image of the incorrect scroll right. Compare the distances between the edges of the scroll view and where the scroll bar is stopping.
This is how I want it to look when I scroll at either end.
I have been playing with this for a while now and finally found the solution.
I was trying to add the left and right margins to the LinearLayout with the ID group_container. However for some reason the HorizontalScrollView was not respecting this and this is why I was seeing this issue.
Instead I added the left and right margins to the group_one and group_two LinearLayouts. Now the HorizontalScrollView respected these and it functions as I expected. Here is my modified code.
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
</LinearLayout>
</HorizontalScrollView>
set padding right to your scrollview like this :
android:paddingRight="20dp"
I've been struggling with this problem for awhile now. Basically, I've created a class that returns me a properly stylized GraphicalView chart; I have one class for bar charts and another for pie charts (I used renderer.setInScroll(true) BTW). I populate my Activity with a few charts and a few TextViews, but the more I add Views (any View) they are pushed off the top of the screen and there is a big empty space at the bottom of the scroll view.
My XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollingProfilePaid"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="00dp"
android:orientation="vertical">
<TextView
android:id="#+id/totalScore"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastScoresChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<TextView
android:id="#+id/totalTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<TextView
android:id="#+id/totalAverageResponseTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastTimesChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<!--...........-->
</LinearLayout>
</ScrollView>
What I've tried:
1.ScrollView->android:fillViewport="true"
2.Instead of specifying a height for the charts I set it in the java class using pastScoresChart.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, (int)(dens*350)));
3.Wrapping the ScrollView in a , using a child Relative Layout with android:alignParentTop="true" as the header, another child Relative Layout with android:alignParentBottom="true" as the footer, and changing the ScrollView to android:alignBelow="#id/header". This just made the Scrollview about 40px tall, seemingly making the problem worse.
4.Oodles of other things that I can't recall this second.
I've found a workaround of setting android:marginTop="500dp" (or a similarly large value) in the ScrollView will push the Views back down into their approximate respective positions. Unfortunately it is difficult to get it to fit exactly, and it worries me for device compatibliity. Any suggestions?
The empty space at the bottom of the ScrollView must be because of it's child (LinearLayout) attribute android:layout_gravity="center". Try to use like this:
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
OBS 1: The android:layout_marginTop="00dp" attribute is unnecessary.
OBS 2: fill_parent is deprecated starting from API Level 8 and is replaced by match_parent. So, use match_parent. More on: http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
OBS 3: Here is a tip about debugging layouts: change the background color of the views to see what are the bounds of each view.
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.