Android toolbar Layout issue - android

I am trying to make a bottom bar using the toolbar and aligning it to the parent bottom. This is how it looks:
But somehow as mentioned in the image, their is a lot of empty space due to which the layout is not exactly centered. Why is that happening?
bottom_tool_bar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimaryLight"
android:elevation="4dp"
android:layout_alignParentBottom="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/origin_select"
android:src="#mipmap/ic_action_play"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/destination_select_select"
android:src="#mipmap/ic_action_stop"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/poi_select"
android:src="#mipmap/ic_action_pause"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
The layout file for the concerned activity:
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
>
</include>
<include
android:id="#+id/bottom_tool_bar"
layout="#layout/bottom_tool_bar">
</include>
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/plot_path_map"
android:layout_below="#+id/tool_bar"
android:layout_above="#+id/bottom_tool_bar"
android:name="com.google.android.gms.maps.MapFragment"
/>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/submit_button"
android:text="Submit"
android:textColor="#FFFFFF"
android:layout_centerHorizontal="true"
android:background="#drawable/feedback_background"
android:layout_centerVertical="true"
android:textSize="20sp"
android:layout_alignParentBottom="true"
android:visibility="invisible"
android:onClick="submit_button_click"
/>
</RelativeLayout>


If you want to place the toolbar at the bottom, this is what you should be doing.
Use a LinearLayout with alignParentBottom="true"
<RelativeLayout
android:id="#+id/mainLyt"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Some layout things -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/bottomBar">
<!-- some scrolling content -->
</ScrollView>
<LinearLayout
android:id="#+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<!-- Some Buttons -->
</LinearLayout>
</RelativeLayout>
As you mentioned about spacing, which I believe is another question, you can modify it by using the following attributes inside your ToolBar.
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"


Make a separate layout file and name it tool_bar.xml and make sure LinearLayout is your root layout.
Then in your activity type this:
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
></include>
Then give weight of 0.3 to all your ImageViews and layout:width and layout:height as wrap_content


Use below line to avoid left side gap in activity class.
mToolbar.setContentInsetsAbsolute(0, 0);
Look below code for avoid top and bottom space.
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/origin_select"
android:src="#mipmap/ic_action_play"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
/>
In your image view width should be a wrap_content and height should be 0dp


For centering the Views you have many options two are the following (I believe the second is best):
First include weigthsum in your linearlayout, I like to use 100 since this helps me think in percentage, then include 2 stump framelayout in order to push your imageviews to the horizontal center and to let them keep responsive properties by using weight like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
android:orientation="horizontal"
>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="30"/>
<ImageView
android:id="#+id/origin_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
android:src="#mipmap/ic_action_play"
/>
<ImageView
android:id="#+id/destination_select_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"
android:src="#mipmap/ic_action_stop"/>
<ImageView
android:id="#+id/poi_select"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="13"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"
android:src="#mipmap/ic_action_pause"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="30"/>
</LinearLayout>
As you can see both framelayout have nothing inside but they help you push your other ImageViews to the center they both give you 60% of space used and leave you just another 40% for your ImageViews thus they have each 13%.
On the other hand you can use a RelativeLayout as your parent element instead of LinearLayout and position Imageview with id: destination_select_select align center to parent both horizontal and vertical and then position the other two imageviews at the side of the one centered in the middle. This option might be the best:
Like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/origin_select"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/feedback_background"
android:onClick="choose_origin_button"
android:src="#mipmap/ic_action_play"
android:layout_alignLeft="#+id/destination_select_select"
/>
<ImageView
android:id="#+id/destination_select_select"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="match_parent"
android:background="#drawable/feedback_background"
android:onClick="choose_destination_button"
android:src="#mipmap/ic_action_stop"/>
<ImageView
android:id="#+id/poi_select"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignRight="#+id/destination_select_select"
android:background="#drawable/feedback_background"
android:onClick="choose_interest_button"
android:src="#mipmap/ic_action_pause"/>
</RelativeLayout>


To avoid top and bottom spaces,
Add this line
android:minHeight="0dp"
to the <android.support.v7.widget.Toolbar> properties.

Related

How can i include a child horizontal linear layout in a parent vertical linear layout in android xml visualizer?

