Android view layout component on top of each other

Question

I was having some problem with the layout of Android Activity. So basically I have a navigation drawer and two Activity. The layout was working perfectly when I wrap all of them with a frame layout. However, because of the navigation drawer issues, I have to remove the frame layout into another xml layout. And then from there, my layouts were all messed up. Here is my layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

    <com.esri.android.map.MapView
        android:id="@+id/map"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        initExtent="21801.3, 25801.0, 33218.7, 44830.0" >
    </com.esri.android.map.MapView>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_marginLeft="45dp" >

        <ImageView
            android:id="@+id/ivEventGuide"
            android:layout_width="230dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:src="@drawable/event_create_guide"
            android:visibility="gone" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <Button
            android:id="@+id/btnNewsFeed"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@color/lightred"
            android:minHeight="20dp"
            android:paddingBottom="5dp"
            android:text="News feed"
            android:textColor="#FFFFFF"
            android:textSize="13dp" />

        <LinearLayout
            android:id="@+id/llNewsFeed"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_below="@+id/btnNewsFeed"
            android:background="#FFFFFF"
            android:orientation="vertical"
            android:visibility="gone" >

            <ListView
                android:id="@+id/EventNewsFeedListview"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:listSelector="#F6CECE" >
            </ListView>
        </LinearLayout>

        <Button
            android:id="@+id/btnLegends"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btnNewsFeed"
            android:background="#FFFFFF"
            android:minHeight="20dp"
            android:paddingBottom="5dp"
            android:text="Legends"
            android:textColor="@color/lightred"
            android:textSize="13dp" />

        <LinearLayout
            android:id="@+id/legendDiv"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_below="@+id/btnLegends"
            android:background="#fff"
            android:orientation="vertical"
            android:visibility="gone" >

            <TableLayout
                android:id="@+id/tableEvent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:stretchColumns="1" >

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingTop="4dp" >

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="30dp"
                        android:layout_gravity="right"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:src="@drawable/food" />

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="left"
                        android:paddingTop="10dp"
                        android:text="Food Event"
                        android:textColor="#000"
                        android:textSize="10dp" />

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="30dp"
                        android:layout_gravity="right"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:src="@drawable/sport" />

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="left"
                        android:paddingTop="10dp"
                        android:text="Sport Event"
                        android:textColor="#000"
                        android:textSize="10dp" />
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingTop="2dp" >

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="30dp"
                        android:layout_gravity="right"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:src="@drawable/races" />

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="left"
                        android:paddingTop="10dp"
                        android:text="Festival Celebration"
                        android:textColor="#000"
                        android:textSize="10dp" />

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="30dp"
                        android:layout_gravity="right"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:src="@drawable/discussion" />

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="left"
                        android:paddingTop="10dp"
                        android:text="Chit Chat Session"
                        android:textColor="#000"
                        android:textSize="10dp" />
                </TableRow>
            </TableLayout>
        </LinearLayout>

        <TextView
            android:id="@+id/tvSearchTitle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/llSearch"
            android:background="@color/lightred"
            android:gravity="center"
            android:paddingBottom="5dp"
            android:text="Address Search"
            android:textColor="#FFFFFF" >
        </TextView>

        <LinearLayout
            android:id="@+id/llSearch"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#FFFFFF"
            android:orientation="horizontal"
            android:padding="5dp"
            android:weightSum="1" >

            <EditText
                android:id="@+id/searchAddrET"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_weight="0.8"
                android:hint="Enter search address, eg. postal code"
                android:textSize="12dp" />

            <Button
                android:id="@+id/btnSearchAddr"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_weight="0.2"
                android:background="@color/lightred"
                android:minHeight="30dp"
                android:text="Search"
                android:textColor="#FFFFFF"
                android:textSize="12dp" />
        </LinearLayout>

        <TextView
            android:id="@+id/tvDirectionTitle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/llDirection"
            android:background="@color/lightred"
            android:gravity="center"
            android:paddingBottom="5dp"
            android:text="Direction"
            android:textColor="#FFFFFF"
            android:visibility="gone" >
        </TextView>

        <LinearLayout
            android:id="@+id/llDirection"
            android:layout_width="fill_parent"
            android:layout_height="80dp"
            android:layout_alignParentBottom="true"
            android:background="#FFFFFF"
            android:padding="5dp"
            android:visibility="gone" >

            <ScrollView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >

                <TextView
                    android:id="@+id/tvDirection"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" >
                </TextView>
            </ScrollView>
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

When it was working fine, I wrapped the map view and the rests of the layout with a frame layout. And then inside the class where I extended the navigation drawer:

public class EventMain extends NavigationDrawer {

public static MapView mMapView = null;
ArcGISTiledMapServiceLayer tileLayer;
LocationManager locationManager;
public static GraphicsLayer graphicsLayer = null;
public static Callout callout;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ViewGroup content = (ViewGroup) findViewById(R.id.event_frame);
    getLayoutInflater().inflate(R.layout.event_main, content, true);   
}

The problem that I was having now was all the other components is not showing on top of the map view. Any guides?

Thanks in advance.

Answer 1

You should consider using RelativeLayout for overlapping views. Views inside a RelativeLayout may be positioned relative to their parent and/or siblings. A LinearLayout will arrange views sequentially with no overlap allowed.