AOSP Messaging Layout Example

Layout example on how to mimic the AOSP Messages conversation layout on Android

  •         
    <ListView id="threadsListView" class="threads-list" [items]="conversations">
        <template let-item="item">
            <GridLayout rows="auto" columns="auto,*" class="threads-list-wrapper">
                <Image row="0" col="0" [src]="item.photo"></Image>
                <StackLayout row="0" col="1" class="" orientation="vertical">
                    <Label class="t-large" [text]="item.title"></Label>
                    <Label [text]="item.body"></Label>
                    <Label [text]="item.date"></Label>
                </StackLayout>
            </GridLayout>
        </template>
    </ListView>
    		
      
  •   
    .threads-list-wrapper {
        padding: 15;
    }
    
    .threads-list-wrapper > Image {
        height: 64;
        width: 64;
        margin-right: 15;
    }
       
      
  •   
    import {Component, OnInit} from "@angular/core"
    import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router"
    import {SMSService} from "~/services/sms.service"
    
    
    
    @Component({
    	directives: [NS_ROUTER_DIRECTIVES],
    	styleUrls: ["pages/sandbox/sandbox.styles.css"],
    	templateUrl: "pages/sandbox/sandbox.template.html",
    	providers: [SMSService], // this service gets device conversations and contacts
    })
    
    export class AddLiveComponent implements OnInit {
    
    	conversations: Array<any> = []
    
    	constructor(
    		private smsService: SMSService
    	) {}
    
    	ngOnInit() {
    		this.getConversations()
    	}
    
    	getConversations() {
    		this.smsService.getConversations().then((conversations) => {
    			this.conversations = conversations
    		}).catch(function(error) {
    			global.tnsconsole.error('error', error)
    		})
    
    	}
    
    }