A custom view that breaks the layout diagonally with different child views

Question

How can I split a LinearLayout or RelativeLayout diagonally into two different sizes and each of which has a different look for children. Example ViewPager at the top half of the section and another LinearLayout at the bottom.

something like that:

How can i achieve this? Please, help

Answer 1

The easiest approach is to simply make a background image with this skew. If you want to have a dynamic layout and really want to shorten widgets, use Canvas.saveLayer / restore. Like this:

 private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); private Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR); private Path path = new Path(); 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, 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"?> <LinearLayout 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" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/activity_main"> <com.example.marcin.splitlayout.CutLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:scaleType="centerCrop" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/mazda" /> </com.example.marcin.splitlayout.CutLayout> <TextView android:layout_margin="16dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Mazda 3" /> </LinearLayout> 

Btw. This thing is very popular lately :)

Answer 2

I think I was a little late for this answer, but you should see this amazing tutorial . Its easy and without any external library. The output will look like this:

You need to add layer-list

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

Now you just need to add this drawing to your layout.

Layout

will look like this:

 <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/windowBackground" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/windowBackground" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android: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"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_collapseMode="parallax"> <RelativeLayout android:id="@+id/background" android:layout_width="match_parent" android:layout_height="300dp" android:background="@drawable/background_profile_header"></RelativeLayout> <LinearLayout android: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"> <FrameLayout android:layout_width="150dp" android:layout_height="150dp"> <com.mikhaellopez.circularimageview.CircularImageView android: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" /> <ImageButton android: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> <LinearLayout android: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"> <TextView android: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" /> <TextView android: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.Toolbar android: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> 

To better understand this link .

Answer 3

You can also try overlaying the bottom background and rotate it. You may also need to scale it in the x direction to avoid cropping to the sides.