Monday, 15 July 2013

Custom dialog in android studio example

Custom's dialog in android example

The custom dialog in android is used to show some alert message to the users of the application.

By default android having the support for the dialog.But to give some different user experience and to perform some customized action we need o go for the custom dialog in android.


This custom dialog in android example having the sample android application to show you how to create the custom dialog in android studio.


Please follow the simple steps to develop the custom dialog in android studio.


Dialog class:


Dialog class is used to create the custom dialog in android.


Know more about dialog please visit:

https://developer.android.com/reference/android/app/Dialog.html

Create the dialog object by using the current class context.

final Dialog dialog;
dialog = new Dialog(MainActivity.this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

Set the animation to the custom dialog.


dialog.getWindow().getAttributes().windowAnimations = R.style.animation;

Here I have developed the new style.

Place your styles under res/values/style.xml


<style name="animation">
        <item name="android:windowEnterAnimation">@anim/in_animation</item>
        <item name="android:windowExitAnimation">@anim/out_animation</item>
    </style>

In the style, I have defined my In / Out animation.


in_animation.xml



<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
<scale  xmlns:android="http://schemas.android.com/apk/res/android"
  android:fromXScale="0"
  android:toXScale="1"
  android:fromYScale="0"
  android:toYScale="1"
  android:pivotX="50%"
  android:pivotY="50%"
  android:duration="400"
  android:fillAfter="true">
</scale>
</set>

out_animation.xml



<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
<scale  xmlns:android="http://schemas.android.com/apk/res/android"
  android:fromXScale="1"
  android:toXScale="0"
  android:fromYScale="1"
  android:toYScale="0"
  android:pivotX="50%"
  android:pivotY="50%"
  android:duration="400"
  android:fillAfter="true">
</scale>
</set>

By using the setContextView() method you can set layout view to the dialog.


dialog.setContentView(R.layout.dialog_layout);

If you want to dialog cancellable when pressing the back button, 

set the cancellable to true in the dialog and you can also cancel the dialog by touching outside of the dialog view.
to enable that,


dialog.setCancelable(false);
dialog.setCanceledOnTouchOutside(true);

In this example, I have developed two buttons, 

One to display the dialog,


btnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.show();
            }
        });
by clicking the show dialog button you can see the dialog with the animation.

another one is to hide the dialog with the animation,



btn_cancel.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                dialog.dismiss();
            }
        });


Now you can able to develop your own custom dialog in android studio.


My sample code for your reference, 


MainActivity.Java
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Dialog dialog;
        dialog = new Dialog(MainActivity.this);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.getWindow().getAttributes().windowAnimations = R.style.animation;
        dialog.getWindow().setBackgroundDrawable(
                new ColorDrawable(
                        android.graphics.Color.TRANSPARENT));
        dialog.setContentView(R.layout.dialog_layout);
        Button btnShow = (Button)findViewById(R.id.btnShow);
        Button btn_cancel=(Button)dialog.findViewById(R.id.button1);
        dialog.setCancelable(false);
        dialog.setCanceledOnTouchOutside(true);
        btnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.show();
            }
        });

        btn_cancel.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                dialog.dismiss();
            }
        });
    }
}

dialog_layout.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright"
    android:padding="20dp"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Alert Dialog"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="@android:color/white" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="close" />

</LinearLayout>

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

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

Screenshot:
Custom dialog in android studio example
Custom dialog in android studio
DOWNLOAD FULL SOURCE CODE

2 comments:

sumit kumawat said...

can u provide tutorial related to calender and how to add events and show events

sumit kumawat said...

can u provide tutorial related to calender and how to add events and show events