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.
Related
Please refer to example below. I want to have the top layout (below encased in red) to be unmoving in a scrollview in my activity. I have a scrollview as the parent layout and then I thought having a relative layout for the top one would work, and align it to the top, but that didn't really work out as it still remained within the scrollview. I would like to have the users have the red-layout box remain static when they scroll down.
I figure I would also have to put in a topMargin at the top of the scrollview or something in order to fit the redbox layout in.
XML Code posted here: http://pastebin.com/bxdREbeG
Do something like this (hand code, for reference only):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/YourTopStaticView"
android:layout_width="match_parent"
android:layout_height="48dp"> //Or any other height you want
//Contents of the top view
</RelativeLyout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/YourTopStaticView">
//Contents of the ScrollView
</ScrollView>
</RelativeLayout>
As a side note, do not hardcode children into the ScrollView like that. Use the RecyclerView (which is an updated, modern replacement for ListView), which you will be expected to know how to use if you want to move into serious Android programming. It is actually super easy to use, once you get the hang of it :-)
You should use the ScrollView with only one child (official documentation - http://developer.android.com/reference/android/widget/ScrollView.html). According to your xml, your ScrollView is very complicated with a lot of child widgets.
The best option for you is to use a LinearLayout as the root for the whole container, a LinearLayout( or Relative) for the top layout containing the Reset and Save buttons, and a ListView for the long list that you have. ListView takes care of it's own scrolling. So you don't have to worry about that.
This will improve your code performance as well.
This should suit your needs:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout android:id="#+id/topPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Multi TTS Implementation"/>
<Button android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="SAVE"/>
<Button android:id="#+id/resetAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/save"
android:layout_centerVertical="true"
android:text="RESET ALL"/>
</RelativeLayout>
<ScrollView android:id="#id/scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/topPanel"
android:layout_alignParentBottom="true"
android:padding="5dp">
<!-- Your scrollable content here -->
</ScrollView>
</RelativeLayout>
Hey I have a scrollview from the top of the screen to a bit before the bottom of the screen because this is where my ad banner takes place. I want to have some pixels in between these elements ( between buttons and banner ) due the google policy. So far I did this with setting a value in dp. But as devices differ, this results in having a huge gap between the ad and the scrollview on some hi-res phones. This is why I'd like to set
<ScrollView
android:layout_height="(Screen_height-banner)-5px"
(of course I didn't even try it in this way, as this is no code, but I think it sums up pretty well what I plan to do)
Thanks a lot for your answers!
You can't query screen size in XML since it doesn't run at runtime, you can do this by using RelativeLayout and use alignments and margins.
in your case if Screen_height-banner represent a screen height and you want to position it at bottom and make a 5dp separator from end your XML would be
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp">
</RelativeLayout >
If you need to scale the scroll view instead of position it you xml would be
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding_bottom="5dp">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent">
</RelativeLayout >
You can user weight parameter. If you set weight of both layouts 0.5, this will share screen width equals for these layouts.
<LinearLayout
android:id="#+id/alt_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/orta_panel" >
<LinearLayout
android:id="#+id/altsol_panel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="center_horizontal"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/altsag_panel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="center_horizontal"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Use a RelativeLayout, set a Margin of 5px and use layout_above
If the following codes don't work for you, you're probably using a newer version of something, and you could try using android:bottom="80dp" instead of android:layout_marginBottom="5dp"
I am putting more than 15 buttons in one .xml file. But it seem only to be displaying the top 9 of them ? Why aren't the other buttons showed or can't I scroll down to see them?
I am using a LinearLayout with tags.
Are you using a LinearLayout perhaps to contain the buttons? Or any other layout that's not contained in a ScrollView? Good chance your buttons are being drawn, they are just outside your screen.
Wrap your layout in a ScrollView like so:
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="none" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- your buttons here -->
</LinearLayout>
</ScrollView>
This makes your layout scrollable, so you will be able to just scroll down and see your buttons.
Did you use this?
android:orientation="vertical"
Please post your code,
Are you wrapping everything is ScrollView?:
<ScrollView android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ScrollView>
More info http://developer.android.com/reference/android/widget/ScrollView.html
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.
I am attempting to make a ListView inside a table consume all of the available vertical space minus the space needed for an EditText control.
I have set every attribute I can think of here to make it work:
<?xml version="1.0" encoding="utf-8"?>
<TableRow android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF0000">
<ScrollView android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:id="#+id/conversation"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"/>
</ScrollView>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00FF00">
<EditText android:id="#+id/messagetext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="text|textAutoCorrect|textMultiLine|textImeMultiLine"
android:imeOptions="actionDone"/>
</TableRow>
I must be missing something, as the result is a fully filled horizontal, but both the ListView and EditText appear to be behaving as if their attributes were wrap_content.
Is there a particular reason you're using a TableLayout? I'm not very familiar with using them yet, but what you're trying to accomplish is simple with a RelativeLayout. Also, you don't need to place the ListView within a ScrollView, the ListView handles scrolling on its own. Here is an example of how you could accomplish this using a RelativeLayout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText
android:id="#+id/message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00FF00"
android:inputType="text|textAutoCorrect|textMultiLine|textImeMultiLine"
android:imeOptions="actionDone"
android:alignParentBottom="true"
/>
<ListView
android:id="#+id/conversation"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF0000"
android:layout_above="#id/message_text"
/>
</RelativeLayout>
This way, you first define the EditText to take up a certain amount of space (wrap_content, in this instance). Then, you define the ListView to fill the remaining space with fill_parent. Adding android:layout_above="#id/message_text" aligns the bottom edge of the ListView with the top edge of the EditText view.
I appear to have been missing an attribute android:layout_weight on the top TableRow. Evidently, anything over 2 makes it consume the rest of the vertical real estate. Can anybody explain why the special treatment for TableRows?
Don't use ListView inside of ScrollView, because ListView manages it's own vertical scrolling. Doing so will kill all optimization's done by the ListView
And don't anwser to your own posts. Rather edit your initial questions or add an comment.