Custom Dialog in Android Using PopupWindow

Hi All

      Today I am going to explain the way to implement custom dialog using PopupWindow, not with default dialog provided by Android OS. So let start coding;

1. activity_main.xml :

 <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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Dialog" />

</RelativeLayout>

2. dialog.xml :

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

  android:gravity="center"

   android:id="@+id/popup"

  >

    <LinearLayout 

       

        android:layout_width="match_parent"

        android:layout_height="200dp"

        android:background="#89c24d"

        android:gravity="center"

        android:layout_marginTop="25dp"

        android:layout_marginLeft="20dp"

        android:layout_marginRight="20dp"

        android:orientation="vertical" >

     

        <TextView

            android:id="@+id/textViewhead"

            android:gravity="center"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="Entries" 

            android:textAppearance="?android:attr/textAppearanceMedium" 

      />

        <TextView

            android:id="@+id/textViewdiscription"

            android:gravity="center"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            

            android:text="Enter Your content Value" />

        <EditText

            android:id="@+id/login_dialog"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_margin="10dp"

            android:gravity="center"

            android:inputType="number|phone"

            android:background="@drawable/edittext"

            android:textSize="15sp"

           android:hint="value"

            />

        <Button

            android:id="@+id/guest_dialog"

            android:layout_marginTop="30dp"

            android:gravity="center"

             android:textSize="15sp"

            android:layout_width="wrap_content"

           android:background="@drawable/log_out"

            android:layout_height="wrap_content"

            android:text="OK" />

    </LinearLayout>

    <ImageView

    android:id="@+id/cancel"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_gravity="right"

    android:layout_alignParentTop="true"

    android:layout_alignParentRight="true"

    android:src="@drawable/btn_cross" />

</RelativeLayout>

Note: Here I am using some images in the dialog UI. so you can use your own.

3. MainActivity.java :

package com.example.customdialog;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.View.OnClickListener;

import android.view.ViewGroup.LayoutParams;

import android.view.Window;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ImageView;

import android.widget.PopupWindow;

import android.widget.Toast;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

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

btn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

initiatePopupWindow();

}

});

}

private PopupWindow pwindo;

private void initiatePopupWindow() {

try {

// We need to get the instance of the LayoutInflater

LayoutInflater inflater = (LayoutInflater) MainActivity.this

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View layout = inflater.inflate(R.layout.dialog,

(ViewGroup) findViewById(R.id.popup));

// layout.setAnimation(AnimationUtils.loadAnimation(this,

// R.anim.slide_in_left));

pwindo = new PopupWindow(layout, LayoutParams.WRAP_CONTENT,

LayoutParams.WRAP_CONTENT, true);

pwindo.showAtLocation(layout, Gravity.CENTER, 0, 0);

final EditText login = (EditText) layout

.findViewById(R.id.login_dialog);

Button guest = (Button) layout.findViewById(R.id.guest_dialog);

ImageView cancel = (ImageView) layout.findViewById(R.id.cancel);

guest.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

pwindo.dismiss();

}

});

cancel.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

pwindo.dismiss();

}

});

} catch (Exception e) {

e.printStackTrace();

}

}

}

The out put will shown on button click like this:

There is no change in manifest.xml ...

This was all about custon dialog, Thanks

enjoy..