Question

The app I’m working on has 4 tabs, 3 of which share many features, including a navigation bar a the bottom with Back, Edit, and Map buttons. There is exactly the same xml in all 3 layouts, so I’m trying to DRY this out by extracting that xml into a separate component, including it, and then going from there.

Previously I had

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

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:id="@+id/showedit_toolbar"
                        style="@style/showItemToolbar">

            <ImageButton android:id="@+id/show_person_back_button"
                    style="@style/blackToolbarButton"
                    android:src="@drawable/left_white_arrow"
                    android:layout_alignParentLeft="true"/>

            <Button android:id="@+id/show_person_map_button"
                    style="@style/blackToolbarButton"
                    android:text="map"
                    android:layout_alignParentRight="true"/>

            <Button android:id="@+id/show_person_edit_button"
                    style="@style/blackToolbarButton"
                    android:text="edit"
                    android:layout_toLeftOf="@id/show_person_map_button"/>                          
        </RelativeLayout>

        <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_height="fill_parent" 
            android:layout_width="fill_parent"           
            android:layout_above="@id/showedit_toolbar"
            style="@style/CoinLightTheme">

// Lots more layout omitted

I extracted out the bit that’s repeated into an xml file called show_toolbar.xml, changing the names of variables to make it more generic across the 3 views

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/show_toolbar"
    style="@style/showItemToolbar">

    <ImageButton style="@style/blackToolbarButton"
        android:src="@drawable/left_white_arrow"
        android:layout_alignParentLeft="true" 
        android:id="@+id/show_back_button"/>

    <Button android:id="@+id/show_map_button"
        style="@style/blackToolbarButton"
        android:text="map"
        android:layout_alignParentRight="true"/>

    <Button android:id="@+id/show_edit_button"
        style="@style/blackToolbarButton"
        android:text="edit"
        android:layout_toLeftOf="@id/show_map_button"/>                         

</RelativeLayout>

Then from within my original layout file, I replaced that big block of code with

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

    <include android:id="@+id/show_toolbar" layout="@layout/show_toolbar"/>

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="fill_parent" 
        android:layout_width="fill_parent"
        android:layout_above="@id/showedit_toolbar"         
        style="@style/CoinLightTheme">

Now, the problem is that the view no longer shows up. I can still click the buttons and they respond (i.e. if I click in the corner where the button should be, it still works), but I cannot see the buttons or bar onto which they were drawn.

I cannot find very good documentation on how Include is supposed to work, so perhaps I am using it incorrectly. Any help would be appreciated

Before

Before http://i34.tinypic.com/2dl0hm1.png

After

Answer 1

RelativeLayout supports vertical stacking of widgets. According to your layouts, your “toolbar” will be hidden behind the ScrollView, AFAICT. If you do not want that behavior, adjust your layouts such that these do not overlap.