티스토리 뷰

Android Custom Progress Bar(로딩화면 Custom 하기)

안녕하세요. 3월첫쨰주 금요일! 내일이면 주말입니다!!!!! 


많은 사람들이 퇴근을 기다리는 금요일이네요~ 


오늘은 Progress Bar 를 원래 화면대신 변경하여서 로딩화면을 변경해보도록 하겠습니다.


1. CustomProgressBar.xml 생성

2. CustomProgressBar - Class 파일 생성

3. 사용하기!!!! 정말간단하죠? 코드로 확인해보시죠~


1. custom_progress_bar.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="7dp"
>

<ProgressBar
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateDrawable="@drawable/loading" />

<!--background 를 쓰시면 이전의 Progress가 보이므로, 위의쓴것으로 사용해줍시다 -->
</RelativeLayout>

2. Class 생성 

package juno.blog_customdialog;

import android.app.Activity;
import android.app.Dialog;
import android.view.Window;

/**
* Created by Junho on 2017-03-03.
*/

public class CustomProgressBar extends Dialog {
public CustomProgressBar(Activity activity) {
super(activity);
requestWindowFeature(Window.FEATURE_NO_TITLE); //다이얼 로그 제목을 삭제하자
setContentView(R.layout.custom_progress_bar); // 다이얼로그 보여줄 레이아웃

}
}

3. activity_main.xml   실행하기위한 버튼생성


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="juno.blog_customdialog.MainActivity">

<Button
android:id="@+id/button"
android:text="start"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

4. MainActivity 작동해봅시다.


package juno.blog_customdialog;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
Button button;
CustomProgressBar customProgressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

button = (Button)findViewById(R.id.button);
customProgressBar = new CustomProgressBar(this);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
customProgressBar.show();
}
});
}
}

5. 실행시켜봅시다. 그럼 아무화면도없이 멈춰있는 그림이 되어질텐데요.
이럴려고 ProgressBar 를 쓰는게아니니 Rotate가 가능하도록 설정해줍시다!!


다시 1. custom_progress_bar.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:background="@drawable/progress_background"
android:padding="7dp"
>

<ProgressBar
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateDrawable="@drawable/progess_rotate" />
</RelativeLayout>

6. 위에와같이 설정해줍시다! drawable에 xml을 추가시킵시다.

 저는 파일명을 progess_rotate.xml 이런식으로 만들었습니다.

loading.zip

위의 이미지를사용해주세요 ^^



<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/loading"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1"
android:toDegrees="360"
android:repeatCount="infinite">

</animated-rotate>

7. 회전도 되도록 설정하였으니, 배경도한번 만들어봅시다.

progress_background.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="12dp"/>
<stroke android:color="#1da9da" android:width="1dp"/>
</shape>

이런식으로 만들어주시고 위의 Background를 주시면됩니다.

위에와 같이 설정하였으면 다시한번 실행시켜봅시다!!!!

그럼 ProgressBar가 회전을하며, 로딩을 하는것처럼 보여집니다.



3월의 첫째주 가 끝나가네요 ㅎㅎ 파이팅합시다!!!!!    :) 


읽어주셔서 감사합니다 




Recent Comments