How to create your own Custom Toolbar and show popup!

To create a custom toolbar, we will create new xml layout and put some resource to make it look like toolbar so we can use LinearLayout or RelativeLayout. But I will use LinearLayout to Wrap RelativeLayout, for relative layout we can Image(X ImageView) and Title (TextView) to the left side of its parent and then we create another RelativeLayout with a child of ImageView to make a float to the right side.

	<?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="46dp">
	<RelativeLayout
	android:id="@+id/a007_5_act"
	android:layout_width="match_parent"
	android:layout_height="50dip"
	android:background="@color/colorPrimary"
	android:visibility="visible">
	<ImageView
	android:id="@+id/iv_title2_left"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_centerVertical="true"
	android:layout_marginRight="5dp"
	android:background="@drawable/main_close_icon" />
	<TextView
	android:id="@+id/tv_title2_title"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerVertical="true"
	android:layout_toRightOf="@id/iv_title2_left"
	android:text="Hello World"
	android:textColor="@android:color/white"
	android:textSize="18sp" />
	<RelativeLayout
	android:layout_width="wrap_content"
	android:layout_height="50dip"
	android:layout_alignParentRight="true"
	android:layout_centerVertical="true">
	<ImageView
	android:id="@+id/iv_title2_right"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerVertical="true"
	android:visibility="visible"
	android:background="@drawable/mn_option_icon"
	/>
	</RelativeLayout>
	</RelativeLayout>
	</LinearLayout>

view raw owntab.xml hosted with ❤ by GitHub

2. We create Activity and xml layout by right click on java folder and like below. It will create a class activity and xml layout.

Activity Layout

	<?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.customowntab.MainActivity">
	<!--Include layout in main activity-->
	<include layout="@layout/owntab"/>
	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

