[Android] Improve default Button shadow & size appearance #3251

samhouts · 2018-07-09T21:27:37Z

Description of Change

When using the DefaultPadding and DefaultShadow platform specific properties, Button size and shadow now more closely match the default Android size and shadow. Note that this is not intended to be a pixel perfect match.

#2664 Before >> After

#1436 Before >> After

WARNING: This is a visual breaking change from 2.5+.

Issues Resolved

meant to fix [Android] Buttons with BackgroundColor shadow/size problems. #2664

API Changes

None

Platforms Affected

Android

Behavioral/Visual Changes

[Android] Buttons now have a slightly different shadow radius that more closely mimics Android's default Button image.
[Android] Button shadow color now defaults to a light gray instead of a shade of the Button color.
[Android] Button border is drawn outside of the Button instead of on top of it and can increase the size of the Button.
[Android] Button width is slightly increased.

PR Checklist

Has automated tests
Rebased on top of the target branch at time of PR
Changes adhere to coding standard

hartez · 2018-07-20T22:50:51Z

Xamarin.Forms.Platform.Android/ButtonBackgroundTracker.cs

- float shadowDy = useDefaultShadow ? 4 : _nativeButton.ShadowDy;
- AColor shadowColor = useDefaultShadow ? _backgroundDrawable.PressedBackgroundColor.ToAndroid() : _nativeButton.ShadowColor;
+ float shadowDy = useDefaultShadow ? 1 : _nativeButton.ShadowDy;
+ AColor shadowColor = useDefaultShadow ? Color.FromHex("#c4c4c4").ToAndroid() : _nativeButton.ShadowColor;


Do we have a reference for this color code?

hartez · 2018-07-20T22:51:19Z

Xamarin.Forms.Platform.Android/Renderers/ButtonDrawable.cs

@@ -36,6 +36,9 @@ float PaddingTop
 set { _paddingTop = value; }
 }

+ double BorderWidth => Math.Max(Button.IsSet(Button.BorderWidthProperty) ? Button.BorderWidth : .25, 0);
+ Color BorderColor => Button.IsSet(Button.BorderColorProperty) && Button.BorderColor != Color.Default ? Button.BorderColor : Color.FromHex("#c5c5c5");


Same here - where do these colors come from? Is there a guide or source code we can point to?

samhouts · 2018-10-03T22:52:32Z

build --uitests

rmarinho

Every thing looks good. While testing the ButtonGallery i just found a little difference, trying to understand from where:
Border radius before

Border radius after

This one is expected right and the most breaking change BorderWidth

Before:

After:

rmarinho · 2018-12-07T13:18:20Z

Xamarin.Forms.Platform.Android/Renderers/BorderDrawable.cs


 RectF rect = new RectF(0, 0, width, height);
- rect.Inset(inset + PaddingLeft, inset + PaddingTop);


@samhouts after some testing , adding this back and subtracting the inset above that we remove, fix the issue with the corner radius that I noticed in my review, at the same time it makes the border width look bigger basically looking as before

More testing seems that adding what we had with inset still makes #2664 look the same. Maybe we should pull that in ? At the same time I like the border better without the inset :/

(With inset changes back in)

1436 (With inset changes back in)
1st button seems smaller

I'm seeing the same thing as @rmarinho on this one
I've been playing with this for a little bit and here's where I am so far

https://gist.github.com/PureWeen/855e7acdffe2087553a75881f95d23f6
Basically I changed the insets a bit because I wasn't quite sure on the intent of the math in the PR

I inset the background just based on padding and shadow
And then I inset the Outline the same but then plus half the borderwidth which just shrinks it down so the outer edge of the stroke lines up with the background

The effect of this is that if you set a really wide stroke you'll still see a shadow

mattleibow · 2019-01-15T15:44:55Z

This is probably something that we want to do: #4185

…image fixes #2664

Co-Authored-By: Shane Neuville <pureween@users.noreply.github.com>

samhouts · 2019-04-29T17:38:20Z

I think this PR introduces more problems than it solves. Closing for now.

samhouts added the breaking Changes behavior or appearance label Jul 9, 2018

