Android map with custom layout

Question

I' am trying to achieve sth like this:

But the ListView is overlaps my bottom bar. What is the best way to prevent such a behaviour? As you can see in the picture there is a map under bottom bar. This bottom bar is like target/destination window in Google Maps app.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <com.google.android.gms.maps.MapView
        android:id="@+id/map"
        tools:layout="@layout/fragmentMap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:layout_marginTop="2dp"
        android:orientation="vertical">

        <EditText
            android:id="@+id/mapEditT"
            android:layout_width="fill_parent"
            android:layout_height="53dp"
            android:layout_alignParentTop="true"
            android:gravity="center|left"
            android:paddingLeft="2dp"
            android:paddingRight="0dp"/>

        <ListView
            android:id="@+id/listVi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/draweR"
            android:layout_width="wrap_content"
            android:src="@drawable/draweR"/>

        <LinearLayout
            android:id="@+id/infoBox"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="40dp"
            android:alpha="0.1"
            android:background="@android:color/black"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/text2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="20dp"
                android:text="Info"
                />

            <TextView
                android:id="@+id/text3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_toRightOf="@id/text2"
                android:text="Info/>

        </LinearLayout>

    </LinearLayout>

</FrameLayout>

Answer 1

You can mess around with the margins. I got it to look like the image you wanted.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<com.google.android.gms.maps.MapView
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout="@layout/fragmentMap" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_marginTop="2dp"
    android:orientation="vertical"
    android:paddingBottom="160dp" >

    <EditText
        android:id="@+id/mapEditT"
        android:layout_width="fill_parent"
        android:layout_height="53dp"
        android:layout_alignParentTop="true"
        android:gravity="center|left"
        android:paddingLeft="2dp"
        android:paddingRight="0dp" />

    <ListView
        android:id="@+id/listVi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/draweR"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/draweR" />

    <LinearLayout
        android:id="@+id/infoBox"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:alpha="0.1"
        android:background="@android:color/black"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="20dp"
            android:text="Info" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_toRightOf="@id/text2"
            android:text="Info" />
    </LinearLayout>
</LinearLayout>

Answer 2

Use LinearLayout or RelativeLayout as top most parent instead of FrameLayout. Here is the code snippet using LinearLayout.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <EditText
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_vertical" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

    </LinearLayout>

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </ListView>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ImageButton
            android:id="@+id/draweR"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="left|center_vertical"
            android:src="@drawable/draweR"/>

        <com.google.android.gms.maps.MapView
            android:id="@+id/map"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout="@layout/fragmentMap" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="100" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:layout_weight="75" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:layout_weight="25" />

    </LinearLayout>

</LinearLayout>