How to create a Health metrics 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 Health Metrics Screen is a vital component in fitness, wellness, and wearable-integrated apps. It displays real-time or daily health statistics such as heart rate, steps taken, and calories burned, helping users track and manage their physical activity. A thoughtfully designed screen incorporates data visualizations like progress indicators, bar charts, and stat cards, creating an engaging and easy-to-understand interface.

This guide will walk you through the steps to design and implement a Health Metrics Screen using the Ionic Design Kit. By leveraging its UI components and the Ionic Framework, you can build a sleek, informative, and motivational dashboard that empowers users to stay on top of their health goals.

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

3. Get inside the project directory

cd health

4. Create a Health page

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

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

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

export default Health;

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>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
    <IonFooter>
        <IonToolbar>
        ...
        </IonToolbar>
    </IonFooter>
</IonPage>

The IonHeader component represents the top bar of the page and is commonly used to display a title or navigation elements. Inside it, IonToolbar provides a container for the toolbar elements. The IonTitle is placed within the toolbar and displays the page title, in this case, 'Summary'. This structure is typical in Ionic layouts for organizing the header area of a page.

...
<IonHeader>
    <IonToolbar>
        <IonTitle>
            Summary
        </IonTitle>
    </IonToolbar>
</IonHeader>

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

7. Create an activity row

The IonContent component wraps the main content of the page. It allows scrolling and handles device-safe area padding. Within it, IonItem is used with button={true} to make the entire row tappable. The lines='none' attribute removes the default dividing line, and className='ion-margin-top' adds top margin spacing using Ionic's utility class. The content of the item is simple text: 'Activity'.

<IonContent>
    <IonItem button={true} lines='none' className='ion-margin-top'>
        Activity
    </IonItem>
</IonContent>

8. Display activity stats in a grid

This section uses IonGrid to create a responsive layout. Inside it, IonRow groups a horizontal row of columns. Each IonCol has size='4', meaning it takes up one-third of the row width. The className='ion-text-center' centers content within each column. Inside each column:

IonButton is set to fill="clear" (no background) and shape='round' (rounded corners).
IonIcon displays a relevant icon with color and slot='icon-only' indicating the button has only an icon.
A <p> element gives a label (e.g., Move, Exercise).
IonText shows performance data with a color matching the icon.

<IonContent>
    ...
    <IonGrid>
        <IonRow>
            <IonCol size='4' className='ion-text-center'>
                <IonButton fill="clear" shape='round'>
                    <IonIcon color='tertiary' slot='icon-only' icon={starHalf} />
                </IonButton>
                <p>
                    Move
                </p>
                <IonText color="tertiary">
                    200/400kcal
                </IonText>
            </IonCol>
            <IonCol size='4' className='ion-text-center'>
                <IonButton fill="clear" shape='round'>
                    <IonIcon color='warning' slot='icon-only' icon={starOutline} />
                </IonButton>
                <p>
                    Exercise
                </p>
                <IonText color="warning">
                    2/45min
                </IonText>
            </IonCol>
            <IonCol size='4' className='ion-text-center'>
                <IonButton fill="clear" shape='round'>
                    <IonIcon slot='icon-only' icon={star} />
                </IonButton>
                <p>
                    Stand
                </p>
                <IonText color="primary">
                    12/12hrs
                </IonText>
            </IonCol>
        </IonRow>
    </IonGrid>
</IonContent>

9. Add a trends section trigger

Similar to section 7, this uses another IonItem that is a tappable row without lines and includes top margin spacing. The text label shown is 'Trends', and this item likely serves as a section header or navigation trigger to a trends detail view.

<IonContent>
    ...
    <IonItem button={true} lines='none' className='ion-margin-top'>
        Trends
    </IonItem>
</IonContent>

10. Build the trends overview grid

This section repeats the IonGrid and IonRow pattern. Each IonCol size='6' takes half the width of the row, resulting in a two-column layout. Inside each column:

IonButton with fill="clear" and shape='round' wraps an IonIcon, whose color, slot='icon-only', and icon properties define its appearance and behavior.
A <div className='trend-box'> contains structured trend data.
<p> provides the trend's title (e.g., 'Walking pace').
IonText displays the numeric or performance value with a colored theme to indicate status.

The consistent structure across columns helps visually compare different health metrics like pace, distance, cardio fitness, and more.

