Skip to content

Commit f82b9af

Browse files
committed
fix: enable clipToOutline so the rounded outline clips the ripple
setViewOutlinePreferredRadius only installs a round-rect OutlineProvider; a View still needs clipToOutline=true to actually clip its drawing (the selectableItemBackground ripple) to that outline. Pair the two, matching AndroidX RemoteViewsCompat (setViewOutlinePreferredRadius + setViewClipToOutline, both @RequiresApi(31)). setBoolean invokes View#setClipToOutline directly, so no new dependency is required.
1 parent bb88f6e commit f82b9af

1 file changed

Lines changed: 9 additions & 4 deletions

File tree

android/src/main/java/com/reactnativeandroidwidget/RNWidget.java

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -184,16 +184,21 @@ private void addClickableArea(RemoteViews widgetView, ViewGroup rootWidget, Clic
184184
// on THIS separate overlay (rn_widget_clickable_area, background = ?attr/selectableItemBackground)
185185
// laid over the view's bounds — it is NOT the rendered widget bitmap, so a rounded view (e.g. a
186186
// pill-shaped button or a card with a borderRadius) otherwise gets a RECTANGULAR highlight on
187-
// press. setViewOutlinePreferredRadius (API 31+) clips the overlay — and, via clipToOutline, its
188-
// ripple — to a rounded outline that matches the view. Touch bounds are unaffected (the outline
189-
// only clips drawing), so the corners stay tappable. Views with square corners (radius 0) are
190-
// left untouched, and below API 31 the highlight remains rectangular.
187+
// press. Rounding needs BOTH calls (API 31+): setViewOutlinePreferredRadius gives the overlay a
188+
// round-rect OutlineProvider, and setClipToOutline=true makes the view actually clip its drawing
189+
// (including the ripple background) to that outline — an outline on its own does not clip. This
190+
// mirrors AndroidX RemoteViewsCompat (setViewOutlinePreferredRadius + setViewClipToOutline, both
191+
// @RequiresApi(31)); setBoolean invokes View#setClipToOutline directly, avoiding a new dependency.
192+
// Touch bounds are unaffected (the outline only clips drawing), so the corners stay tappable.
193+
// Views with square corners (radius 0) are left untouched, and below API 31 the highlight remains
194+
// rectangular.
191195
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S && clickableView.getBorderRadius() > 0f) {
192196
clickableRemoteView.setViewOutlinePreferredRadius(
193197
R.id.rn_widget_clickable_area,
194198
clickableView.getBorderRadius(),
195199
TypedValue.COMPLEX_UNIT_DIP
196200
);
201+
clickableRemoteView.setBoolean(R.id.rn_widget_clickable_area, "setClipToOutline", true);
197202
}
198203

199204
if (clickableView.getAccessibilityLabel() != null) {

0 commit comments

Comments
 (0)