Android 머티리얼 구성요소 - MaterialAlertDialog

Material Design 2.0이 출시되었으며 Dialogs를 손에 넣기를 기다릴 수 없습니다. 이 자습서에서는 Android 애플리케이션에서 Material Theme를 사용하여 대화 상자를 사용자 지정합니다.

재료 구성요소 - 대화상자

경고 대화 상자는 응용 프로그램의 중요한 부분입니다. 일반적으로 중요한 것에 사용자의 주의를 끌기 위해 사용됩니다. Material Design 2.0 덕분에 이제 훨씬 강력한 Dialog가 생겼습니다. 가장 먼저 머티리얼 구성 요소 종속성을 추가해야 합니다.

implementation 'com.google.android.material:material:1.1.0-alpha09'

MaterialComponent 테마 또는 자손을 활동 테마로 상속하는 것을 잊지 마십시오.

기본 구현

이제 Builder 패턴을 사용하여 기본 MaterialAlertDialog를 만들어 보겠습니다.

new MaterialAlertDialogBuilder(MainActivity.this)
                        .setTitle("Title")
                        .setMessage("Your message goes here. Keep it short but clear.")
                        .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {

                            }
                        })
                        .setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {

                            }
                        })
                        .show();

화면에 보이는 방법은 다음과 같습니다.

이전 경고 대화 상자와 비교해 보겠습니다.

확실히 새로운 MaterialAlertDialog가 훨씬 좋아 보입니다.

AlertDialog는 구성 변경 시 내용을 잃습니다. 따라서 AppCompatDialogFragment를 사용하는 것이 좋습니다. 하지만 이 튜토리얼의 단순함을 위해 MaterialAlertDialog를 사용하겠습니다.

스타일 버튼

MaterialAlertDialog의 버튼은 MaterialButton이기 때문에 스타일을 지정할 수 있습니다. 아웃라인 버튼/테두리 없는 버튼, 파급 효과 등 설정. 예를 들어 보겠습니다.

<style name="AlertDialogTheme">
        <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
        <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
    </style>

    <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@color/colorPrimaryDark</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@android:color/darker_gray</item>
        <item name="android:textSize">14sp</item>
    </style>

new MaterialAlertDialogBuilder(MainActivity.this, R.style.AlertDialogTheme)
                .setTitle("Title")
                .setMessage("Your message goes here. Keep it short but clear.")
                .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .show();

절단 모양 대화상자

이제 Material Dialogs에서 모양을 설정할 수 있습니다! ShapeAppearance 스타일을 상속받아 컷 모양으로 스타일을 지정해 보겠습니다.

<style name="CutShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/CutShapeAppearance</item>
    </style>

    <style name="CutShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

이제 빌더 생성자에서 스타일을 설정하기만 하면 됩니다.

new MaterialAlertDialogBuilder(MainActivity.this, R.style.CutShapeTheme)
                .setTitle("Title")
                .setMessage("Your message goes here. Keep it short but clear.")
                .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .show();

원형 대화상자

<style name="RoundShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/RoundShapeAppearance</item>
    </style>

    <style name="RoundShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
    </style>

이전 코드 스니펫의 Dialog Builder 생성자에서 위 스타일을 설정하면 다음과 같이 됩니다.

이 디자인들은 너무 군침이 도는 가치가 있지 않습니까!

사용자 정의 글꼴 대화상자

마지막으로 아래와 같이 버튼과 제목에 사용자 지정 글꼴 모음을 설정할 수 있습니다.

<style name="CustomFont" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="fontFamily">@font/amatic</item>
        <item name="android:textAllCaps">false</item>
    </style>

이렇게 하면 아래와 같이 완전히 새로운 모양의 대화 상자가 표시됩니다.

이것으로 이 튜토리얼을 마칩니다. 위에서 사용된 폰트는 아래 첨부된 소스코드에서 사용 가능합니다.

AndroidMaterialComponentDialog

Github 프로젝트 링크