How do I align views at the bottom of the screen

Question

Here s my layout code    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android orientation  vertical      android layout width  fill parent      android layout height  fill parent  gt        lt TextView android text   string welcome          android id    id TextView          android layout width  fill parent          android layout height  wrap content  gt       lt  TextView gt        lt LinearLayout android id    id LinearLayout          android orientation  horizontal          android layout width  wrap content          android layout height  wrap content          android gravity  bottom  gt                lt EditText android id    id EditText                  android layout width  fill parent                  android layout height  wrap content  gt               lt  EditText gt                lt Button android text   string label submit button                  android id    id Button                  android layout width  wrap content                  android layout height  wrap content  gt               lt  Button gt        lt  LinearLayout gt    lt  LinearLayout gt    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        lt  xml version  1 0  encoding  utf-8   gt       lt RelativeLayout     xmlns android  http   schemas android com apk res android      android layout width  fill parent      android layout height  fill parent  gt        lt TextView         android text   string welcome          android id    id TextView          android layout width  fill parent          android layout height  wrap content          android layout alignParentTop  true  gt       lt  TextView gt        lt RelativeLayout         android id    id InnerRelativeLayout          android layout width  wrap content          android layout height  wrap content          android layout alignParentBottom  true   gt            lt 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  gt           lt  Button gt            lt EditText             android id    id EditText              android layout width  fill parent              android layout toLeftOf   id Button              android layout height  wrap content  gt           lt  EditText gt        lt  RelativeLayout gt    lt  RelativeLayout gt

User · Answer

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.

User · Answer

For a case like this  always use RelativeLayouts  A LinearLayout is not intended for such a usage    lt  xml version  1 0  encoding  utf-8   gt   lt 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   gt        lt LinearLayout         android layout width  match parent          android layout height  match parent          android orientation  vertical  gt            lt  -- Place your layout here -- gt        lt  LinearLayout gt        lt 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   gt            lt Button             android id    id setup macroSavebtn              android layout width  0dp              android layout height  wrap content              android layout weight  1              android text  Save    gt            lt Button             android id    id setup macroCancelbtn              android layout width  0dp              android layout height  wrap content              android layout weight  1              android text  Cancel    gt            lt  LinearLayout gt    lt  RelativeLayout gt

User · Answer

Use the below code  Align the button to buttom  It s working    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android orientation  vertical   gt        lt Button         android id    id btn back          android layout width  100dp          android layout height  80dp          android text  Back    gt        lt TextView         android layout width  match parent          android layout height  0dp          android layout weight  0 97          android gravity  center          android text  Payment Page    gt        lt LinearLayout         android layout width  match parent          android layout height  wrap content   gt            lt EditText             android layout width  wrap content              android layout height  wrap content              android layout weight  1   gt            lt Button             android layout width  wrap content              android layout height  wrap content              android text  Submit   gt       lt  LinearLayout gt    lt  LinearLayout gt

User · Answer

You can keep your initial linear layout by nesting the relative layout within the linear layout    lt LinearLayout     android orientation  vertical      android layout width  fill parent      android layout height  fill parent  gt        lt TextView android text  welcome           android id    id TextView           android layout width  fill parent           android layout height  wrap content  gt       lt  TextView gt        lt RelativeLayout         android layout width  match parent          android layout height  match parent  gt           lt 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  gt           lt  Button gt           lt EditText android id    id EditText               android layout width  match parent               android layout height  wrap content              android layout toLeftOf   id Button              android layout alignParentBottom  true  gt           lt  EditText gt       lt  RelativeLayout gt   lt  LinearLayout gt

User · Answer

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    lt Space     android layout width  match parent      android layout height  match parent      android layout weight  1    gt

User · Answer

Use android layout alignParentBottom  true   in your  lt RelativeLayout gt    This will definitely help

User · Answer

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    lt View     android layout width  wrap content      android layout height  0dp      android layout weight  1    gt    This creates an empty view  filling the empty space and pushing the next views to the bottom of the screen

