I want to have a Layout with 3 sections: header, content and footer in which the header and footer sections should stay fixed on top and at the bottom of the screen respectively. The content section in the middle is dynamic and can grow very long. In that case, I want it to be scrollable and still fit in the middle. So I tried something like this:
<RelativeLayout...>
<LinearLayout android="#+id/header"
android:layout_alignParentTop="true"
..../>
<ScrollView android:id="#+id/content"
android:layout_below="#id/header"
android:layout_above="#+id/footer"
...>
<LinearLayout
.../>
</ScrollView>
<LinearLayout android="#id/footer"
android:layout_alignParentBottom="true"
.../>
</RelativeLayout>
However when the content is long, the middle section grow and overlap with header and footer. Does anyone has a better idea on how to achieve this?
Finally, I achieved this by wrapping the ScrollView inside another LinearLayout. It seems redundant, but well it works. ScrollView seems does not play well with other LinearLayout inside RelativeLayout. Below are the codes:
<RelativeLayout...>
<LinearLayout android="#+id/header"
android:layout_alignParentTop="true"
..../>
<LinearLayout android:layout_below="#id/header"
android:layout_above="#+id/footer"
...>
<ScrollView ...
>
<LinearLayout android:id="#+id/content"
.../>
</ScrollView>
</LinearLayout>
<LinearLayout android="#id/footer"
android:layout_alignParentBottom="true"
.../>
</RelativeLayout>
Related
I have a relative layout fills the entire screen. I want to add a scrollview in the middle of it to wrap a bunch of content so that I can make it pan up when the soft keyboard gets displayed. However, as soon as I wrap it in a scrollview, the bottom most layout stops filling the remainder of the screen.
Here is the XML where I have the ScrollView commented out.
<include
android:id="#+id/top_bar_with_save_button"
layout="#layout/top_bar_with_save_button"/>
<FrameLayout
android:id="#+id/log_entry_title_frame"
android:layout_below="#id/top_bar_with_save_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/log_entry_title_frame"
android:layout_alignParentBottom="true">
<!--
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/log_entry_title_frame"
android:orientation="vertical"
android:background="#f00">
<!-- Lots of stuff in here -->
<EditText
android:id="#+id/log_entry_notes"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
android:gravity="top|left"/>
</RelativeLayout>
<!--
</ScrollView>
-->
</LinearLayout>
It looks like this:
But as soon as I remove the comment from the ScrollView it immediately compresses like this:
Why does this happen? I need it to fill the entire space on the screen, and I cannot figure out what is happening. Can anyone tell me how to fix this? Thanks!
You need to add the fillViewport="true" attribute to your ScrollView tag. Or you can add it programmatically with scrollView.setFillViewPort(true);. Otherwise, the ScrollView will wrap to its child's content height.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
... >
layout_height of scrolling container should be "wrap_content".
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.
I am trying to keep the ScrollView from taking too much space at the bottom of the screen as it keeps my two buttons from showing. I also don't want to manually set a height for the ScrollView.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
...
android:orientation="horizontal">
<Button .../>
<TextView .../>
<Button .../>
</LinearLayout>
<ScrollView
android:layout_width="math_parent"
android:layout_height="wrap_content">
<ImageView .../>
<ImageView .../>
<ImageView .../>
</ScrollView>
<LinearLayout
...
android:orientation="horizontal">
<Button .../>
<Button .../>
</LinearLayout>
</LinearLayout>
This is a generalized version of my layout. What is happening is that the ScrollView extends all the way to the bottom of the screen no matter how many items are in it. This causes the two buttons at the bottom of the screen to not be visible.
How can I stop this from happening without manually setting a height for the ScrollView?
I've used android:layout_height="wrap_content" for all my views.
Isn't this supposed to automatically distribute the height of the views to fit the screen's height?
(Wanted to include images, but my rep isn't high enough yet (-_-))
The way I would resolve this today is by using RelativeLayout as a base. Anchor the two LinearLayout's to the top and bottom of the RelLayout respectively. Then I would insert the ScrollView but I would make sure to set it's layout properties as follows:
android:layout_below="topLinearLayout"
android:layout_above="bottomLinearLayout"
Have you tried using layout_weight for the ScrollView. IIRC, if a non-zero weight is set for ONE element (and the corresponding dimension set to 0dp) then it'll fill up the remaining space in that dimension, after setting out the measurements for sibling views (in this case, the LinearLayout on top and bottom of the ScrollView.
Apologies, not got an Android environment to check and it's been a while.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout>
...
Something at the top
...
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
**android:layout_height="0dp"
android:layout_weight="1"**>
<ImageView .../>
<ImageView .../>
<ImageView .../>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
...
buttons
...
</LinearLayout>
</LinearLayout>
Here's an answer with more information about the layout_weight attribute.
I want the footer to be anchored at the bottom of the screen if and only if it can be anchored there without overlapping any other views.
The problem is that I don't know how many views are going to be added to the header or the footer.
If putting the footer at the bottom of the window would make it overlap, I want to put the footer at the bottom of the scrollview. (Maybe by adding it to the RelativeLayout with the rule that it needs to be below the top component?)
Here is a pic of what I'm trying to get:
desired result
Where:
1)The RelativeLayout contains both the TableLayout at the top, and the LinearLayout at the bottom.
2)The TableLayout expands downwards as TableRows get added to it.
3)The LinearLayout expands up from the bottom as views get added to it.
~~~
I'd like for the scrollview to grow in size only enough to fit the components without overlapping.
Thanks in advance for such awesome community support
I think you can solve it in linear layout. You set three blocks in linear layout: header, body, footer. Set body to fill_parent and layout_weight=1, this way body will expand to fill what left after header and footer taken its part from parent. Whole structure place into ScrollView.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow><TextView android:text="Text1"/></TableRow>
<TableRow><TextView android:text="Text2"/></TableRow>
</TableLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="#string/lorem_ipsum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:text="Text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="Text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
I tested this in Emulator of Android 2.1 and it looks it works.
My application containing different layouts.one of them is a linear layout.it's content is dynamically adding.i want to make this layout horizontally scrollable.for this i have put my layout in a scroll view.but still it s not scrolling...given below is my code
<LinearLayout android:id="#+id/scoreballparent_layout"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_above="#+id/score_layout">
<ScrollView android:layout_height="wrap_content"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
>
<LinearLayout android:layout_width="fill_parent"
android:id="#+id/scoreball_layout"
android:layout_height="wrap_content"
android:isScrollContainer="true"
android:scrollbars="horizontal">
</LinearLayout>
</ScrollView>
</LinearLayout>
Use HorizontalScrollView instead
Also your layout will become scrollabe after its contect can't fit layout area.
Simply use this in xml
android:fadeScrollbars="true" may be it works for you