[안드로이드] AlertDialog Custom 쉽게 만드는 방법

이번 시간에는 AlertDialog를 직접 사용자 마음대로

꾸며보는 방법을 알아보겠습니다.

---

목차

1. 실행화면

2. drawable Resource파일 만들기

3. AlertDialog 화면 만들기 layout_green_dialog.xml

4. 메인 화면 구성 activity_main.xml

5.  다이얼로그(AlertDialog) 테마 만들기

6. 메인 코드 구성 MainActivity.java

---

1. 실행화면

 

2. drawable Resource파일 만들기

res -> drawable 선택 -> 마우스 오른쪽 -> Drawable Resource File

색상 res -> values -> colors.xml

<color name="green_700">#388E3C</color>

<color name="white">#FFFFFFFF</color>

 

2-1 다이얼로그 바탕색상용 dialog_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="@color/white"/>
    <corners android:radius="10dp"/>
</shape>

 

2-2 다이얼로그 타이틀용 title_green_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/green_700" />
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

 

2-3 다이얼로그 버튼색상용 title_green_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/green_700"/>
    <corners android:radius="20dp"/>
</shape>

 

3. 다이얼로그 레이아웃 layout_green_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:id="@+id/layoutDialog"
    android:layout_margin="20dp"
    android:padding="20dp"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@drawable/dialog_background"
        android:orientation="vertical"
        android:id="@+id/dialog_background"
        >

        <TextView
            android:id="@+id/textTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/title_green_background"
            android:padding="10dp"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/textMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:textColor="@color/green_700"
            android:textSize="16sp"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnOk"
            android:layout_width="150dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginTop="60dp"
            android:textSize="14sp"
            android:background="@drawable/button_green_background"
            android:textColor="@color/white"/>
    </LinearLayout>

</LinearLayout>

 

 

4. 메인 화면 구성 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnSuccess"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="@string/success"
        android:background="@drawable/button_green_background"
        android:textColor="@color/white" />
</LinearLayout>

 

5. 다이얼로그(AlertDialog) 테마 만들기

res -> values -> themes -> themes.xml

스타일 추가하시면 됩니다.

<style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
</style>

 

 

 

6. 메인 코드 구성 MainActivity.java

public class MainActivity extends AppCompatActivity {

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


        findViewById(R.id.btnDialog).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showCustomDialog();
            }
        });
    }

    private void showCustomDialog() {

        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this
                , R.style.AlertDialogTheme);

        View view = LayoutInflater.from(MainActivity.this).inflate(
                R.layout.layout_green_dialog,
                (LinearLayout)findViewById(R.id.layoutDialog));

        //다이얼로그 텍스트 설정
        builder.setView(view);
        ((TextView)view.findViewById(R.id.textTitle)).setText("Title");
        ((TextView)view.findViewById(R.id.textMessage)).setText("Text Text Text Text Text Text");
        ((Button)view.findViewById(R.id.btnOk)).setText("Ok");

        AlertDialog alertDialog = builder.create();

        view.findViewById(R.id.btnOk).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                alertDialog.dismiss();
            }
        });

        //다이얼로그 형태 지우기
        if(alertDialog.getWindow() != null){
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
        }

        alertDialog.show();
    }
}

 

2022.01.05 - [안드로이드] - [안드로이드] 테이블 모양 그리드뷰(GridView) 쉽게 만드는 방법

[안드로이드] 테이블 모양 그리드뷰(GridView) 쉽게 만드는 방법

2022.01.01 - [안드로이드] - [안드로이드] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법

[안드로이드] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법

2022.01.02 - [안드로이드] - [안드로이드] RecyclerView Animation 스크롤(Scroll) 에 애니메이션 효과주는 방법

[안드로이드] RecyclerView Animation 스크롤(Scroll) 에 애니메이션 효과주는 방법