tabris-js icon indicating copy to clipboard operation
tabris-js copied to clipboard

Published 20 hours ago • verified publisher icon eclipsesource

Allow to set cornerRadius on a per corner basis

Open mpost opened this issue 5 years ago • 7 comments

Problem description

Currently setting the cornerRadius affects all corners equally. It would be handy to affect only a particular corner. This could be used to eg create rounded "tabs" on a custom tab folder.

Expected behavior

Allow to set cornerRadius on a per corner basis with similar flexibility as padding.

Environment

  • Tabris.js version: 3.0

mpost avatar Jun 03 '19 13:06 mpost

Can this be added to 3.3 milestone?

fax1ty avatar Oct 11 '19 07:10 fax1ty

Any news?

fax1ty avatar Jan 03 '20 09:01 fax1ty

It will not make the cut for 3.3 (due next week) but we will revisit it for the next release.

mpost avatar Jan 03 '20 10:01 mpost

@mpost Please make this part of the 3.6 milestone. This issue is more than a year old and it is very annoying in many scenarios.

fax1ty avatar May 22 '20 16:05 fax1ty

We have conducted some research to bring corner specific roundings to Android. It is not possible with native android means that we currently use. One option would be to use com.google.android.material.shape.MaterialShapeDrawable which is a special drawable that could be applied on the backround. Unfortunately the fake shadow quality is no very good and clipping would not occur as it does right now. in fact the parent would need to have its clipChildren be set to false.

mpost avatar Jun 19 '20 13:06 mpost

@mpost Let's just make a comparison

Android Native MaterialShapeDrawable
Outline - +
Shadow color - +
Rounding for each corner - +
Shadow direction - +
Color filters + +
Shadow quality Good Poor (can use native)

fax1ty avatar Jun 23 '20 23:06 fax1ty

@fax1ty It is not that simple. You are missing the clipping feature of the current cornerRadius. With the MaterialShapeDrawable you do not get any clipping with shapes that could not be covered by the ViewOutlineProvider (basically only concave shapes). Therefore a switch to the material drawable would break this behavior by not applying clipping correctly.

In addition the MaterialShapeDrawable is an drawable which would replace any other drawable that would be set as the current background (eg a color or gradient drawable) so the current tabris apis would need to be retrofited to work with the MaterialShapeDrawable.

mpost avatar Jun 24 '20 09:06 mpost