Slanting Or Sloping Ui Design In Android

March 31, 2024 Post a Comment

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 pa

Solution 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 :-

publicclassSlantViewextendsView {
    private Context mContext;
    Paint paint ;
    Path path;

    publicSlantView(Context ctx, AttributeSet attrs) {
        super(ctx, attrs);
        mContext = ctx;
        setWillNotDraw(false);
        paint = newPaint(Paint.ANTI_ALIAS_FLAG);
    }

    @OverrideprotectedvoidonDraw(Canvas canvas) {

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

        path = newPath();
        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.SlantViewandroid:layout_width="match_parent"android:layout_height="30dp"android:id="@+id/slant_view"
 /><TextView-----/>

Solution 2:

Other way to achieve Slant View is this:

<FrameLayoutandroid:layout_height="match_parent"android:layout_width="match_parent"android:background="@color/colorAccent"xmlns:android="http://schemas.android.com/apk/res/android" ><ImageViewandroid:layout_width="match_parent"android:layout_height="280dp"android:src="@color/colorPrimary"/><LinearLayoutandroid: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:

Solution 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.

Solution 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.

Solution 5:

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!

Index Android