Badges in NativeScript TabView

Question

I need my app to display red badges on the TabView like the ones on the LinkedIn app shown here.

Does anybody know how to do that in NativeScript?

Answer 1

Try to this type of way for badges.

1. Create component for custom tab:-

   <GridLayout rows="*" backgroundColor="#ffffff" borderTopWidth="0.5" 
     borderTopColor="#cfd8df" verticalAlignment="bottom"
     columns="*,*,*,*,*,*">
   <Ripple class="button-bottom-layout" (tap)="gotoDashboardPage()" row="0" 
   col="0">
    <GridLayout rows="auto,auto" orientation="horizontal">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isHomeStatus ? '~/app/images/icon/home-dark.png':'~/app/images/icon/home-normal.png'"
            [tintColor]="isHomeStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isHomeStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.home"></Label>
        <StackLayout rowspan="2" height="20" width="20" backgroundColor="green" verticalAlignment="top"
            horizontalAlignment="right" margin="5" borderRadius="100">
            <Label class="text-align" fontSize="12" color="#ffffff" text="3"></Label>
        </StackLayout>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" (tap)="gotoMemberSearchPage()" row="0" col="1">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isMemberStatus ? '~/app/images/icon/member-dark.png':'~/app/images/icon/member-normal.png'"
            [tintColor]="isMemberStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isMemberStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.member"></Label>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" row="0" (tap)="gotoDonationPage()" col="2">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isDonationStatus ? '~/app/images/icon/charity-dark.png':'~/app/images/icon/charity-normal.png'"
            [tintColor]="isDonationStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isDonationStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.donation"></Label>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" row="0" (tap)="gotoEventsPage()" col="3">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isEventsStatus ? '~/app/images/icon/event-dark.png':'~/app/images/icon/event-normal.png'"
            [tintColor]="isEventsStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isEventsStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.events"></Label>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" row="0" (tap)="gotoSupportPage()" col="4">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isSupportStatus ? '~/app/images/icon/feedback-dark.png':'~/app/images/icon/feedback-normal.png'"
            [tintColor]="isSupportStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isSupportStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.support"></Label>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" (tap)="gotoFamilyPage()" row="0" col="5">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isFamilyStatus ? '~/app/images/icon/family-dark.png':'~/app/images/icon/family-normal.png'"
            [tintColor]="isFamilyStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isFamilyStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.family"></Label>
    </GridLayout>
    </Ripple>
    </GridLayout>

2. Footer.component.ts:-

    import { Component, OnInit, Input, NgZone, ChangeDetectorRef } from "@angular/core";
    import { Page, isIOS } from "tns-core-modules/ui/page";
    import { RouterExtensions } from "nativescript-angular/router";
    import * as appSettings from "tns-core-modules/application-settings";
   
   
    @Component({
       selector: "Footer",
       moduleId: module.id,
       templateUrl: "./footer.component.html",
       styleUrls: ["./footer.component.css"]
    }) 
   export class FooterComponent implements OnInit {
   
    @Input() translateData: any;
    @Input() isHomeStatus: boolean;
    @Input() isEventsStatus: boolean;
    @Input() isMemberStatus: boolean;
    @Input() isSupportStatus: boolean;
    @Input() isFamilyStatus: boolean;
    @Input() isDonationStatus: boolean;
   
   
   
    constructor(private page: Page,
      private zone: NgZone,
      private _ref: ChangeDetectorRef,
      private routerExtensions: RouterExtensions) {
    }
   
    ngOnInit(): void {
    }
   
   }
   

3. CSS:-

     .button-bottom-layout {
       width: "100%";
       border-right-width: "0.5";
       border-right-color: "#cfd8df";
       text-align: "center";
     }
   
     .text-align{
       vertical-align: "middle";
       text-align: "center";
       padding-top: "1";
     }