Home / Blog / How to create a Video call interface screen

How to create a Video call interface 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.

A Video Call Interface for In-App Video Calling is essential for communication apps, offering users a real-time, face-to-face interaction feature. This interface includes video feeds, call controls, and participant details. A well-designed Video Call Interface ensures smooth user interaction, clear navigation, and uninterrupted communication, making it crucial for enhancing user experience in collaborative, customer support, or social connection applications.

This guide will walk you through designing and implementing a Video Call Interface using the Ionic Design Kit. By leveraging its customizable components and the Ionic Framework, you can create a modern, feature-rich interface that provides users with a seamless and intuitive video calling experience within your app.

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 call blank --type=react

3. Get inside the project directory

cd call

4. Create a Call page

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

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

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

export default Call;

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.

Use color='dark' to set a color scheme.

<IonPage>
  <IonHeader>
    <IonToolbar color='dark'>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent color='dark'>
  ...
  </IonContent>
</IonPage>

6. Place the Back button component

Inside the IonToolbar component, add an IonButtons component with the slot set to start, positioning the button at the beginning of the toolbar. Also, add className='ion-padding-start' to provide padding at the start.

Within the IonButtons component, include an IonBackButton component with the properties defaultHref='#' and text=''. This creates a back button that navigates back in the app's history when clicked. To customize the default icon, set the icon property to {chevronBack}. Ensure that {chevronBack} has been imported correctly from Ionic icons.

import { chevronBack, personAdd, syncOutline, videocam, mic, call } from "ionicons/icons";
...
<IonHeader>
    <IonToolbar color='dark'>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='#' text='' icon={chevronBack} />
        </IonButtons>
    </IonToolbar>
</IonHeader>

7. Put the title on top of the page

Place the IonTitle with the text 'Charlotte Williams' to add a title for this page.

<IonHeader>
    <IonToolbar color='dark'>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='#' text='' icon={chevronBack} />
        </IonButtons>
        <IonTitle>
            Charlotte Williams
        </IonTitle>
    </IonToolbar>
</IonHeader>

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

8. Place the Add person button

Inside the IonToolbar component, add an IonButtons component with the slot set to end, positioning the button at the ending of the toolbar. Also, add className='ion-padding-end' to provide padding at the end.

Within the IonButtons component, incorporate the IonButton with IonIcon component inside with slot property to icon-only and icon to {personAdd}.

<IonHeader>
    <IonToolbar color='dark'>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='#' text='' icon={chevronBack} />
        </IonButtons>
        <IonTitle>
            Charlotte Williams
        </IonTitle>
        <IonButtons slot='end' className='ion-padding-end'>
            <IonButton>
                <IonIcon slot='icon-only' icon={personAdd} />
            </IonButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

9. Set up the main content area with a background image

Start by adding the IonContent component to define the main content area of your app. Use the color='dark' property to set a dark color scheme for the background. Inside IonContent, include an IonImg component with the src attribute pointing to your background image back.jpg. Add descriptive text in the alt attribute for accessibility. This image will serve as the visual background for the content area.

<IonContent color='dark'>
    <IonImg src='back.jpg' alt='image' />
</IonContent>

10. Add a call image

Below the background image, include a second IonImg component for the call overlay image call.png. Assign a class name like call to this image for custom positioning and styling. Use CSS to adjust its size, position, and appearance on top of the background image, ensuring it integrates seamlessly with the overall design.

<IonContent color='dark'>
    <IonImg src='back.jpg' alt='image' />
    <IonImg src='call.png' alt='image call' className='call' />
</IonContent>

11. Add action buttons

Create a button group by wrapping multiple IonButton components inside a <div> with the class name btn-box. Assign individual colors to each button using the color property, such as medium, light, or danger, to visually differentiate their purposes. Use the IonIcon component inside each button to display icons, specifying the appropriate icon (e.g., syncOutline, videocam, mic, call) via the icon property. Style the button group with CSS to ensure proper spacing, alignment, and responsiveness.

<IonContent color='dark'>
    <IonImg src='back.jpg' alt='image' />
    <IonImg src='call.png' alt='image call' className='call' />
    <div className='btn-box'>
        <IonButton color='medium'>
            <IonIcon icon={syncOutline} />
        </IonButton>
        <IonButton color='light'>
            <IonIcon icon={videocam} />
        </IonButton>
        <IonButton color='light'>
            <IonIcon icon={mic} />
        </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!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD