Image button Nativescript and Angular

Question

I need to create an Image button which includes a custom image and a label in {N} + Angular. Something like this:

Here's my code. I'm using the stack layout inside the grid layout. I can't see the label below the image.

<GridLayout columns="*,*" rows="*,*,*,*,*,*"  width="400" height="400">
    <StackLayout class="  btn-sq-lg  " col="0" row="0" (tap)="gotoSRTPage()">
        <Image  col="0" row ="1" src="res://ic_briefcase" > </Image>
        <Label class= "label" textWrap="true" col="0" row="2" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
    </StackLayout>  
    <StackLayout class="  btn-sq-lg  " col="1" row="0" (tap)="">
        <Image  col="1" row ="1" src="res://ic_blog" > </Image>
        <Label  class= "label" col="1" row="2" text="SRT" horizontalAlignment="center" verticalAlignment="center"</Label>
        </StackLayout>    
         <StackLayout class="  btn-sq-lg  " col="0" row="3" (tap)="">
        <Image  col="0" row ="4" src="res://ic_reminder" > </Image>
        <Label class= "label" textWrap="true" col="0" row="5" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>    
         <StackLayout class="  btn-sq-lg  " col="1" row="3" (tap)="">
        <Image  col="1" row ="4" src="res://ic_announcement" > </Image>
        <Label class="label" textWrap="true" col="1" row="5" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>      
</GridLayout>

css file:

.btn-sq-lg {
 background-color: white;
}
.label {
  text-align: center;
  color:#00caab;
}

are you wanting to display an image, icon or glyph on the button? — mast3rd3mon, Mar 15 '17 at 16:52
I have an image which I have to use as a button @mast3rd3mon — Valkyrie, Mar 15 '17 at 17:40
Do you need to use the native buttons? If not you could use a layout container, style it with a backgroundColor and put the image inside and style/position it with css also. This would give you a button appearance with an image, you can then use the `tap` event handler on the layout (stack, grid, etc). Would that be acceptable or do you really need to use the native button widgets? — Brad Martin, Mar 15 '17 at 19:59
@BradMartin I have updated the code in the question. The label is still not being displayed below the image. — Valkyrie, Mar 20 '17 at 18:40
For a test could you just hardcode 2 columns on the parent `Grid` and then see what happens. Let me know. If that doesn't work, later I'll create something in a test app and let you know how it works on my end. — Brad Martin, Mar 20 '17 at 18:43
@BradMartin I used and in the parent Gridview and it temporarily fixed my issue. Although, It would look better if It can be used in a stacklayout like you suggested before. Thanks for the help. — Valkyrie, Mar 20 '17 at 20:37
@BradMartin Will I be able to get the `ripple` effect if I use a layout container as a button? — Jai Krishnan, May 11 '17 at 12:58

score 11 · Answer 1 · answered Jun 10 '17 at 16:09

So far i haven't found a straight-forward way to do it but i have a work around

You can try the following

some.component.html

<StackLayout class="btn-img"  orientation="horizontal" padding="5" (tap)="onTappedFun()" >
   <Image src="res://facebook"  width="10%" height="100%" marginRight="10"></Image>
   <Label text="Login via Facebook" verticalAlignment="center"></Label>
</StackLayout>

some.component.css

.btn-img{
    border-radius: 5;
    border-width: 1;
    color: white;
    margin: 10;
    font-size: 22;
    border-color: #2b3c6a;
    background-color: #3B5997;
}

some.component.ts

onTappedFun(){
    console.log("Hey i was tapped");
}

Result

how to create ripple effect on it? – Robert Williams Nov 02 '18 at 13:43 — Robert Williams, Nov 02 '18 at 13:43

score 0 · Answer 2 · answered Jun 12 '23 at 10:52

This is also an option, though <span> isn't like a <label> where it's acting like a <div> in HTML...

Therefor I use a \n

<Button backgroundColor="black" width="70" height="100">
  <FormattedString>
    <Span class="far" text="&#xf073;" color="white" fontSize="50"></Span>
    <Span text="&#xA;&#xA;TEXT" color="white"></Span>
  </FormattedString>
</Button>

Note: text="" is the FontAwesome icon from this link: here

Will result something like this:

score -1 · Answer 3 · answered Feb 07 '18 at 18:19

Using only CSS you can reach the desired style:

.my-button {
  color: #395469;
  background-color: #FFFFFF;
  background-image: url("https://play.nativescript.org/dist/assets/img/NativeScript_logo.png");
  background-repeat: no-repeat;
  background-position: 35 28;
  background-size: 60 60;
  border-width: 2;
  border-color: #395469;
  border-radius: 28;
  height: 56;
  font-size: 16;
}

In the XML apply the style class:

<Button text="I like NativeScript" class="my-button"></Button>

This doesn't load the image. Instead the color selected is the only background — Ethan Keller, Feb 23 '19 at 22:44

score -1 · Answer 4 · answered Feb 13 '18 at 09:12

You can try this :

<GridLayout columns="*,*" rows="*,*"  width="400" height="400">
<StackLayout row="0" col="0" orientation="vertical">
    <Image src="~/images/star-empty.png" height="80%"></Image>
    <Label class="label" textWrap="true" text="Button Name1" height="20%"></Label>
</StackLayout>
 <StackLayout row="0" col="1" orientation="vertical">
    <Image src="~/images/star-empty.png" height="80%"></Image>
    <Label class="label" textWrap="true" text="Button Name2" height="20%"></Label>
</StackLayout>
 <StackLayout row="1" col="0" orientation="vertical">
    <Image src="~/images/star-empty.png" height="80%"></Image>
    <Label class="label" textWrap="true" text="Button Name3" height="20%"></Label>
</StackLayout>
 <StackLayout row="1" col="1" orientation="vertical">
    <Image src="~/images/star-empty.png" height="80%"></Image>
    <Label class="label" textWrap="true" text="Button Name4" height="20%"></Label>
</StackLayout>
</GridLayout>

mast3rd3mon · Answer 5 · 2017-06-12T08:27:47.053

-4

<Button>
    <Image res="<path>"></Image>
    <Label text="{{text}}"></Label>
</Button>

--EDIT--

Why have I been downvoted for this? It answers the question that was asked?

edited Jun 12 '17 at 08:27

answered Mar 16 '17 at 13:31

mast3rd3mon

8,229
2
22
46

4

The question was about `nativescript` components, you provided a solution using HTML – Bisho Adam Jun 10 '17 at 05:54
That solution works? I just didnt capitalize the tags correctly – mast3rd3mon Jun 10 '17 at 15:47
No not really, `nativescript` has a different way of rendering components and it doesn't understand regular HTML. – Bisho Adam Jun 10 '17 at 16:17
@BishoAdam there, i replaced one tag which will now work – mast3rd3mon Jun 12 '17 at 08:28
Yeah, i was doing then but had to change to a formatted string just because i needed escaped html characters – mast3rd3mon Sep 12 '17 at 07:48

Image button Nativescript and Angular

5 Answers5

some.component.html

some.component.css

some.component.ts

Result