Ionic 5 - Awesome tab bar with curve

[shinix]

Hi everybody,

For my mobile app (iOS and Android), i’m working to change a little bit the design of tab bar. After some search, i have see nothing to make that free, so i’ve decided to publish my code here to help the community.

Here’s the result of the tab bar (on iPhone 11 Pro Max emulator)

Modify your tabs.page.html with:

<ion-tabs>  

  <ion-fab vertical="bottom" horizontal="center" translucent="true">
    <ion-fab-button (click)="goToPictures()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
  
  <ion-tab-bar slot="bottom" class="ion-no-border">
    <ion-tab-button tab="tab-encounters">
      <ion-icon name="compass"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab-conversations" class="comments">
      <ion-icon name="chatbubbles"></ion-icon>
      <ion-badge *ngIf="new_message">{{new_message}}</ion-badge>
    </ion-tab-button>

    <svg height="50" viewBox="0 0 100 50" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z" fill="red" fill-rule="evenodd"></path></svg>

    <ion-tab-button tab="tab-notifications" class="notifs">
      <ion-icon name="notifications"></ion-icon>
      <ion-badge *ngIf="new_activities">{{new_activities}}</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="tab-profile">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Change tab url and remove badges if not necessary and then you can create on tabs.page.ts goToPictures() function.

After that, you can simply add on tabs.page.scss

ion-tabs{
	ion-fab {
		margin-bottom: env(safe-area-inset-bottom); /* fix notch ios*/
		ion-fab-button {
			--box-shadow: none;
		}
	}
	ion-tab-bar {
		--border: 0;
		--background: transparent;
		position: absolute;
		bottom: 0;
		left:0; right: 0;
		width: 100%;
		&:after{
			content: " ";
			width: 100%;
			bottom: 0;
			background: var(--ion-color-light);
			height: env(safe-area-inset-bottom);
			position: absolute;
		}
		ion-tab-button {
			--background: var(--ion-color-light);
		}
		ion-tab-button.comments {
			margin-right: 0px;
			border-top-right-radius: 18px;
		}
		ion-tab-button.notifs {
			margin-left: 0px;
			border-top-left-radius: 18px;
		}
		svg {    
			width: 72px;
			margin-top: 19px;
			path{
				fill:  var(--ion-color-light);
			}		
		}
	}
}

Tell my if you make some change and a little screenshot with your app make me happy

If you want to change tab bar color, modify only all var(--ion-color-light);
@indraraj26 to see my post

[indraraj26]

Thank you for sharing bro it means a lot to me.

[alitalaee]

it is really awesom do more somthing like this pls…

[valdeca]

This is really solid. thanks!!

Would you mind sharing your thought process, to design the right CSS to get to these tabs?

I want to build something similar but that looks like this:

Would you mind driving me?

[jjdev]

this isnt quite the exact design you have pictured but i think it can help you get started

Ionic Forum -> ionic tutorial beautiful custom tabs with custom icons

[valdeca]

I am having an issue with the fab button. Every time I they keyboard is shown the button gets moved over to above the keyboard. This creates a really weird animation. How did you fix it?

[Forevadj26]

hey help me please please share me the code for this

[katche70]

Realy nice, but safe area on iphone is’nt working correct

[joniskandar]

Thanks, you make my day broh

[Sidnambisan]

Thanks man… didnt go through your code but it exactly solved my 2 hours of effort in 5 mins. Will check once done with work.