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.
Related
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>
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.
I've decided to use 2 RelativeLayouts for my app, one Layout for one portion of child Views on the screen to the left, the other for child Views to go to the right.
The problem is I don't know how to lay them out in XML so that the middle white space isn't included when I inflate my Layout.
This is what I want.
When I use 1 RelativeLayout, the middle white space is filled with the RelativeLayout, and I can't touch anything behind it.
Thank you very much for reading.
Do something similar to the following example.
This will create a LinearLayout with 2 RelativeLayouts using layout_weight to space the RelativeLayouts and then you can populate the RelativeLayouts with whatever you want.
The Buttons are just place holders for the example.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST1" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST2" />
</RelativeLayout>
</LinearLayout>
I have an activity that has a header at the top of the screen, some button elements at the bottom of the screen and then I'd like to devote the middle (whatever is left over) to a scroll view.
I know how to do everything except for how to assign a height to the ScrollView that would take into account what is above and below it and then take residence in between.
Would love to see an XML sample for how to accomplish this effect.
TIA
You can use relative layout for this.
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/header">
<!--Header elements here-->
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:alignParentBottom="true"
android:id="#+id/footer">
<!--Footer element here-->
</LinearLayout>
<ScrollView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/footer"
android:layout_below="#+id/header">
</ScrollView>
</RelativeLayout>
If you didn't want to switch to a RelativeLayout, I would think you could use android:layout_weight attributes to distribute screen real estate.
So in this case, you want to have Header(Top), scrollview(middle) and Buttons(Bottom), for this just take a RelativeLayout.
I've a ScrollView / RelativeLayout / FrameLayout and I inside put programmaticaly some widgets.
Here is the gui xml :
<?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"
android:background="#drawable/fond_app">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/titreAppli"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Big Application"
android:textStyle="bold"
android:textColor="#9b9b71"
android:textSize="15dp"
/>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/out"
android:layout_below="#id/titreAppli"
/>
</RelativeLayout>
</ScrollView>
In the FrameLayout, I put programaticaly another RelativeLayout, and other widgets inside.
With some widgets (text, image, buttons), I can't scroll. With other (a linearlist with text), I can scroll.
Why ? Is there a solution ?
Thanks.
First remove frame layout. You should use some other layout like relative instead of framelayout. Becasue Framelayout is not expanding and there fore scroll view is not working. If you use linear or relative then they will expand and you will be able to scroll.
Have you tried without the android:fillViewport="true" ?