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

Material Components ことはじめ / Get Started Material Components

Sho Masegi
September 28, 2018

Material Components ことはじめ / Get Started Material Components

Sho Masegi

September 28, 2018
Tweet

More Decks by Sho Masegi

Other Decks in Technology

Transcript

  1. Material Components
    ͜ͱ͸͡Ίɹ
    Sho Masegi

    View full-size slide

  2. ࣗݾ঺հ
    • όέπඃͬͯ·͢ɻ
    • େֶੜͰ͢ɻ
    • Androidɺ࣌ʑiOS
    • ॳΊͯͷLT @boc_sho

    View full-size slide

  3. Material Componentsͱ͸ʁ
    Material DesignΛ࣮ݱ͢ΔͨΊͷUI෦඼܈
    ͷ͜ͱɻ
    ࠷ۙɺ1.0.0͕ϦϦʔε͞Εͨ

    View full-size slide

  4. ࠓճ࿩͢͜ͱ
    - BottomAppBar
    - Chip

    View full-size slide

  5. ࢖ͬͨ͜ͱ͋Δํ͍·͔͢ʁ

    View full-size slide

  6. ਌ກΛଓ͚͍ͯͩ͘͞ɻ

    View full-size slide

  7. Material Components in library
    - AppBarLayout
    - Backdrop
    - Banner
    - BottomAppBar
    - BottomNavigationView
    - BottomSheetBehavior
    - BottomSheetDialogFragment
    - CheckBox
    - Chip
    - CollapsingToolbarLayout
    - DataTable
    - Dialog
    - Divider
    - ExtendedFloatingActionButton
    - FloatingActionButton
    - ImageList
    - List
    - MaterialButton
    - MaterialCardView
    - Menu
    - NavigationView
    - ProgressIndicator
    - RadioButton
    - SideSheetBehavior
    - Slider
    - Snackbar
    - Switch
    - TabLayout
    - TextInputLayout
    - Tooltip

    View full-size slide

  8. New Components
    - AppBarLayout
    - Backdrop
    - Banner
    - BottomAppBar
    - BottomNavigationView
    - BottomSheetBehavior
    - BottomSheetDialogFragment
    - CheckBox
    - Chip
    - CollapsingToolbarLayout
    - DataTable
    - Dialog
    - Divider
    - ExtendedFloatingActionButton
    - FloatingActionButton
    - ImageList
    - List
    - MaterialButton
    - MaterialCardView
    - Menu
    - NavigationView
    - ProgressIndicator
    - RadioButton
    - SideSheetBehavior
    - Slider
    - Snackbar
    - Switch
    - TabLayout
    - TextInputLayout
    - Tooltip

    View full-size slide

  9. ݱࡏ࢖͑Δ΋ͷ͸…. ( - 1.0.0)
    - AppBarLayout
    - Backdrop
    - Banner
    - BottomAppBar
    - BottomNavigationView
    - BottomSheetBehavior
    - BottomSheetDialogFragment
    - CheckBox
    - Chip
    - CollapsingToolbarLayout
    - DataTable
    - Dialog
    - Divider
    - ExtendedFloatingActionButton
    - FloatingActionButton
    - ImageList
    - List
    - MaterialButton
    - MaterialCardView
    - Menu
    - NavigationView
    - ProgressIndicator
    - RadioButton
    - SideSheetBehavior
    - Slider
    - Snackbar
    - Switch
    - TabLayout
    - TextInputLayout
    - Tooltip

    View full-size slide

  10. ݱࡏ࢖͑Δ΋ͷ͸….
    - BottomAppBar
    - Chip
    - MaterialButton
    - MaterialCardView
    - TextInputLayout

    View full-size slide

  11. ࢖ͬͯΈΑ͏ʂ

    View full-size slide

  12. ४උ
    allprojets {
    repositories {
    google()
    jcenter()
    }
    }
    build.gradle

    View full-size slide

  13. ४උ
    dependencies {
    // . . .
    implementation ‘com.google.android.material:material:1.0.0’
    // . . .
    }
    build.gradle

    View full-size slide

  14. ४උ
    android {
    compileSdkVersion 28
    defaultConfig {
    // . . .
    build.gradle

    View full-size slide

  15. ४උ
    ThemeΛ”Theme.MaterialComponents.~”ʹ୅͑Δ
    parent=“Theme.MaterialComponents.Light.NoActionBar”><br/>

    View full-size slide

  16. ४උ
    AndroidXʹϦϑΝΫλϦϯά͢Δ
    Refactor -> Migrate to AndroidX

    View full-size slide

  17. ४උ׬ྃʂ

    View full-size slide

  18. BottomAppBar

    View full-size slide

  19. BottomAppBar

    . . .
    app:backgroundTint="@color/colorPrimary"
    app:fabAlignmentMode="center"
    app:fabAttached="true"
    app:navigationIcon="@drawable/menu"/>
    . . .
    app:layout_anchor="@id/bottom_app_bar" />

    View full-size slide

  20. BottomAppBar

    . . .
    app:backgroundTint="@color/colorPrimary"
    app:fabAlignmentMode="center"
    app:fabAttached="true"
    app:navigationIcon="@drawable/menu"/>
    . . .
    app:layout_anchor="@id/bottom_app_bar" />

    View full-size slide

  21. - fabAlignmentMode
    - fabCradleMargin
    - fabCradleRoundedCornerRadius
    - fabCradleVerticalOffset
    BottomAppBarͷଐੑ

    View full-size slide

  22. - fabAlignmentMode
    BottomAppBarͷଐੑ
    start end

    View full-size slide

  23. - fabCradleMargin
    BottomAppBarͷଐੑ
    default 10dp

    View full-size slide

  24. - fabCradleRoundedCornerRadius
    BottomAppBarͷଐੑ
    default 30dp

    View full-size slide

  25. - fabCradleVerticalOffset
    BottomAppBarͷଐੑ
    default 15dp

    View full-size slide

  26. Chip
    . . .
    app:chipSpacing="4dp"
    app:chipSpacingHorizontal="2dp"
    app:chipSpacingVertival="2dp"
    app:singleSelection=“true”
    app:singleLine=“true"/>
    . . . />

    View full-size slide

  27. Chip
    . . .
    app:chipSpacing="4dp"
    app:chipSpacingHorizontal="2dp"
    app:chipSpacingVertival="2dp"
    app:singleSelection=“true”
    app:singleLine=“true"/>
    . . . />

    View full-size slide

  28. ChipGroup: singleLine
    false
    true

    View full-size slide

  29. Chip
    val chip = Chip(context)
    chip.text = "Chip"
    chip.chipIcon = ContextCompat.getDrawable(requiredContext(), icon)
    chip.isCloseIconEnabled = true
    chip.isCheckable = false
    chipGroup.addView(chip as View)
    chip.setOnCloseIconClickListener {
    chipGroup.removeView(chip as View)
    }
    - Chipͷ௥Ճํ๏

    View full-size slide

  30. Chip
    val chip = Chip(context)
    chip.text = "Chip"
    chip.chipIcon = ContextCompat.getDrawable(requiredContext(), icon)
    chip.isCloseIconEnabled = true
    chip.isCheckable = false
    chip.setOnCloseIconClickListener {
    chipGroup.removeView(chip as View)
    }
    chipGroup.addView(chip as View)
    - Chipͷ௥Ճํ๏

    View full-size slide

  31. Chip
    chip.chipIcon = locationIcon
    chip.isCloseIconEnabled = true
    chip.setOnCloseIconClickListener {

    }
    chip.isCheckable = true

    View full-size slide

  32. MaterialButton
    MaterialCardView
    TextInputLayout ʹ͍ͭͯ͸. . . .

    View full-size slide

  33. https://
    codelabs.developers.google.com/
    codelabs/mdc-101-kotlin/#0

    View full-size slide

  34. ͜Μͳྑ͍΋ͷΛ༻ҙ͠
    ͯ͘ΕΔͳΜͯ. . . .

    View full-size slide

  35. Google࠷ߴʂ

    View full-size slide

  36. Android࠷ߴʂ

    View full-size slide

  37. Material Design Roadmap

    View full-size slide

  38. Material Design Roadmap

    View full-size slide

  39. Material Design Roadmap

    View full-size slide