[Material] Contained Button Spec

[PureWeen]

Material Contained Button Spec

https://material.io/design/components/buttons.html#contained-button

This spec describes the expectation for the Contained Material Button and will be expected to meat the following goal for iOS and Android as outlined in the original Visual Spec #4435

The expectation for this initial implementation will be to enable the developer to hit the base material spec as close as possible on iOS and Android. We will attempt to provide Visually identical rendering with the existing APIs but there are levels of customization where this may not be possible or where it may not come until a later date.

Expectations

• Visually Identical
  The rendering should be such that the naked eye can’t tell the difference at a glance. Not to be confused with “pixel perfect”
• Padding/Margins
  The padding and margins should be the same.
• Font
  The size is supposed to be the same and might just be the minute font face differences.
• Border
  The border property of both platforms is not really supported, and has visual artifacts:
  Android:       iOS:
  This issue is tracked at Tinting the background of an outlined Material Components button material-components/material-components-android#129. It has been fixed in AndroidX, but not in the support libraries.
  As as result of this, [Material] + [Android, iOS] Refactored and fixed lots of button layout issues #4967 restricts the border to exactly 1dip. This hides the problem for most cases, although if you look really closely at Android, the border still sticks out.
• Text Wrapping
  Android does this fine and is a centered text [next to the image]. iOS buttons (both Material and default) do NOT support multilines and cannot wrap. There are hacks to change the mode (and it does wrap), but the button can't understand this and will have to be manually sized. This is compounded that it also does not support image positions other than left. The hacks (and I call it hacks as the layout is still technically incorrect) we do make it even harder to properly measure the text bounds.
• Command
  No change
• Corner Radius
  Should render identically on both platforms
• ContentLayout
  In the majority of cases Icon positioning will render correctly for (right, left,top, and bottom) if the text is keeping to Material expectations. Refer to the comments above about text once user starts to stray

API

<Button Visual="Material" />

new Button() { Visual = VisualMarker.Material }

Difficulty : high

Screenshots

Android	iOS