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.

TIPS of Material Design

1,787 views

Published on

TIPS of Material Design

Published in: Technology
  • Hi! Get Your Professional Job-Winning Resume Here! 👉 http://bit.ly/rexumtop
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

TIPS of Material Design

  1. 1. TIPS of Material Design (Android) @takuji31
  2. 2. About me • Takuji Nishibayashi • @takuji31 • Fenrir Inc. • Android Engineer • Loves Kotlin
  3. 3. I'm not designer!
  4. 4. Material Design
  5. 5. New design by Google
  6. 6. Good guidelines (by designer)
  7. 7. TIPS
  8. 8. Color
  9. 9. Primary/Accent color
  10. 10. White/Black
  11. 11. Use prepared colors
  12. 12. Default 500 Light 100 Dark 300
  13. 13. Accent A200 Accent fallback A100/A400
  14. 14. www.materialpalette .com
  15. 15. Color <resources> <color name="primary">#FF5722</color> <color name="primary_dark">#E64A19</color> <color name="primary_light">#FFCCBC</color> <color name="accent">#00BCD4</color> <color name="primary_text">#212121</color> <color name="secondary_text">#727272</color> <color name="icons">#FFFFFF</color> <color name="divider">#B6B6B6</color> </resources>
  16. 16. Color <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primary_dark</item> <item name="colorAccent">@color/accent</item> <item name="android:textColorPrimary">@color/primary_text</item> <item name="android:textColorSecondary">@color/secondary_text</item> </style>
  17. 17. App bar
  18. 18. ex) ActionBar / Toolbar
  19. 19. Use AppCompat
  20. 20. Use AppCompat // build.gradle dependencies { compile 'com.android.support:appcompat-v7:22.1.1' }
  21. 21. Use AppCompat <!-- activity_main.xml --> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:popupTheme="@style/Theme.AppCompat.Light" android:theme="@style/AppTheme.Toolbar"/> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"/>
  22. 22. Other Widget
  23. 23. AppCompat widget
  24. 24. AppCompatButton
  25. 25. AppCompatEditText
  26. 26. AppCompatTextView
  27. 27. etc.
  28. 28. Third party library
  29. 29. • Floating Action Button • github.com/futuresimple/android-floating-action-button • github.com/makovkastar/FloatingActionButton • BottomSheet • github.com/soarcn/BottomSheet • Dialog • github.com/afollestad/material-dialogs
  30. 30. • EditText • github.com/rengwuxian/MaterialEditText • Shadow • github.com/h6ah4i/android-materialshadowninepatch • github.com/ShogoMizumoto/ZDepthShadow
  31. 31. • Ripple Effect • github.com/balysv/material-ripple • github.com/traex/RippleEffect
  32. 32. Enjoy Material Design!

×