Top and bottom images overlay on imageview Issue

问题

I want to make my layout like this as per below picture. this image i am able to see in iphone devices.

Here i used frame layout to achieve make overlays of top and bottom image bar on imageview but after using frame layout i can only able to see top imagebar overlay not bottom image bar? why its happens?

Forgot about the content of top and bottom iamge bar.. i am focusing to achieve this functionality.

Please make me correct if i am wrong in my code.

xml file code :

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

    <include
        android:id="@+id/top_bar"
        layout="@layout/item_below_image_bar"
        android:gravity="top" />

    <it.sephiroth.android.library.imagezoom.ImageViewTouch
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:contentDescription="@string/descr_image"
        android:scaleType="fitXY" />

    <include
        android:id="@+id/below_bar"
        layout="@layout/item_below_image_bar"
        android:gravity="bottom" />

</FrameLayout>

回答1:

per android documentation

Child views are drawn in a stack, with the most recently added child on top.

so you need to arrange your layout as follows

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

    <it.sephiroth.android.library.imagezoom.ImageViewTouch
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:contentDescription="@string/descr_image"
        android:scaleType="fitXY" />   

    <include
        android:id="@+id/top_bar"
        layout="@layout/item_below_image_bar"
        android:gravity="top" />

    <include
        android:id="@+id/below_bar"
        layout="@layout/item_below_image_bar"
        android:gravity="bottom" />

</FrameLayout>

in this case the actual location of the view is not determined by the order that the views are declared in the xml. For a linear layout this would be true however not so with the FrameLayout, in a framelayout the location is determined by gravity so your views will still be placed in the correct locations and they will be loaded in order they were declared, so first is the image view, then the first include is placed on top of that, then the second include is placed on top of that (however in this case they dont intersect so it doesn't matter).

edit2: after chatting with sam we were able to figure out the problem here's our solution

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

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:id="@+id/greenImage"
            android:src="#2dff3d"/>


    <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            >

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

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="My Label"
                android:id="@+id/textView"
                android:layout_centerVertical="true"/>
    </RelativeLayout>

    <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp">

        <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_alignParentRight="true"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="My Label"
                android:id="@+id/textView1"
                android:layout_centerVertical="true"/>
    </RelativeLayout>


</FrameLayout>

note the usage of layout_gravity as apposed to just gravity.

来源：https://stackoverflow.com/questions/16364195/top-and-bottom-images-overlay-on-imageview-issue