Looking for Ionic kit for you platform?
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 Budget Planner Screen is a vital feature in finance, personal budgeting, and goal-tracking apps, allowing users to set monthly financial goals and define spending limits across different categories. A well-designed planner interface includes category selectors (e.g., groceries, rent, entertainment), input fields for limits, visual indicators of progress, and summary charts. It helps users manage money proactively and stay on track with their savings targets.
This guide will walk you through the steps to design and implement a Budget Planner Screen using the Ionic Design Kit. By leveraging its modular UI components and the Ionic Framework, you can create a visually engaging, easy-to-navigate budgeting interface that supports smarter spending and financial well-being.
Prerequisites
This tutorial builds upon the foundation created in our previous guide, How to create a Tax & Expense tracking screen. While the basic screen structure and Plan tab functionality are already established, we'll now focus on implementing the enhanced Remaining tab view that provides users with detailed insights into their spending patterns and remaining budget allocations.
The Budget Planner screen extends the basic expense tracking by offering a comprehensive view of how users are spending within each budget category. This enhanced functionality allows users to track individual expenses, monitor spending progress, and make informed decisions about their remaining budget allocations.
1. Import additional icons
Add these new icons to your existing import statement.
import { addCircle, cash, chevronBackOutline, chevronForwardOutline, documentText, pencil, settings, home, bus, heart, airplane, barbellSharp, cart, add } from 'ionicons/icons';
2. Create remaining categories data structure
Add a new array called remainingCategories after your existing data arrays.
const budgetItems = [...]
const remainingCategories = [
{
name: 'Housing',
total: '$2,450',
spent: '$2,450',
items: [
{ name: 'Apartment payment', spent: '$2,450', total: '$2,450', icon: home }
]
},
{
name: 'Lifestyle',
total: '$845',
spent: '$395',
items: [
{ name: 'Public transport', spent: '$150', total: '$150', icon: bus },
{ name: 'Charity', spent: '$50', total: '$100', icon: heart },
{ name: 'Travel', spent: '$0', total: '$200', icon: airplane },
{ name: 'Gym', spent: '$45', total: '$45', icon: barbellSharp },
{ name: 'Shopping', spent: '$100', total: '$100', icon: cart },
{ name: 'Subscription', spent: '$50', total: '$50', icon: cash }
]
}
];
3. Create Remaining view component
Create a new function called RemainingView after your existing PlanView component. This component will display detailed spending breakdowns for each budget category, showing users exactly how they're spending within each category.
const RemainingView = () => (
<>
</>
);
4. Add category mapping
Inside the component, we need to iterate through each budget category to display them individually. The remainingCategories.map() loops through each category in our data array, categoryIndex gives us the position of each category (0, 1, 2, etc.), and key={categoryIndex} is required by React for efficient rendering when mapping over arrays. Each category gets wrapped in a div container.
const RemainingView = () => (
<>
{remainingCategories.map((category, categoryIndex) => (
<div key={categoryIndex}>
</div>
))}
</>
);
5. Create category headers
For each category, add a header section that displays the category name and spending progress. The conditional margin marginTop: categoryIndex === 0 ? '24px' : '32px' means the first category (index 0) gets 24px top margin, while all others get 32px. This creates better visual separation. The {category.name} displays the category title (e.g., 'Housing', 'Lifestyle'), and {category.spent} / {category.total} shows how much has been spent vs. the total budget (e.g., '$395 / $845'). The ion-no-margin removes default margins, and color='medium' makes the progress text slightly muted.
{remainingCategories.map((category, categoryIndex) => (
<div key={categoryIndex}>
<div style={{ marginTop: categoryIndex === 0 ? '24px' : '32px', marginBottom: '16px' }}>
<IonText>
<h2 className='ion-no-margin' style={{ marginBottom: '8px' }}>
{category.name}
</h2>
</IonText>
<IonText color='medium'>
<p className='ion-no-margin'>
{category.spent} / {category.total}
</p>
</IonText>
</div>
</div>
))}
6. Create expense items list container
After the category header, create a list container that will hold all the individual expense items. The IonList creates a container for list items with proper Ionic styling, lines='none' removes the default separator lines between list items for a cleaner look, and ion-margin-top adds consistent spacing above the list.
{remainingCategories.map((category, categoryIndex) => (
<div key={categoryIndex}>
<div style={{ marginTop: categoryIndex === 0 ? '24px' : '32px', marginBottom: '16px' }}>
<IonText>
<h2 className='ion-no-margin' style={{ marginBottom: '8px' }}>
{category.name}
</h2>
</IonText>
<IonText color='medium'>
<p className='ion-no-margin'>
{category.spent} / {category.total}
</p>
</IonText>
</div>
<IonList lines='none' className='ion-margin-top'>
</IonList>
</div>
))}
7. Map through individual expense items
Inside the IonList, iterate through each expense item within the current category. The category.items.map() loops through each expense item in the current category, IonItem creates a list item container with proper Ionic styling and touch interactions, ion-no-padding removes default padding for custom spacing control, marginRight: '-16px' extends the item slightly beyond the list container for full-width appearance, and minHeight: '57px' ensures consistent height for all items, preventing layout shifts.
<IonList lines='none' className='ion-margin-top'>
{category.items.map((item, itemIndex) => (
<IonItem key={itemIndex} className='ion-no-padding' style={{ marginRight: '-16px', minHeight: '57px' }}>
</IonItem>
))}
</IonList>
8. Render expense item icons
For each expense item, add an icon on the left side to visually represent the expense type. The IonIcon displays the icon from our data (e.g., home for housing, bus for transport), slot='start' positions the icon on the left side of the item, fontSize: '24px' makes the icon appropriately sized for the item height, and marginRight: '16px' creates proper spacing between the icon and the text content.
<IonItem key={itemIndex} className='ion-no-padding' style={{ marginRight: '-16px', minHeight: '57px' }}>
<IonIcon
icon={item.icon}
slot='start'
style={{ fontSize: '24px', marginRight: '16px' }}
/>
</IonItem>
9. Display expense item content
Add the expense name and spending details in the center of each item. The div style={{ flex: 1 }} makes this container take up all available space between the icon and button, ensuring proper text alignment. The item.name displays the expense name (e.g., 'Apartment payment', 'Public transport'), and item.spent / item.total shows the spending progress for this specific item. The fontSize: '12px' makes the spending details smaller and less prominent than the main text, and color='medium' uses a muted color for secondary information.
<IonItem key={itemIndex} className='ion-no-padding' style={{ marginRight: '-16px', minHeight: '57px' }}>
<IonIcon
icon={item.icon}
slot='start'
style={{ fontSize: '24px', marginRight: '16px' }}
/>
<div style={{ flex: 1 }}>
<IonText>
<p className='ion-no-margin'>{item.name}</p>
</IonText>
<IonText color='medium' style={{ fontSize: '12px' }}>
<p className='ion-no-margin'>{item.spent} / {item.total}</p>
</IonText>
</div>
</IonItem>
10. Implement action button
Finally, add an add button on the right side of each expense item for user interaction. The IonButton creates a clickable button for user interaction, size='small' makes the button appropriately sized for the list item, fill='outline' creates a bordered button style that's less prominent than filled buttons, color='medium' uses a neutral color that doesn't compete with the main content, icon={add} displays the plus icon to indicate "add" functionality, and slot='icon-only' shows only the icon without text, keeping the button compact.
<IonItem key={itemIndex} className='ion-no-padding' style={{ marginRight: '-16px', minHeight: '57px' }}>
<IonIcon
icon={item.icon}
slot='start'
style={{ fontSize: '24px', marginRight: '16px' }}
/>
<div style={{ flex: 1 }}>
<IonText>
<p className='ion-no-margin'>{item.name}</p>
</IonText>
<IonText color='medium' style={{ fontSize: '12px' }}>
<p className='ion-no-margin'>{item.spent} / {item.total}</p>
</IonText>
</div>
<IonButton
size='small'
fill='outline'
color='medium'
>
<IonIcon icon={add} slot='icon-only' />
</IonButton>
</IonItem>
11. Complete Remaining view component
Here's the complete component with all the pieces assembled. This combines all the previous steps into one cohesive component that displays detailed spending breakdowns for each budget category.
const RemainingView = () => (
<>
{remainingCategories.map((category, categoryIndex) => (
<div key={categoryIndex}>
<div style={{ marginTop: categoryIndex === 0 ? '24px' : '32px', marginBottom: '16px' }}>
<IonText>
<h2 className='ion-no-margin' style={{ marginBottom: '8px' }}>
{category.name}
</h2>
</IonText>
<IonText color='medium'>
<p className='ion-no-margin'>
{category.spent} / {category.total}
</p>
</IonText>
</div>
<IonList lines='none' className='ion-margin-top'>
{category.items.map((item, itemIndex) => (
<IonItem key={itemIndex} className='ion-no-padding' style={{ marginRight: '-16px', minHeight: '57px' }}>
<IonIcon
icon={item.icon}
slot='start'
style={{ fontSize: '24px', marginRight: '16px' }}
/>
<div style={{ flex: 1 }}>
<IonText>
<p className='ion-no-margin'>{item.name}</p>
</IonText>
<IonText color='medium' style={{ fontSize: '12px' }}>
<p className='ion-no-margin'>{item.spent} / {item.total}</p>
</IonText>
</div>
<IonButton
size='small'
fill='outline'
color='medium'
>
<IonIcon icon={add} slot='icon-only' />
</IonButton>
</IonItem>
))}
</IonList>
</div>
))}
</>
);
12. Enable conditional rendering for Remaining view
Update your conditional rendering section to include the RemainingView component when the 'remaining' segment is selected.
{selectedSegment === 'plan' && <PlanView />}
{selectedSegment === 'remaining' && <RemainingView />}
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!