Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix background clipping when using rounded corners #47

Merged
merged 3 commits into from
Apr 16, 2019
Merged

Fix background clipping when using rounded corners #47

merged 3 commits into from
Apr 16, 2019

Conversation

Tunous
Copy link
Contributor

@Tunous Tunous commented Apr 14, 2019

This change allows users to use custom items that have colored background and also use a popup with rounded corners.

Before the changes, the popup wouldn't display rounded corners for the custom view because its background wasn't clipped and it was drawing outside of the area of rounded drawable. After the change, when drawing, the content is properly clipped to the area of the background drawable and thus rounded corners work correctly.


I've also added sample for the rounded corners but unfortunately you can't see in it how I've fixed the corners issue. That's because the default view adds top and bottom padding which prevents the item from appearing at the edge of popup where the issue would be present. Although, that can be fixed if #44 gets merged so we can then set that vertical padding to 0.

Anyway here is how it looks right now:

@Tunous Tunous changed the title Feature/rounded corners clipping Fix background clipping when using rounded corners Apr 14, 2019
@Tunous
Copy link
Contributor Author

Tunous commented Apr 14, 2019

This change basically makes it possible to implement background like this:

Note that this screenshot uses features from all my pull requests combined 😄

Copy link
Owner

@zawadz88 zawadz88 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be working on newer OS versions (I've checked on Oreo 8.1 so far) but there's an issue on KitKat where the popup cannot be dismissed by clicking on the outside nor by clicking system Back button. Also, the overscroll effect looks a bit off with the shadow appearing outside of the popup content.
Sample attached:
clipping

Also, on both Android 8.1 and 4.4 I've noticed that "Custom colors" sample seems to be broken (incorrect background):
Screenshot_1555340891

@zawadz88 zawadz88 added this to the 3.3.0 milestone Apr 15, 2019
@Tunous
Copy link
Contributor Author

Tunous commented Apr 15, 2019

Good finds. I usually don't support these earlier versions of Android in my apps anymore so I forgot to test on them. Will try to fix the mentioned issues and test it properly.

@Tunous
Copy link
Contributor Author

Tunous commented Apr 15, 2019

I've fixed the problem with background color. I didn't see that you could customize it separately so now I'm simply moving the background from popup to RecyclerView so everything will look like before and clipping will work.

Unfortunately for KitKat I'm not sure if it's possible to fix clipping issue here. Plus the rounded background for that version looks terrible due to missing shadow. So I've just went ahead and disabled rounded corners sample for per-lollipop versions. I don't have other ideas...

@Tunous
Copy link
Contributor Author

Tunous commented Apr 15, 2019

Oh and here is sample with proper padding now:

Tunous added 3 commits April 15, 2019 18:36
This change allows users to use custom items that have colored background and also use a popup with rounded corners.

Before the changes, the popup wouldn't display rounded corners for the custom view because its background wasn't clipped and it was drawing outside of the area of rounded drawable. After the change, when drawing, the content is properly clipped to the area of the background drawable and thus rounded corners work correctly.
@zawadz88
Copy link
Owner

For KitKat the solution would be to prepare a custom 9-patch with rounded corners + have the bottom/tip items in the list also use a background with rounded corners. However, I think that might a bit too much for a sample app.

@zawadz88 zawadz88 merged commit 6623c63 into zawadz88:master Apr 16, 2019
@Tunous Tunous deleted the feature/rounded-corners-clipping branch April 16, 2019 15:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants