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

Material Components for Android 1.1.0 and 1.2.0

Nabe
November 07, 2019

Material Components for Android 1.1.0 and 1.2.0

Nabe

November 07, 2019
Tweet

More Decks by Nabe

Other Decks in Programming

Transcript

  1. .BUFSJBM$PNQPOFOUT
    GPS"OESPJE
    BOE

    "OESPJE%FW4VNNJUใࠂձ
    ,B[VLJ8BUBOBCF

    View Slide

  2. 1SPpMF
    w ͳ΂
    w 5XJUUFS!/BCF$PUU
    w (JU)VC/6NFSP"OE%FW
    w ͸ͯͳ
    w "OESPJE"QQ%FWFMPQFS

    View Slide

  3. NBUFSJBMDPNQPOFOUTCFUB

    View Slide

  4. ὎ CFUB

    w .BUFSJBM5IFNJOH
    w $PMPS 4IBQF 5ZQPHSBQIZ5IFNJOH
    w %BSL5IFNF
    w /FX$PNQPOFOUT
    w 6QEBUF$PNQPOFOUT
    w #VHpYFUD
    IUUQTHJUIVCDPNNBUFSJBMDPNQPOFOUTNBUFSJBMDPNQPOFOUTBOESPJESFMFBTFTUBHCFUB

    View Slide

  5. ὎ CFUB

    w .BUFSJBM5IFNJOH
    w $PMPS 4IBQF 5ZQPHSBQIZ5IFNJOH
    w %BSL5IFNF
    w /FX$PNQPOFOUT
    w 6QEBUF$PNQPOFOUT
    w #VHpYFUD

    View Slide

  6. "OESPJE%FW4VNNJU
    %FWFMPQJOH5IFNFTXJUI4UZMF
    IUUQTZPVUVCF0XLG%I"04P

    View Slide

  7. /FX$PNQPOFOUT
    w &YUFOEFE'MPBUJOH"DUJPO#VUUPO
    w .BUFSJBM#VUUPO5PHHMF(SPVQ
    w .BUFSJBM%BUF1JDLFS

    View Slide

  8. &YUFOEFE'"#

    View Slide

  9. &YUFOEFE'"#
    loatingActionButton
    android:id="@+id/extendedFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:text="Create"
    app:icon="@drawable/ic_add" />

    View Slide

  10. &YUFOEFE'"#
    extendedFab.extend() extendedFab.shrink()

    View Slide

  11. .BUFSJBM#VUUPO5PHHMF(SPVQ

    View Slide

  12. .BUFSJBM#VUUPO5PHHMF(SPVQ
    android:id="@+id/singleSelectToggleGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true">
    style=“?attr/materialButtonOutlinedStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select1" />
    style="?attr/materialButtonOutlinedStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select2" />

    View Slide

  13. .BUFSJBM#VUUPO5PHHMF(SPVQ
    w DIFDLFE#VUUPO*EDIFDLFE#VUUPO*ET
    w DIFDL JE*OU
    VODIFDL JE*OU

    w BEE0O#VUUPO$IFDLFE-JTUFOFS
    w DMFBS$IFDLFE
    w "OENPSFʜ

    View Slide

  14. .BUFSJBM%BUF1JDLFS

    View Slide

  15. .BUFSJBM%BUF1JDLFS
    val datePickerFragment =
    MaterialDatePicker.Builder.datePicker().build()
    val dateRangePickerFragment =
    MaterialDatePicker.Builder.dateRangePicker().build()

    View Slide

  16. .BUFSJBM%BUF1JDLFS
    w TFU4FMFDUJPO E-POH

    TFU4FMFDUJPO E1BJS-POH -POH

    w TFU5IFNF

    NBUFSJBM$BMFOEBS'VMMTDSFFO5IFNF

    NBUFSJBM$BMFOEBS5IFNF

    DVTUPNUIFNF

    View Slide

  17. .BUFSJBM%BUF1JDLFS
    w TFU$BMFOEBS$POTUSBJOU D$BMFOEBS$POTUSBJOUT

    -JNJUUIFEJTQMBZSBOHFPGDBMFOEBSBOETFUBOPQFO"UNPOUI
    w TFU4UBSU E-POH
    TFU&OE E-POH

    w TFU0QFO"U E-POH

    w TFU7BMJEBUPS WBMJEBUPS%BUF7BMJEBUPS

    %BUF7BMJEBUPS1PJOU'PSXBSE

    DMBTTUIBUJNQMFNFOUFE%BUF7BMJEBUPS

    View Slide

  18. NBUFSJBMDPNQPOFOUTBMQIB

    View Slide

  19. ὎ BMQIB

    w "EEFE4MJEFS
    w .BUFSJBM#VUUPO5PHHMF(SPVQTVQQPSUTWFSUJDBM
    PSJFOUBUJPO
    w "OENPSFVQEBUFT
    IUUQTHJUIVCDPNNBUFSJBMDPNQPOFOUTNBUFSJBMDPNQPOFOUTBOESPJESFMFBTFTUBHBMQIB

    View Slide

  20. 4MJEFS

    View Slide

  21. 4MJEFS
    android:id="@+id/discreteSlider"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:stepSize="10"
    android:value="10"
    android:valueFrom="0.0"
    android:valueTo="100.0"
    app:floatingLabel="true" />

    View Slide

  22. 4MJEFS
    w TFU0O$IBOHF-JTUFOFS
    w TFU-BCFM'PSNBUUFS

    #BTJD-BCFM'PSNBUUFS

    DMBTTUIBUJNQMFNFOUFE-BCFM'PSNBUUFS

    View Slide

  23. +FUQBDL$PNQPTF

    View Slide

  24. 5IBOLZPV

    View Slide