Cara Membuat Custom Alert Dialog di Android Studio

Halo teman -  teman Baru Berbagi pada kesempatan kali ini saya kembali akan membagikan source code android studio gratis yaitu Cara Membuat Custom Alert Dialogs.

 mudah - mudahan code ini bisa bermanfaat buat teman - teman yang ingin belajar atau ingin mempercantik tampilan UI pada aplikasi teman - teman  .

Nah langsung saja kita buka IDE kesayangan kita yaitu android studio dan beri nama project kita dengan nama Custom Alert Dialog  dengan menggunakan Api 19 dan tentunya menggunkan bahasa pemprograman java.

kalian buka folder values lalu tambahkan code ini pada :

color.xml

  
  <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorWhite">#ffffffff</color>
    <color name="colorSucces">#488543</color>
    <color name="colorWarning">#ffcc00</color>
    <color name="colorNeutral">#434343</color>
    <color name="colorError">#CC0000</color>
    <color name="colorTextPrimary">#212121</color>
</resources>
  
   
strings.xml

  
  
  <resources>
    <string name="app_name">Custom Alert Dialog</string>
    <string name="succes">succes</string>
    <string name="warning">warning</string>
    <string name="error">error</string>
    <string name="succes_title">This is succes title</string>
    <string name="warning_title">This is warning title</string>
    <string name="error_title">This is error title</string>
    <string name="dummy_text">Loren Ipsum is simple dummy of the printing and type setting industry</string>
    <string name="okay">Okay</string>
    <string name="yes">Yes</string>
    <string name="no">No</string>
</resources>

   

styles.xml
  

  
  
  <resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

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

</resources>

   
kemudian click kanan folder drawable lalu pilih New > drawable resource file
lalu buatlah file xml seperti daftar berikut:
 button_error_background.xml
 button_neutral_background.xml
 button_succes_background.xml
 button_warning_background.xml
 dialog_background.xml 
 title_error_background.xml
 title_succes.background.xml
 title_warning_bacground.xml.
 tambahkan code berikut di bagian :
 button_error_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/colorError"/>
    <corners android:radius="20dp"/>

</shape>

   
button_neutral_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/colorNeutral"/>
    <corners android:radius="20dp"/>

</shape>

    

   
button_succes_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/colorSucces"/>
    <corners android:radius="20dp"/>

</shape>
    

   
button_warning_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/colorWarning"/>
    <corners android:radius="20dp"/>

</shape>

    

   
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/colorWhite"/>
    <corners android:radius="10dp"/>


</shape>
    

   
title_error_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/colorError"/>
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
</shape>
    

   
title_succes_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/colorSucces"/>
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
</shape>

    

   
title_warning_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/colorWarning"/>
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
</shape>
    

   

buatlah 3 icon dengan cara click kanan pada folder drawable > Vector Asset lalu pilih icon sesuka kalian lalu beri nama seperti daftar berikut.
ic_succes.xml
ic_warning.xml
ic_error.xml.
kemudian tambahkan juga code di 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">

    <Button
        android:id="@+id/buttonSucces"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="@string/succes"/>

    <Button
        android:id="@+id/buttonWarning"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="@string/warning"/>

    <Button
        android:id="@+id/buttonError"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="@string/error"/>

</LinearLayout>

    

   
             
click kanan folder layout pilih New > layout resource file lalu buatlah layout seperti daftar berikut.
layout_error_dialog.xml
layout_succes_dialog.xml
layout_warning_dialog.xml
tambahkan code berikut pada bagian : 

layout_error_dialog.xml
  

  
  

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layoutDialogContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:padding="20dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_background"
        app:layout_constraintTop_toTopOf="parent"
        >

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

        <ImageView
            android:id="@+id/imageIcon"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginEnd="10dp"
            android:contentDescription="@string/app_name"
            android:tint="@color/colorWhite"
            app:layout_constraintBottom_toBottomOf="@+id/textTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textTitle"/>

        <TextView
            android:id="@+id/textMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="18dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="40dp"
            android:textColor="@color/colorTextPrimary"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textTitle"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/buttonAction"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:background="@drawable/button_error_background"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@+id/layoutDialog"
        app:layout_constraintTop_toBottomOf="@+id/layoutDialog"/>

</androidx.constraintlayout.widget.ConstraintLayout>
    

   

layout_succes_dialog.xml
  

  
  

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layoutDialogContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:padding="20dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_background"
        app:layout_constraintTop_toTopOf="parent"
        >

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

        <ImageView
            android:id="@+id/imageIcon"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginEnd="10dp"
            android:contentDescription="@string/app_name"
            android:tint="@color/colorWhite"
            app:layout_constraintBottom_toBottomOf="@+id/textTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textTitle"/>

        <TextView
            android:id="@+id/textMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="18dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="40dp"
            android:textColor="@color/colorTextPrimary"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textTitle"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/buttonAction"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:background="@drawable/button_succes_background"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@+id/layoutDialog"
        app:layout_constraintTop_toBottomOf="@+id/layoutDialog"/>

