How create a custom bottom popup in Android Studio!

Today we are going to create a simple popup in android. When the user clicks on the button, a popup will appear from the bottom of the screen. So we will create XML layout first. I will make the project for all you guy can download it...

1. Create a XML file and name it like this "popup_item.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">
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:padding="20dp"
	android:background="#ffffff"
	android:orientation="vertical">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:textSize="20sp"
	android:textColor="#2e2b2b"
	android:layout_marginBottom="10dp"
	android:text="View Type : "/>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:textSize="20sp"
	android:id="@+id/camera"
	android:drawablePadding="16dp"
	android:layout_marginBottom="7dp"
	android:drawableLeft="@drawable/in_cam_icon_on"
	android:text="You can take the Camera mode!"/>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:textSize="20sp"
	android:id="@+id/gallery"
	android:drawablePadding="16dp"
	android:drawableLeft="@drawable/in_pic_icon_on"
	android:text="You can take the Gallery mode!"/>
	</LinearLayout>
	</LinearLayout>

view raw popup_item.xml hosted with ❤ by GitHub

As you can see, we have 3 textviews, the 2nd and 3rd textview we use drawableLeft to insert an icon.

2. Create MainActivity xml like below:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:id="@+id/activity_main"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context="com.example.ratanak.bottompopup.MainActivity">
	<ImageView
	android:id="@+id/btn"
	android:layout_width="50dp"
	android:layout_height="50dp"
	android:layout_alignParentBottom="true"
	android:layout_centerHorizontal="true"
	android:background="@drawable/in_cam_icon_off"/>
	</RelativeLayout>

view raw MainActivity.xml hosted with ❤ by GitHub

3. Create your MainActivity.java like below:

	package com.example.ratanak.bottompopup;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.Button;
	import android.widget.ImageView;
	import android.widget.Toast;
	public class MainActivity extends AppCompatActivity implements View.OnClickListener {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	//set view to the screen
	setContentView(R.layout.activity_main);
	//find btn from xml
	ImageView btn = (ImageView) findViewById(R.id.btn);
	//set click listener when user click on button
	btn.setOnClickListener(this);
	}
	@Override
	public void onClick(View view) {
	switch (view.getId()) {
	case R.id.btn:
	Toast.makeText(this, "Open Camera", Toast.LENGTH_SHORT).show();
	//Call our Dialogmenu
	DialogMenu dialogMenu = new DialogMenu(this);
	dialogMenu.setListener(new DialogMenu.OnDialogMenuListener() {
	@Override
	public void onPicturePress() {
	Toast.makeText(MainActivity.this, "Camera", Toast.LENGTH_SHORT).show();
	}
	@Override
	public void onGalleryPress() {
	Toast.makeText(MainActivity.this, "Gallery", Toast.LENGTH_SHORT).show();
	}
	});
	break;
	}
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

4. Create our DialogMenu Class :

	package com.example.ratanak.bottompopup;
	import android.app.Dialog;
	import android.content.Context;
	import android.graphics.Color;
	import android.graphics.drawable.ColorDrawable;
	import android.view.Gravity;
	import android.view.View;
	import android.view.Window;
	import android.view.WindowManager;
	import android.widget.TextView;
	/**
	* Created by Daravuth on 3/30/2017.
	*/
	public class DialogMenu implements View.OnClickListener {
	private Dialog dialog;
	private OnDialogMenuListener listener;
	public DialogMenu(Context context) {
	dialog = new Dialog(context, R.style.DialogTheme);
	dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
	dialog.setContentView(R.layout.popup_item);
	dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
	dialog.getWindow().setGravity(Gravity.BOTTOM);
	dialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT);
	dialog.show();
	TextView picture = (TextView) dialog.findViewById(R.id.camera);
	TextView gallery = (TextView) dialog.findViewById(R.id.gallery);
	picture.setOnClickListener(this);
	gallery.setOnClickListener(this);
	}
	public void setListener(OnDialogMenuListener listener) {
	this.listener = listener;
	}
	@Override
	public void onClick(View view) {
	switch (view.getId()){
	case R.id.camera:
	listener.onPicturePress();
	dialog.dismiss();
	break;
	case R.id.gallery:
	listener.onGalleryPress();
	dialog.dismiss();
	break;
	}
	}
	public interface OnDialogMenuListener{
	void onPicturePress();
	void onGalleryPress();
	}
	}

view raw DialogMenu.java hosted with ❤ by GitHub

Download Source Code