<IonContent>
    <IonGrid>
        <IonRow>
            <IonCol size='6'>
                <IonButton fill="clear" shape='round'>
                    <IonIcon color='primary' slot='icon-only' icon={chevronUp} />
                </IonButton>
                <div className='trend-box'>
                    <p>
                        Stand
                    </p>
                    <IonText color='primary'>
                        26/45min
                    </IonText>
                </div>
            </IonCol>
            <IonCol size='6'>
                <IonButton fill="clear" shape="round">
                    <IonIcon color="warning" slot="icon-only" icon={chevronUp} />
                </IonButton>
                <div className="trend-box">
                    <p>Exercise</p>
                    <IonText color="warning">56min/day</IonText>
                </div>
            </IonCol>
            <IonCol size='6'>
                <IonButton fill="clear" shape="round">
                    <IonIcon color="tertiary" slot="icon-only" icon={chevronUp} />
                </IonButton>
                <div className="trend-box">
                    <p>Move</p>
                    <IonText color="tertiary">569kcal/day</IonText>
                </div>
            </IonCol>
            <IonCol size='6'>
                <IonButton fill="clear" shape="round">
                    <IonIcon color="dark" slot="icon-only" icon={chevronUp} />
                </IonButton>
                <div className="trend-box">
                    <p>Stand minutes</p>
                    <IonText color="dark">4min/hr</IonText>
                </div>
            </IonCol>
            <IonCol size='6'>
                <IonButton fill="clear" shape="round">
                    <IonIcon color="success" slot="icon-only" icon={chevronUp} />
                </IonButton>
                <div className="trend-box">
                    <p>Walking pace</p>
                    <IonText color="success">18:33/km</IonText>
                </div>
            </IonCol>
            <IonCol size='6'>
                <IonButton fill="clear" shape="round">
                    <IonIcon
                        color="secondary"
                        slot="icon-only"
                        icon={chevronDown}
                    />
                </IonButton>
                <div className="trend-box">
                    <p>Distance</p>
                    <IonText color="secondary">4.3km/day</IonText>
                </div>
            </IonCol>
            <IonCol size='6'>
                <IonButton fill="clear" shape="round">
                    <IonIcon color="dark" slot="icon-only" icon={chevronUp} />
                </IonButton>
                <div className="trend-box">
                    <p>Cardio fitness</p>
                    <IonText color="dark">31VO₂max</IonText>
                </div>
            </IonCol>
            <IonCol size='6'>
                <IonButton fill="clear" shape="round">
                    <IonIcon color="danger" slot="icon-only" icon={remove} />
                </IonButton>
                <div className="trend-box">
                    <p>Running pace</p>
                    <IonText color="danger">-/-/km</IonText>
                </div>
            </IonCol>
        </IonRow>
    </IonGrid>
</IonContent>

11. Include summary action buttons

After the trend grid, there is a line break <br /> followed by two IonButton elements. Both use fill='outline' to display as outlined buttons and expand='block' to stretch the buttons across the full container width. The className='ion-padding-horizontal' applies horizontal padding, and the second button adds ion-margin-top to separate it vertically from the one above. These buttons allow users to edit or explore additional content, labeled 'Edit summary' and 'See all categories' respectively.

<IonContent>
    <br />
    <IonButton fill='outline' expand='block' className='ion-padding-horizontal'>
        Edit summary
    </IonButton>
    <IonButton fill='outline' expand='block' className='ion-padding-horizontal ion-margin-top'>
        See all categories
    </IonButton>
</IonContent>

The footer area is defined using IonFooter, which wraps an IonToolbar acting as the footer's container. Inside, two IonButton components are used, each containing an IonIcon. The icons (heart and people) represent navigation actions or favorite features. The slot='icon-only' attribute ensures only icons are shown, and size='large' makes them more visually prominent. The color='medium' on the second icon applies a neutral gray style, differentiating it from the active icon.

<IonFooter>
    <IonToolbar>
        <IonButton fill='clear'>
            <IonIcon size='large' slot='icon-only' icon={heart} />
        </IonButton>
        <IonButton fill='clear'>
            <IonIcon color='medium' size='large' slot='icon-only' icon={people} />
        </IonButton>
    </IonToolbar>
</IonFooter>

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!