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

Vector Drawable @Dev Fest Tokyo 2017 Lunch LT

TakuSemba
October 08, 2017

Vector Drawable @Dev Fest Tokyo 2017 Lunch LT

TakuSemba

October 08, 2017
Tweet

More Decks by TakuSemba

Other Decks in Technology

Transcript

  1. Taku Semba
    Vector Drawable
    CyberAgent,Inc

    View full-size slide

  2. About Me
    Taku Semba
    TakuSemba
    @takusemba
    AbemaTV.Inc

    View full-size slide

  3. Vector Drawable
    > xml based
    SVG
    XML

    View full-size slide

  4. Vector Drawable
    > Sharp
    > Light
    > Animatable

    View full-size slide

  5. Vector Drawable
    > Sharp
    > Light
    drawable-ldpi/cat.png
    drawable-mdpi/cat.png
    drawable-hdpi/cat.png
    drawable-xhdpi/cat.png
    drawable-xxhdpi/cat.png
    drawable-xxxhdpi/cat.png
    drawable/cat.xml
    - 6826bytes
    > Animatable

    View full-size slide

  6. Vector Drawable
    > Sharp
    > Light
    > Animatable

    View full-size slide

  7. png or webp would be better if
    > more than 200dp * 200dp
    > more than 800 char path

    View full-size slide

  8. > more than 200dp * 200dp
    > more than 800 char path
    png or webp would be better if

    View full-size slide

  9. Fill-type
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"
    >
    android:fillColor="#000"
    android:fillType="evenOdd"
    android:pathData="M13,11.4l2.1,1.3c0.5,0.2 0.7,0.8 0.4,1.3a1,1 0,0 1,-1.4
    0.4l-2.6,-1.5 -0.2,-0.2a1,1 0,0 1,-0.3 -0.7V8c0,-0.6 0.4,-1 1,-1s1,0.5
    1,1v3.4zM12,3a9,9 0,1 1,-6.4 15.4l1.5,-1.5a7,7 0,1 0,-2 -5l2.9,0.1 -4,4
    -0.1,-0.1L0,12h3c0,-5 4,-9 9,-9z"
    />

    View full-size slide

  10. Fill-type
    > library version should be more than 26

    View full-size slide

  11. Vector Drawable
    https://github.com/takusemba
    https://twitter.com/takusemba

    View full-size slide