a developers view on material design
TRANSCRIPT
Goals• Visual design language that synthesises classic
principles of good design
• Unified experience across platforms and different
device sizes
• Provide guidelines in order to create appealing
Android applications
Material Principles
Material is a metaphor
It is the unifying theory of a
rationalised space and a system of
motion.
Yet technologically advanced and
open to imagination and magic.
Bold, graphic, intentional
The foundational elements of print-
based design – typography, grids,
space, scale, colour, and use of
imagery – guide visual treatments.
Motion provides meaning
Motion respects and reinforces the
user as the prime mover. Primary
user actions are inflection points
that initiate motion, transforming
the whole design.
Elevationres/layout/fragment_sample.xml
<ImageView android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="5dp"/>
SampleFragment.java
view.animate().translationZ(5).start();
res/layout/foo_card.xml
<LinearLayout xmlns:android=""
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
</android.support.v7.widget.CardView>
</LinearLayout>
<style name="AppTheme" parent=“android:Theme.Material.Light.DarkActionBar”> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorAccent">@color/accent</item> <item name=“android:colorPrimaryDark">@color/primary_dark</item></style>
res/layout-v21/theme.xml
SDK 21 and above
<style name="AppTheme" parent=“Theme.AppCompat.Light.DarkActionBar > <item name="android:colorPrimary">@color/primary</item> <item name="android:colorAccent">@color/accent</item> <item name=“android:colorPrimaryDark">@color/primary_dark</item></style>
res/layout/theme.xml
SDK 7 and above
Toolbar in Material
MainActivity.java Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setActionBar(toolbar);
res/layout/toolbar.xml <Toolbar
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width=“match_parent"
android:minHeight="?android/actionBarSize"
android:background="?android/colorPrimary"/>
Toolbar in AppCompat
MainActivity.java Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
res/layout/toolbar.xml <android.support.v7.widget.Toolbar
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width=“match_parent"
android:minHeight="?android/actionBarSize"
android:background="?android/colorPrimary"/>
Reveal effect
MyActivity.java
Animator anim = ViewAnimationUtils.
createCircularReveal(
myView,
centerX,
centerY,
startRadius,
finalRadius);
anim.start();
final View myView = findViewById(R.id.my_view);
Animator anim =
ViewAnimationUtils.createCircularReveal(myView,
cx,
cy,
initialRadius,
0);
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
} });
MyActivity.java
Vector Drawables
res/layout/fragment_heart.xml
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/heart"/>
<vector xmlns:android=“...”
android:height="256dp"
android:width="256dp"
android:viewportWidth="32"
android:viewportHeight="32">
<path
android:fillColor="@color/orange"
android:pathData="M20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
c-0.67,-1.732,-2.547,-3,-4.5,-3
C8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c5.207,-5.242,9,-7.97,9,-11.5
C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>
res/drawable/heart.xml
Further Reading
• http://geekmk.com
• https://www.google.com/design/spec/material-design/introduction.html
References
• Google material design Guidelines
• Novodo