Slanting or Sloping UI design in Android

You can create a custom view with Slant top using Canvas and then place it over your textView, to achieve this look and feel.

Code snippet for slant top custom view :-

public class SlantView extends View {
    private Context mContext;
    Paint paint ;
    Path path;

    public SlantView(Context ctx, AttributeSet attrs) {
        super(ctx, attrs);
        mContext = ctx;
        setWillNotDraw(false);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        int w = getWidth(), h = getHeight();
        paint.setStrokeWidth(2);
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setAntiAlias(true);

        path = new Path();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo(0,0);
        path.lineTo(0,h);
        path.lineTo(w,h);
        path.close();
        canvas.drawPath(path, paint);
    }
}

Code snippet for how to use it with TextView

<com.pix.app.views.SlantView
   android:layout_width="match_parent"
   android:layout_height="30dp"
   android:id="@+id/slant_view"
 />

 <TextView-----/>

Desired UI


Other way to achieve Slant View is this:

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:src="@color/colorPrimary"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:rotation="-70"
        android:layout_marginTop="100dp"
        android:background="@color/colorAccent"></LinearLayout>
</FrameLayout>

This will give you following output:

enter image description here


1) Can any one give an example layout of how can I implement the slanting layout?

You cannot. Views are always rectangular. You may however make it look slanted, i.e. with background image.

2) And how can I place the FAB right there over the slant portion?

You cannot have slant. It's just bottom edge of the square bounding box. So you should be able to put it there w/o any problem.