Home » Android » Slanting or Sloping UI design in Android

Slanting or Sloping UI design in Android

Posted by: admin June 15, 2020 Leave a comment

Questions:

Slant UI

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.

How to&Answers:

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

Answer:

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:

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.

Answer:

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

Answer:

You’ll have to write a custom View to do it. There’s no native control that can do this.

Canvas’s provide support for clipping paths, so it’s easy enough to clip the image provided you can draw the image. That being said, drawing large images in an OnDraw implementation is less than straightforward (memory management and correct scaling and caching behaviour isn’t difficult, but it’s less than trivial)

An easier way to do it would be to extend something like a FrameLayout or some kind of ViewGroup. If you override dispatchDraw, you can push a clip path onto the canvas, which will clip children. And then you can put other controls inside your custom control.

Something like this:

public class ClipFrameLayout extends FrameLayout {
  .... constructors and stuff...
   @Override 
   void dispatchDraw(Canvas canvas)
   {
      canvas.save();
      canvas.clipPath(mCustomClipPath);
      super.dispatchDraw(canvas);
      canvas.restore();
   }

}

Answer:

You need to have the root or at least the immediate parent layout as FrameLayout, then,

1) For the image part, you can have a normal ImageView to show the image. Below that you can have a LinearLayout (blank, with white background).

Now just tilt the blank LinearLayout to an angle probably 45 degrees to cut the background image in slant style. Here, just set the XML property of the blank LinearLayout,

android:rotation = "45"

2) For the FAB, just move it to the cutting point, gravity of the layout should be set to right according to your screenshot.

Hope this helps. Cheers!