MainActivity

	package com.example.ratanak.customowntab;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.ImageView;
	import android.widget.Toast;
	import com.example.ratanak.customowntab.popup.OptionPopup;
	public class MainActivity extends AppCompatActivity implements View.OnClickListener
	{
	//Declare variable
	private ImageView btn_close, option_btn;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	//Find the ImageView in XML with Java
	btn_close= (ImageView) findViewById(R.id.iv_title2_left);
	option_btn= (ImageView) findViewById(R.id.iv_title2_right);
	//must implement OnClickListener First and override onclick method
	btn_close.setOnClickListener(this);
	option_btn.setOnClickListener(this);
	}
	@Override
	public void onClick(View view) {
	switch (view.getId()){
	case R.id.iv_title2_left:
	//create toast message to show that we are do the rigiht way
	Toast.makeText(this, "Close Button", Toast.LENGTH_SHORT).show();
	break;
	case R.id.iv_title2_right:
	Toast.makeText(this, "Option Button", Toast.LENGTH_SHORT).show();
	final OptionPopup popup = new OptionPopup(this);
	popup.setListener(new OptionPopup.OnPopupListener() {
	@Override
	public void onItemOne() {
	Toast.makeText(MainActivity.this, "Click One", Toast.LENGTH_SHORT).show();
	popup.dismiss();
	}
	@Override
	public void onItemTwo() {
	Toast.makeText(MainActivity.this, "Click Two", Toast.LENGTH_SHORT).show();
	popup.dismiss();
	}
	@Override
	public void onItemThree() {
	Toast.makeText(MainActivity.this, "Click Three", Toast.LENGTH_SHORT).show();
	popup.dismiss();
	}
	});
	break;
	}
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

When you click on X button on left, it shows Toast popup so you can do anything you want like to finish() to close activity.....

When you click on the OverFlowMenu (Dot Image) I will call the popup that has 3 Items in it.
If you use click item one, it will show toast popup for a second... Now let's see how to handle the code this popup.

	package com.example.ratanak.customowntab.popup;
	import android.app.Activity;
	import android.view.View;
	import android.widget.TextView;
	import com.example.ratanak.customowntab.R;
	/**
	* Created by Daravuth on 3/29/2017.
	*/
	public class OptionPopup extends PopupMenu {
	private OnPopupListener listener =null;
	private TextView itemOne, itemTwo, itemThree;
	public OptionPopup(Activity mActivity) {
	//inflate popup layout
	super(mActivity, R.layout.popup_item);
	//achor for position of the popup and we create event to handle user click
	itemOne= (TextView) anchor.findViewById(R.id.itemOne);
	itemOne.setOnClickListener(this);
	itemTwo= (TextView) anchor.findViewById(R.id.itemTwo);
	itemTwo.setOnClickListener(this);
	itemThree = (TextView) anchor.findViewById(R.id.itemThree);
	itemThree.setOnClickListener(this);
	}
	@Override
	public void onClick(View view) {
	super.onClick(view);
	switch (view.getId()){
	case R.id.itemOne:
	//when you click item, it will call method onItemOne() and do action in MainAcitivty Class
	listener.onItemOne();
	break;
	case R.id.itemTwo:
	listener.onItemTwo();
	break;
	case R.id.itemThree:
	listener.onItemThree();
	break;
	}
	}
	public void setListener(OnPopupListener listener) {
	this.listener = listener;
	}
	public void setItemOne(TextView itemOne) {
	this.itemOne = itemOne;
	}
	public void setItemTwo(TextView itemTwo) {
	this.itemTwo = itemTwo;
	}
	public void setItemThree(TextView itemThree) {
	this.itemThree = itemThree;
	}
	public interface OnPopupListener{
	void onItemOne();
	void onItemTwo();
	void onItemThree();
	}
	}

view raw OptionPopup.java hosted with ❤ by GitHub

Another important is another class that I use  it for handling popup, it called PopupMenu.class

	package com.example.ratanak.customowntab.popup;
	import android.app.Activity;
	import android.graphics.Color;
	import android.graphics.Rect;
	import android.graphics.drawable.ColorDrawable;
	import android.view.Gravity;
	import android.view.MotionEvent;
	import android.view.View;
	import android.view.ViewGroup;
	import android.view.WindowManager;
	import android.widget.PopupWindow;
	/**
	* Created by Daravuth on 3/29/2017.
	*/
	public class PopupMenu extends PopupWindow implements View.OnClickListener {
	private Activity mActivity;
	protected View anchor;
	private boolean mActivityFinish = false;
	public PopupMenu(Activity mActivity, int layout) {
	this.mActivity = mActivity;
	anchor=View.inflate(mActivity, layout, null);
	super.setContentView(anchor);
	super.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
	super.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
	this.setOutsideTouchable(true);
	this.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
	this.setAnimationStyle(-1);
	this.setTouchInterceptor(new View.OnTouchListener() {
	@Override
	public boolean onTouch(View view, MotionEvent motionEvent) {
	if(motionEvent.getAction() == MotionEvent.ACTION_OUTSIDE){
	dismiss();
	return true;
	}
	return false;
	}
	});
	showPopupWindow();
	}
	//make to popup show at right side of the screen
	private void showPopupWindow(){
	Rect rect = locateView(anchor);
	showAtLocation(anchor, Gravity.TOP|Gravity.RIGHT, rect.left, rect.bottom);
	this.showAsDropDown(anchor);
	}
	@Override
	public void onClick(View view) {
	}
	//for positon of achor
	protected Rect locateView(View v) {
	int[] loc_int = new int[2];
	if (v == null) return null;
	try
	{
	v.getLocationOnScreen(loc_int);
	} catch (NullPointerException npe)
	{
	return null;
	}
	Rect location = new Rect();
	location.left = loc_int[0];
	location.top = loc_int[1];
	location.right = location.left + v.getWidth();
	location.bottom = location.top + v.getHeight();
	return location;
	}
	}

view raw PopupMenu.java hosted with ❤ by GitHub

Here is the popup item:

Here is the 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"
	android:gravity="right">
	<FrameLayout
	android:layout_width="160dp"
	android:layout_height="wrap_content"
	android:layout_marginRight="30dp"
	android:layout_marginTop="30dp">
	<ImageView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/shape" />
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_margin="5dp"
	android:orientation="vertical"
	android:paddingBottom="0dp"
	android:paddingLeft="1dp"
	android:paddingRight="6dp"
	android:paddingTop="1dp">
	<TextView
	android:id="@+id/itemOne"
	android:layout_width="match_parent"
	android:layout_height="47dp"
	android:background="@drawable/bg_item"
	android:gravity="left|center_vertical"
	android:paddingLeft="15dp"
	android:textColor="@drawable/text_color"
	android:text="Item One" />
	<TextView
	android:id="@+id/itemTwo"
	android:layout_width="match_parent"
	android:layout_height="47dp"
	android:gravity="left|center_vertical"
	android:paddingLeft="15dp"
	android:textColor="@drawable/text_color"
	android:background="@drawable/bg_item"
	android:text="Item Two" />
	<TextView
	android:id="@+id/itemThree"
	android:layout_width="match_parent"
	android:layout_height="47dp"
	android:textColor="@drawable/text_color"
	android:background="@drawable/bg_item"
	android:gravity="left|center_vertical"
	android:paddingLeft="15dp"
	android:text="Item Three" />
	</LinearLayout>
	</FrameLayout>
	</LinearLayout>

view raw popup_item.xml hosted with ❤ by GitHub

If you want to make your popup look like mine, you can add these file to your drawable folder:

File bg_item.xml file:

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:drawable="@color/colorPrimary"
	android:state_pressed="true"></item>
	<item android:drawable="@color/transparent"/>
	</selector>

view raw bg_item.xml hosted with ❤ by GitHub

File shape.xml filel :

	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<solid android:color="@android:color/white"/>
	<corners android:radius="5dp" />
	</shape>

view raw shape.xml hosted with ❤ by GitHub

File text_color.xml file :

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_pressed="true" android:color="#ff4c4f"/>
	<item android:color="#263238" />
	<item android:state_activated="true" android:color="#ff4c4f"/>
	</selector>

view raw text_color.xml hosted with ❤ by GitHub

Click here to download the source code