Custom View That Splits Layout Diagonally With Different Child Views

How can i split LinearLayout or RelativeLayout diagonally into two varying sizes and each having different child view. Example ViewPager in upper half section and a different Linea

Solution 1:

The easiest approach is to just make a background image with that skewed cut. If you wish to have a dynamic layout and you want to really cut widgets, use Canvas.saveLayer/restore. Like this:

privatePaintpaint=newPaint(Paint.ANTI_ALIAS_FLAG);
privateXfermodepdMode=newPorterDuffXfermode(PorterDuff.Mode.CLEAR);
privatePathpath=newPath();

protectedvoiddispatchDraw(Canvas canvas) {
    intsaveCount= 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, 50, getResources().getDisplayMetrics()));
    path.close();
    canvas.drawPath(path, paint);

    canvas.restoreToCount(saveCount);
    paint.setXfermode(null);
}

Gist: https://gist.github.com/ZieIony/8480b2d335c1aeb51167

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns: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"android:orientation="vertical"app:layout_behavior="@string/appbar_scrolling_view_behavior"tools:showIn="@layout/activity_main"><com.example.marcin.splitlayout.CutLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:scaleType="centerCrop"android:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/mazda" /></com.example.marcin.splitlayout.CutLayout><TextViewandroid:layout_margin="16dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Mazda 3" /></LinearLayout>

Btw. This thing is very popular recently :)

Solution 2:

I think i am bit late for this answer, But you should see this amazing tutorial for this. Its easy and without any external library. The output will be like:

You need to add layer-list

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@color/colorPrimary"/><item><bitmapandroid:src="@drawable/bebe"android:gravity="center"android:alpha="0.1"/></item><itemandroid:top="300dp"android:bottom="-300dp"android:left="0dp"android:right="-300dp"><rotateandroid:fromDegrees="-10"android:pivotX="0%"android:pivotY="100%"><shapeandroid:shape="rectangle"><solidandroid:color="?android:colorBackground"/></shape></rotate></item></layer-list>

Now you just need to add this drawable into your layout.

layout will be like:

<android.support.design.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/windowBackground"android:fitsSystemWindows="true"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/windowBackground"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"app:contentScrim="@color/colorPrimary"app:expandedTitleMarginEnd="64dp"app:expandedTitleMarginStart="48dp"app:expandedTitleTextAppearance="@android:color/transparent"app:layout_scrollFlags="scroll|exitUntilCollapsed"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_collapseMode="parallax"><RelativeLayoutandroid:id="@+id/background"android:layout_width="match_parent"android:layout_height="300dp"android:background="@drawable/background_profile_header"></RelativeLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/background"android:gravity="center_vertical"android:layout_marginStart="@dimen/activity_margin_16"android:layout_marginEnd="@dimen/activity_margin_16"android:layout_marginTop="-100dp"><FrameLayoutandroid:layout_width="150dp"android:layout_height="150dp"><com.mikhaellopez.circularimageview.CircularImageViewandroid:id="@+id/circularProfilePic"android:layout_width="150dp"android:layout_height="150dp"android:src="@drawable/profile"app:civ_border_color="@color/semi_transparent"app:civ_border_width="5dp" /><ImageButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:fabSize="mini"android:tint="@color/white"android:backgroundTint="@color/red"android:background="@color/red"android:src="@android:drawable/ic_menu_camera"android:padding="@dimen/activity_margin_5"android:layout_gravity="right"
                                /></FrameLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:layout_marginBottom="@dimen/activity_margin_16"android:layout_marginStart="12dp"android:orientation="vertical"android:layout_marginLeft="12dp"><TextViewandroid:id="@+id/userName"android:layout_width="wrap_content"android:layout_height="wrap_content"android:maxLines="1"android:fontFamily="sans-serif-light"android:layout_marginLeft="@dimen/activity_margin_5"android:text="Anuj Sharma"android:textColor="@color/color_Primary_text"android:textSize="30sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="@dimen/activity_margin_10"android:fontFamily="sans-serif-light"android:text="musician, singer, songwriter"android:textSize="14sp" /></LinearLayout></LinearLayout></RelativeLayout><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout></android.support.design.widget.CoordinatorLayout>

Must check this link for better understanding.

Solution 3:

You can also try overlaying the bottom background and rotating it. Maybe you also have to scale it in the x direction to avoid clipping on the sides.