Create Material Design AlertDialog box in pre lollipop devices Android Studio example tutorial

How to make material style dialog box using android support v7 app AlertDialog library.

In previous android version there are not material design supported but when with the support V7 library comes with android lollipop then using this library we can use most of material styles widget into our project even if our project has pre lollipop supported. So here is the complete step by step tutorial for Create Material Design AlertDialog box in pre lollipop devices Android Studio example tutorial.

android-project-download-code-button

Note :  Please follow the below steps very carefully in order to implement appcompat-v7 support library in your android application project :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:24.0.0'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

APPCOMPAT_V7

Here your go friends….Now We are going start coding.

How to Create Material Design AlertDialog box in pre lollipop devices Android Studio example tutorial.

Code for MainActivity.java file.

package com.android_examples.materialdesigndialogbox_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.support.v7.app.AlertDialog ;
import android.widget.Toast;
import android.content.DialogInterface;

public class MainActivity extends AppCompatActivity {

Button button;

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

        button = (Button)findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                AlertDialogCreate();

            }
        });
    }

    public void AlertDialogCreate(){

        new AlertDialog.Builder(MainActivity.this)
                .setIcon(R.mipmap.ic_launcher)
                .setTitle("Alert Dialog Box Title")
                .setMessage("Are you sure( Alert Dialog Message )")
                .setPositiveButton("OK", null)
                .setNegativeButton("Cancel", null)
                .setPositiveButton("OK", new DialogInterface.OnClickListener()
                {
                    @Override
                    public void onClick(DialogInterface dialog, int which)
                    {
                        Toast.makeText(MainActivity.this, "You Clicked on OK", Toast.LENGTH_SHORT).show();
                    }
                })
                .setNegativeButton("Cancel", new DialogInterface.OnClickListener()
                {
                    @Override
                    public void onClick(DialogInterface dialog, int which)
                    {
                        Toast.makeText(MainActivity.this, "You Clicked on Cancel", Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.materialdesigndialogbox_android_examplescom.MainActivity">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Show material design animated dialog box"
        android:id="@+id/button"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Code for styles.xml file.

<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>
        <item name="alertDialogTheme">@style/AlertDialogTheme</item>
    </style>

    <style name="AlertDialogTheme"
        parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">#FFFFFF</item>
        <item name="android:background">#009688</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:windowTitleStyle">@style/WindowTitleStyle</item>

    </style>

    <style name="WindowTitleStyle"
        parent="TextAppearance.AppCompat.Title">
        <item name="android:textColor">#FFFFFF</item>
    </style>

</resources>

Screenshots:

Material_AlertDialog_1

Create Material Design AlertDialog box in pre lollipop devices Android Studio example tutorial

Click here to download Create Material Design AlertDialog box in pre lollipop devices Android Studio example tutorial project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *