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

Material Theming + Material Components: Conhecendo na prática as novidades do Material Design para Android

Material Theming + Material Components: Conhecendo na prática as novidades do Material Design para Android

This talk was first held during Android Meetup São Paulo #66, that happened on February 5th, 2019, in São Paulo, Brazil.

I've talked about what's new on Material Design with Material Theming and Components, showed how to implement it on a project and had a demonstration with open source components in a live coding presentation.

The content is in pt-BR.

More info: https://www.meetup.com/pt-BR/GDG-SP/events/258531691/

Walmyr Carvalho

February 05, 2019
Tweet

More Decks by Walmyr Carvalho

Other Decks in Technology

Transcript

  1. Material Theming +
    Material Components:
    Conhecendo na prática as novidades do
    Material Design para Android.
    Walmyr Carvalho
    Founder, Developer & Designer @ Kusudama

    Google Developer Expert, Android

    View full-size slide

  2. Olá, meu nome é
    Walmyr Carvalho! :)

    View full-size slide

  3. E vocês, quem são? :)

    View full-size slide

  4. Material Design:
    Um leve flashback… ⏳

    View full-size slide

  5. O Material Design é um design language
    criado pelo Google em 2014, com o
    objetivo de se unificar experiências entre
    produtos para mobile, tablet, desktop e
    até mesmo wearables, carros e TVs.

    View full-size slide

  6. Fonte: Google

    View full-size slide

  7. Os resultados foram excelentes, inclusive
    com empresas convertendo mais após
    adotarem o Material Design em seus
    projetos, por exemplo.

    View full-size slide

  8. Mas um ponto que se percebeu é que
    algumas aplicações perdiam um pouco
    a sua marca no meio de tantos
    aplicativos similares.

    View full-size slide

  9. Como flexibilizar o Material Design para
    resolver esse tipo de problema?

    View full-size slide

  10. Material Theming:
    Abraçando seu branding ✨

    View full-size slide

  11. O Material Theming é a possibilidade de
    se flexibilizar o Material Design para
    melhor refletir a marca do seu produto.

    View full-size slide

  12. Material Design
    material.io

    View full-size slide

  13. Utilizando o Material Theming você
    consegue trabalhar cores,
    tipografia ou formatos, aplicá-los
    no seu design e reforçar melhor
    a marca do seu produto.
    Fonte: Material Design (Website)

    View full-size slide

  14. Muito legal! Mas como eu
    faço isso tudo no meu projeto?

    View full-size slide

  15. Material Components:
    Como utilizar no meu app?

    View full-size slide

  16. O Google construiu componentes open
    source do Material Design para Android,
    iOS, Web e Flutter, chamados de Material
    Components.

    View full-size slide

  17. Material Design - Develop
    material.io/develop/android

    View full-size slide

  18. allprojects {
    repositories {
    google()
    jcenter()
    }
    }
    build.gradle

    View full-size slide

  19. build.gradle
    dependencies {
    // Material Components
    implementation 'com.google.android.material:material:1.0.0'
    // Se você ainda não quiser migrar pra esse ou androix:
    implementation 'com.android.support:design:28.0.0'
    // Importante: não é recomendado usar os pacotes
    // com.android support e com.google.android.material
    // ao mesmo tempo num projeto
    }

    View full-size slide

  20. Importante: Lembre-se de sempre utilizar
    a AppCompatActivity, para garantir o
    funcionamento correto dos componentes.

    View full-size slide

  21. Em seguida, precisamos utilizar um tema
    específico para os Material Components:

    View full-size slide

  22. themes.xml
    <br/><!-- ... --><br/>

    View full-size slide

  23. Caso você ainda não tenha migrado
    totalmente, você pode utilizar temas bridge,
    como literalmente uma ponte para a migração:

    View full-size slide

  24. themes.xml
    <br/><!-- ... --><br/>

    View full-size slide

  25. Você também testar os Material Components
    e utilizar um tema AppCompat, através de
    atributos customizados de cor e texto:

    View full-size slide

  26. themes.xml
    <br/><!-- Original AppCompat attributes. --><br/><item name="colorPrimary">@color/my_app_primary_color</item><br/><item name="colorSecondary">@color/my_app_secondary_color</item><br/><item name="android:colorBackground">@color/my_app_background_color</item><br/><item name="colorError">@color/my_app_error_color</item><br/><!-- New MaterialComponents attributes. --><br/><item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item><br/><item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item><br/><item name="colorSurface">@color/my_app_surface_color</item><br/><item name="colorOnPrimary">@color/my_app_color_on_primary</item><br/><item name="colorOnSecondary">@color/my_app_color_on_secondary</item><br/><item name="colorOnBackground">@color/my_app_color_on_background</item><br/><item name="colorOnError">@color/my_app_color_on_error</item><br/><item name="colorOnSurface">@color/my_app_color_on_surface</item><br/>

    View full-size slide

  27. themes.xml
    <br/><item name="scrimBackground">@color/mtrl_scrim_color</item><br/><item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item><br/><item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item><br/><item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item><br/><item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item><br/><item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item><br/><item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item><br/><item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item><br/><item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item><br/><item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item><br/><item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item><br/><item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item><br/><item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item><br/><item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item><br/>

    View full-size slide

  28. Certo! E os componentes, cadê?

    View full-size slide

  29. Vamos ver isso
    na prática?

    View full-size slide

  30. Material Components - GitHub
    github.com/material-components/material-components-android/

    View full-size slide

  31. Alguém tem
    alguma dúvida?

    View full-size slide

  32. Links úteis
    e materiais de estudo

    View full-size slide

  33. Material Design
    material.io

    View full-size slide

  34. Talk: Material Design Components
    bit.ly/2Bkstdx
    Fonte: Android Developers (YouTube)

    View full-size slide

  35. Muito obrigado
    e até a próxima! ❤
    @walmyrcarvalho
    /walmyrcarvalho
    [email protected]

    View full-size slide