material design+develop android
DESCRIPTION
Material Design+Develop AndroidTRANSCRIPT
![Page 1: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/1.jpg)
Material Design
![Page 2: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/2.jpg)
Material Design
Develop
![Page 3: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/3.jpg)
Chet Haase Rich Fulcher
![Page 4: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/4.jpg)
Color & Themes
![Page 5: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/5.jpg)
We’ve created an extensive palette with beautiful colors as an aid to choose a good color theme
Color palette
![Page 6: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/6.jpg)
Bold use of primary color
Bold and immersive use of color in large fields in the UI is strongly encouraged
![Page 7: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/7.jpg)
Color density
Densities depend on content - list vs. imagery vs. bold color fields
![Page 8: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/8.jpg)
Examples
![Page 9: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/9.jpg)
Accent color
Highlight important buttons or parts of the UI with a complementary accent color
![Page 10: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/10.jpg)
Accent color applied to controls
![Page 11: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/11.jpg)
DevelopmentThemes
Demo!
![Page 12: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/12.jpg)
To Live in a Material World<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@android:style/Theme.Material" >
Standard Material theme
![Page 13: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/13.jpg)
To Live in a Material World<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@android:style/Theme.Material" >
Standard Material theme
![Page 14: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/14.jpg)
Material world (2)
<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
Customized theme
![Page 15: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/15.jpg)
Material world (2)
<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
Customized theme
<resources> <style name="AppTheme" parent="android:Theme.Material.Light"> <!— item overrides —> </style> </resources>
styles.xml
![Page 16: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/16.jpg)
Colorizing assets<style name="BaseAppTheme" parent="android:Theme.Material.Light"> <item name="android:colorPrimary">@color/theme_default_primary</item> <item name="android:colorPrimaryDark">@color/theme_default_primary_dark</item> <item name="android:colorBackground">@color/theme_background</item> <item name="android:colorAccent">@color/theme_default_accent</item> <item name="android:colorControlHighlight">@color/theme_default_accent_light</item> </style> <style name="RedTheme" parent="BaseAppTheme"> <item name="android:colorPrimary">@color/theme_default_primary_red</item> <item name="android:colorPrimaryDark">@color/theme_default_primary_red_dark</item> </style> <style name="BlueTheme" parent="BaseAppTheme"> <item name="android:colorPrimary">@color/theme_default_primary_blue</item> <item name="android:colorPrimaryDark">@color/theme_default_primary_blue_dark</item> </style>
![Page 17: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/17.jpg)
New theme color attributes
colorPrimary colorPrimaryDark colorAccent colorControlNormal (defaults to textColorSecondary) colorControlActivated (defaults to colorAccent) colorControlHighlight colorButtonNormal
![Page 18: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/18.jpg)
DevelopmentColors
![Page 19: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/19.jpg)
Derive dominant colors from bitmaps
setColor() or setTint() on grayscale assets
Palette
![Page 20: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/20.jpg)
Derive dominant colors from bitmaps
setColor() or setTint() on grayscale assets
Palette
Bitmap bitmap = MaterialTheming.mPhotos.get(imageId);imageView.setImageDrawable(new BitmapDrawable(getResources(), bitmap));Palette palette = Palette.generate(bitmap);PaletteItem item = palette.getDarkVibrantColor();GradientDrawable containerBackground = (GradientDrawable) container.getBackground();containerBackground.setColor(item.getRgb());
![Page 21: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/21.jpg)
Layout
![Page 22: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/22.jpg)
Baseline grids
Structural elements align to an 8dp grid
![Page 23: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/23.jpg)
Keylines
Use Keylines to determine the space between the edge and content
Mobile: 16dp & 72dp
Tablet & desktop: 24dp & 80dp
![Page 24: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/24.jpg)
Increments
Layouts are created with increments of 56 dp on mobile and 64 dp on tablet/desktop
![Page 25: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/25.jpg)
Baseline grids
Use a 4dp baseline grid for typography
![Page 26: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/26.jpg)
An Example
Think in blocks, using standard increments.
![Page 27: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/27.jpg)
Think in blocks
Spacing is created in blocks.
![Page 28: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/28.jpg)
Keylines
Follow the keylines. The text should align.
![Page 29: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/29.jpg)
Baseline grid
Follow the baseline grid. The text should align.
![Page 30: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/30.jpg)
![Page 31: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/31.jpg)
Development: Layout
![Page 32: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/32.jpg)
Standard Android Programming!!!
![Page 33: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/33.jpg)
Standard Android Programming!!!
![Page 34: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/34.jpg)
Dimensionality
![Page 35: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/35.jpg)
The Third Dimension
Paper can be layered in front of and behind other paper.
Paper and Ink
![Page 36: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/36.jpg)
Z-depth
Paper respects the physical dimensions of devices.
Paper and Ink
![Page 37: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/37.jpg)
Z-position and Shadows
Each piece of paper resides at a single position along the z-axis.
Z-position and shadow indicate relationships between surfaces.
Paper and Ink
Step Seam
![Page 38: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/38.jpg)
Z-position and Hierarchy
The z-position of paper cues focus and directs attention ...
Paper and Ink
![Page 39: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/39.jpg)
Z-position and Hierarchy
… and reflects content hierarchy and the scope of actions.
Paper and Ink
![Page 40: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/40.jpg)
Built into framework
![Page 41: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/41.jpg)
DevelopmentIt’s all about the Z
Demo!
![Page 42: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/42.jpg)
Zzzzzzz
View Hierarchy plane
Z = Elevation + TranslationZ
![Page 43: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/43.jpg)
Zzzzzzz
Elevation
View Hierarchy plane
Z = Elevation + TranslationZ
![Page 44: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/44.jpg)
Zzzzzzz
TranslationZ
Elevation
View Hierarchy plane
Z = Elevation + TranslationZ
![Page 45: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/45.jpg)
Zzzzzzz
TranslationZ
Elevation
View Hierarchy plane
Z
Z = Elevation + TranslationZ
![Page 46: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/46.jpg)
Elevation
setElevation(float) setTranslationZ(float) setZ(float)
View
Also, APIs to set outline
![Page 47: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/47.jpg)
Elevation basics: resource files
<View android:layout_width="80dp" android:layout_height="80dp" android:layout_marginRight="40dp" android:background="@drawable/shape" android:elevation="30dp" android:layout_gravity="center"/>
![Page 48: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/48.jpg)
Elevation basics: resource files
<View android:layout_width="80dp" android:layout_height="80dp" android:layout_marginRight="40dp" android:background="@drawable/shape" android:elevation="30dp" android:layout_gravity="center"/>
![Page 49: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/49.jpg)
Elevation basics: code
view.setElevation(120);
view.setTranslationZ(120);view.animate().translationZ(120); view.animate().scaleX(1.2f).scaleY(1.2f).translationZ(120);
![Page 50: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/50.jpg)
Animating elevation state<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="elevate me" android:layout_gravity="center_horizontal" android:stateListAnimator="@anim/elevator"/>
![Page 51: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/51.jpg)
Animating elevation state<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="elevate me" android:layout_gravity="center_horizontal" android:stateListAnimator="@anim/elevator"/>
<?xml version="1.0"?><selector xmlns:a="http://schemas.android.com/apk/res/android"> <item a:state_pressed="true"> <set> <objectAnimator a:propertyName="scaleX" a:duration="100" a:valueTo="1.2"/> <objectAnimator a:propertyName="scaleY" a:duration="100" a:valueTo="1.2"/> <objectAnimator a:propertyName="translationZ" a:duration="100" a:valueTo="20"/> </set> </item> <item> <set> <objectAnimator a:propertyName="scaleX" a:duration="100" a:valueFrom="1.2" a:valueTo="1"/> <objectAnimator a:propertyName="scaleY" a:duration="100" a:valueFrom="1.2" a:valueTo="1"/> <objectAnimator a:propertyName="translationZ" a:duration="100" a:valueFrom="20" a:valueTo="0"/> </set> </item> </selector>
res/anim/elevator.xml
![Page 52: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/52.jpg)
Toolbars
![Page 53: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/53.jpg)
![Page 54: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/54.jpg)
![Page 55: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/55.jpg)
![Page 56: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/56.jpg)
![Page 57: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/57.jpg)
![Page 58: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/58.jpg)
![Page 59: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/59.jpg)
![Page 60: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/60.jpg)
DevelopmentToolbars
Demo!
![Page 61: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/61.jpg)
Toolbar as ActionBar<LinearLayout ...> <Toolbar android:layout_width="match_parent" android:layout_height="400dp" android:background="#70ff70" android:id="@+id/toolbar" /> <!-- --></LinearLayout>
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setActionBar(toolbar);
<style name=“AppThemeNoActionBar" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:windowNoTitle">true</item> </style>
![Page 62: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/62.jpg)
More customizable
Can set scroll position manually
Sibling view
Allows other views (e.g., navigation drawer) to overlay ActionBar
Toolbars
![Page 63: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/63.jpg)
Buttons
![Page 64: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/64.jpg)
Raised Button
Flat Button
Floating Action Button
![Page 65: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/65.jpg)
Raised Button
Flat Button
Floating Action Button
![Page 66: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/66.jpg)
Floating action button
Raised button
Flat button
![Page 67: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/67.jpg)
The FAB
Highlights the most relevant or frequently used action
Tells users what to do next
Strongly characteristic of an app’s function
![Page 68: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/68.jpg)
FAB Transformations
FAB can: -expand into a set of actions -morph into a piece of paper -react around the screen
![Page 69: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/69.jpg)
FAB Transformations
FAB can: -expand into a set of actions -morph into a piece of paper -react around the screen
![Page 70: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/70.jpg)
FAB Expansion
![Page 71: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/71.jpg)
FAB Expansion
![Page 72: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/72.jpg)
FAB Reactions
![Page 73: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/73.jpg)
FAB Reactions
![Page 74: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/74.jpg)
DevelopmentFloating Action Buttons
Demo!
![Page 75: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/75.jpg)
FAB: It’s Just Another ViewFrameLayout
content
View
Circular background, on top of other content in container
![Page 76: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/76.jpg)
FAB: Layout<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent"/> <com.android.example.fabulouslist.RoundView android:id="@+id/fab" android:elevation="4dp" android:layout_width="60dp" android:layout_height="60dp" android:layout_marginBottom="30dp" android:layout_marginRight="30dp" android:layout_gravity="bottom|right" android:background="@drawable/fab"/></FrameLayout>
![Page 77: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/77.jpg)
FAB: Outlinepublic class RoundView extends View { @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { Outline outline = new Outline(); outline.setOval(0, 0, w, h); setOutline(outline); setClipToOutline(true); }}
![Page 78: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/78.jpg)
Motion
![Page 79: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/79.jpg)
Familiarity Solid matter
![Page 80: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/80.jpg)
Familiarity Solid matter
![Page 81: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/81.jpg)
Familiarity Force and mass
![Page 82: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/82.jpg)
Familiarity Force and mass
![Page 83: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/83.jpg)
Natural motionChoreography
![Page 84: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/84.jpg)
Natural motionChoreography
![Page 85: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/85.jpg)
Choreography Arcs
![Page 86: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/86.jpg)
Choreography Arcs
![Page 87: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/87.jpg)
![Page 88: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/88.jpg)
![Page 89: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/89.jpg)
![Page 90: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/90.jpg)
![Page 91: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/91.jpg)
DevelopmentAnimations
Demo!
![Page 92: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/92.jpg)
Animating a view’s clip shape
Example: KitKat search bar
Caveat: Can be expensive
Better than KitKat, but still not cheap
Older APIs still valid for small shape reveals
Canvas.drawRoundRect() with BitmapShader
Reveal
ViewAnimationUtils.createCircularReveal(View view,
int centerX, int centerY,
float startRadius, float endRadius);
![Page 93: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/93.jpg)
Animating a view’s clip shape
Example: KitKat search bar
Caveat: Can be expensive
Better than KitKat, but still not cheap
Older APIs still valid for small shape reveals
Canvas.drawRoundRect() with BitmapShader
Reveal
ViewAnimationUtils.createCircularReveal(View view,
int centerX, int centerY,
float startRadius, float endRadius);
![Page 94: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/94.jpg)
Animation Curves: Timing
@interpolator/fast_out_slow_in @interpolator/linear_out_slow_in @interpolator/fast_out_linear_in
![Page 95: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/95.jpg)
Animation Curves: Custom Timing
<pathInterpolator android:controlX1="0.4" android:controlY1="0" android:controlX2="1" android:controlY2="1"/>
![Page 96: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/96.jpg)
!
!
!
!
!
!
!
!
See ApiDemo PathAnimations for examples
Animation Curves: Motion
Path path = new Path(); path.moveTo(10, 10); path.cubicTo(20, 20, 20, 100, 100, 100); ObjectAnimator.ofFloat(view, “x”, “y”, path).start();
![Page 97: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/97.jpg)
DevelopmentAnimations
Demo!
![Page 98: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/98.jpg)
Enabling transitions<resources> <style name="Theme.Sample" parent="Theme.Base"> <item name="android:windowContentTransitions">true</item> <item name="android:windowSharedElementEnterTransition"> @transition/grid_detail_transition </item> <item name="android:windowSharedElementExitTransition"> @transition/grid_detail_transition </item> </style> </resources>
![Page 99: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/99.jpg)
Customizing transitions<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds> <targets> <target android:targetId="@id/textview_name" /> <target android:targetId="@id/textview_title" /> </targets> </changeBounds> <moveImage> <targets> <target android:targetId="@id/imageview_header" /> <target android:targetId="@id/imageview_item" /> </targets> </moveImage> </transitionSet>
![Page 100: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/100.jpg)
Shared element setup
ActivityOptions activityOptions = ActivityOptions.makeSceneTransitionAnimation(this, new Pair<View, String>( view.findViewById(R.id.imageview_item), DetailActivity.VIEW_NAME_HEADER_IMAGE), new Pair<View, String>( view.findViewById(R.id.textview_name), DetailActivity.VIEW_NAME_HEADER_TITLE) ); startActivity(intent, activityOptions.toBundle());
![Page 101: Material Design+Develop Android](https://reader035.vdocument.in/reader035/viewer/2022062805/55cf9340550346f57b9d2cf5/html5/thumbnails/101.jpg)
For more informationL Developer Preview developer.android.com/preview
Material Design at I/O google.com/events/io/io14videos
Material Witness Demo curious-creature.org/2014/06/26/google-io-2014-slides-and-demo
developer.android.com/preview/samples.htmlPreview Demos
Google+ google.com/+RichardFulcher
google.com/+ChetHaase
Podcast Android Developers Backstage