O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

TIPS of Material Design

1.786 visualizações

Publicada em

TIPS of Material Design

Publicada em: Tecnologia
  • Hi! Get Your Professional Job-Winning Resume Here! 👉 http://bit.ly/rexumtop
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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!

×