samhouts requested review from jassmith and hartez July 16, 2018 23:24

hartez suggested changes Jul 20, 2018

View reviewed changes

hartez approved these changes Jul 23, 2018

View reviewed changes

samhouts force-pushed the fix-2664 branch 2 times, most recently from 5e1925d to 0fbf747 Compare August 2, 2018 17:20

samhouts force-pushed the fix-2664 branch from 0fbf747 to 5869fad Compare August 13, 2018 18:15

samhouts force-pushed the fix-2664 branch from 5869fad to 596e13e Compare October 3, 2018 22:52

samhouts added e/7 🕖 7 i/low Has trivial workaround; affects very few users p/Android t/bug 🐛 labels Nov 2, 2018

samhouts removed the request for review from jassmith November 21, 2018 22:43

rmarinho self-requested a review December 7, 2018 00:58

rmarinho force-pushed the fix-2664 branch from 596e13e to c456827 Compare December 7, 2018 12:40

rmarinho approved these changes Dec 7, 2018

View reviewed changes

rmarinho reviewed Dec 7, 2018

View reviewed changes

rmarinho added the DO-NOT-MERGE-!!! 🛑 This is in progress and needs to be updated before it can be merged. label Dec 13, 2018

PureWeen self-assigned this Dec 13, 2018

samhouts mentioned this pull request Jan 15, 2019

[Material] + [Android, iOS] Refactored and fixed lots of button layout issues #4967

Merged

3 tasks

mattleibow mentioned this pull request Jan 15, 2019

[Android] Rework BackgroundTracker to not retain or possibly even use Bitmaps #4185

Closed

samhouts and others added 4 commits April 22, 2019 15:26

Add repro for #2664

7f81f51

[Android] Adjust ButtonDrawable to more closely match default Button …

e271a5c

…image fixes #2664

Fix test case

f30dc62

[Android] Update to usage of BroderElement

8529d95

samhouts force-pushed the fix-2664 branch from c456827 to 8529d95 Compare April 22, 2019 22:30

samhouts changed the base branch from master to 4.0.0 April 22, 2019 22:30

Fix corner radius

9def71a

Co-Authored-By: Shane Neuville <pureween@users.noreply.github.com>

samhouts closed this Apr 29, 2019

rmarinho deleted the fix-2664 branch November 14, 2019 12:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] Improve default Button shadow & size appearance #3251

[Android] Improve default Button shadow & size appearance #3251

samhouts commented Jul 9, 2018 •

edited

Loading

hartez Jul 20, 2018

hartez Jul 20, 2018

samhouts commented Oct 3, 2018

rmarinho left a comment

rmarinho Dec 7, 2018 •

edited

Loading

rmarinho Dec 7, 2018 •

edited

Loading

PureWeen Dec 20, 2018

mattleibow commented Jan 15, 2019

samhouts commented Apr 29, 2019


		RectF rect = new RectF(0, 0, width, height);
		rect.Inset(inset + PaddingLeft, inset + PaddingTop);

[Android] Improve default Button shadow & size appearance #3251

[Android] Improve default Button shadow & size appearance #3251

Conversation

samhouts commented Jul 9, 2018 • edited Loading

Description of Change

#2664 Before >> After

#1436 Before >> After

Issues Resolved

API Changes

Platforms Affected

Behavioral/Visual Changes

PR Checklist

hartez Jul 20, 2018

Choose a reason for hiding this comment

hartez Jul 20, 2018

Choose a reason for hiding this comment

samhouts commented Oct 3, 2018

rmarinho left a comment

Choose a reason for hiding this comment

rmarinho Dec 7, 2018 • edited Loading

Choose a reason for hiding this comment

rmarinho Dec 7, 2018 • edited Loading

Choose a reason for hiding this comment

PureWeen Dec 20, 2018

Choose a reason for hiding this comment

mattleibow commented Jan 15, 2019

samhouts commented Apr 29, 2019

samhouts commented Jul 9, 2018 •

edited

Loading

rmarinho Dec 7, 2018 •

edited

Loading

rmarinho Dec 7, 2018 •

edited

Loading