ListPicker foreground color doesnt change

[tsonevn]

From @u14040426 on November 22, 2016 15:24

Hi I am having a problem, where my listpicker cant change the color of the text, it remains the default black. I would like it to be white, as the background is dark.

example.html

<StackLayout class="background">
    <Label class="heading-labels" text="Gender" textWrap="true" horizontal-alignment="center"></Label>
    <ListPicker #picker
                class="list-picker"
                [items]="genders"
                [(ngModel)]="selectedIndex">
    </ListPicker>
    <Button class="submit-button" text="Next" (tap)="nextPage()"></Button>
</StackLayout>

example.css

StackLayout {
    height: 450;
    margin-top:0;;
    margin-left: 30;
    margin-right: 30;
    padding-bottom: 15;
}
.background{
    background-color: transparent;
    color:white;
}

.submit-button{
    color:white;
    background-color: #CB1D00;
}

.heading-labels{
    color:white;
    text-align: center;
    font-size: 25;
}

.list-picker{
    color:white;
}

example.ts

import {Component, OnInit} from "@angular/core";
import {DietService} from "../../../service/DietService/diet.service";
import {Page} from "ui/page";

@Component({
    selector: "gender",
    templateUrl: "pages/setup/gender/gender.component.html",
    styleUrls: ["pages/setup/gender/gender.component.css", "pages/setup/setup.css"]
})
export class GenderComponent implements OnInit{
    private genders:Array<string> = ["Male", "Female"];
    private selectedIndex:number;
    constructor(private dietService: DietService, private page: Page) {
    }

    ngOnInit(){
        this.page.actionBarHidden = true;
        this.page.backgroundImage = "res://rfgfitness";
        this.initData();
    }

    public initData(){

    }

    public nextPage(){
        console.log("Next Page");
    }
}

Copied from original issue: NativeScript/nativescript-angular#549

[tsonevn]

From @u14040426 on November 22, 2016 18:53

I have been looking at trying to interface with the native apis, I am using android. But when I get the elementRef from @ViewChild the object does not have an android attribute, therefore I cannot call the native functions on the object, which I believe to be a numberPicker.

[tsonevn]

Hi @u14040426,
Thank you for reporting this issue.
Setting foreground color for the ListPicker in NativeScript has been not supported at the moment. Our developer's team will investigate, how it is possible to implement this functionality for both Android and iOS. This feature will be available in some of the next NativeScript versions. As workaround for Android you could review the attached example below. Unfortunately at this time, there is no easy way to set foreground color for iOS.
Workaround Android
main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
    <StackLayout class="p-20">
        <ListPicker id="pickerid" items="{{ items }}"  loaded="listpickerLoaded"/>
    </StackLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {ListPicker} from "ui/list-picker";
import {Color} from "color";
import {isAndroid, isIOS} from "platform"

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;
    var arr=["item1", "item2", "item3"];
    page.bindingContext ={"items":arr};
}

export function listpickerLoaded(args){
    var picker  = <ListPicker> args.object;
    console.log("------------------------------------ListPicker-----------------------------------------")

    var color = new Color("red");
    if(isAndroid){
        var count = picker.android.getChildCount();
        
        for(var x=0; x<count; x++){
            var selectorWheelPaintField = picker.android.getClass().getDeclaredField("mSelectorWheelPaint");
            selectorWheelPaintField.setAccessible(true);

            selectorWheelPaintField.get(picker.android).setColor(color.android);
            picker.android.getChildAt(x).setTextColor(color.android);
        }
    }
}

NativeScript Angular 2

HTML

<FlexboxLayout flexDirection="column" sdkExampleTitle sdkToggleNavButton>
        <Label class="h3 p-15 text-left" text="Pick a pokemon" textWrap="true"></Label>
        <!-- >> creating-listpicker-html -->
        <ListPicker (loaded)="listpickerLoaded($event)" #picker class="p-15" 
                        [items]="pokemons" [
                        selectedIndex]="selectedIndex" 
                        (selectedIndexChange)="selectedIndexChanged(picker)">
        </ListPicker>
        <!-- << creating-listpicker-html -->
        <Label [text]="'Selected pokemon: ' + picked" class="p-15" textWrap="true"></Label>
</FlexboxLayout>

TypeScript

import { Component } from "@angular/core";
import {ListPicker} from "ui/list-picker";
import {Color} from "color";
import {isAndroid, isIOS} from "platform"

let pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
"Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];

@Component({
    templateUrl: "ui-category/listpicker/creating-listpicker/creating-listpicker.component.html"
})
export class CreatingListPickerComponent {

    public pokemons: Array<string>;
    public picked: string;

    constructor() {
        this.pokemons = [];

        for (let i = 0; i < pokemonList.length; i++) {
            this.pokemons.push(pokemonList[i]);
        }
    }

    public selectedIndexChanged(picker) {
        console.log("picker selection: " + picker.selectedIndex);
        this.picked = this.pokemons[picker.selectedIndex];
    }
    public listpickerLoaded(args){
        var picker  = <ListPicker> args.object;
        console.log("------------------------------------ListPicker-----------------------------------------")

        var color = new Color("red");
        if(isAndroid){
            var count = picker.android.getChildCount();
            
            for(var x=0; x<count; x++){
                var selectorWheelPaintField = picker.android.getClass().getDeclaredField("mSelectorWheelPaint");
                selectorWheelPaintField.setAccessible(true);

                selectorWheelPaintField.get(picker.android).setColor(color.android);
                picker.android.getChildAt(x).setTextColor(color.android);
            }
        }
    }
}

Hope this helps

[zh-m]

Being resolved with ListPicker respects color and bckgColor set from CSS

[u14040426]

@zh-m Awesome, thank you. I have seen that the code has passed all tests. How long will it take to be merged into master?

[u14040426]

@zh-m It works perfectly, by the way.

[zh-m]

Hey @u14040426,

The PR has been merged.