Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Android Lollipop - Webinar am 11.12.2014
Next
Download to read offline and view in fullscreen.

Share

Getting Started With Material Design

Download to read offline

Getting started with Material Design presentation by David Montiel & Yasin Yildirim

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Getting Started With Material Design

  1. 1. Getting Started with Material Design David Montiel Yasin Yıldırım eBay Kleinanzeigen
  2. 2. Who Are We? David Montiel ● 3+ Years on Android Development ● >1 Year @eBay Kleinanzeigen ● Before worked at Google, LinkedIn, Xing. ● Enjoy staying up to date with current Android design patterns.
  3. 3. Who Are We? Yasin Yıldırım ● 4+ years on Android Development ● 1,5 Year @eBay Kleinanzeigen ● Before worked at couple of software agencies in Turkey ● Passionate about Android
  4. 4. Android App ● German Classifieds platform ● >6 Mio downloads ● 4,4 / 5 stars rating (68K ratings) ● Got featured on Play Store
  5. 5. This presentation is a very general overview
  6. 6. In-App Navigation ● Inside the app, Up button usually means back. (But not always!)
  7. 7. Where Up doesn’t mean Back?
  8. 8. Navigation Drawer ● The common pattern for navigating between main parts of your app
  9. 9. Swipe Between Views ● Provide easiest possible navigation between Views for the user
  10. 10. Pure Android ● Do not mimic UI elements from other platforms ● Do not carry over platform specific icons
  11. 11. Pure Android ● No bottom tabs ● No labels on back buttons ● No right-pointing carets on line items
  12. 12. Some Material Taste?
  13. 13. First thing to assume... ● You will be spending much more time programming animations… ● Most of the “new” animations are provided by android, but many others continue depending on AnimationUtils, TranslateAnimation, etc..
  14. 14. Material design focuses on... ● Animations ● Layers ● Minimalism
  15. 15. Basic Items: List and Cards ● Android provides new widgets for displaying cards and lists with material design styles and animations.
  16. 16. Basic Items: Animations! ● There are a lot of new recommended animations
  17. 17. Floating Elements: The Z axis ● Some items in material design elevate in a Z axis, occupying a space “closer” to the user. Use the shadow!
  18. 18. Floating Button: The basic example
  19. 19. Let’s get technical!
  20. 20. dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:+' compile 'com.android.support:cardview-v7:+' compile 'com.android.support:recyclerview-v7:+' compile 'com.android.support:palette-v7:+' } Add support libraries for backwards compatibility ● AppCompat: Backport for ActionBar & Material Design UI implementations ● RecyclerView: Includes RecyclerView, RecyclerView.Adapter & LayoutManagers ● CardView: Contains CardView widget to have cards layout easily ● Palette: Extracts prominent colors from an image
  21. 21. values/styles.xml <!-- Base application theme. --> <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. → <!-- your app branding color for the app bar --> <item name="colorPrimary">@color/primary</item> <!-- darker variant for the status bar and contextual app bars --> <item name="colorPrimaryDark">@color/primary_dark</item> <!-- theme UI controls like checkboxes and text fields --> <item name="colorAccent">@color/accent</item> </style> Style your app
  22. 22. Cool new DrawerToggle Update your imports to get the latest version import android.support.v4.app.ActionBarDrawerToggle import android.support.v7.app.ActionBarDrawerToggle ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle( this, /* host Activity */ drawerLayout, /* DrawerLayout object */ R.string.drawer_open, /* "open drawer" description */ R.string.drawer_close /* "close drawer" description */ )
  23. 23. Cool new DrawerToggle - Getting the animation drawerToggle = new ActionBarDrawerToggle (this, drawerLayout, R.string .drawer_open, R.string .drawer_close) { @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); // Synchronize the indicator with the state of the linked DrawerLayout drawerToggle.syncState(); } @Override public void onDrawerOpened (View drawerView) { super .onDrawerOpened(drawerView); getSupportActionBar() .setTitle(getString( R.string .app_name)); } @Override public void onDrawerClosed (View drawerView) { super .onDrawerClosed(drawerView); getSupportActionBar() .setTitle(getString( R.string .activity_title)); } };
  24. 24. Cool new DrawerToggle - Style the hamburger <!-- Base application theme. --> <style name= "AppTheme.Base" parent= "Theme.AppCompat.Light.DarkActionBar" > <item name= "colorPrimary" >@color/primary</item> <item name= "colorPrimaryDark" >@color/primary_dark</item> <item name= "colorAccent" >@color/accent</item> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> </style> <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <!--The size of the bars when they are parallel to each other--> <item name="barSize">20dp</item> <!--The max gap between the bars when they are parallel to each other--> <item name="gapBetweenBars">4dp</item> <!--The size of the middle bar when top and bottom bars merge into middle bar to form an arrow--> <item name="middleBarArrowSize">20dp</item> <!--The size of the top and bottom bars when they merge to the middle bar to form an arrow--> <item name="topBottomBarArrowSize">15dp</item> <!--The thickness (stroke size) for the bar paint--> <item name="thickness">2dp</item> <!--Whether bars should rotate or not during transition--> <item name="spinBars">true</item> <!--The drawing color for the bars--> <item name="color">@android:color/white</item> </style>
  25. 25. Cool new SwipeRefreshLayout ● Looks better ● Doesn’t move the content down & up again ● More options to customize ● Single or multiple colors for progress swipeRefreshLayout.setProgressBackgroundColor(R.color.accent_light); swipeRefreshLayout.setSize(SwipeRefreshLayout.DEFAULT); OR swipeRefreshLayout.setSize(SwipeRefreshLayout.LARGE); swipeRefreshLayout.setColorSchemeResources(R.color.red,R.color.blue,R.color.yellow,R.color.green); OR swipeRefreshLayout.setColorSchemeResources(R.color.red,R.color.yellow); OR swipeRefreshLayout.setColorSchemeResources(R.color.red);
  26. 26. RecyclerView ● Advanced & more flexible version of ListView ● Recycling is more efficient ● Layout managers for positioning items ● Item animators for adding / removing items RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view); RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this); recyclerView.setLayoutManager(layoutManager); recyclerView.setAdapter(adapter);
  27. 27. RecyclerView.Adapter<VH extends RecyclerView.ViewHolder> private static class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> { @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { // create a new view View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false); // set the view's size, margins, paddings and layout parameters return new ViewHolder(v); } @Override public void onBindViewHolder(ViewHolder holder, int position) { holder.textView.setText(dataset.get(position)); } } ● Using a ViewHolder is mandatory
  28. 28. RecyclerView.ViewHolder public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { public final CardView wholeListItem; public final TextView textView; public ViewHolder (CardView v) { super(v); wholeListItem = (CardView ) v.findViewById( R.id.card_view); textView = (TextView ) v.findViewById( R.id.text_view); } @Override public void onClick (View v) { if (v.getId() == R.id.card_view) { // Clicked on list item at getPosition() } else if (v.getId() == R.id.text_view) { // Clicked on textView at getPosition() } } } } ● There’s no OnItemClickListener for RecyclerView, ViewHolder takes care of all clicks
  29. 29. CardView <android.support.v7.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="100dp" android:foreground="?android:attr/selectableItemBackground" app:cardCornerRadius="2dip" app:cardElevation="1sp" app:cardUseCompatPadding="true" app:cardBackgroundColor="#fcfcfc"> </android.support.v7.widget.CardView>
  30. 30. Shared Elements & Activity Transitions ● Only works with Lollipop (API Level 21) ● Activity starting is made with ActivityCompat values-v21/styles.xml: <style name= "AppTheme" parent= "AppTheme.Base" > <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> <item name="android:windowSharedElementExitTransition">@android:transition/move</item> </style>
  31. 31. Shared Elements & Activity Transitions First Activity: // Define transition options ActivityOptionsCompat options = ActivityOptionsCompat .makeSceneTransitionAnimation(this, Second Activity: @Override protected void onCreate( Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView( R.layout .activity_planet_detail); image = (ImageView ) findViewById( R.id.planet_image); // Animate the shared element ViewCompat .setTransitionName(image, "SHARED_IMAGE" ); } new Pair<View, String> (view.findViewById( R.id.grid_item_planet_image), "SHARED_IMAGE" )); // Create intent Intent intent = new Intent (this, PlanetDetailActivity .class); // Start activity with defined options ActivityCompat .startActivity(this, intent, options .toBundle());
  32. 32. ToolBar as ActionBar In the activity.xml: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="@android:color/transparent" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> In the activity use a theme with no action bar: <!-- Base application theme with no actionbar. --> <style name="AppTheme.Base.NoActionBar" parent=" AppTheme.Base"> <item name="android:windowNoTitle">true</item> <item name="windowActionBar">false</item> </style> private void setupToolBar() { toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); }
  33. 33. Tangible Surfaces public void onScrollChanged(int deltaX, int deltaY) { int scrollY = scrollView.getScrollY(); // Move background photo (with parallax effect) imageContainer.setTranslationY(scrollY * 0.5f); float newTop = Math.max(imageHeightPixels, scrollY); if (imageHeightPixels - scrollY <= toolBarHeightPixels) { // We reached the ToolBar newTop = scrollY + toolBarHeightPixels; } // Reposition the name bar -- it's normally anchored to the top of the detail part, // but locks to the bottom of the ToolBar on scroll nameContainer.setTranslationY(newTop); float gapFillProgress = 1; if (imageHeightPixels != 0) { gapFillProgress = Math.min(Math.max(getProgress(scrollY, 0, imageHeightPixels), 0), 1); } ViewCompat.setElevation(nameContainer, gapFillProgress* mMaxHeaderElevation); toolbar.getBackground().setAlpha((int) (gapFillProgress * 255)); }
  34. 34. Color Palette // Get palette from an image Palette.generateAsync(bitmap, new PaletteListener()); private class PaletteListener implements Palette.PaletteAsyncListener { @Override public void onGenerated(Palette palette) { lightVibrantColorFromImage = palette.getLightVibrantColor(R.color.light_blue); textViewPlanetName.setBackgroundColor(lightVibrantColorFromImage); } }
  35. 35. Overlapping Motion private void expandAnimation(int position, View convertView) { final View finalConvertView = convertView; convertView.postDelayed(new Runnable() { @Override public void run() { Animation a = AnimationUtils.loadAnimation (context, R.anim.scale_up_from_center); finalConvertView.setAnimation(a); finalConvertView.setVisibility(View.VISIBLE); } }, position * 30); } <scale android:interpolator="@android: anim/accelerate_decelerate_interpolator" android:duration="150" android:fillAfter="true" android:fromXScale="0.0" android:fromYScale="0.0" android:toXScale="1.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" />
  36. 36. view.animate().translationZ(20f).setDuration(500).setListener(new Animator.AnimatorListener() { // ..... other overriden methods @Override public void onAnimationEnd(Animator animation) { view.animate().translationZ(1f).setDuration(500).start(); } }).start(); translationZ Animation
  37. 37. State List Animator <ImageButton android :layout_width ="@dimen/floating_button_height" android :layout_height ="@dimen/floating_button_height" android :layout_gravity ="bottom|end" android :elevation ="5sp" android :layout_margin ="25dip" android :background ="@drawable/floating_button_bg" android :src="@drawable/ic_plus" android :stateListAnimator ="@anim/floating_button_state_list_anim" android :contentDescription ="@string/floating_button" /> floating_button_state_list_anim: <selector xmlns :android ="http://schemas.android.com/apk/res/android" > <item android :state_enabled ="true" android :state_pressed ="true" > <set> <objectAnimator android :duration ="@android:integer/config_shortAnimTime" android :propertyName ="translationZ" android :valueTo ="15dp" android :valueType ="floatType" /> </set> </item> <item> <set> <objectAnimator android :duration ="@android:integer/config_shortAnimTime" android :propertyName ="translationZ" android :valueTo ="0dp" android :valueType ="floatType" /> </set> </item> </selector >
  38. 38. Last thought.. Developers can make it happen but… we still need a designer...
  39. 39. Code & Slides https://github.com/vudin/MaterialDesignDemo http://goo.gl/xKJRdu
  40. 40. Questions? +DavidMontiel +YasinYildirimm @davidmonti @vudin
  • CameronRogers

    Jun. 4, 2015
  • taufikerst1

    May. 23, 2015
  • veenary

    Apr. 1, 2015
  • wemakegreat1

    Mar. 28, 2015
  • JungKim2

    Mar. 26, 2015
  • ssuserf2cb68

    Mar. 26, 2015
  • wonkyulee1

    Mar. 25, 2015
  • denexus

    Mar. 25, 2015
  • choiseoksoon

    Mar. 25, 2015
  • JaehwanLee

    Mar. 25, 2015
  • junsukoh75

    Mar. 25, 2015
  • lastkuku

    Mar. 25, 2015
  • studioego

    Mar. 25, 2015
  • sgoh5492

    Mar. 25, 2015
  • eunseokkang1

    Mar. 25, 2015
  • munhoc

    Mar. 25, 2015
  • MinyoungJung2

    Mar. 25, 2015
  • arload

    Mar. 25, 2015
  • ikarella

    Feb. 20, 2015
  • draskosaric

    Feb. 20, 2015

Getting started with Material Design presentation by David Montiel & Yasin Yildirim

Views

Total views

4,387

On Slideshare

0

From embeds

0

Number of embeds

31

Actions

Downloads

89

Shares

0

Comments

0

Likes

23

×