progress wrapper

안드로이드 개발을 하다보면 progress를 사용하여 현재 데이터를 처리중이라는 것을 알려야할 때가 있다.

 

다음은 우리가 흔히 볼수 있는 progress를 사용하는 방법이다.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center"
		android:text="테스트 텍스트입니다."/>
	
	<androidx.core.widget.ContentLoadingProgressBar
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center" 
		style="?android:progressBarStyleLarge"/>
	
</FrameLayout>

 

위의 코드는 왼쪽과 같은 결과를 나타낸다.

xml 디자인을 하다보면 다양한 뷰를 추가해아하고 progress의 경우 다른 뷰보다 최상위로 표현하기위해 가장 하단에 선언하여 사용한다.

하지만 좀 더 직관적이면서 심플하게 xml에 적용하고 싶었고 custom view를 만들어 사용하게됬다.

 

 

다음은 custom view를 이용한 progress wrapper를 만들어 사용한 예제다.

 

custom_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

	<androidx.core.widget.ContentLoadingProgressBar
		android:id="@+id/progress_bar"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center"
		android:background="@color/transparent"
		style="?android:progressBarStyleLarge"/>

</merge>

ProgressWrapper.kt

class ProgressWrapper @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0) : FrameLayout(context, attrs, defStyle) {

    init {
        View.inflate(context, R.layout.custom_progress, this)
    }
}

test_view.xml

<?xml version="1.0" encoding="utf-8"?>
<com.example.ProgressWrapper xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center"
		android:text="테스트 텍스트입니다."/>

</com.example.ProgressWrapper>

 

custom view로 progress wrapper를 만들어 사용한 결과..

처음과 같은 아웃풋이 나왔다.

코드는 좀 더 간결해졌으며 wrapper로 사용하기 때문에 좀 더 직관적이었다.

 

 

하지만 코딩하다보니 이 방법에는 문제가 하나 있었는데, 버튼을 추가하면 버튼이 최상위 뷰로 먹히는 것이었다.

바로 왼쪽과 같이 말이다.

구글링해보니 다음과 같이 롤리팝부터 이런증상을 호소하는 것 같았다.

 

 

 

다음은 구글링한 결과 나와 같은 증상을 호소한 글이다. 그리고 이곳에서 원하는 답을 찾을 수 있었다.

https://stackoverflow.com/questions/26524552/android-5-0-progressbar-cannot-be-displayed-over-a-button

Android 5.0 - ProgressBar cannot be displayed over a Button

바로 translationZ란 attribute였는데 css에서 흔히 사용하는 zIndex같은 개념이었다.

 

progress에 translationZ="10dp" 추가해보니 다음과 같은 결과가 나왔다. 대만족이다.

 

 

 

 

 

 

 

이제 progress를 사용하기 위해 뷰의 가장 하단부에 progress를 직접 사용하는것이 아닌 wrapper의 개념으로 사용하면 된다.