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

Neumorphism in android

Sungyong An
December 01, 2020

Neumorphism in android

Sungyong An

December 01, 2020
Tweet

More Decks by Sungyong An

Other Decks in Programming

Transcript

  1. None
  2. 안성용 SOUP [email protected]

  3. Link: https://medium.com/@androidtechweekly AndroidTechWeeklyKorea

  4. ?

  5. Neumorphism? Link: https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

  6. Neumorphism? Link: https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

  7. None
  8. 생각보다관심을갖는사람들이있는것같아서 
 가볍게공유해보려고합니다.

  9. Neumorphism 구현방법 2장의그림자를좌상단,우하단에그려줍니다. 각그림자는부드럽게퍼져나가게Blur처리합니다.

  10. 이슈 #1: 렌더링 문제 View영역을벗어난부분에그림자를그려서, 그림자가잘려나가는현상이있었습니다.

  11. 이슈 #1: 렌더링 문제 root에 를 사용하면 해결될까? android:clipChilderen="false" OS버전에따라혹은RelativeLayout등의ViewGroup에서는

    속성이제대로동작하지않더라구요. 그래서...
  12. 이슈 #1: 렌더링 문제 inset width height 결국,inset을추가하여해결(?)했습니다. (심지어padding을이용해보기도했어요.)

  13. 이슈 #2: Elevation은 어떻게 처리할까? MaterialCard는그림자가두터워지는것, 표면이밝아지는것으로표현합니다.

  14. 이슈 #2: Elevation은 어떻게 처리할까? NeumorphicCard는 그림자를이동시켜서 깊이를표현할 수있습니다.

  15. 이슈 #2: Elevation은 어떻게 처리할까? Material Neumorphism 재밌게도이를이용하여 PressEffect를손쉽게구현할수있었는데요. 어떤방법이있을까요?

  16. 이슈 #2: Elevation은 어떻게 처리할까? 혹시 아래처럼 Touch Event를 다루는

    방법을 떠올리신 건 아니겠죠? override fun onTouchEvent(event: MotionEvent): Boolean { when (event.action) { MotionEvent.ACTION_DOWN -> setShapeType(ShapeType.PRESSED) MotionEvent.ACTION_UP -> setShapeType(ShapeType.FLAT) } return super.onTouchEvent(event) }
  17. 이슈 #2: Elevation은 어떻게 처리할까? StateListAnimator를이용하면간단합니다! // NeumorphCardView.kt override fun

    setTranslationZ(translationZ: Float) { super.setTranslationZ(translationZ) shapeDrawable.setTranslationZ(translationZ) } // res/animator/state_list_animator.xml <selector> <item android:state_pressed="true"> <set> <objectAnimator android:duration="100" android:propertyName="translationZ" android:valueTo="-5dp" android:valueType="floatType" /> </set> </item> <item> <set> <objectAnimator android:duration="100" android:propertyName="translationZ" android:valueTo="0" android:valueType="floatType" /> </set> </item> </selector> <soup.neumorph.NeumorphCardView android:stateListAnimator= "@animator/state_list_animator" ...
  18. 이슈 #3: Layout Preview에 아무것도 안보여요!

  19. 이슈 #3: Layout Preview에 아무것도 안보여요! 원래는이렇게 보여야하는데요... RenderScript로처리하는 Blur부분에서문제가

    발생하더라구요.
  20. 이슈 #3: Layout Preview에 아무것도 안보여요! 그래서!isInEditMode()에서는 Blur처리하지않도록수정해서 해결(?)했습니다.

  21. 이슈 #4: Tablet에서는 그림자가 잘려요! 저해상도 단말에서만 발생! 기기해상도를고려하지않고, 동일한BlurRadius를사용하여

    발생하는이슈입니다.
  22. 이슈 #4: Tablet에서는 그림자가 잘려요! 기기해상도에따라 BlurRadius를설정해주면...?

  23. 이슈 #4: Tablet에서는 그림자가 잘려요! 짠!해결입니다.

  24. 이슈 #5: RecyclerView에 CardView를 넣었더니 버벅거려요!

  25. 이슈 #5: RecyclerView에 CardView를 넣었더니 버벅거려요! ViewHolder가Recycle되면 View가Gone,Visible순으로진행되는데요. 이때,invalidateSelf()를호출해다시그리게됩니다. 보통은문제가없지만..

    dirtyflag를이용하여 Bitmap을재생성하기때문에 문제가발생했습니다.
  26. 이슈 #5: RecyclerView에 CardView를 넣었더니 버벅거려요! 수정후에는 한번만생성되어 Jank를해결할수있었습니다.

  27. 하지만 이외에도... 개발자들의요구와버그는끝이없었다

  28. FLAT BASIN PRESSED FLAT BASIN PRESSED ShapeType <soup.neumorphism.NeumorphCardView app:neumorph_shapeType="flat|pressed|basin" />

  29. LightSource <soup.neumorphism.NeumorphCardView app:neumorph_lightSource="leftTop|leftBottom|rightTop|rightBottom" /> LEFT_TOP RIGHT_TOP LEFT_BOTTOM RIGHT_BOTTOM

  30. Background Color, Stroke neumorph_backgroundColor neumorph_strokeColor neumorph_strokeWidth <soup.neumorphism.NeumorphCardView app:neumorph_backgroundColor="@color/background_color" app:neumorph_strokeColor="@color/stroke_color" app:neumorph_strokeWidth="@dimen/stroke_width"

    />
  31. Corner Customization <soup.neumorphism.NeumorphCardView app:neumorph_shapeAppearance="@style/MyShapeAppearance" /> <style name="MyShapeAppearance"> <item name="neumorph_cornerFamily">rounded</item> <item

    name="neumorph_cornerSize">16dp</item> <item name="neumorph_cornerSizeTopLeft">64dp</item> <item name="neumorph_cornerSizeTopRight">64dp</item> </style>
  32. (해치웠나...?)

  33. ‣ Bitmap을 Blur 처리하여 Neumorphic UI를 성취할 수는 있었다. 


    (성능은 먼나라 이웃나라 이야기...) ‣ 단순히 재미로 시작했지만, 어느새 이슈에 쫓기는 느낌이 들었다. 
 (Star가 많은 오픈소스 메인테이너는 참 대단하다는 생각이 들었다.) ‣ 제곧내, 중복빌런 등 대부분의 이슈는 불친절한 느낌이었다. 
 (오픈소스 라이브러리에 이슈 올릴 때는 자세하게 적어줘야 겠다는 반성) 끝으로 소감을 정리하면!
  34. 감사합니다! Github: https://github.com/fornewid/neumorphism Slide: https://speakerdeck.com/fornewid/neumorphism-in-android Blog: https://medium.com/@fornewid/3a298e0337b0