Slanting or Sloping UI design in Android

Question

I am trying to design an UI very similar to this. I have been able to design it almost similar to the image above, but am not getting a way to implement the slanting or sloping part.

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

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

Any help would be really appreciated.

Answer 1

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/>

Answer 2

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:

Answer 3

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.

Answer 4

Normally images are represented in rectangular form. You can use padding/margin to design UI according to your need. Obviously other than sloping part will be transparent image.