การทำ Dialog Fragment Transition

ไดอะล็อกจะค่อยๆวูบเข้ามา และวูบออกไป

values/styles.xml

<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>
    </style>

    <style name="MyAnimation.Window" parent="@android:style/Animation.Activity">
        <item name="android:windowEnterAnimation">@anim/dialog_open</item>
        <item name="android:windowExitAnimation">@anim/dialog_close</item>
    </style>

    <style name="CustomDialogTheme" parent="@android:style/Theme.Panel">
        <item name="android:windowAnimationStyle">@style/MyAnimation.Window</item>
        <item name="android:background">#000</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">18sp</item>
    </style>

</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="android:windowEnterAnimation">@anim/dialog_open</item>

<item name="android:windowExitAnimation">@anim/dialog_close</item>

</style>

<item name="android:windowAnimationStyle">@style/MyAnimation.Window</item>

</style>

</resources>

res/anim/dialog_open.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fillAfter="false"
    android:startOffset="200">

    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="-90%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <translate
        android:fromYDelta="50%"
        android:toYDelta="0" />
</set>

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

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

android:duration="200"

android:fillAfter="false"

android:startOffset="200">

<scale

android:fromXScale="0.0"

android:fromYScale="0.0"

android:pivotX="50%"

android:pivotY="-90%"

android:toXScale="1.0"

android:toYScale="1.0" />

<translate

android:fromYDelta="50%"

android:toYDelta="0" />

</set>

res/anim/dialog_close.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">

    <scale
        android:fillAfter="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="-90%"
        android:toXScale="0.0"
        android:toYScale="0.0" />

    <translate
        android:fillAfter="true"
        android:fromYDelta="0"
        android:toYDelta="50%" />
</set>

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

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

android:duration="200">

<scale

android:fillAfter="false"

android:fromXScale="1.0"

android:fromYScale="1.0"

android:pivotX="50%"

android:pivotY="-90%"

android:toXScale="0.0"

android:toYScale="0.0" />

<translate

android:fillAfter="true"

android:fromYDelta="0"

android:toYDelta="50%" />

</set>

drawable/border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
    <solid android:color="#eee" />

</shape>

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

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

android:shape="rectangle">

<stroke

android:width="1dp"

android:color="@color/colorAccent" />

</shape>

fragment_custom_dialog.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:padding="20dp"
    android:orientation="vertical"
    android:focusableInTouchMode="true"
    android:descendantFocusability="beforeDescendants">

    <TextView
        android:id="@+id/dialog_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="Please enter input value."
        android:textColor="#ff0"
        android:textSize="18dp" />

    <EditText
        android:id="@+id/dialog_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border"
        android:padding="5dp"
        />
</LinearLayout>

<?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:padding="20dp"

android:orientation="vertical"

android:focusableInTouchMode="true"

android:descendantFocusability="beforeDescendants">

<TextView

android:id="@+id/dialog_message"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:text="Please enter input value."

android:textColor="#ff0"

android:textSize="18dp" />

<EditText

android:id="@+id/dialog_input"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/border"

android:padding="5dp"

</LinearLayout>

CustomDialogFragment.java

package com.phaisarn.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.app.Dialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.support.v4.app.DialogFragment;
import android.support.v7.app.AlertDialog;
import android.widget.Button;

public class CustomDialogFragment extends DialogFragment  {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        AlertDialog.Builder builder =
                new AlertDialog.Builder(getActivity(), R.style.CustomDialogTheme);

        LayoutInflater inflater = LayoutInflater.from(getActivity());
        View v = inflater.inflate(R.layout.fragment_custom_dialog, null);

        builder
                .setTitle("Input Value")
                //.setMessage( "Your message")
                .setView(v)
                .setNegativeButton("Cancel" , new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dismiss();
                    }
                })
                .setPositiveButton("OK" , new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dismiss();
                    }
                });

        return builder.create();
    }

    @Override
    public void onResume() {
        super.onResume();
        AlertDialog alertDialog = (AlertDialog)getDialog();

        Button btNeg = alertDialog.getButton(AlertDialog.BUTTON_NEGATIVE);
        btNeg.setTextColor(Color.CYAN);

        Button btPos = alertDialog.getButton(AlertDialog.BUTTON_POSITIVE);
        btPos.setTextColor(Color.CYAN);
    }
}

package com.phaisarn.myapplication;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.app.Dialog;

import android.content.DialogInterface;

import android.graphics.Color;

import android.support.v4.app.DialogFragment;

import android.support.v7.app.AlertDialog;

import android.widget.Button;

public class CustomDialogFragment extends DialogFragment {

@Override

public Dialog onCreateDialog(Bundle savedInstanceState) {

AlertDialog.Builder builder =

new AlertDialog.Builder(getActivity(), R.style.CustomDialogTheme);

LayoutInflater inflater = LayoutInflater.from(getActivity());

View v = inflater.inflate(R.layout.fragment_custom_dialog, null);

builder

.setTitle("Input Value")

//.setMessage( "Your message")

.setView(v)

.setNegativeButton("Cancel" , new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

dismiss();

}

})

.setPositiveButton("OK" , new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

dismiss();

}

});

return builder.create();

}

@Override

public void onResume() {

super.onResume();

AlertDialog alertDialog = (AlertDialog)getDialog();

Button btNeg = alertDialog.getButton(AlertDialog.BUTTON_NEGATIVE);

btNeg.setTextColor(Color.CYAN);

Button btPos = alertDialog.getButton(AlertDialog.BUTTON_POSITIVE);

btPos.setTextColor(Color.CYAN);

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

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

</LinearLayout>

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

<LinearLayout 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:orientation="vertical"

tools:context=".MainActivity">

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Show Dialog" />

</LinearLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @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 v) {
                CustomDialogFragment dialogFragment = new CustomDialogFragment();
                dialogFragment.show(getSupportFragmentManager(), "Dialog Fragment");
            }
        });
    }
}

package com.phaisarn.myapplication;

import android.support.v4.app.Fragment;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

public class MainActivity extends AppCompatActivity {

@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 v) {

CustomDialogFragment dialogFragment = new CustomDialogFragment();

dialogFragment.show(getSupportFragmentManager(), "Dialog Fragment");

}

});

}

Phaisarn Sutheebanjard

blog.phaisarn.com

การทำ Dialog Fragment Transition