I'm trying to make an Android layout: 3 components inside a vertical LinearLayout. The center component is a ScrollView that contains a TextView. When the TextView contains a significant amount of text (more than can fit on the screen), the ScrollView grows all the way to the bottom of the screen, shows scrollbars, and pushes the last component, a LinearLayout with a Button inside, off the screen.
If the text inside the TextView inside the ScrollView is short enough, the button at the bottom of the screen is positioned perfectly.
The layout I'm trying to achieve is:
The XML for the layout I've written is:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:text="Title />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:textColor="#FFFFFF"
android:background="#444444"
android:padding="10dip" />
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button android:id="#+id/login_button"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:text="#string/next_button"/>
</LinearLayout>
</LinearLayout>
The scrollview is the second view object and is set to wrap_content, which is more than the screen.
I recommend a RelativeLayout. Top textview first with android:alignParentTop="true", the bottom LinearLayout next with android:alignParentBottom="true" and the scrollview listed last in the xml with the value android:alignBelow="#id/whatYouCallTheHeader.
This will align the bottom bar at the bottom of the screen, and the header at the top, no matter the size. Then the scrollview will have its own place, after the header and footer have been placed.
you should go for relativeLayout rather than LinearLayout. And you can use some properties like alignBelow and all.
Try adding a layout weight into the ScrollView ie.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
This worked for me in a situation almost identical to the one you're presenting but left me wondering why, because it is counter-intuitive that increasing the layout weight of a control from 0 (the default if you don't specify a layout_weight) to 1 should make a control which is already using too much space smaller.
I suspect the reason it works is that by not specifying a layout_weight you actually allow the layout to ignore the size of the scroll view relative to other controls and conversely if do specify one you give it permission to shrink it in proportion to the weights you assign.
![Fixed Header-Footer and scrollable Body layout ][1]
This is what you are looking for . Most of the app in android had this type of layout ,
a fixed header and footer and a scrollable body . The xml for this layout is
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:background="#5599DD"
android:layout_height="fill_parent">
<!-- Header goes here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:textSize="20sp"
android:layout_gravity="center"
android:text="Title" />
<!-- Body goes here -->
<ScrollView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:text="#string/lorem_ipsum"
android:textColor="#FFFFFF"
android:padding="10dip" />
</ScrollView>
<!-- footer goes here -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/login_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentRight="true"
android:text="Button"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Related
I have an Android layout question. I have a display where I am putting some text into the middle of a view that has a header at the top and three buttons at the bottom. What I am having trouble with is getting the TextView (which is inside a ScrollView) to stretch to fill up the available screen space. If I set the layout_height of the ScrollView to "fill_parent" the three buttons are pushed off the bottom of the screen. If I set it to "wrap_content" it is only as large as is needed to support the text that is put into the TextView.
Here is the XML for the layout I am using:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout android:orientation="horizontal"
android:gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher">
</ImageView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
style="#android:style/TextAppearance.Large"
android:text="#string/meetingdetail" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
<Button android:id="#+id/navigation"
android:text="#string/naviation"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button android:id="#+id/mapsingle"
android:text="#string/mapsingle"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button android:id="#+id/goback"
android:text="#string/goback"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Could someone suggest what would work best to make the ScrollView with the TextView fill up the available space but still allow the three buttons to appear?
Set the height of the ScrollView to 0dp and its weight to 1.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
However if you don't plan to have more than one views scrollable you should remove the ScrollView and use:
android:scrollbars="vertical"
attribute on your TextView since the TextView is scrollable itself.
Just replace your ScrollView tag code to..
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
It will work fine, if still you have any problem then tell me. if works then accept as answer.
Say I wanted to list buttons so that the last one was anchored to the bottom of the screen, how would I go about this. From my understanding, LinearLayout will give me the 'list' of buttons but it will be anchored to the top. RelativeLayout, on the other hand, will allow me to anchor to the bottom but each and every element will have to have a reference to the next element and the XML file will be in reverse order (so that references are valid).
How should I approach this?
EDIT: Apologies, this would be roughly what I would be looking for -
You can try adding an extra LinearLayout with a weight of 1 to take up all of the remaining space, and push the list of buttons to the bottom of the Activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/widget32"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
<Button
android:id="#+id/widget33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Sample XML is for a single button that gets pushed by a LinearLayout to the bottom of the Activity; root layout is Linear too.
i have a hard time understanding your question exactly.
But i assume that what you want is a horizontal list of buttons which is anchored to the bottom of the screen?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- put your other views in here -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/button_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="5dp"
android:text="cancel" />
<Button
android:id="#+id/button_ok"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="5dp"
android:text="ok" />
</LinearLayout>
</LinearLayout>
Here's the layout for a custom Alert Dialog I've been working on. It's just a TextView with a CheckBox underneath:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/help_dialog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp" />
</ScrollView>
<CheckBox
android:id="#+id/display_help_dialogs_checkbox"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/display_help_dialogs" />
When the TextView's textSize is sufficiently large (i.e. when the ScrollView is actually "put to use"), the CheckBox is nowhere to be seen.
Thanks for the help,
Mitchell
I believe your ScrollView is pushing the Checkbox outside the bounds of the layout. Try something like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/help_dialog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp" />
<CheckBox
android:id="#+id/display_help_dialogs_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/display_help_dialogs" />
</LinearLayout>
</ScrollView>
You may need to specify dimensions of the scrollview in this case, but what should happen is the LinearLayout becomes bigger than the area designated in the ScrollView. The ScrollView will then allow the user to scroll down the layout to see the rest.
Good Afternoon,
I have a list being generated gradually on the users screen, (right now the list is sitting in a scrollview but that might not be the final resting place.) Above the scrollview are a few buttons, and below the scrollview are a few buttons. Scrollview takes up whole middle of the screen.
Right now, as the list is generated, it goes under the buttons below the scrollview. I would like it however to stop at the top. Also looking for it to always display the last line, rather than the new information start disappearing at the bottom.
I know this is probably confusing so if you have any questions please let me know.
Right now the XML looks a little something like this, and its layed out in this order on the screen too.
<Button
android:text="Ok"
android:id="#+id/buttonOk"
android:layout_height="wrap_content"
android:layout_width="75sp"
android:layout_below="#+id/textHoleNumber"
android:layout_alignParentRight="true"></Button>
<ScrollView <-- ***would like this to line up under the OK button***
android:layout_height="wrap_content"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_below="#+id/buttonMinus">
<TextView
android:id="#+id/textScoreCard"
android:layout_height="wrap_content"
android:text="Score card info goes here"
android:textSize="20sp"
android:layout_width="fill_parent"></TextView>
</ScrollView> <-- ***would like this to stay above linear layout***
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/buttonSave"
android:text="Save"></Button>
<Button
android:id="#+id/buttonReset"
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_toRightOf="#+id/buttonSave"
android:layout_alignTop="#+id/buttonSave"
android:layout_alignBottom="#+id/buttonSave"
android:text="Reset"></Button>
</LinearLayout>
Always use Scrollview inside linear layout and give android:layout_weight="1". Try following example it will work..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#null">
<LinearLayout android:id ="#+id/layout_above_scrollview" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ScrollView android:id="#id/android:list" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1">
<LinearLayout android:id ="#+id/layout_above_scrollview" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
// Your components........
</LinearLayout>
</ScrollView>
<LinearLayout android:id="#+id/add_app_done_layout" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_marginTop="5dp"
android:layout_marginLeft="50dp"
android:orientation="horizontal" android:layout_alignParentBottom="true">
<Button android:id="#+id/add_app_done" android:text="Done"
android:layout_width="100dp"
android:textStyle="bold" android:layout_height="wrap_content" />
<Button android:id="#+id/add_app_revert" android:text="Revert"
android:layout_width="100dp" android:layout_marginLeft="5dp"
android:textStyle="bold" android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
If you're talking about what I think you are, try adding a margin to the bottom of the scrollview, and a negative margin to the top of the linear layout. For instance:
<ScrollView android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="60sp">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</LinearLayout>
</ScrollView>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-60sp">
</LinearLayout>
As for scrolling to the bottom of the scrollview when a new item is added, look at How to scroll to bottom in a ScrollView on activity startup.
Note: This is assuming you have your ScrollView and the LinearLayout beneath it all contained in a vertical LinearLayout.
Hy!
I have two pictures on the view and a button at the buttom.
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="vertical">
<TextView android:layout_height="wrap_content" android:id="#+id/mainscreen" android:layout_width="fill_parent" android:text="Selected Channel" android:gravity="center" android:layout_alignParentTop="true"></TextView>
<ImageView android:id="#+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/mainscreen_state" android:layout_above="#+id/mainscreen_btchange"></TextView>
<ImageView android:layout_width="wrap_content" android:layout_centerHorizontal="true" android:layout_height="wrap_content" android:id="#+id/ImageAd" android:layout_gravity="center" android:layout_below="#+id/mainscreen"></ImageView> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/mainscreen_btchange"
android:text="Change State"></Button>
</RelativeLayout>
</LinearLayout>
My Question: How to shrink the pictures that all elements of the layout are shown?
For more complicated layouts where I need to ensure a bunch of items can all be displayed, I usually start with a RelativeLayout as my outermost container. I dock whatever needs to be at the extremities with layout_alignParentTop and layout_alignParentBottom (in the case of vertical layouts, which yours seems to be), and then I work my in making the next set of elements relative to them. Basically, start at the edges and work your way in.
So, in your case, the Button should have the attribute android:layout_alignParentBottom="true", and the TV should have android:layout_above="#+id/mainscreen_btchange". The TextView at the top should have android:layout_alignParentTop="true" and the ImageView underneath it should have android:layout_below="#+id/mainscreen"