CODEWITHSUNDEEP
nativescriptangular2-nativescript
Ahmer Ali Ahsan
Ahmer Ali Ahsan

Reputation: 6136

How make an notification icon in actionbar using nativescript?

I'm new to NativeScript with Angular and I would like to make a notification icon in the action bar. Below is my desire position and look of an icon.

enter image description here

I have successfully make the same position by learning the example in below playground project.

enter image description here

Project ref#

but my output is like:

enter image description here

there is the bell font icon which is not showing there. I have highlighted its position using the rectangular background color so it easy to understand where I want this icon. The other dot label is showing in the right position. But I'm unable to show my notification bell icon before the dot icon. Below is my code please tell me what I m doing wrong in my code and how I can my notification bell icon before the dot label.

dashboard.component.html

<ActionBar class="action-bar" flat="true">
    <!-- 
    Use the NavigationButton as a side-drawer button in Android
    because ActionItems are shown on the right side of the ActionBar
    -->
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <!-- 
    Use the ActionItem for IOS with position set to left. Using the
    NavigationButton as a side-drawer button in iOS is not possible,
    because its function is to always navigate back in the application.
    -->
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
        ios.position="left">
    </ActionItem>
    <GridLayout width="100%" rows="auto" columns="*,50,auto">
        <Label col="0" row="0" class="action-bar-title" text="Dashboard"></Label>
        <StackLayout col="1" row="0" rowSpan="2" class="ah-notification" backgroundColor="#44557f">
            <Label text="&#xf0f3;" class="fa ah-bell"></Label>
        </StackLayout>
        <Label col="1" row="0" text="&#xf192;" class="fa ah-dot"></Label>
        <!-- <Image col="1" row="0" horizontalAlignment="right" marginRight="10" class="status-img" src="res://chat"></Image> -->
        <Image col="2" row="0" horizontalAlignment="right" marginRight="10" class="status-profile" src="res://chat"></Image>
    </GridLayout>

</ActionBar>

<GridLayout class="page page-content">
    <Label class="page-icon fa" text="&#xf015;"></Label>
    <Label class="page-placeholder" text="<!-- Page content goes here -->"></Label>
</GridLayout>

dashboard.component.scss

.ah-notification {
    width: 30;
    height: 30;

    .ah-bell {
        width: 30;
        height: 30;
        border-radius: 6;
        stretch: aspectFill;
        font-size: 15px;
        // margin-top: -10;
    }
}
.ah-dot {
    width: 12;
    height: 12;
    background-color: #49494b;
    border-width: 2;
    border-radius: 25;
    border-color: #49494b;
    vertical-align: top;
    horizontal-align: center;
    margin-top: 43;
    z-index: 21 // margin-left: -50;
}

Upvotes: 0

Views: 1151

Answers (1)

Henry Ch&#225;vez
Henry Ch&#225;vez

Reputation: 21

Unfortunately for that kind of action bar (2 buttons on the left and 2 on the right side) you need to build your own action bar, but you are in the right path.

What you need to do is:

  • Hide the action bar for that page.
  • Create an ActionBar component where your main layout is a GridLayout (I think this layout is perfect for this case but I can be wrong lol) and you can reuse the code that you already have.
  • Handle the events of each button.
  • Use your new ActionBar component in your page and pass it the data that you want to display.

I hope this can be helpful to you :D

Upvotes: 1

Related Questions