UI (6) 썸네일형 리스트형 [안드로이드/UI-UX] Material BadgeDrawable 로 Badge를 원하는 뷰에 적용하기 Material Design의 BottomNavigationView를 사용해본 적이 있다면 매우 간편하게 Badge를 업데이트 할 수 있음을 경험한 적이 있을 것이다. 금번에 뱃지를 BottomNavigationView가 아닌 별도 View(이를테면 TextView 라던지)에 달아야 하는 경우가 생겼는데, 쓸만하고 예쁘다 싶은 라이브러리가 잘 없었기에, Material의 Badge가 떠오르는 건 어쩔 수가 없었다. 그런데 다행스럽게도 구글에서 Material Components 1.1.0-alpha09 버전부터 Badge를 지원하고 있다는 반가운 소식! Release 1.1.0-alpha09 · material-components/material-components-android Dependency Up.. [안드로이드] include 태그를 사용하고 있다면? merge 태그로 레이아웃 계층 줄이기 이 포스트는 레이아웃에 관해 다루기 때문에 UI/UX 카테고리에 넣어야 하나도 싶지만, 결론적으로 앱의 성능을 높이기 위한 레이아웃 최적화 작업이기 때문에 Performace 카테고리로 옮기기로 했다. 우선 첫번째로 안드로이드에서 뷰의 계층이 성능이 어떻게 영향을 주는지에 대해서 더 제대로 이해를 해 보고 싶었다. 상기 내용에 대해서 안드로이드 개발자 문서에서는 아래 정도의 내용으로 레이아웃 계층 문제를 설명하고 있다. 모든 뷰는 레이아웃(동사) 및 측정단계를 거쳐 렌더링 된다. 레이아웃 및 측정단계에서 측정 단계는 View 객체의 크기와 경계를 결정하고, 레이아웃 단계는 이 객체를 배치할 위치를 결정. 뷰가 setText 등의 작업에 의해 사이즈를 조절해야 하는 경우 다시 이 레이아웃 및 측정단계를 거.. [안드로이드] Elevation 효과가 적용된 CardView ViewPager 구현하기 이번에 매터리얼 카드뷰 형태의 ViewPager를 구현해야 하는 요구사항이 생기면서, 일전에 한번 스쳐본 적이 있던 레퍼지토리에 다시 방문했다. rubensousa/ViewPagerCards ViewPager cards inspired by Duolingo. Contribute to rubensousa/ViewPagerCards development by creating an account on GitHub. github.com 해당 레퍼지토리에서는 일반적인 CardView 형태의 ViewPager 구현은 물론 Elevation 효과까지 적용 가능한 코드들을 제공하고 있다. JAVA 기반 소스이기에 이를 프로젝트에 적용하면서 코틀린 및 binding된 요소들과 섞는 작업을 했다. 작업을 진행하면서 필요한.. [안드로이드] ConstraintLayout 내부에 Fragment 알맞게 배치하기 상단에는 페이지의 제목과 설정 아이콘 등을 넣을 수 있는 AppBar, 중앙에는 변경되는 Fragment들이 배치되는 FrameLayout, 하단에는 페이지 이동을 위한 BottomNavigationView가 들어가있는 크게 세 칸의 구성으로 된 레이아웃 구성을 진행중에 있었다. 여기서 문제가 하나 있었는데, 중앙에 배치되는 ConstLayout이 삐져나온다거나 꽉 차지 않아 기기간에 차이도 생기고, 디자인의 의도대로 앱이 보여지지 않는 불편한 경우가 생기는 것이었다. 이런 경우에는 ConstraintLayout의 width와 height 설정이 중요한데, 아래와 같은 과정을 통해서 본래 의도에 맞게 중간 영역에 알맞게 Fragment의 뷰가 가득 차게 구현할 수 있었다. 1. Fragment를 뿌리는 .. [안드로이드] 사용자 기기의 글꼴 사이즈에 앱 대응하기 어떤 UI/UX 가이드라인에 맞추어 설계한 앱의 경우에도 사용자가 임의로 기기의 폰트 사이즈를 변경하거나, 혹은 크거나 작게 사용하고 있는 경우에는 기존의 의도와 다르게 앱의 몇몇 뷰들이 겹치거나 텍스트가 잘려보인다는 등의 현상이 발생하기 마련이다. 이와 같은 경우, constraintLayout으로 구성되어 있는 레이아웃들을 전부 손봐서 기본 폰트 사이즈의 경우 기존 UI/UX 가이드라인에 알맞게 보여지도록 하고, 큰 폰트 사이즈를 사용할 경우 잘려나가는 부분이 없도록 최소한의 조정을 하는 방안이 있었는데, 몇몇 뷰 요소에 엄격하게 들어가있는 width 값들이 있어 손대기가 조금 난해한 부분이 있었다. 그래서 다르게 생각하기로, 기존 가이드라인이 노령 연령대를 고려해 맞추어진 UI/UX라면 (큰 폰트사.. [안드로이드] 레이아웃에 실시간 Blur 효과 주기 (가우시안 블러) 배경 레이아웃에 Blur 효과를 주기 위한 몇몇 방법들을 조금 살펴보았는데, 적용할 정도에 비해 작업이 투머치가 들어가는 것 같아 적용하다 롤백을 반복했는데 그 와중에 좋은 라이브러리를 찾아 적용까지 마칠 수 있었다. https://github.com/mmin18/RealtimeBlurView mmin18/RealtimeBlurView A realtime blurring overlay for Android (like iOS UIVisualEffectView) - mmin18/RealtimeBlurView github.com 우선 일반적인 라이브러리 적용하는 대로 gradle에 implementation을 마치고 나면 Blur를 적용하고자 하는 영역 위에 전체 혹은 원하는 크기만큼 BlurView를 레이아.. 이전 1 다음
