Material ComponentsのShapeのガイドラインと、Shapeを用いてアプリを角丸デザインにした実例をご紹介します。
Shape DesignwithMaterial Components
View Slide
Hikaru Umetsu(@umechanhika)Individual developerAndroid & FlutterAbout meApps
The GOAL isto enable youto implement shapeusing Material Components.
IntroductionAbout shapeGuidelineHow to implementCase study
About shapeCustomizable corners
Guideline
Usage
Emphasis
Identity
State
Branding
Attributes
Rounded CutShape family
Absolute PercentageShape size
Categories
Small components
Medium components
Large components
Caution
Do. Donʼt.Absolute or Percentage
Full-screen componentsDonʼt use shapeon the corners offull-screen andexpanded components.
How to implement
Apply categoriesparent="ShapeAppearance.MaterialComponents.SmallComponent">cut4dp<br/>...<br/><item name="shapeAppearanceSmallComponent">@style/SmallCompShapeAppearance</item><br/>...<br/>
Apply components<br/><item name="cornerFamily">rounded</item><br/><item name="cornerSize">16dp</item><br/><br/><item name="shapeAppearanceOverlay">@style/CardViewShapeAppearanceOverlay</item><br/><br/>...<br/><item name="materialCardViewStyle">@style/CardViewStyle</item><br/>...<br/>
Apply individual component<br/><item name="cornerFamily">rounded</item><br/><item name="cornerSize">16dp</item><br/>android:layout_width="match_parent"android:layout_height="wrap_content"app:shapeAppearanceOverlay="@style/CardViewShapeAppearanceOverlay">android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/card_text"/>
Case study
About appName: HappinessBankConcept: happiness/soft/warmthAdopt:Branding
Before AfterBottomAppBar
Before AfterBottomSheet
Before AfterSmallComponents
SummaryShape is the customizable corners.Usage of shape is Emphasis, Identity, State, and Branding.You can customize it using styles.xml.
Thanks!