스마트폰/안드로이드

안드로이드의 반응형 아이콘 adaptive icon

나를찾는아이 2017. 10. 25. 15:49
728x90
반응형

iOS의 경우에는 OS의 UI 테마가 애플이 제공하는 1종류 밖에 없습니다.


그리고 아이콘의 모양도 둥근곡선의 정사각형 모양이죠.






반면에 안드로이드의 경우는 아이콘에 자유도가 높습니다.




사각형, 둥근사각형, 원형 등등 종류가 다양하죠.


몇몇 안드로이드 런처들은 미적인 통일감을 주기 위해 아이콘을 강제로 둥글게 보이게 한다던가


둥근사각형으로 보이게 한다던가 또는 다른 모양으로 앱 아이콘을 보여주기도 합니다.


그래서 디자이너가 의도한대로 아이콘이 같은 모양으로 사용자에게 반드시 보여진다고 말하기는 조금 어렵습니다.



이런걸 의식해서 일까서요.


안드로이드 8.0에서 부터 나름 쓸모 있는 기능이 생겼습니다.


바로 adaptive 아이콘이라 불리는것인데요.


https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive.html





어떠한 모양에서든 유연하게 대응할수 있는 형태의 아이콘 입니다.




좀 더 이해하기 쉽게 설명된 그림인데요.


adaptive 아이콘은 background와 foreground로 나뉘어져있습니다.



위의 그림에서 파란색 격자무늬의 배경이 background고


안드로이드의 머리통만 있는것이 foreground 입니다.



이 두개의 조합이 바로 adaptive 아이콘이고요.



그리고 그 위를 덮는 반투명한 것이 각각의 런쳐들에서 쓰이는 mask라 불리는것이죠.


가운데 원형 모양으로 뚫린 마스크인 경우에는 


아이콘에 이 마스크가 덮어진다면 아이콘이 원형으로 보이겠고,


mask가 어떠한 모양으로 되어있느냐에 따라 background가 다르게 보여지겠죠?



이런식으로 앱아이콘을 좀 더 유연하게 만들수 있습니다.




기존 안드로이드 앱에서 아이콘을 표시할때는 res/mipmap 폴더에 이미지파일을 넣었는데요.


<application

    …

    android:icon="@mipmap/ic_launcher"

    android:roundIcon="@mipmap/ic_launcher_round"

    …>

</application>


하위호환성을 유지하기 위해서는


기존과 똑같이 


ic_launcher

ic_launcher_round


라는 이름으로 이미지 파일을 넣으시고




res/mipmap-anydpi-v26 폴더를 만들어서


이 안에 같은 이름의


ic_launcher.xml

ic_launcher_round.xml


파일을 넣으시면 됩니다.



그렇게 되면 v26에서는 adaptive아이콘이, 그외의 버전에서는 image가 보여지게 됩니다.


adaptive icon xml은 background와 foreground 다음과 같은 형태로 구성되는데요.


<adaptive-icon>

    <background android:drawable="@color/ic_background"/>

    <foreground android:drawable="@mipmap/ic_foreground"/>

</adaptive-icon>



drawable을 넣을수 있는 형태이기때문에,


이미지를 넣어도 좋고, 색상값을 넣어도 좋고, 또는 별도의 벡터코드값을 넣는것도 가능합니다.

728x90
반응형