Thursday, July 19, 2012

Dialog Animation using windowAnimations

In this exercise, we are going to apply slide-in and slide-out animation on dialog, using windowAnimations.


Create/modify /res/values/styles.xml to add animation style of DialogAnimation, using build-in animation of slide_in_left and slide_out_right.
<resources>

    <style name="AppTheme" parent="android:Theme.Light" />

    <style name="DialogAnimation">
        <item name="android:windowEnterAnimation">@android:anim/slide_in_left</item>
        <item name="android:windowExitAnimation">@android:anim/slide_out_right</item>
    </style>
</resources>


Implement our dialog layout, /res/layout/dialoglayout.xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"/>
    <Button
        android:id="@+id/dismiss"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dismiss"/>

</LinearLayout>


MainActivity.java
package com.example.animationdialog;

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

public class MainActivity extends Activity {

 Button btnOpenDialog;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnOpenDialog = (Button)findViewById(R.id.opendialog);
        btnOpenDialog.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View v) {
    openDialog();
   }});
    }

    private void openDialog(){
     final Dialog dialog = new Dialog(MainActivity.this);
     dialog.setTitle("Animation Dialog");
     dialog.setContentView(R.layout.dialoglayout);
     dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation;
     Button btnDismiss = (Button)dialog.getWindow().findViewById(R.id.dismiss);
     
     btnDismiss.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View v) {
    dialog.dismiss();
   }});
     
     dialog.show();
    }
    
}


Main layout:
<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" >

    <Button
        android:id="@+id/opendialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:padding="@dimen/padding_medium"
        android:text="Open Dialog"
        tools:context=".MainActivity" />

</RelativeLayout>

Download the files.


4 comments:

  1. No me funciona :/
    lo probé en un Motorola con Android 4.1 y no se puede ver la animación como aparece en el vídeo. alguna solución?

    ReplyDelete
  2. Amazing! It works! Thank you!!!

    ReplyDelete
  3. Nice tutorial thanks
    but one thing missing that i like to add. Before run this above code first enable animation in the device
    (Settings-->Display-->animation)

    ReplyDelete
  4. wonderful! thank you

    ReplyDelete