[안드로이드 레이아웃]Custom Dialog 사용하기

어플리케이션을 개발하다 보면 어떠한 화면을 보여줄때 화면 전체를 바꾸지않고 화면의 일부만 차지해서 팝업으로 보여주고 싶을때가 있습니다.

이럴때 사용하는것이 Dialog 입니다.

하지만 안드로이드에서 기본으로 제공하는 Dialog의 경우, 원하는바를 이룰수 없는경우가 많기때문에 이럴때는 커스텀 다이얼로그를 사용하면 됩니다.

커스텀 다이얼로그를 사용하려면 우선 내가 보여주고자 하는 화면의 xml을 먼저 작성합니다.

그리고 클래스파일은 커스텀다이얼로그를 구성하기위해서 상속할수 있는 클래스가 Dialog와 DialogFragment가 있는데

이번 포스팅에서는 Dialog만을 사용하도록 하겠습니다.

후자는 Fragment가 붙은만큼 특성도 다르니 차이를 알고 사용하셔야 합니다.

다음은 제가 사용한 소스 입니다.

CustomDialog.java

public class CustomDialog extends Dialog{
    EditText ed1,ed2;
    Button btn;
    public CustomDialog(Context context) {
        super(context);
        requestWindowFeature(Window.FEATURE_NO_TITLE);   //다이얼로그의 타이틀바를 없애주는 옵션입니다.
        getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));  //다이얼로그의 배경을 투명으로 만듭니다.
        setContentView(R.layout.customdialog);     //다이얼로그에서 사용할 레이아웃입니다.
        ed1 = (EditText) findViewById(R.id.editText);
        ed2 = (EditText) findViewById(R.id.editText2);
        btn = (Button) findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getContext(), ed1.getText().toString() + ed2.getText().toString(), Toast.LENGTH_LONG).show();
                dismiss();   //다이얼로그를 닫는 메소드입니다.
            }
        });
 
    }
}

cutomdialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:weightSum="1"
    android:background="#FFF"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.45"
        android:weightSum="1">
 
        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.3"
            android:background="#EEE"
            android:gravity="center"
            android:textAlignment="center"
            android:text="커스텀" />
 
        <EditText
            android:id="@+id/editText"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.7"
            android:background="#BBB" />
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.45"
        android:weightSum="1">
 
        <TextView
            android:textAlignment="center"
            android:gravity="center"
            android:text="다이얼로그"
            android:id="@+id/textView2"
            android:background="#CCC"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.3" />
 
        <EditText
            android:id="@+id/editText2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.7"
            android:background="#AAA" />
    </LinearLayout>
    <Button
        android:id="@+id/btn"
        android:text="닫기"
        android:background="#ABB"
        android:layout_weight="0.1"
        android:layout_width="match_parent"
        android:layout_height="0dp" />
 
</LinearLayout>

저는 여기서 따로 다이얼로그의 높이 너비를 설정해주지 않았습니다.

그냥 match_parent로만 해놓고 레이아웃을 짰는데 이대로 보여주게 되면 레이아웃이 완전히 깨진상태로 보여지게 됩니다.

하지만 그렇다고 직접적으로 높이 너비값을 dp로 주게될경우 기종에따라 다르게 보일수가 있기때문에 이는 다이얼로그를 띄우는곳에서 해결합니다.

MainActivity.java

public class MainActivity extends AppCompatActivity {
    Button dial;
    CustomDialog cd;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        DisplayMetrics dm = getApplicationContext().getResources().getDisplayMetrics(); //디바이스 화면크기를 구하기위해
        int width = dm.widthPixels; //디바이스 화면 너비
        int height = dm.heightPixels; //디바이스 화면 높이
 
        dial = (Button) findViewById(R.id.dial);
        cd = new CustomDialog(this);
        WindowManager.LayoutParams wm = cd.getWindow().getAttributes();  //다이얼로그의 높이 너비 설정하기위해
        wm.copyFrom(cd.getWindow().getAttributes());  //여기서 설정한값을 그대로 다이얼로그에 넣겠다는의미
        wm.width = width / 2;  //화면 너비의 절반
        wm.height = height / 2;  //화면 높이의 절반
        dial.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                cd.show();  //다이얼로그 
            }
        });
    }
}
 

먼저 화면 크기를 구한다음 이를 기준으로 다이얼로그의 크기를 지정해줍니다.

그리고 버튼을 누를경우 다이얼로그가 화면에 뜹니다.

저는 여기에 닫기 버튼을 누를경우 위의 두가지 EditText 에 작성한 글이 이어져서 토스트메시지로 뜨면서 다이얼로그가 사라지도록 했습니다.

저희 위미르에서는 모바일 어플리케이션(Android/iOS), Web 개발을 해드리고 있습니다.

문의 전화 : 070-4177-3962