Android Use FrameLayout for Overlapping Items

Hello,

Recently in one of my project we have a layout where we have transparent top and bottom bar and which overlaps content of the screen. Content was the list view so when you scroll up or down the list view content goes under overlapping top and bottom bar where we can see it as the both top and bottom bars were transparent. Something like this.

So in this blog I am going to explain how to do this type of layout. I have used FrameLayout for this. As FrameLayout automatically sets the z-index for all it's child items as per the order. So following is our layout XML for this.

 <!-- Main frame layout -->

<FrameLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical" >

<!-- Main Content layout -->

<LinearLayout

            android:layout_width="fill_parent"

            android:id="@+id/contentPane"

            android:layout_height="wrap_content"

            android:layout_weight="1" >

</LinearLayout>

<!-- Relative Layout for top and bottom bar -->

<RelativeLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent" >

<!-- top bar -->

<RelativeLayout

                android:layout_width="fill_parent"

                android:layout_height="70dip"

                android:alpha="0.9"

                android:orientation="horizontal" >

 </RelativeLayout>

<!-- Bottom bar -->

<RelativeLayout

                android:layout_width="fill_parent"

                android:layout_alignParentBottom="true"

                android:layout_height="70dip"

                android:alpha="0.9"

                android:orientation="horizontal" >

 </RelativeLayout>

</RelativeLayout>

</FrameLayout>

As you can see in above XML first we have frame layout inside frame layout we have linear layout as our content layout where we have set layout weight property as 1 so this component will take whole space for the frame layout.  After that we have used Relative layout and inside it we have or top and bottom bar as relative layout for bottom bar we are using android:layout_alignParentBottom config and set is true so it will go to bottom.  This is how you can have overlapping views in android.  Hopw this helps you.