Customize Dialog pop-up window, such as Taobao, tmall, Jingdong, etc

Dialog has become a common practice for Android developers. It is often used as a reminder function, but it can also be extended to ad pop-up effect. Let's define an ad dialog. Here are the renderings to be realized today

1, Implementation of custom Dialog layout

The layout of Dialog is very simple. In fact, it's a picture full of containers. View ﹣ Dialog ﹣ advertisement.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="wrap_content">

    <ImageView
        android:id="@+id/iv_advertisement"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:src="@drawable/welcome_advertisement" />

</RelativeLayout>

Just place the rendering we want to display in the Dialog

2, Implementation of custom Dialog code

public class MyAdvertisementView extends Dialog implements View.OnClickListener {

    public MyAdvertisementView(Context context) {
        super(context);
        setContentView(R.layout.view_dialog_advertisement);
        //Set the Dialog to disappear after clicking outside the layout
        setCanceledOnTouchOutside(true);
    }

    public void showDialog() {
        Window window = getWindow();
        //Animating pop ups
        window.setWindowAnimations(R.style.style_dialog);
        //Set Dialog background color
        window.setBackgroundDrawableResource(R.color.colorTransparent);
        WindowManager.LayoutParams wl = window.getAttributes();
        //Set pop up position
        wl.gravity = Gravity.CENTER;
        window.setAttributes(wl);
        show();
        findViewById(R.id.iv_advertisement).setOnClickListener(this);
    }

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

What the above code does

  1. Initialize the layout of Dialog display
  2. Provide a method to pop up Dialog
  3. Set the click event of the control in Dialog

3, Customize Dialog's pop-up animation

In the code, use window.setWindowAnimations() to set our pop-up animation. Here is the code of style.xml

<!-- dialog animation -->
<style name="style_dialog">
    <item name="android:windowEnterAnimation">@anim/anim_popup_zoom_enter</item>
    <item name="android:windowExitAnimation">@anim/anim_popup_zoom_exit</item>
</style>

anim_popup_zoom_enter.xml

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

    <scale
        android:duration="500"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0"
        android:toAlpha="1.0" />
</set>

anim_popup_zoom_exit.xml

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

    <scale
        android:duration="300"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.8"
        android:toYScale="0.8" />

    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

4, Use custom Dialog

In the code, we only need to create our Dialog object, and then call the window method that we provide.

MyAdvertisementView myAdvertisementView = new MyAdvertisementView(this);
myAdvertisementView.showDialog();

Tags: Android xml encoding

Posted on Sat, 04 Apr 2020 19:12:02 -0700 by edraynham