i need to make a button that opens a custom dialogbox

i'm creating an android app for my school project

i created the interface normaly

<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
xmlns:tools="http://ift.tt/LrGmb4"
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"     
tools:context=".MainActivity">

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:background="@drawable/mappic"
    android:layout_above="@+id/zoomControls"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<ZoomControls
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/zoomControls"
    android:layout_alignParentBottom="true"
    android:layout_alignRight="@+id/imageView"
    android:layout_alignEnd="@+id/imageView" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Obtenir le PCC"
    android:id="@+id/button"
    android:layout_alignBottom="@+id/zoomControls"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

</RelativeLayout>

now i want to make it when i click on the button : Obtenir le PCC this dialog box opens up :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:backgroundTintMode="multiply"
android:backgroundTint="#ff7518ff">

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/Suivantbtn"
    android:layout_alignLeft="@+id/Suivantbtn"
    android:layout_alignStart="@+id/Suivantbtn" />

<TextView
    android:id="@+id/textdp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="Taper le poit de départ:"
    android:textColor="#ff111124"
    android:layout_alignBottom="@+id/Suivantbtn"
    android:theme="@style/AppTheme"
    android:textSize="30dp"
    android:layout_below="@+id/image"
    android:layout_marginTop="50dp"
    android:layout_marginBottom="50dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="28dp"
    android:layout_marginLeft="28dp" />/>

<Button
    android:id="@+id/Suivantbtn"
    android:layout_width="100px"
    android:layout_height="wrap_content"
    android:text="Suivant "
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/editText"
    android:layout_above="@+id/Suivantbtn"
    android:layout_marginBottom="56dp"
    android:layout_alignLeft="@+id/textdp"
    android:layout_alignStart="@+id/textdp"
    android:layout_alignRight="@+id/textdp"
    android:layout_alignEnd="@+id/textdp"
    android:textAlignment="center"
    android:backgroundTint="#ff9eadff" />

 </RelativeLayout>

and when i click on Suivant ,, the dialog box goes and another dialogbox appears :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:backgroundTintMode="multiply"
android:backgroundTint="#ff7518ff">

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/Suivantbtn2"
    android:layout_alignLeft="@+id/Suivantbtn2"
    android:layout_alignStart="@+id/Suivantbtn2" />

<TextView
    android:id="@+id/textar"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="Taper le poit d'arrivée:"
    android:textColor="#ff111124"
    android:layout_alignBottom="@+id/Suivantbtn2"
    android:theme="@style/AppTheme"
    android:textSize="30dp"
    android:layout_below="@+id/image"
    android:layout_marginTop="50dp"
    android:layout_marginBottom="50dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="28dp"
    android:layout_marginLeft="28dp" />/>

<Button
    android:id="@+id/Suivantbtn2"
    android:layout_width="100px"
    android:layout_height="wrap_content"
    android:text="Suivant "
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/editText"
    android:layout_above="@+id/Suivantbtn2"
    android:layout_marginBottom="56dp"
    android:layout_alignLeft="@+id/textar"
    android:layout_alignStart="@+id/textar"
    android:layout_alignRight="@+id/textar"
    android:layout_alignEnd="@+id/textar"
    android:textAlignment="center"
    android:backgroundTint="#ff9eadff" />

</RelativeLayout>

and when this appears and i type in and click on next this dialog box leaves and another msg box i'll create later shows a msg

how to do it ?