In the image provided below the child horizontal layout(yellow) is covering only half of the screen and the other half is in maroon(parent vertical layout's colour).How can i make the horizontal layout cover the entire 2nd half?
image
>

Is this what you want? your question isn't clear.

This is what you want.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_dark"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_orange_light"
android:text="Demo Text" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:background="#color/red">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/desiredone"/>
</LinearLayout>
</LinearLayout>

Layout, one ViewGroup takes the 60% of the height, and the other one fills the rest

I've bounced around quite a bit and haven't been able to find a solution that matches what i'm trying to do.
I have 2 RelativeLayouts inside a LinearLayout.
I would like the first RelativeLayout to take up 60% of the screen.
I would like the second layout to take up the remainder of the screen.
I am using weights but I'm trying to see if there is a way that I can avoid using a secondary weight on the second RelativeLayout.
The reason for this is that the user has the ability through a Button click to hide the first layout.
In code I do this by setting the visibility of the first RelativeLayout to "Gone".
The problem is if I have weight set to .6 and .4 and sum of 1, when the first one is set to gone, the second one moves up correctly, but its height doesn't increase because it was set to 40%.
Ideally I could have it set to fill the remaining space on the screen and therefore when the first one is hidden, it will now take up all 100% of the screen.
Is this possible or do I need to do more programmatically when I hide the first View to increase the allowed height of the second view?
Hopefully this makes sense, if not let me know and i'll try to clarify further.
I've stripped out some of the contents of the RelativeLayouts for simplicity as well as some ids.
Code below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:breadCrumbNavigationLayout="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:id="#+id/linearlayout1"
android:focusable="true"
android:focusableInTouchMode="true"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/relativeLayout1"
android:layout_weight="0.6">
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame1" />
<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/progress"
android:indeterminateOnly="true"
android:keepScreenOn="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relative2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_below="#+id/relativeLayout1" />
<ListView
android:id="#+id/list"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp" />
</RelativeLayout>
</LinearLayout>

You can use Android Support Library's Percentage Relative Layout to achieve this.
Percentage Relative Layout
import percentage support library by adding following line to your build.gradle(app level),
compile 'com.android.support:percent:24.2.1'
And Your XML file will be,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:breadCrumbNavigationLayout="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:id="#+id/linearlayout1"
android:focusable="true"
android:focusableInTouchMode="true"
android:weightSum="1">
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="0dp"
android:layout_width="match_parent"
app:layout_heightPercent="60%"
android:id="#+id/relativeLayout1"
>
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame1" />
<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/progress"
android:indeterminateOnly="true"
android:keepScreenOn="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relativeLayout1"
android:id="#+id/relative2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_below="#+id/relativeLayout1" />
<ListView
android:id="#+id/list"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp" />
</RelativeLayout>
</android.support.percent.PercentRelativeLayout>
</LinearLayout>
Once you set,
relativeLayout1.setVisibility(View.GONE);
you are able to see that the Relative layout 2 will occupy the whole parent space.
I hope it will help you. All the best.

Make View fill the gap in the middle but leaves space to its bottom siblings

Hi I am kinda stump right now. I thought this is possible in Android XML.
I wanted to make a layout like this:
The problem is the small two elements that are side by side. When I make the view#2 to match the height, I am expecting that it will also respect the space of its other sibling. I was wrong but I now understand. When I set the layout_height of view#2 into match_parent, it occupies the remaining space and the view#3 and view#4 are put into bottom-most part and are no longer visible in screen.
I want it that view#2 will expand in the middle but still make some space for view#3 and view#4 and some elements below it and not to be pushed way down below.
Here is what I am doing right now:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:fitsSystemWindows="true"
tools:context=".TaskActivity">
<android.support.design.widget.TextInputLayout
android:id="#+id/textinput_layout_note_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp">
<EditText
android:id="#+id/edittext_task"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:textSize="32sp"
android:padding="8dp"
android:hint="#string/edittext_task_title_hint"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/textinput_layout_note_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textinput_layout_note_title">
<EditText
android:id="#+id/edittext_todo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="1"
android:gravity="top"
android:hint="#string/edittext_task_content_hint"/>
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textinput_layout_note_description"
android:orientation="horizontal">
<ImageButton
android:id="#+id/imagebutton_insert_note"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_content_add_black"
android:contentDescription="#string/content_description_choose_note"
style="?android:attr/borderlessButtonStyle" />
<ImageButton
android:id="#+id/imagebutton_expand_note"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_open_in_new_black_24dp"
android:contentDescription="#string/content_description_expand_note"
style="?android:attr/borderlessButtonStyle" />
</LinearLayout>
</RelativeLayout>
I've used LinearLayout combined with layout_weight but this gets more and more slow as I have some nested views that also requires weight. I wanted this to be done relatively.
Any ideas how I can achieve this layout?
Thank you!

I wanted this to be done relatively.
RelativeLayout is not a magic bullet for performance.
Any ideas how I can achieve this layout?
Try:
<RelativeLayout
...>
<android.support.design.widget.TextInputLayout
android:id="#+id/textinput_layout_note_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingTop="16dp">
...
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/textinput_layout_note_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textinput_layout_note_title"
android:layout_above="#+id/whatever_this_thing_is"/>
...
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:id="#id/whatever_this_thing_is"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
...
</LinearLayout>
</RelativeLayout>
(where the ... bits are for the stuff you already have, removed to keep the listing shorter)
IOW:
Anchor the top view to the top
Anchor the bottom view to the bottom
Anchor the middle view to be below the top and above the bottom, causing it to stretch to fill the intervening space

Try this approach !, i haven't tried it in android studio, but it should do the trick.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/viewTop"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentTop="true"/>
<View
android:id="#+id/viewMiddle"
android:layout_above="#id/viewBottom"
android:layout_below="#id/viewTop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="#+id/viewBottom"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentBottom="true">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"/>
</LinearLayout>
</RelativeLayout>

How to fill space between two views within a RelativeLayout

I have two views. The top view is set to ...
android:layout_alignParentTop="true"
And the bottom is set to ...
android:layout_alignParentBottom="true"
How can I fill the remaining space with a third view? According to this answer here, I should use a frame layout like this ...
<FrameLayout
android:layout_below="#+id/toplayout"
android:layout_above="#+id/bottomlayout"/>
But then I am required to specify height and width. What height and width am I supposed to specify?

Here is my solution
<RelativeLayout
...
>
<YourLayout
android:id="#+id/toplayout"
android:layout_alignParentTop="true"
/>
<YourLayout
android:id="#+id/bottomlayout"
android:layout_alignParentBottom="true"
/>
<MiddleLayout
<!-- in your case it is FrameLayout -->
android:layout_width="match_parent"
android:layout_height="match_parent"
<!-- or android:layout_height="wrap_content" according to the_profile -->
android:layout_below="#+id/toplayout"
android:layout_above="#+id/bottomlayout"/>
</RelativeLayout>
Hope this help

You could take an advantage of weighting. android:layout_weight property usually fills whatever space is left (or split equally). In your case it would be something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="some_fixed_height"
android:orientation="vertical">
<LinearLayout
android:id="#+id/top_one"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/middle_one_that_fills"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:id="#+id/bottom_one"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>

As long as your root layout is a RelativeLayout and you're using layout_alignParentTop for the top view and layout_alignParentBottom for the bottom view, like you mentioned, then it should be working with no need for a middle view:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Alternatively, if your root view is a LinearLayout, you could use the lesser-known, but aptly-named Space view. Space is:
a lightweight View subclass that may be used to create gaps between components in general purpose layouts.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>

How do I align views at the bottom of the screen?

Here's my layout code;
<?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:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
<LinearLayout android:id="#+id/LinearLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom">
<EditText android:id="#+id/EditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</EditText>
<Button android:text="#string/label_submit_button"
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
What this looks like is on the left and what I want it to look like is on the right.
The obvious answer is to set the TextView to fill_parent on height, but this causes no room to be left for the button or entry field.
Essentially the issue is that I want the submit button and the text entry to be a fixed height at the bottom and the text view to fill the rest of the space. Similarly, in the horizontal linear layout I want the submit button to wrap its content and for the text entry to fill the rest of the space.
If the first item in a linear layout is told to fill_parent it does exactly that, leaving no room for other items. How do I get an item which is first in a linear layout to fill all space apart from the minimum required by the rest of the items in the layout?
Relative layouts were indeed the answer:
<?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">
<TextView
android:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
</TextView>
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/label_submit_button"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<EditText
android:id="#+id/EditText"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content">
</EditText>
</RelativeLayout>
</RelativeLayout>

The modern way to do this is to have a ConstraintLayout and constrain the bottom of the view to the bottom of the ConstraintLayout with app:layout_constraintBottom_toBottomOf="parent"
The example below creates a FloatingActionButton that will be aligned to the end and the bottom of the screen.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
For reference, I will keep my old answer.
Before the introduction of ConstraintLayout the answer was a relative layout.
If you have a relative layout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.
If your views at the bottom are not shown in a relative layout then maybe the layout above it takes all the space. In this case you can put the view, that should be at the bottom, first in your layout file and position the rest of the layout above the views with android:layout_above. This enables the bottom view to take as much space as it needs, and the rest of the layout can fill all the rest of the screen.

In a ScrollView this doesn't work, as the RelativeLayout would then overlap whatever is in the ScrollView at the bottom of the page.
I fixed it using a dynamically stretching FrameLayout :
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<!-- content goes here -->
<!-- stretching frame layout, using layout_weight -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<!-- content fixated to the bottom of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- your bottom content -->
</LinearLayout>
</LinearLayout>
</ScrollView>

You can keep your initial linear layout by nesting the relative layout within the linear layout:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:text="welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:text="submit"
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true">
</Button>
<EditText android:id="#+id/EditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/Button"
android:layout_alignParentBottom="true">
</EditText>
</RelativeLayout>
</LinearLayout>

The answer above (by Janusz) is quite correct, but I personnally don't feel 100% confortable with RelativeLayouts, so I prefer to introduce a 'filler', empty TextView, like this:
<!-- filler -->
<TextView android:layout_height="0dip"
android:layout_width="fill_parent"
android:layout_weight="1" />
before the element that should be at the bottom of the screen.

You can do this with a LinearLayout or a ScrollView, too. Sometimes it is easier to implement than a RelativeLayout. The only thing you need to do is to add the following view before the Views you want to align to the bottom of the screen:
<View
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1" />
This creates an empty view, filling the empty space and pushing the next views to the bottom of the screen.

1. Use ConstraintLayout in your root Layout
And set app:layout_constraintBottom_toBottomOf="parent" to let the Layout on the bottom of the screen:
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
</LinearLayout>
2. Use FrameLayout in your root Layout
Just set android:layout_gravity="bottom" in your layout
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
</LinearLayout>
3. Use LinearLayout in your root Layout (android:orientation="vertical")
(1) Set a layout android:layout_weight="1" on the top of the your Layout
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="welcome" />
(2) Set the child LinearLayout for android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom"
The main attribute is ndroid:gravity="bottom", let the child View on the bottom of Layout.
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal">
</LinearLayout>
4. Use RelativeLayout in the root Layout
And set android:layout_alignParentBottom="true" to let the Layout on the bottom of the screen
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
</LinearLayout>
Output

This also works.
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_below="#+id/linearLayout3"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_marginTop="20dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
</LinearLayout>

Following up on Timores's elegant solution, I have found that the following creates a vertical fill in a vertical LinearLayout and a horizontal fill in a horizontal LinearLayout:
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />

You don't even need to nest the second relative layout inside the first one. Simply use the android:layout_alignParentBottom="true" in the Button and EditText.

If you don't wish to make many changes, then you could just put:
android:layout_weight="1"
for the TextView having ID as #+id/TextView i.e
<TextView android:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</TextView>

Creating both header and footer, here is an example:
Layout XML
<RelativeLayout
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"
android:background="#color/backgroundcolor"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#FF0000">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#FFFF00">
</RelativeLayout>
</RelativeLayout>
Screenshot

For a case like this, always use RelativeLayouts. A LinearLayout is not intended for such a usage.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Place your layout here -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp" >
<Button
android:id="#+id/setup_macroSavebtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/setup_macroCancelbtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>

Use the below code. Align the button to buttom. It's working.
<?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="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/btn_back"
android:layout_width="100dp"
android:layout_height="80dp"
android:text="Back" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.97"
android:gravity="center"
android:text="Payment Page" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"/>
</LinearLayout>
</LinearLayout>

Use android:layout_alignParentBottom="true" in your <RelativeLayout>.
This will definitely help.

In case you have a hierarchy like this:
<ScrollView>
|-- <RelativeLayout>
|-- <LinearLayout>
First, apply android:fillViewport="true" to the ScrollView and then apply android:layout_alignParentBottom="true" to the LinearLayout.
This worked for me perfectly.
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:scrollbars="none"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/linearLayoutHorizontal"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>
</ScrollView>

You can just give your top child view (the TextView #+id/TextView) an attribute:
android:layout_weight="1".
This will force all other elements below it to the bottom.

This can be done with a linear layout too.
Just provide Height = 0dp and weight = 1 to the layout above and the one you want in the bottom. Just write height = wrap content and no weight.
It provides wrap content for the layout (the one that contains your edit text and button) and then the one that has weight occupies the rest of the layout.
I discovered this by accident.

I used the solution Janusz posted, but I added padding to the last View since the top part of my layout was a ScrollView.
The ScrollView will be partly hidden as it grows with content. Using android:paddingBottom on the last View helps show all the content in the ScrollView.

Categories

Resources