Material Design+Develop Android
-
Upload
ankit-garg -
Category
Documents
-
view
67 -
download
0
description
Transcript of Material Design+Develop Android
Material Design
Material Design
Develop
Chet Haase Rich Fulcher
Color & Themes
We’ve created an extensive palette with beautiful colors as an aid to choose a good color theme
Color palette
Bold use of primary color
Bold and immersive use of color in large fields in the UI is strongly encouraged
Color density
Densities depend on content - list vs. imagery vs. bold color fields
Examples
Accent color
Highlight important buttons or parts of the UI with a complementary accent color
Accent color applied to controls
DevelopmentThemes
Demo!
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
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
Material world (2)
<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
Customized theme
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
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>
New theme color attributes
colorPrimary colorPrimaryDark colorAccent colorControlNormal (defaults to textColorSecondary) colorControlActivated (defaults to colorAccent) colorControlHighlight colorButtonNormal
DevelopmentColors
Derive dominant colors from bitmaps
setColor() or setTint() on grayscale assets
Palette
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());
Layout
Baseline grids
Structural elements align to an 8dp grid
Keylines
Use Keylines to determine the space between the edge and content
Mobile: 16dp & 72dp
Tablet & desktop: 24dp & 80dp
Increments
Layouts are created with increments of 56 dp on mobile and 64 dp on tablet/desktop
Baseline grids
Use a 4dp baseline grid for typography
An Example
Think in blocks, using standard increments.
Think in blocks
Spacing is created in blocks.
Keylines
Follow the keylines. The text should align.
Baseline grid
Follow the baseline grid. The text should align.
Development: Layout
Standard Android Programming!!!
Standard Android Programming!!!
Dimensionality
The Third Dimension
Paper can be layered in front of and behind other paper.
Paper and Ink
Z-depth
Paper respects the physical dimensions of devices.
Paper and Ink
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
Z-position and Hierarchy
The z-position of paper cues focus and directs attention ...
Paper and Ink
Z-position and Hierarchy
… and reflects content hierarchy and the scope of actions.
Paper and Ink
Built into framework
DevelopmentIt’s all about the Z
Demo!
Zzzzzzz
View Hierarchy plane
Z = Elevation + TranslationZ
Zzzzzzz
Elevation
View Hierarchy plane
Z = Elevation + TranslationZ
Zzzzzzz
TranslationZ
Elevation
View Hierarchy plane
Z = Elevation + TranslationZ
Zzzzzzz
TranslationZ
Elevation
View Hierarchy plane
Z
Z = Elevation + TranslationZ
Elevation
setElevation(float) setTranslationZ(float) setZ(float)
View
Also, APIs to set outline
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"/>
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"/>
Elevation basics: code
view.setElevation(120);
view.setTranslationZ(120);view.animate().translationZ(120); view.animate().scaleX(1.2f).scaleY(1.2f).translationZ(120);
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"/>
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
Toolbars
DevelopmentToolbars
Demo!
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>
More customizable
Can set scroll position manually
Sibling view
Allows other views (e.g., navigation drawer) to overlay ActionBar
Toolbars
Buttons
Raised Button
Flat Button
Floating Action Button
Raised Button
Flat Button
Floating Action Button
Floating action button
Raised button
Flat button
The FAB
Highlights the most relevant or frequently used action
Tells users what to do next
Strongly characteristic of an app’s function
FAB Transformations
FAB can: -expand into a set of actions -morph into a piece of paper -react around the screen
FAB Transformations
FAB can: -expand into a set of actions -morph into a piece of paper -react around the screen
FAB Expansion
FAB Expansion
FAB Reactions
FAB Reactions
DevelopmentFloating Action Buttons
Demo!
FAB: It’s Just Another ViewFrameLayout
content
View
Circular background, on top of other content in container
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>
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); }}
Motion
Familiarity Solid matter
Familiarity Solid matter
Familiarity Force and mass
Familiarity Force and mass
Natural motionChoreography
Natural motionChoreography
Choreography Arcs
Choreography Arcs
DevelopmentAnimations
Demo!
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);
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);
Animation Curves: Timing
@interpolator/fast_out_slow_in @interpolator/linear_out_slow_in @interpolator/fast_out_linear_in
Animation Curves: Custom Timing
<pathInterpolator android:controlX1="0.4" android:controlY1="0" android:controlX2="1" android:controlY2="1"/>
!
!
!
!
!
!
!
!
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();
DevelopmentAnimations
Demo!
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>
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>
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());
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