How to make a map overlap layout as a pager

Question

I have a nested fragment that contains a mapview, all views overlap as I expected, except for mapview. I also have a recyclerview .. which is displayed under the cutout layout, but the map is gone.

Screenshot:

Result:

and the result that I expect:

I tried with the nagative margin setting, but did not work for mapview.

code: fragment_around.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.stratafy.activities.SignupActivity"> <LinearLayout android:clipToPadding="false" android:layout_marginTop="160dp" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <RelativeLayout android:id="@+id/background" android:layout_width="match_parent" android:layout_height="230dp" android:background="@drawable/background_aroundme"> <ProgressBar android:id="@+id/mProgressbar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:visibility="gone" /> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TabLayout android:padding="0dp" android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="50dp" android:background="#00000000" app:tabIndicatorColor="#00000000" app:tabMode="fixed" app:tabSelectedTextColor="@color/white" app:tabTextAppearance="@style/CustomTextStyle2" app:tabTextColor="@color/white" /> <LinearLayout android:gravity="center" android:layout_gravity="center" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:id="@+id/ll1" android:gravity="center" android:layout_gravity="center" android:background="@color/colorAccent" android:layout_width="50dp" android:layout_height="2dp"></LinearLayout> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:visibility="gone" android:orientation="vertical" android:id="@+id/ll2" android:layout_gravity="center" android:background="@color/colorAccent" android:layout_width="50dp" android:layout_height="2dp"></LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="65dp" android:layout_below="@id/background" android:layout_marginTop="-90dp" android:orientation="vertical"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab_filter" android:src="@drawable/ic_filter" app:fabSize="normal" android:layout_marginRight="20dp" android:layout_gravity="right" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </RelativeLayout> 

margin-top = 160 start, where the floating button ... and my map is at 240dp.

fragment_map.xml

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mapFragmentContainer" android:layout_width="match_parent" android:layout_marginTop="-70dp" android:layout_height="match_parent" android:orientation="vertical"> </FrameLayout> 

Answer 1

custom clipping instead of RelativeLayout

 public class CutLayout extends FrameLayout { private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); private Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR); private Path path = new Path(); public CutLayout(Context context) { super(context); } public CutLayout(Context context, AttributeSet attrs) { super(context, attrs); } public CutLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) public CutLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } @Override protected void dispatchDraw(Canvas canvas) { int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG); super.dispatchDraw(canvas); paint.setXfermode(pdMode); path.reset(); path.moveTo(0, getHeight()); path.lineTo(getWidth(), getHeight()); path.lineTo(getWidth(), getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, getResources().getDisplayMetrics())); path.close(); canvas.drawPath(path, paint); canvas.restoreToCount(saveCount); paint.setXfermode(null); } } 

and in xml file

 <com.helper.CutLayout android:id="@+id/background" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:scaleType="fitXY" android:src="@drawable/aroundme" android:layout_width="match_parent" android:layout_height="230dp" /> </com.helper.CutLayout>