User · Answer

This also works    lt 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   gt        lt Button         android id    id button1          android layout width  wrap content          android layout height  wrap content          android text  Button          gt        lt Button         android id    id button2          android layout width  wrap content          android layout height  wrap content          android text  Button           gt    lt  LinearLayout gt

User · Answer

Creating both header and footer  here is an example   Layout XML   lt 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  gt        lt RelativeLayout         android layout width  fill parent          android layout height  40dp          android background   FF0000  gt       lt  RelativeLayout gt        lt RelativeLayout         android layout width  fill parent          android layout height  40dp          android layout alignParentBottom  true          android background   FFFF00  gt       lt  RelativeLayout gt    lt  RelativeLayout gt    Screenshot

User · Answer

In case you have a hierarchy like this    lt ScrollView gt      --  lt RelativeLayout gt        --  lt LinearLayout gt    First  apply android fillViewport  true  to the ScrollView and then apply android layout alignParentBottom  true  to the LinearLayout    This worked for me perfectly    lt ScrollView     android layout height  match parent      android layout width  match parent      android scrollbars  none      android fillViewport  true  gt       lt RelativeLayout         android layout width  match parent          android layout height  wrap content  gt           lt 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  gt           lt  LinearLayout gt       lt  RelativeLayout gt   lt  ScrollView gt

User · Answer

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

User · Answer

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

User · Answer

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    lt 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  gt    lt 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    gt    lt  android support constraint ConstraintLayout gt    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

User · Answer

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   lt TextView android text   string welcome       android id    id TextView       android layout width  fill parent       android layout height  wrap content      android layout weight  1  gt   lt  TextView gt

User · Answer

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     lt ScrollView      xmlns android  http   schemas android com apk res android      android layout height  match parent       android layout width  match parent      android fillViewport  true  gt       lt 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  gt                    lt  -- content goes here -- gt                    lt  -- stretching frame layout  using layout weight -- gt           lt FrameLayout             android layout width  match parent               android layout height  0dp              android layout weight  1  gt           lt  FrameLayout gt                    lt  -- content fixated to the bottom of the screen -- gt           lt LinearLayout              android layout width  match parent               android layout height  wrap content              android orientation  horizontal  gt                                      lt  -- your bottom content -- gt           lt  LinearLayout gt       lt  LinearLayout gt   lt  ScrollView gt

User · Answer

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    lt  -- filler -- gt   lt TextView android layout height  0dip             android layout width  fill parent            android layout weight  1    gt    before the element that should be at the bottom of the screen

User · Answer

1  Use ConstraintLayout in your root Layout  And set app layout constraintBottom toBottomOf  parent  to let the Layout on the bottom of the screen    lt LinearLayout     android id    id LinearLayout      android layout width  match parent      android layout height  wrap content      android orientation  horizontal      app layout constraintBottom toBottomOf  parent  gt   lt  LinearLayout gt    2  Use FrameLayout in your root Layout  Just set android layout gravity  bottom  in your layout   lt LinearLayout     android id    id LinearLayout      android layout width  match parent      android layout height  wrap content      android layout gravity  bottom      android orientation  horizontal  gt   lt  LinearLayout gt    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   lt TextView     android id    id TextView      android layout width  match parent      android layout height  0dp      android layout weight  1      android text  welcome    gt     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    lt LinearLayout     android id    id LinearLayout      android layout width  match parent      android layout height  match parent      android gravity  bottom      android orientation  horizontal  gt   lt  LinearLayout gt    4  Use RelativeLayout in the root Layout  And set android layout alignParentBottom  true  to let the Layout on the bottom of the screen   lt LinearLayout     android id    id LinearLayout      android layout width  match parent      android layout height  wrap content      android layout alignParentBottom  true      android orientation  horizontal  gt   lt  LinearLayout gt    Output

User · Answer

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

[android] How do I align views at the bottom of the screen?

Examples related to android

Examples related to xml

Examples related to user-interface

Examples related to android-layout