티스토리 뷰


투명 인디케이터 만들기


때때로 투명 인디케이터를 만들어야할 때가 있습니다.

기획자 거지같은 UI 휴 싸우기도 지쳤다 해달란대로 해주자

아래와 같은 화면에서 인디케이터를 투명으로 만들어봅시다.



완전 투명한 인디케이터를 사용하기위해 NoActionBar 테마를 사용합니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

그리고 투명한 인디케이터를 설정하기위한 statusBarColor 프로퍼티를 투명으로 적용합니다.

<item name="android:statusBarColor">@android:color/transparent</item>

그런데 해당 프로퍼티는 api21(5.0 롤리팝) 부터 이용 가능하므로 styles 폴더를 21버전으로 따로 만들어서 적용해야 합니다.

이렇게 적용하고 앱을 실행해 보겠습니다.

안드로이드 9.0 P


뭔가 변경 되긴 했는데 인디케이터 영역에 하얀 화면이 나오네요.

이건 인디케이터가 투명 처리되었는데 앱의 배경색인 하얀색이 적용되어 하얗게 나오는 모습입니다.


다음으로 해당 액티비티에서 화면을 풀사이즈로 키우고, 인디케이터의 높이만큼 메인 레이아웃에 top padding을 적용합니다.

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
mainLayout.setPadding(0, statusBarHeight(this), 0, 0)
}

statusBar의 높이를 반환하는 statusBarHeight 함수는 아래와같이 구성되어 있습니다.

fun statusBarHeight(context: Context): Int {
val resourceId = context.resources.getIdentifier("status_bar_height", "dimen", "android")

return if (resourceId > 0) context.resources.getDimensionPixelSize(resourceId)
else 0
}

여기까지 적용하고 앱을 실행시켜 봅시다.

안드로이드 9.0 P

제가 의도한대로 인디케이터의 투명도가 0이된것을 확인할 수 있습니다.


그런데 다시말하지만 약간의 문제가 있네요 style에서 statusBarColor 프로퍼티는 api 21부터 지원되기 때문에 그 이하버전에서는 원래 인디케이터 그대로 나오게 됩니다.

<item name="android:statusBarColor">@android:color/transparent</item>

그렇기 때문에 저는 api 19의 styles.xml에서는 windowTranslucentStatus 프로퍼티를 적용했습니다.
<item name="android:windowTranslucentStatus">true</item>
이렇게 적용하면 19미만 버전에서는 방법이 없지만
19, 20 반투명 적용된 인디케이터를 적용할 수 있습니다.
그래서 적용된 모습은 아래와 같습니다.


음 api 21 부터는 원하는대로 적용할 수 있게 되었네요

이하 버전은 어쩔수 없지만 기획자를 잘 설득하도록 합시다


샘플 소스는 아래에 있습니다.

https://github.com/karrel84/TransparentIndicatorExample

'개발 > ANDROID' 카테고리의 다른 글

[트랜스퍼모드] xPermode 적용기  (0) 2019.02.11
와이파이 다이렉트  (0) 2018.11.08
fontFamily  (0) 2018.10.15
Android Flavors  (0) 2018.10.01
WIFI를 통해 기기 연결  (0) 2018.09.20
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크