Android Slant or Slant User Interface Design

Question

I am trying to create an interface very similar to this one. I could design it almost in the same way as the image above, but I do not get a way to implement the inclined or inclined part.

1) Can I give an example of a layout, how can I implement an oblique layout?

2) And how can I place the FAB directly above the incline?

Any help would be really appreciated.

Answer 1

You can create your own view using Slant top using Canvas, and then place it on top of your text element to achieve this look.

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 use with TextView

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

Answer 2

1) Can I give an example of a layout, how can I implement an oblique layout?

You can not. Views are always rectangular. However, you can make the view oblique, i.e. With background image.

2) And how can I place the FAB directly above the incline?

You have no tilt. This is only the bottom edge of the square bounding box. Therefore, you should be able to put it there without any problems.

Answer 3

Usually images are presented in a rectangular shape. You can use padding / margin to design a user interface to suit your needs. Obviously, in addition to the inclined part, there will be a transparent image.

Answer 4

You will need to write a custom view to do this. There is no own control that can do this.

Canvas provides support for clipping paths, so it's easy enough to crop an image if you can draw an image. This suggests that drawing large images in the OnDraw implementation is less simple (memory management and proper scaling and caching behavior are not difficult, but they are less trivial)

An easier way to do this is to extend something like FrameLayout or some kind of ViewGroup. If you override dispatchDraw, you can click the clip path onto the canvas, which will clamp the children. And then you can put other controls in your user control.

Something like that:

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

}

Answer 5

You should have the root, or at least the closest parent layout as FrameLayout , then

1) For part of the image, you can have a regular ImageView to display the image. Below you can have LinearLayout (empty, with a white background).

Now just tilt the empty LinearLayout to an angle of maybe 45 degrees to cut out the background image in an oblique style. Here, just set the XML property of the empty LinearLayout,

 android:rotation = "45" 

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

Hope this helps. Hooray!