Android Demo—implement pop-up window from the bottom

In the previous blog post, the editor briefly introduced how to make buttons with rounded corners and pictures with rounded corners. With the dance steps between the keyboard and the fingers, we ushered in new problems. I don’t know if my friends have such experience. Taking the App as an example, when you click on the avatar, a window will pop up from the bottom, with the words “Select from the album, take a photo, cancel”, click the corresponding button to complete the corresponding operation. After a lot of fiddling, the editor finally got the ing. Today, in this blog post, the editor will briefly introduce how to click on the avatar to realize the story of the pop-up window from the bottom. This story realizes the pop-up sliding window, the main It uses some styles of setting Activity to achieve pop-up effect and sliding effect.

First, let’s write the xml code as the first step, as follows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical">

<LinearLayout 
    android:id="@+id/pop_layout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:layout_alignParentBottom="true"
    android:background="@drawable/btn_style_alert_dialog_background">


    <Button
        android:id="@+id/btn_take_photo"
        android:layout_marginLeft="20dip"
        android:layout_marginRight="20dip"
        android:layout_marginTop="20dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_style_alert_dialog_button"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btn_pick_photo"
        android:layout_marginLeft="20dip"
        android:layout_marginRight="20dip"
        android:layout_marginTop="5dip" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_style_alert_dialog_button"
        android:textStyle="bold"/>

    <Button
       android:id="@+id/btn_cancel"
       android:layout_marginLeft="20dip"
       android:layout_marginRight="20dip"
       android:layout_marginTop="15dip" 
       android:layout_marginBottom="15dip"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/btn_style_alert_dialog_cancel"
       android:textColor="#ffffff"
       android:textStyle="bold"/>
</LinearLayout>
</RelativeLayout>

The second step is to create a new java class, named SelectPicPopupWindow, inherit the Activity class and implement the OnClickListener interface. This interface does not need to be implemented. The specific code is as follows:

package com.h8.imageroundcorner;


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

public class SelectPicPopupWindow extends Activity implements OnClickListener{

    private Button btn_take_photo, btn_pick_photo, btn_cancel;
    private LinearLayout layout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.alert_dialog);
        btn_take_photo = (Button) this.findViewById(R.id.btn_take_photo);
        btn_pick_photo = (Button) this.findViewById(R.id.btn_pick_photo);
        btn_cancel = (Button) this.findViewById(R.id.btn_cancel);
        layout=(LinearLayout)findViewById(R.id.pop_layout);

        //Adding selection window range monitoring can give priority to obtaining contacts, that is, the onTouchEvent() function is no longer executed, and the onTouchEvent() function is executed when clicking other places to destroy the Activity 
        layout.setOnClickListener( new OnClickListener () {

            public  void  onClick (View v)  {
                 // TODO Auto-generated method stub 
                Toast.makeText(getApplicationContext(), "Hint: Click outside the window to close the window!" ,
                        Toast.LENGTH_SHORT).show(); 
            }
        });
        //Add button listener 
        btn_cancel.setOnClickListener( this );
        btn_pick_photo.setOnClickListener(this);
        btn_take_photo.setOnClickListener(this);
    }

    // Implement the onTouchEvent touch screen function but destroy the Activity when the screen is clicked   
    @Override 
    public  boolean  onTouchEvent (MotionEvent event) {
        finish();
        return true;
    }

    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btn_take_photo:
            break;
        case R.id.btn_pick_photo:               
            break;
        case R.id.btn_cancel:               
            break;
        default:
            break;
        }
        finish();
    }

}

The third step is to write the MainActivity class. When clicking on the avatar, let her slide out a certain pop-up box from the bottom. The code is as follows:

package com.h8.imageroundcorner;



import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;

public class TestActivity extends Activity {
    ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);
        imageView = (ImageView) findViewById(R.id.imageView2);
        Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.my);

        imageView.setImageBitmap(toRoundCorner(b,200));

          //Add a listener to the text control, click to pop up a custom window imageView.setOnClickListener( new 
        OnClickListener () {            
                 public  void  onClick (View v)  {
                    startActivity(new Intent(TestActivity.this,SelectPicPopupWindow.class));
                }
            });
    }

    public static Bitmap toRoundCorner(Bitmap bitmap, int pixels) {

        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);

        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;

        final Paint paint = new Paint();

        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

        final RectF rectF = new RectF(rect);

        final float roundPx = pixels;

        paint.setAntiAlias(true);

        canvas.drawARGB(0, 0, 0, 0);

        paint.setColor(color);

        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;

    }

}

The fourth step is to set the attribute style to achieve the effect we need. The code is as follows:

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style >
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style >
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
       <style @android:style/Animation">
        <item >@anim/push_bottom_in</item>
        <item >@anim/push_bottom_out</item>
    </style>

    < style  name = "MyDialogStyleBottom"  parent = "android :Theme.Dialog" > < item name = "android:windowAnimationStyle" > @style/AnimBottom </ item > < item name = "android:windowFrame" > @null </ item > <!-- Border--> < item name = "android:windowIsFloating" > true </ item > <!-- Whether to float above the activity--> <itemname=





         "android:windowIsTranslucent" > true </ item > 
 <!-- translucent --> 
        < item  name = "android:windowNoTitle" > true </ item > 
 <!-- untitled --> 
        < item  name = "android :windowBackground" > @android:color/transparent </ item > 
 <!-- background transparent --> 
        < item  name = "android:backgroundDimEnabled" > true </ item > 
 <!-- blurry -->
     </style>

</resources>

The fifth step, when clicking on the avatar, we need her to slide in up and down. When clicking cancel, we need her to be up and down. How to realize nie, the specific code is shown in the figure below, the first is to slide in The effect of the formula:

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

    <translate  
        android:duration="200"  
        android:fromYDelta="100%p"  
        android:toYDelta="0"/>        
</set>

Next, the slide-out effect code looks like this:     

<?xml version="1.0" encoding="utf-8"?>   
<!-- Up and down slide out -->   
< set  xmlns:android = "http://schemas.android.com/apk/res/android " >  


    <translate  
        android:duration="200"  
        android:fromYDelta="0"  
        android:toYDelta="50%p" />  
</set>

Finally, let’s take a look at the effect of the operation, as shown in the following figure:

Editor’s message: The editor of this blog post briefly introduces how to slide out the pop-up box from the bottom. I hope it can help the friends who need it. Every time a simple effect is achieved, the editor will be very happy, accompanied by the steps of the internship. , Xiaobian grows up slowly `(∩_∩)’, this is the meaning of life, or that sentence is both a challenge and an opportunity for the editor, because knowledge is the same, and more , In the editor’s programming life, I have left the most precious memory, although I will not necessarily be engaged in the Android industry in the future, in the world of code, there are many things, some sweet, some warm, some tactfully turned into songs, some In these stories, the only thing we have in common is that in a certain year, a certain month, a certain calm day, we used to love you very much! Love you–In the days of this internship, Android brought all kinds of surprises to the editor.

Leave a Comment

Your email address will not be published. Required fields are marked *