Neumorphism in android

Try to Neumorphism in Android! 🌈
https://github.com/fornewid/neumorphism
https://medium.com/@fornewid/neumorphism-in-android-9cf15e2122dc

Transcript

2. 안성용 SOUP soupyong@gmail.com
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
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