Custom Popup Window on Android studio

Custom Popup Window on Android studio

The Custom Popup Window is a custom for views to display information and functions when users want to handle events in the popup.   To mak... December 26, 2018

The Custom Popup Window is a custom for views to display information and functions when users want to handle events in the popup.
 To make example custom popup windows on android, please follow the steps below.

Step 1.
Create a custom layout named customlayout.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="350dp"
    android:layout_height="475dp"
    android:background="#808080"
    android:padding="5dp"
    android:layout_gravity="center">
    <TextView
        android:id="@+id/txtclose"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:textColor="@color/white"
        android:text="X"
        android:textStyle="bold"
        android:layout_gravity="end"
        android:gravity="center"
        android:background="@drawable/custom_circle_shape"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/aa"
            android:layout_gravity="center"
            android:layout_marginTop="15dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Elina Grofild"
            android:textStyle="bold"
            android:textColor="@color/white"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Montreal,Canada"
            android:textColor="@color/white"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="15dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:background="@color/orange"
            android:gravity="center"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="100dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="150"
                android:textSize="18sp"
                android:textColor="@color/white"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Followers"
                android:textSize="18sp"
                android:textColor="@color/white"/>
        </LinearLayout>
        <LinearLayout
            android:background="@color/green"
            android:gravity="center"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="100dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="19"
                android:textSize="18sp"
                android:textColor="@color/white"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cities"
                android:textSize="18sp"
                android:textColor="@color/white"/>
        </LinearLayout>
        <LinearLayout
            android:background="@color/bluelight"
            android:gravity="center"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="100dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="50"
                android:textSize="18sp"
                android:textColor="@color/white"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Posts"
                android:textSize="18sp"
                android:textColor="@color/white"/>
        </LinearLayout>
    </LinearLayout>

    <Button
        android:id="@+id/btnfollow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Follow Me"
        android:layout_marginTop="25dp"
        android:layout_gravity="center_horizontal"
        style="@style/Base.TextAppearance.AppCompat.Button"
        android:textColor="@color/white"/>

</LinearLayout>

Step 2.
 Create a layout called activitylayout.xml

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

    <Button
        android:onClick="ShowPopup"
        android:textColor="@color/white"
        android:text="show popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Step 3.
 Create a class MainActivity.class

import android.app.Activity;
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;

import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.anhttvn.androidexample.R;

import androidx.annotation.Nullable;

public class CustomPopup extends Activity {

    private Dialog mDialog;
    private LinearLayout mLl_popup;
    private Button btn_show;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activitypopup);
        init();
        clickShow();
    }
    private void init(){
        mDialog = new Dialog(this);
        mLl_popup = findViewById(R.id.ll_popup);
        btn_show = findViewById(R.id.btn_show);
    }
    public void ShowPopup(View v) {
        TextView txtclose;
        mDialog.setContentView(R.layout.customlayout);
        txtclose =mDialog.findViewById(R.id.txtclose);
        txtclose.setText("M");
        txtclose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDialog.dismiss();
            }
        });
        mDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        mDialog.show();
    }
    private void clickShow(){
        btn_show.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ShowPopup(mLl_popup);
            }
        });
    }
}

 

Tags : Custom pupoup windown android, android example, Custom poppup windown on android.