[안드로이드/Android]GIF로 '로딩중' Dialog 띄우는 방법

서버와 통신을 하거나 기타 작업을 할때 결과를 받을때까지 사용자가 기다려야 하는 경우가 있습니다.

그럴때 우리는 Progress를 보여주면서 작업이 뭔가 진행되고 있음을 알리곤 합니다.

작업이 진행중임을 나타내는 방법은 여러가지 입니다.

그중에서 GIF이미지를 활용해서 작업이 진행중임을 알리는 방법을 소개해 드리겠습니다.

먼저 완성된 결과부터 보여드리겠습니다.

어떤 작업을 시작하는 경우 사용자에게 아래와 같은 화면을 보여줄수 있습니다.

              

원리는 간단합니다.

1. Dialog를 띄운다.

2. Dialog의 레이아웃에서 GIF이미지와 텍스트를 보여준다.

그럼 소스코드와 함께 구현방법에 대해서 소개하겠습니다.

바로 테스트 해보고 싶으신분은 Github을 통해 테스트 해보실 수 있습니다.

https://github.com/ParkSangGwon/GifProgressSample

---

1. GIF준비

먼저 사용할 gif파일을 준비해야 합니다.

직접 만드셔도 되고 어디서 구하시거나 디자이너가 있다면 디자이너로부터 gif를 받으면 됩니다.

gif는 여러 이미지파일들이 연속적으로 보여지는 것이기 때문에 당연히 gif로부터 각각의 frame에 해당하는 이미지파일도 얻을 수 있습니다.

샘플에서 사용된 아래의 GIF는 총 21개의 이미지들이 모여서 만들어진것입니다.

2. AnimationDrawable

이미지를 모두 확보했다면 drawable폴더에 각각의 이미지들을 모두 넣어줍니다.

그리고 이 이미지들을 모두 담는 <animation-list>를 만들어줍니다.

3. Dialog layout

다이어로그가 새로 뜰때 보여줄 레이아웃을 만듭니다.

이 레이아웃은 샘플일뿐이므로 나중에 원하시는대로 변경하시면 됩니다.

저는 이미지 + 메세지 가 표시되는 방법으로 레이아웃을 구성하였습니다.

위에서 만든 drawable을 ImageView의 background로 넣어줍니다.

4. Dialog loading

프로그레스 다이어로그를 띄워야 하는 시점에 Dialog를 만들고 위에서 만든 layout을 customview로 설정 해주면됩니다.

progressON()이라는 함수를 만들었다면 아래와 같은 소스를 만들 수 있습니다.

public void progressON(Activity activity, String message) {

    if (activity == null || activity.isFinishing()) {
        return;
    }


    if (progressDialog != null && progressDialog.isShowing()) {
        progressSET(message);
    } else {

        progressDialog = new AppCompatDialog(activity);
        progressDialog.setCancelable(false);
        progressDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
        progressDialog.setContentView(R.layout.progress_loading);
        progressDialog.show();

    }


    final ImageView img_loading_frame = (ImageView) progressDialog.findViewById(R.id.iv_frame_loading);
    final AnimationDrawable frameAnimation = (AnimationDrawable) img_loading_frame.getBackground();
    img_loading_frame.post(new Runnable() {
        @Override
        public void run() {
            frameAnimation.start();
        }
    });

    TextView tv_progress_message = (TextView) progressDialog.findViewById(R.id.tv_progress_message);
    if (!TextUtils.isEmpty(message)) {
        tv_progress_message.setText(message);
    }


}

프로그레스 다이어로그가 이미 띄워져 있는경우라면 메세지만 바꿔주면 되므로 progressSET()이라는 함수를 만들고 여기서는 메세지 내용만 바꿔줍니다.

public void progressSET(String message) {

    if (progressDialog == null || !progressDialog.isShowing()) {
        return;
    }

    TextView tv_progress_message = (TextView) progressDialog.findViewById(R.id.tv_progress_message);
    if (!TextUtils.isEmpty(message)) {
        tv_progress_message.setText(message);
    }

}

프로그레스를 종료해야하는 시점에는 progressOFF()를 호출합니다.

public void progressOFF() {
    if (progressDialog != null && progressDialog.isShowing()) {
        progressDialog.dismiss();
    }
}

추가 팁

저는 이 함수들을 Application 클래스에 두었습니다.

Application을 singleton으로 만들고 BaseActivity,BaseFragment를 만든뒤 거기서 이 함수들을 활용합니다.

모든 Activity,Fragment는 이 BaseActivity,BaseFragment를 상속받습니다.

그렇게하는경우 단순히 Activity에서 progressON()이라는 함수만 실행해주어도 바로 다이어로그를 띄워줄수가 있습니다.

글만 읽어서는 어떠한 구조인지 잘 이해가 가지 않으실 수 있기때문에 Github에서 샘플프로젝트를 다운받고 돌려보시길 추천드립니다.

https://github.com/ParkSangGwon/GifProgressSample

Github을 들어가셨다면 꼭 Star 눌러주시면 감사하겠습니다!

저에게는 별풍선 주시는 효과가 있어요!

어때요 참 쉽죠?

한문장으로 정리해보자면 GIF이미지들을 확보한뒤 이를 AnimationDrawable형태로 만든뒤에 Dialog를 새로띄우면서 해당 이미지의 애니메이션을 시작해주면 됩니다.

프로그레스를 어떻게 띄워야할지 고민하셨던 분들에게 도움이 되었으면 합니다.

감사합니다.