Ionic 5 - Awesome tab bar with curve

@shinix wrote:

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)

tab_screen1242×509 98.6 KB

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

Posts: 1

Participants: 1

Read full topic