What I want to do is, make layout like this:
Title
Date
Long text with scrolling
Navigation bar stick to the bottom
Well I have done everything, however there is a little problem with scrolling. I want only to scroll text. Title and date should be stick to the top, and nav bar to the bottom of activity. And yes, it works, but my nav bar overlaps text :/
I tried everything, there is one solution I found, set fixed height for Scrollview, but this will not work on every devices well, isn't it? I probably could do some calculation in code, and on it change height, but I would like to stay in XML.
Any one have any suggestions?
Here is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="fill_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="#+id/feed_title"
style="#style/h1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="#+id/feed_info"
style="#style/h2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="#+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="#drawable/ic_fav_off" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="#+id/feed_text"
style="#style/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Loren ipsum full tekst" />
</ScrollView>
</LinearLayout>
<!-- Buttons -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="#+id/go_to_article"
style="#style/button_screen"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="#string/feed_show_full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/next_feed"
style="#style/button_screen"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/button_arrow_up" />
<Button
android:id="#+id/share_feed"
style="#style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="#string/feed_share" />
<Button
android:id="#+id/delete_feed"
style="#style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="#string/feed_delete" />
<Button
android:id="#+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/button_arrow_down" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
</RelativeLayout>
Here are the things I have changed:
Moved top layout to bottom
Gave bottom layout name android:id="#+id/bottom_layout"
Gave top layout a name android:id="#+id/top_layout" (Not necessary just for clarity)
Now top layout will have these properties:
android:layout_above="#id/bottom_layout"
android:layout_alignParentTop="true"
The first one is to make top layout anchored above bottom layout.
Second one is to align top edge of top layout to parent's top. Which in this case is RelativeLayout.
Now bottom layout will have these properties:
android:layout_alignParentBottom="true"
It will tell that bottom edge of bottom layout matches with bottom edge of parent (which is RelativeLayout)
Below is the fully working layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Buttons -->
<LinearLayout
android:id="#+id/bottom_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="#+id/go_to_article"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="Feed full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/next_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:id="#+id/share_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="share" />
<Button
android:id="#+id/delete_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="delete" />
<Button
android:id="#+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
<LinearLayout
android:id="#+id/top_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottom_layout"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="#+id/feed_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="#+id/feed_info"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="#+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="#+id/feed_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/long_test" />
</ScrollView>
</LinearLayout>
</RelativeLayout>
Did you try to put a weight to the scroll layout ?
LinearLayout
- LinearLayout
-- Title
-- Date
- ScrollView layout_weigth=1
-- TextView
- LinearLayout
-- Button
-- Button
-- Button
Drag the bottom edge of the LinearLayout (lets call it l1) holding your text and align it to the top edge of the linear layout holding your navigation bar (let's call it l2). So that the AbsoluteLayout.above on l1 is equal to l2.
<LinearLayout android:id="#+id/l1"
android:layout_above="#+id/l2">
</LinearLayout>
Like Jonas says, but to give you a litte more, make sure you fill in the other stuff.
<LinearLayout
android:layout_height="fill-parent">
<LinearLayout
android:layout_height="wrap_content">
put your title and things in here
</LinearLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_weight="1"> <!-- this makes it not overlap the layout(navbar) below-->
put your title and things in here
</ScrollView>
<LinearLayout
android:layout_height="wrap_content">
put your nav bar stuff in here
</LinearLayout>
</LinearLayout>
If you do not set the layout_weight, the scrollview will actually push the navbar out off the bottom of the screen in this configuration. It has something to do with how the space for layouts is reserved, I'm not completely sure why, but adding weight delays the reservation till later.
Since the scrollview is filling the parent but still is part of the linear layout, the layout will make sure to accomodate your lower navbar, and unlike the Relative Layout there will be no overlap.
Related
The contents of my list view get hidden behind the button as follows:
The xml file is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
>
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
/>
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:text="Send"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="addItems"
>
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content"
>
</EditText>
</RelativeLayout>
</RelativeLayout>
The TextView for each row is as follows:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content
android:layout_gravity="right"
android:gravity="right"
android:textSize="20sp"
/>
What should i do to align it properly (as in above the button)?
Also when the listView is with just one or two entries, and when the keyboard is opened to type, the whole view shifts? How do I fix that as well? Thanks in advance
Cleaned up and corected the code a bit. Perhaps this is what you were looking for. Let me know if it works. Cheers !
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" />
<EditText
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_toLeftOf="#id/Button" />
</RelativeLayout>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/InnerRelativeLayout" />
</RelativeLayout>
adding android:layout_above="#+id/InnerRelativeLayout" to your ListView.
RelativeLayout has child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
For put your InnerRelativeLayout layout at Top add android:layout_alignParentTop="true" to your InnerRelativeLayout and remove android:layout_alignParentBottom="true"
Update: set up your Layout like below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/Beige "
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" >
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/Button"
android:hint="Enter text" >
</EditText>
</RelativeLayout>
<ListView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/InnerRelativeLayout"
android:drawSelectorOnTop="false" />
</RelativeLayout>
Output:
use android:layout_above="#+id/InnerRelativeLayout" in your listview
Make the outer RelativeLayout into a LinearLayout with orientation vertical. Then, for the ListView set layout_height as 0dp and layout_weight as 1. The ListView will fill up all the remaining space in the LinearLayout without overlapping other views.
Also, stop using fill_parent, it's been deprecated and you should use match_parent instead.
I found a little difficult to force layout (that is inside a SrollView) to be on the bottom of the screen.
Well, it would be easy if I detached this Bottom layout off the ScrollView and create it's own layout on the very bottom using Gravity, but
when someone expands some of the layouts (or rotate to landscape) the app is going to start using the ScrollView. At this moment I want the bottom
part to roll up and down with all the stuff and my "Stretching layout" should be only about 8dp (similar to upper dark-blue line) this time.
Here is my structure: (it is not so complicated how it might seems to be) :)
<ScrollView
android:id="#+id/lt_bcnbldmenu_scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_below="#+id/lt_FillScrl"
android:scrollbars="vertical" >
<LinearLayout //HELPER LAYOUT
android:id="#+id/lt_ScrollingPart"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:gravity="bottom"
android:orientation="vertical" >
<LinearLayout //only to make some space (upper dark-blue line)
android:id="#+id/lt_Fill1"
android:layout_width="fill_parent"
android:layout_height="6dp"
android:background="#70000000"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout //blue background layout
android:id="#+id/lt_bgLine"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/lt_Fill1"
android:background="#drawable/bg_line"
android:orientation="vertical" >
<LinearLayout //MENU LAYOUT
android:id="#+id/lt_Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:background="#drawable/bg_main"
android:orientation="vertical" >
<LinearLayout //Stuff (first layout)
android:id="#+id/lt_pic"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="top|fill_horizontal"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/img_bcnbldmenu_pic"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/bg_main_rd"
android:padding="16dp"
android:scaleType="fitXY"
android:src="#drawable/lighthouse" />
<EditText
android:id="#+id/edt_bcnbldmenu_adress"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:layout_weight="1"
android:background="#drawable/bg_main_d"
android:ems="10"
android:gravity="start"
android:hint="Beacon Adress..."
android:inputType="textMultiLine"
android:padding="16dp"
android:textColor="#222222"
android:textColorHint="#777777"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout //Stuff (second layout)
android:id="#+id/lt_group"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_main_ud"
android:orientation="horizontal" >
<EditText
android:id="#+id/edt_bcnbldmenu_group"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_gravity="left"
android:layout_weight="1"
android:background="#00000000"
android:ems="10"
android:gravity="center"
android:hint="Group..."
android:inputType="textPersonName"
android:minHeight="100dp"
android:textColor="#222222"
android:textColorHint="#777777" />
<Button
android:id="#+id/btn_bcnbldmenu_list"
android:layout_width="68dp"
android:layout_height="fill_parent"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:background="#drawable/btn_list"
android:gravity="center_vertical|center_horizontal"
android:textOff="#string/nothing"
android:textOn="#string/nothing" />
</LinearLayout>
<EditText //Stuff (third layout - actually only a textbox)
android:id="#+id/edt_BcnBldMenu_Description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:ems="10"
android:gravity="top|left"
android:hint="Description..."
android:inputType="textMultiLine"
android:minHeight="100dp"
android:padding="16dp"
android:textColor="#222222"
android:textColorHint="#777777"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout //STRETCHING LAYOUT (lower dark-blue line)
android:id="#+id/lt_Fill2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#70000000"
android:minHeight="32dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout //BOTTOM LAYOUT
android:id="#+id/lt_BottomMenu"
android:layout_width="fill_parent"
android:layout_height="62dp"
android:layout_weight="1"
android:background="#drawable/bg_line"
android:gravity="bottom"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:layout_weight="0"
android:background="#00000000"
android:scaleType="center"
android:src="#drawable/uncheck_press" />
<ImageView //empty image to make some space here
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:src="#00000000" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="100dp"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:layout_weight="0"
android:background="#00000000"
android:scaleType="center"
android:src="#drawable/crane" />
</LinearLayout>
</LinearLayout>
</ScrollView>
I hope there is an easy way to figure this out, because otherwise I will have to do it programmatically somehow which I really want to avoid.
Thanks in advance! I am looking for a solution for several hours.
Add this property to your ScrollView in XML:
android:fillViewport="true"
This will make the "Helper layout" at least as high as the ScrollView in the case if scrolling is not necessary.
The easiest way in my opinion of solving your problem is to check if the helper Linearlayout has less height than the ScrollView.
Also note that the preferred xml syntax is "match_parent" and not "fill_parent", which is technically deprecated.
1. In the XML change layout_height to wrap_content for the helper Linearlayout, also remove layout_gravity and gravity, useless code for this solution. You also add an empty view into the helper LinearLayout. Your XML should look like this:
<ScrollView
android:id="#+id/lt_bcnbldmenu_scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_below="#+id/lt_FillScrl"
android:scrollbars="vertical" >
<LinearLayout //HELPER LAYOUT
android:id="#+id/lt_ScrollingPart"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/lt_empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLayout //only to make some space (upper dark-blue line)
android:id="#+id/lt_Fill1"
android:layout_width="fill_parent"
android:layout_height="6dp"
android:background="#70000000"
android:orientation="vertical" >
</LinearLayout>
....
2. in the OnCreate(...) method of the respective Activity, add the following:
final ScrollView scrollView = (ScrollView)findViewById(R.id.lt_bcnbldmenu_scroll);
final LinearLayout helperLayout = (LinearLayout)findViewById(R.id.lt_ScrollingPart);
final View emptyView = findViewById(R.id.lt_empty);
// when post(...) is called all View heights have been measured by Android
helperLayout.post(new Runnable() {
#Override
public void run() {
int nHeightDiff = scrollView.getHeight() - helperLayout.getHeight();
// Does the ScrollView have more height than what it contains?
if (nHeightDiff > 0) {
// add padding to compensate for the missing height, you can also set the height directly via LinearLayout.LayoutParams(...)
emptyView.setPadding(0, nHeightDiff, 0, 0);
}
}
});
I am trying to make an Activity that has a WebView and a small bar at the bottom with height of 40dp which has buttons for refresh, back, forward, etc. The issue i'm facing is that I want the WebView to consume the height of the entire view except for the bottom 40dp.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/ic_action_example"
android:onClick="onClick"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
Above is what I have so far... Right now the browser has height of the whole screen with the RelativeLayout at the bottom (covering a piece of the browser). Is there anything else I can do to leave the bottom 40dp for the RelativeLayout only?
Put the webview so it layout_above the 2nd relative layout. Then change the relative layout to be aligned to parent bottom. That ought to work
Figured it out.
I was able to do the below:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_above="#+id/id_web_view_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:id="#+id/id_web_view_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/icon_refresh"
android:onClick="onClick"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
In the WebView I set the following property: android:layout_above="#+id/id_web_view_bar". That kept the bottom 40dp for the bar.
Kinda late... however might help any other arround...
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_xs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:background="#drawable/ic_action_example"
android:onClick="onClick"
android:textSize="14sp" />
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/button_xs"/>
</RelativeLayout>
In this case theres no need specific any height for the button or other view suppose to be after the webview.
I'm trying to make a screen with a TextView at the top, the ListView in the middle and a Button at the bottom. I'd like it to be so that the TextView always is the top at the screen and the button always is the bottom, and then the ListView is in between. When the ListView exceeds the "space in the middle" I'd like the scroll-function to be only between the TextView and Button. With my attempt it just expands beyond the TextView and Button.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvLOL"
android:layout_alignBottom="#+id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
</RelativeLayout>
See if this helps(the LinearLayout wrapping the ListView should be removed(and move the layout_above/below to the ListView) if you only use it to wrap the ListView and nothing else):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvLOL"
android:layout_above="#id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Just an alternative solution to that of #Luksprog, although that's definitely the way to go for more complex layouts. I would ditch the LinearLayout that surrounds the ListView though, as it doesn't add anything, except for unnecessary complexity in the view hierarchy.
A relatively simple layout as described in your question can also be written using a LinearLayout as root and a weight on the ListView to dynamically fill up all space inbetween the TextView and Button. This weight also pushes the Button all the way to the bottom, without pushing it off.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/paper" android:orientation="vertical">
<TextView android:id="#+id/tvLOL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:text="Standardvarer" android:textSize="40dp" />
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="0dp" android:layout_weight="1" />
<Button android:id="#+id/bNyVare" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Tilføj ny vare"
android:textSize="30dp" />
</LinearLayout>
Attached image shows an interface. Notice the black part on the bottom. How do I pull my footer image to the bottom? I used fill_parent on my middle layout but it fills the whole screen and the footer wont show.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<!-- Header Starts-->
<LinearLayout
android:id="#+id/headerForSearch"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#layout/headerbackground"
android:paddingTop="5dip"
android:weightSum="1"
android:gravity="center"
>
<ImageView
android:src="#drawable/footprint"
android:layout_width="wrap_content"
android:layout_weight="0.09"
android:layout_height="fill_parent">
</ImageView>
</LinearLayout>
<!-- Header Ends -->
<!-- About Us -->
<LinearLayout android:id="#+id/searchPBody" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip" android:orientation="vertical" android:layout_below="#+id/headerForSearch" android:layout_alignParentLeft="true">
<ImageView android:layout_marginTop="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/about_us_header"
/>
</LinearLayout>
<!-- Login Form Ends -->
<RelativeLayout
android:id="#+id/searchPBody2"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_marginRight="15dip"
android:layout_marginLeft="15dip"
android:layout_marginTop="15dip"
android:layout_marginBottom="15dip"
android:layout_below="#+id/searchPBody">
<TextView android:text="Place Name:"
android:layout_marginTop="23dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:id="#+id/placeNameTV" />
<EditText android:hint="Type here"
android:id="#+id/searchQuery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#+id/placeNameTV"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/searchBtnLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#+id/searchPBody2">
<Button
android:id="#+id/submitQuery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_below="#+id/searchQuery"
android:layout_toRightOf="#+id/placeNameTV"/>
</LinearLayout>
<!-- Footer Starts -->
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/searchBtnLayout"
android:background="#layout/footer_repeat"
android:gravity="center"
android:layout_alignParentBottom="true">
<TextView android:textSize="12dip"
android:textColor="#ffffff"
android:text = "© Meet&Co"
android:layout_width="wrap_content"
android:layout_marginTop="10dip"
android:layout_height="wrap_content"
android_weight="0.33" />
</LinearLayout>
<!-- Footer Ends -->
</RelativeLayout>
</ScrollView>
You can use weight attribute.
for example see the headerfooter.xml in this answer you can make your xml like that.
Using fill_parent on middle layout make your middle layout take all screen height left.
You can have relative layout as main layout and set footer android:layout_alignParentBottom="true".
Easiest way is to use a RelativeLayout for your entire layout.
You can then set the footer attribute layout_alignParentBottom="true" which moves it to the bottom. You will also have to set the body to layout_above="#+id/idoffooter", so that it does not disappear behind the footer.
Another way would be to use a vertical LinearLayout where you give the body a weight of 1, but the RelativeLayout way is imho better.