</androidx.constraintlayout.widget.ConstraintLayout>
    

     

layout_warning_dialog.xml
  

  
  
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layoutDialogContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:padding="20dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_background"
        app:layout_constraintTop_toTopOf="parent"
        >

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

        <ImageView
            android:id="@+id/imageIcon"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginEnd="10dp"
            android:contentDescription="@string/app_name"
            android:tint="@color/colorWhite"
            app:layout_constraintBottom_toBottomOf="@+id/textTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textTitle"/>

        <TextView
            android:id="@+id/textMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="18dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="40dp"
            android:textColor="@color/colorTextPrimary"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textTitle"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/buttonNo"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/button_neutral_background"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@+id/layoutDialog"
        app:layout_constraintEnd_toStartOf="@+id/buttonYes"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/layoutDialog"/>

    <Button
        android:id="@+id/buttonYes"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="40dp"
        android:background="@drawable/button_warning_background"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@+id/layoutDialog"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/buttonNo"
        app:layout_constraintTop_toBottomOf="@+id/layoutDialog"/>

</androidx.constraintlayout.widget.ConstraintLayout>

    

   

jangan lupa tambahkan juga source code pada MainActivity.java
  

  
  

package com.baruberbagi.customalertdialog;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.buttonSucces).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSuccesDialog();
            }
        });

        findViewById(R.id.buttonWarning).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showWarningDialog();
            }
        });

        findViewById(R.id.buttonError).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showErrorDialog();
            }
        });
    }

    private void showSuccesDialog(){
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this, R.style.AlertDialogTheme);
        View view = LayoutInflater.from(MainActivity.this).inflate(
                R.layout.layout_succes_dialog,
                (ConstraintLayout) findViewById(R.id.layoutDialogContainer)
        );
        builder.setView(view);
        ((TextView) view.findViewById(R.id.textTitle)).setText(getResources().getString(R.string.succes_title));
        ((TextView) view.findViewById(R.id.textMessage)).setText(getResources().getString(R.string.dummy_text));
        ((TextView) view.findViewById(R.id.buttonAction)).setText(getResources().getString(R.string.okay));
        ((ImageView) view.findViewById(R.id.imageIcon)).setImageResource(R.drawable.ic_succes);

        final  AlertDialog alertDialog = builder.create();

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

        if (alertDialog.getWindow()!= null){
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
        }
        alertDialog.show();
    }

    private void showWarningDialog(){
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this, R.style.AlertDialogTheme);
        View view = LayoutInflater.from(MainActivity.this).inflate(
                R.layout.layout_warning_dialog,
                (ConstraintLayout) findViewById(R.id.layoutDialogContainer)
        );
        builder.setView(view);
        ((TextView) view.findViewById(R.id.textTitle)).setText(getResources().getString(R.string.succes_title));
        ((TextView) view.findViewById(R.id.textMessage)).setText(getResources().getString(R.string.dummy_text));
        ((TextView) view.findViewById(R.id.buttonYes)).setText(getResources().getString(R.string.yes));
        ((TextView) view.findViewById(R.id.buttonNo)).setText(getResources().getString(R.string.no));
        ((ImageView) view.findViewById(R.id.imageIcon)).setImageResource(R.drawable.ic_warning);

        final  AlertDialog alertDialog = builder.create();

        view.findViewById(R.id.buttonYes).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                alertDialog.dismiss();
                Toast.makeText(MainActivity.this, "Yes", Toast.LENGTH_SHORT).show();
            }
        });

        view.findViewById(R.id.buttonNo).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                alertDialog.dismiss();
                Toast.makeText(MainActivity.this, "No", Toast.LENGTH_SHORT).show();
            }
        });

        if (alertDialog.getWindow()!= null){
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
        }
        alertDialog.show();
    }

    private void showErrorDialog(){
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this, R.style.AlertDialogTheme);
        View view = LayoutInflater.from(MainActivity.this).inflate(
                R.layout.layout_error_dialog,
                (ConstraintLayout) findViewById(R.id.layoutDialogContainer)
        );
        builder.setView(view);
        ((TextView) view.findViewById(R.id.textTitle)).setText(getResources().getString(R.string.succes_title));
        ((TextView) view.findViewById(R.id.textMessage)).setText(getResources().getString(R.string.dummy_text));
        ((TextView) view.findViewById(R.id.buttonAction)).setText(getResources().getString(R.string.okay));
        ((ImageView) view.findViewById(R.id.imageIcon)).setImageResource(R.drawable.ic_error);

        final  AlertDialog alertDialog = builder.create();

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

        if (alertDialog.getWindow()!= null){
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
        }
        alertDialog.show();
    }
    }


    

   
Untuk hasilnya bisa lihat vidio dibawah.
Jangan lupa share keteman - temannya ya......
    

Tweet

Subscribe to receive free email updates: