Bottom bar layout in android

Question

This is my android xml source code for a map - bottom bar layout. I am displaying a huge map in the screen and i need a 30dp tall layout in the bottom of the screen to display a few tab like images. How do i push the horizontal linear layout to the bottom of the page ?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height=" what here ? "
    android:layout_width="fill_parent"
    android:orientation="vertical">
    <com.google.android.maps.MapView
        android:id="@+id/map_view"
        Map goes here. Almost full screen. Exactly full - 30dp;

        />
    <LinearLayout>
         I want 3 images here. Bottom of the screen.
    </LinearLayout>
</RelativeLayout>

see this: http://stackoverflow.com/questions/36019986/which-view-should-be-used-for-new-material-design-bottom-navigation/42119958#42119958 — Fartab, Feb 08 '17 at 17:48

score 10 · Accepted Answer · edited Nov 08 '12 at 21:33

Use android:layout_alignParentBottom="true" to set the linearlayout at the bottom of the parent for linearlayout and android:layout_above for mapview to set the mapview above the linearlayout.

Your code will be:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical">

    <LinearLayout android:layout_height="30dip"
        android:layout_width="fill_parent"
        android:layout_alignParentBottom="true"
        android:id="@+id/linearLayout1"
    >
         <!-- ... -->
    </LinearLayout>

    <com.google.android.maps.MapView
        android:id="@+id/map_view"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_above="@+id/linearLayout1"
    />
</RelativeLayout>

score 1 · Answer 2 · edited Dec 30 '11 at 11:55

<?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" >

    <com.google.android.maps.MapView
        android:id="@+id/map_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/rel_bottom" />

    <RelativeLayout
        android:id="@+id/rel_bottom"
        android:layout_width="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_height="30dp" >

        <ImageView
            android:id="@+id/img1"
            android:layout_width="40dp"
            android:layout_height="fill_parent" />

        <ImageView
            android:id="@+id/img2"
            android:layout_width="40dp"
            android:layout_height="fill_parent"
            android:layout_toRightOf="@+id/img1" />

        <ImageView
            android:id="@+id/img3"
            android:layout_width="40dp"
            android:layout_height="fill_parent"
            android:layout_toRightOf="@+id/img2" />
    </RelativeLayout>

</RelativeLayout>

Sprigg · Answer 3 · 2011-12-30T13:05:11.080

use the properties of the RelativeLayout, like android:layout_alignParentBottom and android:layout_above.

I would do something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">

     <LinearLayout
       android:id="@+id/footer"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:width="fill_parent"
       android:height="30dp">

            add your images here

     </LinearLayout>

    <com.google.android.maps.MapView
         android:id="@+id/map_view"
         android:height="fill_parent"
         android:width="fill_parent"
         android:layout_alignParentTop="true"
         android:layout_above="@id/footer"/>

</RelativeLayout>

score -2 · Answer 4 · answered Dec 30 '11 at 11:50

Try the following layout. Using android:layout_alignParentBottom="true" won't be enough as the MapView with android:layout_height="fill_parent" will fill the whole screen and hide the LinearLayout. You must also add android:layout_above="@id/menu" so it won't hide it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.google.android.maps.MapView
        android:id="@+id/map"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/menu"
        android:apiKey="@string/google_maps_api_key"
        android:clickable="true" />

    <LinearLayout
        android:id="@+id/menu"
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true" >
    </LinearLayout>

</RelativeLayout>

Bottom bar layout in android

4 Answers4