Outgoing call interfaces/UI for VOIP screens XML

dialerpad.xml

 <RelativeLayout
        android:id="@+id/call_initial"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f9f8f8">

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_margin="10dp">

            <TableRow>

                <RelativeLayout
                    android:layout_weight="1"
                    android:gravity="end">

                    <TextView
                        android:id="@+id/call_rates"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@color/accent"
                        android:paddingBottom="5dp"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:paddingTop="5dp"
                        android:text="Rates"
                        android:textAppearance="?android:textAppearanceSmall"
                        android:textColor="@color/white" />
                </RelativeLayout>
            </TableRow>
        </TableLayout>

        <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/dialpad"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/white"
            android:padding="20dp">


            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp">

                <TextView
                    android:id="@+id/btn1"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="1"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/btn2"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="2"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/btn3"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="3"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="5dip">

                <TextView
                    android:id="@+id/btn4"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="4"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/btn5"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="5"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/btn6"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="6"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="5dip">

                <TextView
                    android:id="@+id/btn7"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="7"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/btn8"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="8"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/btn9"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="9"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="5dip">

                <TextView android:layout_weight="1" />

                <TextView
                    android:id="@+id/btn0"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="0"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/btn_plus"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:onClick="onClick"
                    android:text="+"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4d4c4c"
                    android:textSize="30sp" />

            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:gravity="center"
                android:padding="5dip">

                <TextView
                    android:id="@+id/btn_balance"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif-condensed"
                    android:gravity="center"
                    android:text="Balance\n$5000"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#4d4c4c"
                    android:textSize="15sp" />

                <RelativeLayout
                    android:layout_weight="1"
                    android:gravity="center">

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/btncall"
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:layout_weight="1"
                        android:background="@drawable/call_circle_shape"
                        android:padding="15dp"
                        android:tint="@color/white"
                        app:srcCompat="@drawable/ic_phone_call_button" />
                </RelativeLayout>


                <android.support.v7.widget.AppCompatImageView
                    android:id="@+id/btncancel"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:onClick="onClick"
                    app:srcCompat="@drawable/ic_backspace_arrow" />

            </TableRow>
        </TableLayout>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/dialpad"
            android:layout_marginBottom="30dp">

            <TableRow>

                <TextView
                    android:id="@+id/input"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="+91 8066243512"
                    android:textAppearance="?android:textAppearanceLarge" />
            </TableRow>
        </TableLayout>

    </RelativeLayout>

outgoing_screen.xml

<RelativeLayout
        android:id="@+id/call_initiated"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ed464646"
        android:padding="@dimen/margin10">

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp">

            <TableRow>

                <TextView
                    android:id="@+id/phone_number"
                    android:layout_weight="1"
                    android:text="+91 XXXXXXXXXX"
                    android:gravity="center"
                    android:textAppearance="?android:textAppearanceLarge"
                    android:textColor="@color/white" />
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/call_status"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Ringing..."
                    android:textAppearance="?android:textAppearanceSmall"
                    android:textColor="@color/white" />
            </TableRow>
        </TableLayout>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp">

            <TableRow android:gravity="bottom">

                <RelativeLayout
                    android:layout_weight="1"
                    android:gravity="center">

                    <android.support.v7.widget.AppCompatImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:background="@drawable/call_circle_shape_white"
                        android:padding="10dp"
                        app:srcCompat="@drawable/ic_speaker_off" />
                </RelativeLayout>

                <RelativeLayout
                    android:layout_weight="1"
                    android:gravity="center">

                    <android.support.v7.widget.AppCompatImageView
                        android:layout_width="60dp"
                        android:id="@+id/call_drop"
                        android:layout_height="60dp"
                        android:background="@drawable/call_circle_shape_red"
                        android:padding="10dp"
                        android:tint="@color/white"
                        app:srcCompat="@drawable/ic_call_drop" />
                </RelativeLayout>

                <RelativeLayout
                    android:layout_weight="1"
                    android:gravity="center">

                    <android.support.v7.widget.AppCompatImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:background="@drawable/call_circle_shape_white"
                        android:padding="10dp"
                        app:srcCompat="@drawable/ic_un_mute" />
                </RelativeLayout>
            </TableRow>
        </TableLayout>
    </RelativeLayout>

This is how it looks