안드로이드(Android) 사용자정의 진행 다이얼로그(Custom Progress Dialog) 만드는 방법

안드로이드(Android) 사용자정의 진행 다이얼로그(Custom Progress Dialog) 만드는 방법

 

환경: Eclipse Mars, Android 4.2.2

 

이번에는 Dialog 클래스로 ProgressDialog 와 동일한 형태를 만들어 보겠습니다. ProgressDialog형태로 만들려면 Dialog 레이아웃에 ProgressBar 를 추가한 후 이미지로 애니메이션 효과를 줘야 합니다. 그럼 ProgressDialog 와 동일한 형태가 되는 것이죠.

 

 

▼ Dialog 를 ProgressDialog 처럼 만들기 위해 이미지를 회전시키는 애니메이션 효과를 적용했습니다. Dialog 레이아웃 XML 에 ProgressBar 위젯을 추가합니다. 추가한 ProgressBar 에 이미지가 회전할수 있도록 animated rotate 기능을 이용했습니다. android:indeterminateDrawable 속성값으로 애니메이션 효과를 구현하는 dlg_progress.xml 리소스를 추가하시면 됩니다. 아래 소스는 Dialog 클래스를 상속받아서 만들었으며 팝업창 처럼 보이기 위해 requestWindowFeature(Window.FEATURE_NO_TITLE) 소스로 타이틀을 삭제했습니다.

 

import android.app.Dialog;
import android.content.Context;
import android.view.Window;
 
public class CustomProgressDialog extends Dialog{
    public CustomProgressDialog(Context context) {
        super(context);
        requestWindowFeature(Window.FEATURE_NO_TITLE); // 
        setContentView(R.layout.custom_progress_dialog); 
    }
}

 

▼ 아래 XML 은 ProgressDialog 처럼 만들기 위해 Dialog 화면 레이아웃을 꾸몄습니다.제목과 바로 아래 진행바를 배치했습니다.

 

custom_progress_dialog.xml

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="6dp"
    android:background="@drawable/dlg_bg" >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="In progress..."
        android:textSize="20sp" />
 
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:indeterminateDrawable="@drawable/dlg_progress" />
 
</RelativeLayout>

 

▼ 아래 두개의 XML 은 레이아웃 디자인을 위한 것들입니다. dlg_bg.xml 은 다이얼로그화면 색상이나 형태를 지정한 옵션이며, dlg_progress.xml 은 이미지를 회전시켜서 진행바처럼 보이게 하기 위한 애니메이션 설정 XML 입니다.

 

dlg_bg.xml

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#ccffffff"/>
    <corners android:radius="6dp"/>
    <stroke android:color="#6699CC" android:width="1dp"/>
</shape>

 

dlg_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/rotate"
    android:pivotX="50%"
    android:pivotY="50%">
</animated-rotate>

 

▼ 위에서 만든 Dialog 를 적용하기 위한 소스는 다음과 같습니다. 클래스 객체를 생성하고 onPreExecute() 함수에 다이얼로그 show() 함수를 호출하면 뜨겠죠.그리고 setBackgroundDrawable() 값으로 Color.TRANSPARENT 를 해주지 않으면 그림에서 처럼 모서리가 각이 지게 됩니다.

 

CustomProgressDialog progressDlg = new CustomProgressDialog(
				CustomProgressActivity.this);
@Override
protected void onPreExecute() {

	progressDlg.getWindow().setBackgroundDrawable(
			new ColorDrawable(
					android.graphics.Color.TRANSPARENT));
	progressDlg.show(); // 보여주기

	super.onPreExecute();
}

 

 

▼ 진행이 끝나면 다이얼로그 창을 종료해야 겠죠. AsyncTask 에서 종료에 관련된 기능은 onPostExecute() 콜백함수에서 처리하시면 됩니다. 다이얼로그를 종료하기 위해 dismiss() 함수를 호출합니다.

 

@Override
protected void onPostExecute(Void result) {
	progressDlg.dismiss(); // 없애기
	super.onPostExecute(result);
}

 

▼ 아래는 Dialog 클래스를 ProgressDialog 처럼 구현한 메인 Activity 전체 소스

입니다. 버튼을 클릭하면 다이얼로그가 시작합니다.

 

import android.app.Activity;
import android.graphics.drawable.ColorDrawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class CustomProgressActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_custom_progress);
		
		Button button = (Button) findViewById(R.id.btn_alert);

		// 클릭 이벤트
		button.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				CheckTypesTask task = new CheckTypesTask();
				task.execute();
			}
		});
	}

	private class CheckTypesTask extends AsyncTask<Void, Void, Void> {

		CustomProgressDialog progressDlg = new CustomProgressDialog(
				CustomProgressActivity.this);

		@Override
		protected void onPreExecute() {

			progressDlg.getWindow().setBackgroundDrawable(
					new ColorDrawable(
							android.graphics.Color.TRANSPARENT));
			progressDlg.show(); 

			super.onPreExecute();
		}

		@Override
		protected Void doInBackground(Void... arg0) {
			try {
				for (int i = 0; i < 5; i++) {
					Thread.sleep(500);
				}
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
			return null;
		}

		@Override
		protected void onPostExecute(Void result) {
			progressDlg.dismiss(); // 없애기
			super.onPostExecute(result);
		}
	}
}