Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material design basics

Material design basics

A tour of material design APIs showing some sample code and beautiful user interface elements we can implement following the Material guidelines and using the new Android APIs.

Karumi

June 21, 2016
Tweet

More Decks by Karumi

Other Decks in Technology

Transcript

  1. We embark on every project with a commitment to create

    something elegant, enduring and effective. That is our heartbeat. Our approach is uniquely simple and honest, we are a small dedicated software studio, delivering outstanding work. Karumi is the Rock Solid code software development studio.
  2. ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() { @Override public void getOutline(View

    view, Outline outline) { int size = getResources(). getDimensionPixelSize( R.dimen.fab_size); outline.setOval(0, 0, size, size); } }; view.setClipToOutline(true); view.setOutlineProvider(viewOutlineProvider );
  3. Palette dependencies { compile 'com.android.support:palette- v7:21.0.+' } Palette p =

    Palette.generate(bitmap); Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { public void onGenerated(Palette palette) { // Do something with colors... } });
  4. Theme transitions <style name="BaseAppTheme" parent=“android:Theme.Material"> <!-- specify enter and exit

    transitions --> <item name="android:windowEnterTransition">@transition/ explode</item> <item name=“android:windowExitTransition”>@transition/ explode</item> <!-- specify shared element transitions --> <item name=“android:windowSharedElementEnterTransition"> @transition/change_image_transform</item> <item name=“android:windowSharedElementExitTransition”>
  5. Code transitions // set an exit transition getWindow().setExitTransition(new Explode()); //

    all the options Window.setEnterTransition() Window.setExitTransition() Window.setSharedElementEnterTransition() Window.setSharedElementExitTransition() // start the Activity startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this). toBundle());
  6. Element transitions <ImageView … android:transitionName=“@transition/my_transition” … /> ActivityOptions options =

    ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, transitionName); startActivity(intent, options.toBundle());
  7. Bibliography They’re the cracks! What Material means to Android. David

    González. Codemotion. 2014 Material Witness. Chet Haase and Romain Guy. Google IO. 2014 Papercraft. Chris Banes and Nick Butcher. Droidcon UK. 2014 http://www.google.com/design