How to create a Voice call screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Voice Call Screen is a crucial feature in communication apps, enabling real-time audio conversations between users. A well-designed call screen provides an ongoing call UI with essential controls, such as mute/unmute, speaker toggle, call hold, and end call options. It also includes an option to add another participant, participant names, and call timer indicators to enhance the user experience. Ensuring a clean and intuitive interface improves usability and call efficiency.

This guide will walk you through the steps to design and implement a Voice Call Screen using the Ionic Design Kit. By leveraging its design components and the Ionic Framework, you can create a sleek, functional, and user-friendly call interface that enhances real-time communication.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start phonecall blank --type=react

3. Get inside the project directory

cd phonecall

4. Create a Call page

Create page Phonecall.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const Phonecall: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Phonecall;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    ...
  </IonHeader>
  <IonContent>
    ...
  </IonContent>
</IonPage>

6. Create the header with a back button

The IonHeader component is used to define the header section of the page. Inside it, the IonToolbar provides a flexible toolbar layout. The IonButtons component with slot='start' places the button on the left side of the toolbar. The IonBackButton allows navigation to the previous page. The defaultHref="#" defines the default redirection if no navigation history exists. The text='' removes any default label, while icon={chevronBack} sets the back arrow icon. The color="light" applies a light color theme to the button.

import { chevronBack } from "ionicons/icons";
...
<IonHeader>
    <IonToolbar>
        <IonButtons slot='start'>
            <IonBackButton defaultHref='#' text='' icon={chevronBack} color='light' />
        </IonButtons>
    </IonToolbar>
</IonHeader>

7. Add an action button to the header

Within the same IonToolbar, an additional IonButtons component with slot='end' is used to align the button to the right. Inside, an IonButton acts as a clickable element. The IonIcon component inside the button has slot='icon-only', ensuring it only displays the icon without additional text. The icon={personAdd} specifies the icon, and color="light" applies a light color scheme.

<IonHeader>
    <IonToolbar>
        <IonButtons slot='start'>
            <IonBackButton defaultHref='#' text='' icon={chevronBack} color='light' />
        </IonButtons>
        <IonButtons slot='end'>
            <IonButton>
                <IonIcon slot='icon-only' icon={personAdd} color='light' />
            </IonButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

8. Create the main content layout

The IonContent component wraps the main content of the page. It has color="medium", which applies a medium background color. The className='ion-padding ion-text-center' ensures proper padding and centers the text horizontally. The IonText component is used to structure the text, and inside it, the <h1> element displays the name 'Carl Jones' with additional styling from className='ion-padding-top', adding spacing at the top.

...
<IonContent color='medium' className='ion-padding ion-text-center'>
    <IonText>
        <h1 className='ion-padding-top'>
            Carl Jones
        </h1>
    </IonText>
</IonContent>

9. Add a timestamp below the name

The timestamp is placed within another IonText component inside IonContent. It contains a <p> element displaying '03:19'. This indicates the call duration or a timestamp, keeping it visually aligned under the name.

<IonContent color='medium' className='ion-padding ion-text-center'>
    <IonText>
        <h1 className='ion-padding-top'>
            Carl Jones
        </h1>
    </IonText>
    <IonText>
        <p>03:19</p>
    </IonText>
</IonContent>

10. Show caller image

The IonImg component is used to display an image related to the call. The src='carl-jones.png' defines the image source, while alt='call image' provides alternative text for accessibility.

<IonContent color='medium' className='ion-padding ion-text-center'>
    ...
    <IonImg src="carl-jones.png" alt="call image" />
</IonContent>

11. Add call control buttons

A <div> with the class btn-box is used to group call-related buttons. Inside, multiple IonButton components are placed, each containing an IonIcon. The first button, with color='light', includes the volumeHigh icon, likely for speaker control. The second button, with color='medium', has the videocam icon, which may enable video mode. Another button with color='medium' and micOff icon is used for muting the microphone. The last button, colored danger, features the call icon, indicating an option to end the call. This structured layout ensures an intuitive user experience for managing a call.

<IonContent color='medium' className='ion-padding ion-text-center'>
    ...
    <div className='btn-box'>
        <IonButton color="light">
            <IonIcon icon={volumeHigh} />
        </IonButton>
        <IonButton color="medium">
            <IonIcon icon={videocam} />
        </IonButton>
        <IonButton color="medium">
            <IonIcon icon={micOff} />
        </IonButton>
        <IonButton color="danger">
            <IonIcon icon={call} />
        </IonButton>
    </div>
</IonContent>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!