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..

Custom Tabbar without using Tabhost in android

Hi All,

          Today I am going to explain the of making tab bar without using default tab host and fragments.
This is very simple to make a tab bar using views in android.

The code is as follows:

1.   Code for 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" >

    <LinearLayout
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#523232"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Custom Tab"
            android:textColor="#FFFFFF" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/top"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_one"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="One" />

        <Button
            android:id="@+id/btn_two"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Two" />

        <Button
            android:id="@+id/btn_three"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Three" />

        <Button
            android:id="@+id/btn_four"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Four" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_one"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab"
        android:background="#0B4044"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button1"
            android:textColor="#F7FAB4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="One" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_two"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab"
        android:visibility="gone"
        android:gravity="center"
        android:background="#269E54"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button2"
            android:textColor="#F7FAB4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Two" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_three"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:background="#69D43B"
        android:gravity="center"
        android:layout_below="@id/tab"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button3"
            android:textColor="#F7FAB4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Three" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_four"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab"
        android:visibility="gone"
        android:gravity="center"
        android:background="#69D43B"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#F7FAB4"
            android:text="Four" />

    </LinearLayout>

</RelativeLayout>

2. Now put below code in MainActivity.java :

 package com.example.customtabbar;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    Button one, two, three, four;
    LinearLayout lay_one, lay_two,lay_three,lay_four;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
      
        one=(Button)findViewById(R.id.btn_one);
        two=(Button)findViewById(R.id.btn_two);
        three=(Button)findViewById(R.id.btn_three);
        four=(Button)findViewById(R.id.btn_four);
      
        lay_one=(LinearLayout)findViewById(R.id.lay_one);
        lay_two=(LinearLayout)findViewById(R.id.lay_two);
        lay_three=(LinearLayout)findViewById(R.id.lay_three);
        lay_four=(LinearLayout)findViewById(R.id.lay_four);
      
      
        one.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
            lay_one.setVisibility(View.VISIBLE);
            lay_two.setVisibility(View.GONE);
            lay_three.setVisibility(View.GONE);
            lay_four.setVisibility(View.GONE);
            }
        });
      
        two.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                lay_one.setVisibility(View.GONE);
                lay_two.setVisibility(View.VISIBLE);
                lay_three.setVisibility(View.GONE);
                lay_four.setVisibility(View.GONE);
            }
        });
      
        three.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                lay_one.setVisibility(View.GONE);
                lay_two.setVisibility(View.GONE);
                lay_three.setVisibility(View.VISIBLE);
                lay_four.setVisibility(View.GONE);
            }
        });
      
        four.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                lay_one.setVisibility(View.GONE);
                lay_two.setVisibility(View.GONE);
                lay_three.setVisibility(View.GONE);
                lay_four.setVisibility(View.VISIBLE);
            }
        });
      
    }

 }
 

Note :  There no any change in manifest.xml

Output of the code:

1. When clicked on Button One:

2. When clicked on Button Two :

3. When clicked on Button  Three:

4. When clicked on Button Four: 

Thanks to all, Happy coding !!!!!!.