I am trying to make a stacked layout with a fixed header, expandable body and fixed footer. I am very close however the body section with the webview displays behind the footer rather than between the header and footer. TIA
Jim
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/header"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/header"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Karen" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_below="#id/header"
>
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
/>
<LinearLayout
android:id="#+id/footer"
android:layout_width='fill_parent'
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:background="#000000"
>
<EditText
android:id="#+id/inputText"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Is on the bottom"
android:layout_weight="1"
android:textSize="15sp"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textSize="15sp"
android:text="send" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
I am trying to make a stacked layout with a fixed header, expandable body and fixed footer
Step #1: Make the root layout a RelativeLayout.
Step #2: Add the header as a child of the RelativeLayout, anchored to the top (android:layout_alignParentTop="true")
Step #3: Add the footer as a child of the RelativeLayout, anchored to the bottom (android:layout_alignParentBottom="true")
Step #4: Add the body as a child of the RelativeLayout, anchored to the header (android:layout_below="...") and footer (android:layout_above="...")
SOLVED.
I needed to reorder the items in the .xml file by putting the center item (webview) at the bottom and add android:layout_above="#id/footer".
I learned that when android processes id's they must be defined prior to using then in directives such as android:layout_above="#id/footer".
This is much like javascript processing on page load, the functions have to be defined prior to execution.
BTW thanks to everyone at StackOverFlow, you make this an invaluable resource to developers.
Related
I have a layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="#dimen/action_bar_default_height"
android:layout_marginTop="25dp"
android:background="#drawable/gradient"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageButton ... />
<TextView ... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView ... />
<ImageButton ... />
<ImageButton ... />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- All extra views are inflated here, if needed -->
</LinearLayout>
<!-- Main view -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<!-- HERE I WANT TO PUT A FOOTER -->
<LinearLayout
android:id="#+id/FOOTER"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- footer.xml WILL BE INFLATED HERE -->
</LinearLayout>
</LinearLayout>
The footer is another .xml file (footer.xml) that will be inflated in the FOOTER LinearLayout.
I tried to change FOOTER to RelativeLayout and add android:layout_alignParentBottom="true" to the footer.xml LinearLayout, but it did not work.
footer.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
...
</LinearLayout>
Any ideas?
Since all of your LinearLayout in you XML are "wrap_content", you need to set the weight of one of them to be "1" so that guy will actually takes all the possible space. I would give it to the "Main View". basically you should add android:layout_weight="1" to it.
Changing footer to relativelayout won't work. those "relative parent bottom" stuff works if the PARENT is relative layout. not the child.
Try adding
android:layout_weight="1"
To the LinearLayout you want to take up all of the extra vertical space (I assume this would be the one under your Main view comment?)
That will force the footer linear layout to the bottom of its parent.
Also, you may want to consider just using an include tag for your footer.xml layout instead of placing it as a child of your LinearLayout with id FOOTER.
So you should be able to remove the LinearLayout with id FOOTER altogether and replace it with an include tag.
Something like:
<include android:id="#+id/FOOTER" layout="#layout/footer" android:layout_width="fill_parent" android:layout_height="wrap_content"/>
I can't see any reason why changing the patent layout to relative wouldn't work. Try removing all of the XML except the footer and see if it works. Then add it back in bit by but
In AndroidSlidingUpPanel, Usage says..
To use the layout, simply include com.sothree.slidinguppaneldemo.SlidingUpPanelLayout as the Root element in your activity Layout. Make sure that it has two children. The first child is your main layout. The second child is your layout for the sliding up panel. Both children should have width and height set to match_parent. The following code is the sample code included in library.
<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=".DemoActivity" >
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Main Content"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="34dp"
android:gravity="center|bottom"
android:text="The Awesome Sliding Up Panel"
android:textSize="16sp" />
<TextView
android:id="#+id/brought_by"
android:layout_width="match_parent"
android:layout_height="34dp"
android:autoLink="web"
android:gravity="center|top"
android:text="Brought to you by http://umanoapp.com"
android:textSize="14sp" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitStart"
android:src="#drawable/graphic" >
</ImageView>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
The result of above xml layout is
I replaced the first child layout TextView(Main Content) with LinearLayout(any layouts) and it gives NullPointerException in Graphical Layout.
Close your layout by adding:
</RelativeLayout>
after
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
Please check the usage of the Umano library for your app. Here it is clear written that there should be exact two layout as child in the slidingUpPanel view. You can take it as any layout.
I have already try same thing with the RelativeLayout and LinearLayout and it works like charm.
Please let me know if your issue not resolved by this.
Enjoy Coding... :)
In my layout, I need a header, a list-view, and a footer with a TextView. The TextView needs to be resizable to up to 5 lines. Think facebook chat, where you have the blue header with the name of your friend, the middle content pane, and a text box down below, that grows as you type stuff in:
[header] a fragment that takes up about 50dp
[content]
[content]
[content]
[content] something like a ViewGroup with a ListView in it
[content]
[content]
[content]
[footer] a ViewGroup that contains an EditText and Buttons
I've tried all sorts of different layout settings, but can't get it right. Either the footer takes up all the space, or the content covers the footer.
Here's what I have so far:
<LinearLayout ...>
<!-- Slot to put Header fragment in -->
<FrameLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Here's where the content goes. This is supposed to be a ListView
inserted as a fragment -->
<FrameLayout
android:id="#+id/content"
... />
<include
android:id="#+id/footer"
... />
</LinearLayout>
I left out the layout_width and layout_height values empty, because I don't know what to set them to.
UPDATES
Initially, I thought the problem was because my EditText was set to maxLines=5 and TextMultiline, but I tried removing everything but one button with a hardcoded height, and the insert still covered everything. I also tried setting <footer below="content"> but then content just covered footer
The problem was that the footer layout included is another RelativeLayout. The footer layout contains elements that set layout_alignParentBottom="true", which made the footer layout take up the entire screen. I have no idea why it would do that, but that's what happens.
For creating a UI like this create a layout
header.xml
<?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="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:text="xyz"
android:textSize="10dp" />
</LinearLayout>
for footer:
footer.xml
<?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="wrap_content"
android:orientation="horizontal" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:text="xyz"
android:textSize="10dp" />
</LinearLayout>
Create another layout that will contain listView as you said :
main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >
**<include layout="#layout/header.xml" android:layout_alignParentTop="true"/>**
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
>
</ListView>
**<include layout="#layout/footer.xml" android:layout_below="#+id/listview" android:layout_alignParentBottom="true"/>**
</RelativeLayout>
check this...I hope it helps. At the moment I have defined an array.xml in Values folder with some empty entries for ListView. You will have to handle it with code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="HEADER" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/chats"
android:layout_weight="1">
</ListView>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="5"
android:inputType="textMultiLine"
android:hint=" Please enter your Chat" />
</LinearLayout>
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>
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>