[안드로이드] 커스텀 다이얼로그 ( Custom Dialog ) 만들기

일반적인 다이얼로그로 AlertDailog가 있습니다. 

하지만 AlertDialog는 타이틀, 메시지, 버튼으로만 구성할 수 있습니다.

그래서 사용자에 맞게 다이얼로그를 커스텀하여 만들어야 할때가 있습니다.

그럼 Custom Dialog (사용자 정의 다이얼로그)를 만들어 보겠습니다.

 

 

아래 영상은 커스텀 다이얼로그 사용 영상입니다.

 

 

 

커스텀 다이얼로그를 호출할 메인 액티비티 레이아웃 먼저 정의합니다.

 

* activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.studio572.customdialog.MainActivity">


    <LinearLayout
        android:gravity="center"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff">

    <TextView
        android:id="@+id/main_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Main Label"
        android:textSize="20dp"
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="250dp"
        android:layout_height="60dp"
        android:text="Custom Dialog 호출"
        android:textColor="#000000"
        android:textSize="16dp"/>

    </LinearLayout>
</android.support.constraint.ConstraintLayout>

TextView의 main_label에 커스텀 다이얼로그에서 입력한 값이 출력됩니다.

Button의 button은 커스텀 다이얼로그 호출하는 버튼이 되겠습니다.

 

 

 

다음은 메인 액티비티 코드입니다.

 

* MainActivity.java

package com.studio572.customdialog;

import android.support.v4.media.session.PlaybackStateCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// 커스텀 다이얼로그에서 입력한 메시지를 출력할 TextView 를 준비한다.
final TextView main_label = (TextView) findViewById(R.id.main_label);

// 커스텀 다이얼로그를 호출할 버튼을 정의한다.
Button button = (Button) findViewById(R.id.button);

// 커스텀 다이얼로그 호출할 클릭 이벤트 리스너 정의
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 커스텀 다이얼로그를 생성한다. 사용자가 만든 클래스이다.
CustomDialog customDialog = new CustomDialog(MainActivity.this);

// 커스텀 다이얼로그를 호출한다.
// 커스텀 다이얼로그의 결과를 출력할 TextView를 매개변수로 같이 넘겨준다.
customDialog.callFunction(main_label);
}
});
}
}

 

 

다음은 커스텀 다이얼로그 레이아웃을 정의합니다.

원하는 디자인으로 정의하면 되겠습니다.

저는 간단하게 타이틀, 입력칸, 확인/취소 버튼으로 디자인 했습니다.

 

*custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="16dp"
        android:text="커스텀 다이얼로그"
        android:background="@color/colorAccent"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"/>

    <EditText
        android:id="@+id/mesgase"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="16dp"
        android:hint="내용을 입력하세요."/>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/okButton"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="확인"
            android:textColor="#000000"
            android:textSize="16dp"
            android:background="#ffffff"/>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#000000" />

        <Button
            android:id="@+id/cancelButton"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="취소"
            android:textColor="#000000"
            android:textSize="16dp"
            android:background="#ffffff"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"/>
</LinearLayout>

 

 

다음은 커스텀 다이얼로그의 java코드입니다.

 

* CustomDialog.java

package com.studio572.customdialog;

import android.app.Dialog;
import android.content.Context;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by Administrator on 2017-08-07.
 */

public class CustomDialog {

    private Context context;

    public CustomDialog(Context context) {
        this.context = context;
    }

    // 호출할 다이얼로그 함수를 정의한다.
    public void callFunction(final TextView main_label) {

        // 커스텀 다이얼로그를 정의하기위해 Dialog클래스를 생성한다.
        final Dialog dlg = new Dialog(context);

        // 액티비티의 타이틀바를 숨긴다.
        dlg.requestWindowFeature(Window.FEATURE_NO_TITLE);

        // 커스텀 다이얼로그의 레이아웃을 설정한다.
        dlg.setContentView(R.layout.custom_dialog);

        // 커스텀 다이얼로그를 노출한다.
        dlg.show();

        // 커스텀 다이얼로그의 각 위젯들을 정의한다.
        final EditText message = (EditText) dlg.findViewById(R.id.mesgase);
        final Button okButton = (Button) dlg.findViewById(R.id.okButton);
        final Button cancelButton = (Button) dlg.findViewById(R.id.cancelButton);

        okButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // '확인' 버튼 클릭시 메인 액티비티에서 설정한 main_label에
                // 커스텀 다이얼로그에서 입력한 메시지를 대입한다.
                main_label.setText(message.getText().toString());
                Toast.makeText(context, "\"" +  message.getText().toString() + "\" 을 입력하였습니다.", Toast.LENGTH_SHORT).show();

                // 커스텀 다이얼로그를 종료한다.
                dlg.dismiss();
            }
        });
        cancelButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context, "취소 했습니다.", Toast.LENGTH_SHORT).show();

                // 커스텀 다이얼로그를 종료한다.
                dlg.dismiss();
            }
        });
    }
}