- 안드로이드 스튜디오에서 라운드 처리 & 그라데이션이 들어간 나인패치 이미지 사용하기
현재 수행하고 있는 안드로이드 프로젝트의 디자이너가 적용을 원하는 이미지를 보내줬다. 이미지는 그라데이션에 라운드 처리가 된 이미지였다.
기존에 적용 방법만 대충 알아보고 사각형의 단일 색의 나인패치 이미지만 적용해봤던터라 그 방법 그대로 적용을 해봤다.
- 기존에 나인패치에 대해 알고 있었던 것.
1. 그냥 drawable 폴더에 넣으면 되겠지..
2. 아무 해상도 이미지로 asset studio에서 나인패치 적용하면 알아서 키우고 줄이고 해 주겠지
무지한 것을 인지하지 못한 본인은 디자이너에게 자신있게 Android asset studio를 이용해 나인 패치를 해 달라하고, 그걸 받아서 적용했다. 그런데 왠걸.. 제대로 되지 않는다.
- 증상
1. 라운드 처리된 코너 부분이 뭉개져 나옴
2. 그라데이션이 엉망임
3. 원본 이미지의 굵기가 제대로 표시가 안됨
4. 완벽한 반원 형태가 아니고 늘어남
...........할거 많은데.. 온갖 삽질을 하며 시간을 낭비했다. 맘 같아선 그냥 네모에 초록색이나 보라색으로 shape로 그려 버리고 싶었다... 하지만 디자이너님이 라운드 수치는 좀 줄인다 쳐도 그라데이션은 포기 할 수 없다고....ㅠㅠ
결국 다시 삽질 삽질 삽질.. 그러다 Stack Overflow에서 글 하나를 발견하게 되었다.
1. 단순한 사각형 테두리 이미지라면 기본 drawable 폴더에 넣어도 상관없다.
2. 만약, 라운드 처리가 된 이미지라면 drawable-xxhdpi 한 곳에 넣어두고 그 보다 낮은 해상도의 경우 스케일 다운이 되면서 대부분의 경우에 잘 나타난다.
오.... 뭔가 실마리를 잡은거 같아서 또 폭풍 검색..
다른 글에서는..
1. 나인패치 이미지는 기본 drawable에 두면 안된다.
2. drawable에는 shape 등의 xml 파일만 존재해야 한다.
3. 만약 라운드 처리되거나 그라데이션이 들어간 이미지를 높은 퀄리티로 보여주고자 한다면, 각각의 density의 drawable 폴더에 나인패치 이미지를 넣어야 한다.
오오오.. 앞의 글과 상충되는 내용은 있지만 어쨌든 3번이 내가 딱 원하던 것이여서 냉큼 적용해봤다.
2. 그라데이션이 엉망임
3. 원본 이미지의 굵기가 제대로 표시가 안됨
4. 완벽한 반원 형태가 아니고 늘어남
.....1번만 해결이 됐다. 뭐지.. 하라는데로 했는데... 안되겠다 싶어서 원본 이미지를 받아서 직접 나인패치를 떠 보기로 했다.
1. 원본 이미지의 해상도를 높은 것(xxxhdpi)로 선택
2. Source Density를 정확하게 선택하여야 함. (기본으로 xhdpi가 선택 되어져 있어서 그 전에는 무심코 그냥 썼었다.)
3. Auto-stretch 를 눌러 세로로 늘어날 영역을 가운데로 설정
4. 가로 영역 선택을 그라데이션을 모두 포함하게 설정
5. 해상도 별로 다운로드 받아서 각각의 drawable-xxxx 폴더로 넣음
- 결과는...
4. 완벽한 반원 형태가 아니고 늘어남
올레.. 1~3번은 해결했다. 근데.. 분명이 세로로 늘어날 부분은 점만 찍었는데 왜 늘어나는거지..
다시 검색해보니, 세로나 가로로 고정이 안된단다.
만약 세로로 늘어나는 것을 방지하려면, 원본 이미지를 원하는 높이로 각각 만들어 나인패치를 적용해야 한다고..
즉, 디자이너에게 받은 원본 이미지는 실제 적용하려고 했던 높이(40dp)보다 낮은 이미지(30dp) 였던 것.
알아서 늘려 줄텐데 왜 이러지 했는데... 생각해보니 당연한 결과 였던 거 같다..ㅋㅋㅋ
아무튼 엄청난 삽질을 경험하고 난 후, 그 기록을 두 번째 포스팅으로 남긴다.
작성하고 나서 보니 남들이 보기에 가독성도 떨어질 것 같고, 생각보다 글쓰기가 어렵다. 뭐 하다보면 늘겠지...
끝.
* 큰 destiny 폴더에 나인패치를 넣어두면 oom이 발생할 수도 있다는데, 아직 그런 증상은 없었다.
좀 더 테스트 해봐야겠다.
안녕하세요 혹시 그 버튼 이미지 써도 될까요?
답글삭제