iOS Smarties :)

April 15, 2014 Leave a comment
iOS & Objective C Smarties Code Snippets by Marcio Valenzuela

iOS & Objective C Smarties Code Snippets

Everyone loves Smarties!  And much the same way Smarties Candies make you smarter… today we are talking about Code Snippets that make you….er Smarter!  More than a source of cut/paste Objective C source code, this is meant to be a quick reference.  As such, some of these will be incomplete and I will be filling them up as I go along. 

1)   UIAlertView

UIAlertView *internetAlert = [[UIAlertView alloc] initWithTitle:@”No hay farmacias”

message:@”Favor cambie sus parámetros”



otherButtonTitles:@”Ok”, nil];

[internetAlert show];

2)   NSNotification

//1. Register as observer of notifications in viewDidLoad

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(receiveTestNotification:) name:@”TestNotification” object:nil];

//2. NSNotifCtr CLEANUP in viewDidUnload

[[NSNotificationCenter defaultCenter] removeObserver:self];

//4. Post notif to NSNotif in calling method OTHER CLASS

[[NSNotificationCenter defaultCenter]



//3. Method to prove notif received…

- (void) receiveTestNotification:(NSNotification *) notification


if ([[notification name] isEqualToString:@”TestNotification”])

NSLog (@”Successfully received the test notification!”);


3)   UIActivityIndicator – NSTimer – then completion blocks

//1. Set activity indicator

UIApplication *sharedApplication = [UIApplication sharedApplication];

sharedApplication.networkActivityIndicatorVisible = YES;

//INSERT NSTimer here J

//2. Hide activity indicator

UIApplication *sharedApplication = [UIApplication sharedApplication];

sharedApplication.networkActivityIndicatorVisible = NO;

works the same with an IBOutlet UIActivityIndicator

4)   UISearchBar

UISearchBarDelegate, UISearchDisplayDelegate

@property (strong,nonatomic) NSMutableArray *filteredResultsArray;

@property (strong,nonatomic) IBOutlet UISearchBar *resultsSearchBar;

//UISearch in INIT or LOAD method

// Initialize the filteredResults array with its count of Locations NSManagedObjects

self.filteredResultsArray = [NSMutableArray arrayWithCapacity:[self.originalArray count]];

//ios6 refresh control ONLY

if ([UIRefreshControl class]) {

self.refreshControl = [[UIRefreshControl alloc] init];

[self.refreshControl addTarget:self action:@selector(reload) forControlEvents:UIControlEventValueChanged];

[self reload];

[self.refreshControl beginRefreshing];

} else {

//do nothing



if (tableView == self.searchDisplayController.searchResultsTableView) {

return [filteredResultsArray count];

} else {

return [self.originalArray count];



if (tableView == self.searchDisplayController.searchResultsTableView) {

// IF ITS A SEARCH TABLE…>>>>>>>>>>

//Use filteredResultsArray data

} else {

//Otherwise use self.originalArray


5)   Reminders & Events



#import <EventKit/EventKit.h>





static EKEventStore* eStore = NULL;


//keep a static instance of eventStore

if (!eStore) {

eStore = [[EKEventStore alloc] init];


return eStore;




EKEventStore *store = [self eventStore];

//1 fetch the local event store source

EKSource* localSource = nil;

for (EKSource* src in store.sources) {

if (src.sourceType == EKSourceTypeCalDAV) {

localSource = src;


if (src.sourceType == EKSourceTypeLocal && localSource==nil) {

localSource = src;



if (!localSource) return nil;


EKCalendar* newCalendar = [EKCalendar calendarWithEventStore: store];

newCalendar.title = kAppCalendarTitle;

newCalendar.source = localSource;

newCalendar.CGColor = [[UIColor colorWithRed:0.8 green:0.2 blue:0.6 alpha:1] CGColor];

//3 save the calendar in the event store

NSError* error = nil;

[store saveCalendar: newCalendar commit:YES error:&error];

if (!error) {

return nil;


//4 store the calendar id

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults];

[prefs setValue:newCalendar.calendarIdentifier forKey:@"appCalendar"];

[prefs synchronize]; return newCalendar;




EKCalendar* result = nil;

EKEventStore *store = [self eventStore];

//2 check for a persisted calendar id

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults];

NSString *calendarId = [prefs stringForKey:@"appCalendar"];


if (calendarId && (result = [store calendarWithIdentifier: calendarId])) {

return result;


//4 check if calendar name exists

for (EKCalendar* cal in store.calendars) {

if ([cal.title compare: kAppCalendarTitle]==NSOrderedSame) {

if (cal.immutable == NO) {

[prefs setValue:cal.calendarIdentifier

forKey:@"appCalendar"]; [prefs synchronize]; return cal;




//5 if no calendar is found whatsoever, create one

result = [self createAppCalendar];


return result;



-(void)addItem:(NSDictionary*)item toCalendar:(EKCalendar*)calendar{

EKEvent* event = [EKEvent eventWithEventStore:[AppCalendar eventStore]];

event.calendar = calendar;

EKAlarm* myAlarm = [EKAlarm alarmWithRelativeOffset: - 06*60 ];

[event addAlarm: myAlarm];

NSDateFormatter* frm = [[NSDateFormatter alloc] init];

[frm setDateFormat:@"MM/dd/yyyy HH:mm zzz"];

[frm setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@”en_US”]];

event.startDate = [frm dateFromString:[show objectForKey:@"startDate"]];

event.endDate = [frm dateFromString:[show objectForKey:@"endDate"]];

event.title = [item objectForKey:@"title"];

event.URL = [NSURL URLWithString:[item objectForKey:@"url"]];

event.location = @”My Office”;

event.notes = [item objectForKey:@"tip"];

//add recurrence

NSNumber* weekDay = [item objectForKey:@"dayOfTheWeek"];

EKRecurrenceDayOfWeek* itemDay = [EKRecurrenceDayOfWeek dayOfWeek: [weekDay intValue]];

EKRecurrenceEnd* runFor3Months = [EKRecurrenceEnd recurrenceEndWithOccurrenceCount:12];

EKRecurrenceRule* myReccurrence = [[EKRecurrenceRule alloc] initRecurrenceWithFrequency:EKRecurrenceFrequencyWeekly interval:1

daysOfTheWeek:[NSArray arrayWithObject:itemDay] daysOfTheMonth:nil monthsOfTheYear:nil weeksOfTheYear:nil daysOfTheYear:nil setPositions:nil end:runFor3Months];

[event addRecurrenceRule: myReccurrence];

//1 save the event to the calendar

NSError* error = nil;

[[AppCalendar eventStore] saveEvent:event span:EKSpanFutureEvents commit:YES error:&error];

//2 show the edit event dialogue

EKEventEditViewController* editEvent = [[EKEventEditViewController alloc] init];

editEvent.eventStore = [AppCalendar eventStore]; editEvent.event = event;

editEvent.editViewDelegate = self;

[self presentViewController:editEvent animated:YES completion:^{

UINavigationItem* item = [editEvent.navigationBar.items objectAtIndex:0]; item.leftBarButtonItem = nil;





- (id) init {

self = [super init];

if (self) {

_eventStore = [[EKEventStore alloc] init];

[_eventStore requestAccessToEntityType:EKEntityTypeEvent

completion:^(BOOL granted, NSError *error) {

if (granted) {

_eventAccess = YES;

} else {

NSLog(@"Event access not granted: %@", error);



[_eventStore requestAccessToEntityType:EKEntityTypeReminder completion:^(BOOL granted, NSError *error) {

if (granted) { _reminderAccess = YES;

} else {

NSLog(@"Reminder access not granted: %@", error);



//Initialize the dispatch queue

_fetchQueue = dispatch_queue_create(“com.santiapps.fetchQueue”, DISPATCH_QUEUE_SERIAL);


return self;



NSArray * allCalendars = [_eventStore calendarsForEntityType:EKEntityMaskEvent |

NSMutableArray * writableCalendars = [NSMutableArray array]; for (EKCalendar * calendar in allCalendars) {

if (calendar.allowsContentModifications) { [writableCalendars addObject:calendar];

} }

EKCalendar *calendar = eventStore.defaultCalendarForNewEvents;



EKEvent *event = [EKEvent eventWithEventStore:eventStore]; event.title = @”Hello world!”;
event.startDate = startDate;
event.endDate = endDate;

EKAlarm *alarm = [EKAlarm alarmWithRelativeOffset:-1800]; [event addAlarm:alarm];

event.calendar = eventStore.defaultCalendarForNewEvents;


NSError *err;
BOOL saved = [eventStore saveEvent:event span:EKSpanThisEvent commit:YES error:&err];

if (!saved) {
NSLog(@”Error creating the event”);




EKReminder *reminder = [EKReminder reminderWithEventStore:eventStore];

reminder.title = @”Creating my first reminder”; reminder.calendar = [eventStore defaultCalendarForNewReminders];

NSCalendar *calendar =
[NSCalendar currentCalendar];

NSUInteger unitFlags = NSEraCalendarUnit |

NSYearCalendarUnit | NSMonthCalendarUnit | NSDayCalendarUnit;

NSDateComponents *dueDateComponents = [calendar components:unitFlags fromDate:dueDate];

//1.5. Set the due date

reminder.dueDateComponents = dueDateComponents;


NSError *err;

BOOL success =

[eventStore saveReminder:reminder commit:YES error:&err];

if (!success) {
NSLog(@”Error creating reminder”);


6)   Local Notifications

//test notif

NSDate *date = [NSDate dateWithTimeIntervalSinceNow:10];

UILocalNotification *localNotification = [[UILocalNotification alloc] init];

localNotification.fireDate = date;

localNotification.timeZone = [NSTimeZone defaultTimeZone];

localNotification.alertBody = @”I am a local notification!”;

localNotification.soundName = UILocalNotificationDefaultSoundName;

[[UIApplication sharedApplication] scheduleLocalNotification:localNotification];

7)   Sort NSArrays for tableviews


NSSortDescriptor *sortDescriptor;

sortDescriptor = [[[NSSortDescriptor alloc] initWithKey:@”distance” ascending:YES] autorelease];

NSArray *sortDescriptors = [NSArray arrayWithObject:sortDescriptor];

NSArray *sortedArray;

sortedArray = [self.annotationsToSort sortedArrayUsingDescriptors:sortDescriptors];

self.annotationsToSort = [(NSArray*)sortedArray mutableCopy];

[self.tableView performSelector:@selector(reloadData) withObject:nil afterDelay:0.5];


8)   Contacts

// Read Contact list xml formatted (Array of Dictionaries)

//read directory here

dispatch_async(kBgQueue , ^{

contacts = [NSArray arrayWithContentsOfURL: kContactsList];

dispatch_async(dispatch_get_main_queue(), ^{

[self.tableView reloadData]; });


// Do this


dispatch_async(kBgQueue , ^{

NSString* request = [NSString stringWithFormat:@"%@?%@", kContactsList, ids]; //1

NSData *responseData = [NSData dataWithContentsOfURL:[NSURL URLWithString:request]]; //2

//parse vCard data

ABAddressBookRef addressBook = ABAddressBookCreate(); //1

ABRecordRef record = ABPersonCreate(); //2

NSArray* importedPeople = (__bridge_transfer NSArray*)

ABPersonCreatePeopleInSourceWithVCardRepresentation( record, (__bridge CFDataRef)responseData); //3

CFBridgingRelease(record); //4

//define few constants

__block NSMutableString* message = [NSMutableString stringWithString:

@"Contacts imported AB. Add them in Facebook: "];

NSString* serviceKey = (NSString*)kABPersonSocialProfileServiceKey;

NSString* facebookValue = (NSString*)


NSString* usernameKey = (NSString*)kABPersonSocialProfileUsernameKey;

//loop over people and get their facebook

for (int i=0;i<[importedPeople count];i++) { //1

ABRecordRef personRef = (__bridge ABRecordRef) [importedPeople objectAtIndex:i];

ABAddressBookAddRecord(addressBook, personRef, nil);


ABMultiValueRef profilesRef = ABRecordCopyValue( personRef, kABPersonSocialProfileProperty);

NSArray* profiles = (__bridge_transfer NSArray*) ABMultiValueCopyArrayOfAllValues(profilesRef);


for (NSDictionary* profile in profiles) { //4

NSString* curServiceValue = [profile objectForKey:serviceKey]; //5

if ([facebookValue compare: curServiceValue] == NSOrderedSame) { //6

[message appendFormat: @"%@, ", [profile objectForKey: usernameKey]];






//save to addressbook

ABAddressBookSave(addressBook, nil);


//show done alert

dispatch_async(dispatch_get_main_queue(), ^{ [[[UIAlertView alloc]

initWithTitle: @”Done!” message: message

delegate: nil cancelButtonTitle:@”OK” otherButtonTitles:nil] show];



9)   Mapkit



BOOL locationAllowed = [CLLocationManager locationServicesEnabled];

if (locationAllowed==NO) {

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@”Location Service Disabled”

message:@”Re-enable in Settings for this app.”




[alert show];

[alert release];





locationManager = [[CLLocationManager alloc] init];

locationManager.delegate = self;

locationManager.distanceFilter = 10;

locationManager.desiredAccuracy = kCLLocationAccuracyBest;

[locationManager startUpdatingLocation];

//- (void)startMonitoringSignificantLocationChanges

_mapView.showsUserLocation = YES;


-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray *)locations {

self.userLocation = [locations lastObject];

NSLog(@”userLocation is %f, %f”, self.userLocation.coordinate.latitude, self.userLocation.coordinate.longitude);

CLLocationCoordinate2D zoomLocation;

zoomLocation.latitude = self.userLocation.coordinate.latitude;

zoomLocation.longitude = self.userLocation.coordinate.longitude;

NSLog(@”Using %g,%g”, zoomLocation.latitude, zoomLocation.longitude);

//StopUpdating Location so it wont change all the time

[locationManager stopUpdatingLocation];



CLLocation *pinLocation = [[CLLocation alloc] initWithLatitude:annotation.coordinate.latitude longitude:annotation.coordinate.longitude];

CLLocationDistance calculatedDistance = [pinLocation distanceFromLocation:self.userLocation];

annotation.distance = calculatedDistance/1000;



//Clean out old annotations

for (id<MKAnnotation> annotation in _mapView.annotations) {

[_mapView removeAnnotation:annotation];



//NSLog(@”self.myLocationsToSort %@”, self.myLocationsToSort);

for (MyLocation *annotation in self.myLocationsToSort) {

//Add annotation to mapview

[_mapView addAnnotation:annotation];



- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation {

static NSString *identifier = @”MyLocation”;

if ([annotation isKindOfClass:[MyLocation class]]) {

//test if mapviewnil

if (_mapView == nil) {



MKPinAnnotationView *annotationView = (MKPinAnnotationView *) [_mapView dequeueReusableAnnotationViewWithIdentifier:identifier];

if (annotationView == nil) {

annotationView = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier];

annotationView.enabled = YES;

annotationView.canShowCallout = YES;

annotationView.image=[UIImage imageNamed:@"arrest.png"];

} else {

annotationView.annotation = annotation;


//instatiate a detail-disclosure button and set it to appear on right side of annotation

UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];

//[infoButton addTarget:self action:@selector(showDetailView:annotationView.annotation) forControlEvents:UIControlEventTouchUpInside];

annotationView.rightCalloutAccessoryView = infoButton;

return annotationView;


return nil;




- (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation {

// We have location, do your logic of setting the map region here.

CLLocationCoordinate2D zoomLocation;

NSLog(@”location in FirstVC %@”, self.userLocation);

//Test if userLocation has a value


zoomLocation.latitude = self.userLocation.coordinate.latitude;

zoomLocation.longitude = self.userLocation.coordinate.longitude;

CLLocationDistance visibleDistance = 5000; // 5 kilometers

MKCoordinateRegion adjustedRegion = MKCoordinateRegionMakeWithDistance(zoomLocation, visibleDistance, visibleDistance);

[_mapView setRegion:adjustedRegion animated:YES];



//Called when disclosure tapped

- (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control{

if (![view.annotation isKindOfClass:[MyLocation class]])


// use the annotation view as the sender

[self performSegueWithIdentifier:@"DetailVC" sender:view];


10)                  UICustomization/Appearance

[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];

[self.tabBarItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"Futura" size:10.0f], UITextAttributeFont, nil] forState:UIControlStateNormal];

UIImage *gradientImage32 = [[UIImage imageNamed:@"FirstCellLogo.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

[[UINavigationBar appearance] setBackgroundImage:gradientImage32 forBarMetrics:UIBarMetricsDefault];

[self.tabBarItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"Futura" size:10.0f], UITextAttributeFont, nil] forState:UIControlStateNormal];

[[UITabBar appearance] setSelectedImageTintColor:[UIColor redColor]];

11)                  LetterPress Effect

//letterpress effect the label


NSMutableAttributedString *restName = [[NSMutableAttributedString alloc] initWithString:self.attributionText.text];

[restName addAttributes:@{ NSTextEffectAttributeName : NSTextEffectLetterpressStyle, NSFontAttributeName: [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline] } range:NSMakeRange(0, restName.length)];

self.attributionText.attributedText = restName;

12)                  UIGesture

13)                  iCloud

14)                  Library.a

15)                  Instruments

16)                  Checklist App

17)                  UICollectionView & UIContainerView & SplitVC & Popover

18)                  SlideUp

19)                  Raised Tabbar

20)                  Passbook

21)                  AR

22)                  Export Data

23)                  TF

24)                  iAds & AppiRater

25)                  TimeCmoparator – String Parsing

26)                  UIApplicationDelegate sharedApplication & its methods

27)                  NSUserDefaults

// call the store object

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults];

// set an object for it

[prefs setObject:imageView.image forKey:@"keyToLookupImage"];

// call sync to save it

[prefs synchronize];

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults];

UIImage *retrievedImage = [prefs stringForKey:@"keyToLookupImage"];

imageView.image = retrievedImage;

28)                  Façade design pattern

29)                  Protocols & Delegates

30)                  InAppPurchases

31)                  Datepicker/uipicker

32)                  NSOperation

33)                  Date Formatter

NSDate *date = [NSDate date];

NSDateFormatter *dateFormatter = [[[NSDateFormatter alloc] init] autorelease];

[dateFormatter setDateStyle:NSDateFormatterShortStyle];

[dateFormatter setTimeStyle:NSDateFormatterFullStyle];

NSString *formattedDateString = [dateFormatter stringFromDate:date];

NSLog(@”formattedDateString for locale %@: %@”,

[[dateFormatter locale] localeIdentifier], formattedDateString);

timeLabel.text = [dateFormatter stringFromDate:date];

34)                  Letterpress Effect

35)                  asd

First Google Glass App – Part 8 – Hello Glass!

March 28, 2014 Leave a comment

Jumping right in, let’s create a Glass GDK project from scratch:

  1. Create New Android Project
  2. Configure GDK
  3. Imports
  4. Code
  5. qwe

To create a new project…See our Part 1 of the tutorial.

Make sure to configure the Glass GDK Sneak Peek Manually if it didn’t get configured by Android Studio or Eclipse on set up.  As it turns out, even if you create a project setting GDK as the Compile for API, it doesn’t get created as such.  You must double check in your build.gradle file (CAREFUL, there are 2 such files.  You need to modify your inner most gradle file) and make sure it looks something like this:

Google Glass GDK App Build Gradle File Settings by Marcio Valenzuela

Google Glass GDK App Build Gradle File Settings by Marcio Valenzuela

And you need to make sure that Android 4.0.3 GDK Sneak Peek & gdk.jar got added to your External Libraries as well.

Ok, once we have that out of the way, we need to include some imports.  In this case we need to add AudioManager support because we will be working with audio.  We also need TextToSpeech for recognizing commands and KeyEvent to respond to touches.

Add the following imports:

import android.content.Context;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.view.View;
import android.view.KeyEvent;
import android.widget.TextView;


We will create the card and its view as well as add a TextView, nothing new here.  But we will create a TextToSpeech variable as well as a context.  We init our speech engine and pass it the value to be speak.

We will also be creating an onKeyDown method to respond to taps on the touchpad.  When they DO occur we will then create an AudioManager to play a tap sound, set the text view and also set speak a new value.

So lets add the following code:

public class HelloGlassActivity extends Activity {

private Card _card;
private View _cardView;
private TextView _statusTextView;

private TextToSpeech _speech;

private Context _context = this;

protected void onCreate(Bundle savedInstanceState) {

// Init TextToSpeech engine
_speech = new TextToSpeech(this, new TextToSpeech.OnInitListener() {
public void onInit(int status) {
_speech.speak(“Hello Glass”, TextToSpeech.QUEUE_FLUSH, null);

// An alternative way to layout the UX
_statusTextView = (TextView)findViewById(;

* Handle the tap from the touchpad.
public boolean onKeyDown(int keyCode, KeyEvent event) {
switch (keyCode) {
// Handle tap events.
case KeyEvent.KEYCODE_ENTER:

// Status message below the main text in the alternative UX layout
AudioManager audio = (AudioManager)getSystemService(Context.AUDIO_SERVICE);


_speech.speak(“Touchpad touched”, TextToSpeech.QUEUE_FLUSH, null);

return true;
return super.onKeyDown(keyCode, event);

public void onResume() {

public void onPause() {

public void onDestroy() {

Its quite a simple app but it gets your juices flowing!

Plug in your Glass device and hit the Run button!

iOS7 Sprite Kit for Game Design for iPhone & iPad

March 21, 2014 Leave a comment

iOS 7 Series – Sprite Kit

Welcome to iOS7 and to start off, I want to kick things off with SpriteKit.  Although it deals with video games, many companies are using iOS apps as a marketing tactic to engage their users in an effort to promote their products.

SpriteKit is the most prominent feature in iOS7 so we’re going to take a quick tour.  Go ahead and create a New Project in XCode5 and select the SpriteKit template (the bottom right icon):

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics by Marcio Valenzuela

Click next and fill in your project data.  Once you are in the main XCode window notice we have the following files in the Project Navigator:

1)   AppDelegate

2)   Main.Storyboard

3)   ViewController

4)   MyScene

If you look in the AppDelegate you will see nothing new, just a UIWindow property.  The Main.Storyboard is even more eerie.  It’s nothing more than a blank scene.  Then you find the ViewController.h file, which basically imports the SpriteKit framework.  If you check in your Target Linked Libraries you can see SpriteKit in linked.

ViewController.m is where things get interesting.

- (void)viewDidLoad


[super viewDidLoad];

// Configure the view.

SKView * skView = (SKView *)self.view;

skView.showsFPS = YES;

skView.showsNodeCount = YES;

// Create and configure the scene.

SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];

scene.scaleMode = SKSceneScaleModeAspectFill;

// Present the scene.

[skView presentScene:scene];


In viewDidLoad we create an SKView object and assign our viewcontroller’s view to it.  As an SKView type view, we have a property that allows us to display the fps onscreen and another one for viewing the nodes onscreen for debugging purposes.

We now create a second object of type SKScene and instantiate it with the size of our SKView object to make sure it fits.  Then we set the SKScene object’s scaleMode to AspectFill.  Finally we tell our SKView object to present our SKScene object each with its set properties.

There are a couple of extra methods that tell the app to autorotate and returns the supported orientations.

Now let’s move on to the MyScene object created because this is where the magic happens.

-(id)initWithSize:(CGSize)size {

if (self = [super initWithSize:size]) {

/* Setup your scene here */

self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];

SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];

myLabel.text = @”Hello, World!”;

myLabel.fontSize = 30;

myLabel.position = CGPointMake(CGRectGetMidX(self.frame),


[self addChild:myLabel];


return self;


First we create an instance of self with the passed in value for size.  Next we set the background color and create a label in order to position it in the middle of the screen.

The next method reacts to screen touches using the well known touchesBegan method.

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

/* Called when a touch begins */

for (UITouch *touch in touches) {

CGPoint location = [touch locationInNode:self];

SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship"];

sprite.position = location;

SKAction *action = [SKAction rotateByAngle:M_PI duration:1];

[sprite runAction:[SKAction repeatActionForever:action]];

[self addChild:sprite];



Here we loop through any touches and get their location as a CGPoint.  Then we instantiate a sprite from a file named Spaceship and set its position to the touch received.  Finally we create a rotating action and run it on the sprite and add that now rotating sprite to our SKScene.  Voila.

However, there is a very important method left out, the update method.  This method gets called every so often, many times a second actually!  So this is the method used to execute our game logic.

So let’s assume we are the Head iOS Programmer for a big soda company and you met with the Marketing Director about making a game to promote your product.  You decide game will be really simple, such as trying to catch a soda can falling from the sky at the beach.  What you need:

a)    A beach backdrop

b)   A soda can

c)    A potential client

d)   You also need a good marketing strategy to go with the game, otherwise playing the game won’t amount to much.  Such a strategy could be whoever makes the most points in the next month, gets a free 24pack or something.  But you better check with your Marketing Director first J

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics Sprites

So let’s go ahead and google some images:

Ok so let’s plop these on screen to make sure the sizes are proportional.  We are going to be making this project for an iPhone Retina screen so the correct beach size should be the complete screen size, which is 960×640.  To put the beach image on the screen, aside from importing it into your project:

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

We need to add the code.  So let’s move over to our MyScene initWithSize method because that is only called once and we don’t need to change the background for this game after its been created the first time.  First remove the entire code inside the if block and replace it:

SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:@"beach.png"];

background.anchorPoint = CGPointZero;

background.position = CGPointZero;

[self addChild:background];

This created a sprite called background using the beach image.  It positions the image and adds it to the scene.  If you run it you’ll get a chopped off image because the simulator is positioned vertically.  This is because we didn’t tell the app to only run in landscape mode.  So head over to your Target Settings and uncheck all orientations except Landscape Left.

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

FIRST NOTE: Orientation must be defined.

Now run it again and you’ll get a huge image as the background and possibly only part of it being displayed.  This is because you must tell Xcode that the image is to be used in Retina devices.  You do this by renaming the images beach@2x.png.  So go ahead and rename the image in Finder and you’ll have to remove the reference and re-add it as beach@2x.png.  Voila!

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

Ok so far so good!  Notice we get the node and fps count on the right bottom corner.

NOTE: Retina images are named filename@2x.png

Let’s go ahead and place the cooler on the screen to see if it looks right.  This time remember to rename your images before importing them.  After importing it, let’s add the following code, again in the initWithSize method because we only need to add the cooler once:


SKSpriteNode *cooler = [SKSpriteNode spriteNodeWithImageNamed:@"cooler@2x.png"];

cooler.anchorPoint = CGPointZero;

cooler.position = CGPointZero;

[self addChild:cooler];

Just for your reference, my cooler png is 125×131, almost a square.  I added it and it looks fine:

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

As you can see, node count went up to 2 and fps has no reason to change so far.  There is something important to note here, and it’s that the cooler was added in the bottom left corner.  If you review the code, we set both the background and the cooler’s anchorPoint to CGPointZero, which is equal to 0,0.  This corresponds to the bottom left of the screen.  Thus when we position the cooler, we are telling it to put the cooler’s bottom left corner (its anchor), in the screen’s bottom left corner (its position).

NOTE: CGPointZero in SpriteKit = (0,0) = Bottom Left Corner

Ok now let’s think about the logic.  Both the background and the cooler need only appear once.  The soda can however might need to appear more than once because once the user catches the first one, we probably want to give him a second one to catch, otherwise it’ll be a short and disappointing game.  This is where the game structure gets interesting.  We won’t simply add the soda can in the initWithSize method but rather outsource its creation to a separate method.  Let’s create a method called createSodaCan:



SKSpriteNode *can = [SKSpriteNode spriteNodeWithImageNamed:@"sodacan@2x.png"];

can.anchorPoint = CGPointMake(CGRectGetMidX(can.frame), CGRectGetMidY(can.frame));

can.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));

[self addChild:can];


Here we are setting the can’s anchor point to its center and placing it in the center of the screen using CGPointMake and CGRectGetMidX/Y.  However if you run the app there won’t be a soda can anywhere onscreen because we haven’t called it.  One place to call it would be in a method such as the touchesBegan method, but let’s try something different.  In your initWithSize method, add the following code right after the cooler code:

//Delay to call can method

[NSTimer scheduledTimerWithTimeInterval:2.0





This basically calls the createSodaCan method after 2 seconds of initializing the scene.  And two seconds after, there it is:

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

NOTE: Game logic can be fired off from the init method of your scene or from a user interaction method such as the touchesBegan method.

Great!  Now let’s think of what we want to do.  Im thinking we could do something like:

1)   Center the cooler at the bottom of the screen

2)   Move the soda can up to the top

3)   Have the can move from top to bottom

Ok great, so let’s do the first two, which should be quite simple.  Then we’ll worry about moving the can.  The first step is the cooler, so replace the cooler code with:


SKSpriteNode *cooler = [SKSpriteNode spriteNodeWithImageNamed:@"cooler@2x.png"];

cooler.anchorPoint = CGPointMake(CGRectGetMidX(cooler.frame), CGRectGetMidY(cooler.frame));

cooler.position = CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.01);

[self addChild:cooler];

This will place the cooler at 50% the width of the screen and about 1% from bottom to top.  Now do something similar with the can except that we want it to be on top so it can drop:


SKSpriteNode *can = [SKSpriteNode spriteNodeWithImageNamed:@"sodacan@2x.png"];

can.anchorPoint = CGPointMake(CGRectGetMidX(can.frame), CGRectGetMidY(can.frame));

can.position = CGPointMake(self.frame.size.width/2, self.frame.size.height*0.75);

[self addChild:can];

This places the can halfway across from left to right and ¾ of the way up the screen:

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

NOTE: We use relative positioning of an object in the view’s frame to avoid offscreen or misplaced images on different sized screens.

Perfect!  Now how do we animate the can so it can fall?  Well there are two ways, one is using physics, which requires us to create a physics-body object and assign it to the soda can and then “turn on” gravity so to speak.  The much simpler way is to animate the can to go from the top of the screen to the bottom of the screen.

To use the latter, we need SKActions much like the rotate action in the template.  So let’s code some and see what happens.  Well I took a look at the way the template created the rotating action and started typing…XCode took care of the rest.  I reasoned that what I wanted was to “move” the sprite and XCode suggested the following:

//Move the can

SKAction *fallingAction = [SKAction moveByX:<#(CGFloat)#> y:<#(CGFloat)#> duration:<#(NSTimeInterval)#>]

So I went with that and ended up with this code for the createSodaCan method:


SKSpriteNode *can = [SKSpriteNode spriteNodeWithImageNamed:@"sodacan@2x.png"];

can.anchorPoint = CGPointMake(CGRectGetMidX(can.frame), CGRectGetMidY(can.frame));

can.position = CGPointMake(self.frame.size.width/2, self.frame.size.height*0.75);

//Move the can

SKAction *fallingAction = [SKAction moveByX:0 y:-400 duration:2.0];

[can runAction:fallingAction];

[self addChild:can];

Well that’s not half bad.  I could’ve used another method such as moveTo instead of moveBy.

Ok now let’s simulate how to actually “catch” the can in the cooler.  What we need is something called “collision detection”.  What we want to do is check to see if the rectangle around the cooler is intersecting with the rectangle around the can.  To do this, we have to do so constantly.  That’s where the update method comes in.  This method is called repeatedly before each frame is drawn.  So we need to ask it if those two rectangles are colliding.  That means we need references to both objects.  To do that we create an instance variable for each, so we add them in MyScene.h:

@interface MyScene : SKScene {

SKSpriteNode *cooler;

SKSpriteNode *can;


Now modify the code in initWithSize by removing the type declaration in each line where we create the cooler and the can so they look like:

cooler = [SKSpriteNode spriteNodeWithImageNamed:@"cooler@2x.png"];

can = [SKSpriteNode spriteNodeWithImageNamed:@"sodacan@2x.png"];

And now we can access those objects through their pointers in the update method as well.  So add this line to your update method:

//Check for intersection of frames for collision simulation

[self testCollisionOfSprite:can withSprite:cooler];

This means this line will be called every time the update method fires.  You can even add an NSLog into the update method to get an idea of how many times its called.  Now let’s define the testCollisionOfSprite:withSprite: method:

-(void)testCollisionOfSprite:(SKSpriteNode*)sprite1 withSprite:(SKSpriteNode*)sprite2{

CGRect sprite1Rect = [self getSizeOfSprite:sprite1];

CGRect sprite2Rect = [self getSizeOfSprite:sprite2];

if (CGRectIntersectsRect(sprite1Rect, sprite2Rect)) {

NSLog(@”They collided”);



Nothing special going on here, we are simply creating a rectangle for each of the 2 sprites passed in and checking if those rectangles intersect.  If they do, we log.  Finally the way we get those rectangles around the sprites:

- (CGRect) getSizeOfSprite:(SKSpriteNode*)sprite{

double sx = sprite.position.x;

double sy = sprite.position.y;

return CGRectMake(sx, sy, sprite.frame.size.width, sprite.frame.size.height);


We have a game…almost.  Let’s add some sound and make the can disappear.

Import your favorite sound and add this code right after the NSLog for They Collided:

SKAction *play = [SKAction playSoundFileNamed:@"explosion_small.caf" waitForCompletion:YES];

[can runAction:play];

can.alpha = 0;

As you noticed earlier, the collision happens many times because there is a long trajectory form the moment the rectangles begin overlapping until they stop overlapping.  This results in a repetitive sound, which is annoying.  More importantly if becomes a problem if you want to work with scoring points because if you try to +1 a point when the collision occurs, you actually end up with many more points in total!  So what is usually done in these cases is a work around that creates a BOOL flag from the start and sets it to False.  We do this in MyScene.h:

BOOL collisionOccurred;

then in the createSodaCan method we set it to FALSE:

collisionOccurred = FALSE;

Finally we modify the if test like so:

if (CGRectIntersectsRect(sprite1Rect, sprite2Rect) && !collisionOccurred) {

collisionOccurred = TRUE;

NSLog(@”They collided”);

SKAction *play = [SKAction playSoundFileNamed:@"explosion_small.caf" waitForCompletion:YES];

[can runAction:play];

can.alpha = 0;


This way we always check to see if collisionOccurred is FALSE, if it is then we set it to TRUE inside the if, do our stuff, thus collisionOccurred will not be FALSE again until we set it back.

It is a cumbersome solution because then you must make sure you re-set your flag to FALSE everytime you create a new can.  It even worse if you don’t really create more cans.  Many times for memory saving reasons, we simply don’t destroy the original can.  If you noticed I didn’t destroy the node, I simply made it invisible.  The reason is that now I can reuse that sprite again by repositioning it on top and making it visible again thus saving processor power.  This is a very common tactic in games where you want to have lots of enemies or coins or what not and you don’t want to have to create thousands of instances of them.

The other more elegant solution to the collision detection repetition issue is the first method we talked about collision detection.  So let’s try to cover that in as simple terms as possible.

Physics & Collision Detection

Physics introduces the notion of physical bodies that will be “attached” to our sprite nodes.  Those bodies can be of type dynamic, static or edges.  A dynamic body reacts to physics, static bodies react to physics except forces and collisions because they are meant not to move yet exist in a physical world.  Edges never move and they are usually used to represent boundaries in a game.

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

This means that we can try to match a physics body to a sprite node identically, such as:

iOS7 SpriteKit Basics by Marcio Valenzuela

iOS7 SpriteKit Basics

which results in a very complex physics body to monitor vs simply using a tall rectangle which results in a much easier body to manipulate.  A circle is actually the easiest body to use.

So let’s start off by creating a border around our screen by adding this line at the end of our initWithSize method:

//Create border

self.physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame];

and in the createSodaCan method add these lines to the end:

can.physicsBody = [SKPhysicsBody bodyWithCircleOfRadius:can.size.width/2];

can.physicsBody.dynamic = YES;

What we have done is create a second physicsBody for the can this time and made it of circular shape and assigned it a dynamic property.  Now let’s remove the line in the update method that calls for testCollisionOfSprite:withSprite: because we don’t need that anymore.  Now run the app and you should see the soda can actually stop near the bottom of the screen which is where the border should be.  But the border is invisible, isn’t it?  Go ahead and comment out the border line in the init method and see for yourself J.

Ok so now let’s remove our line that made the can move from top to bottom:

//[can runAction:fallingAction];

And now let gravity do the work for you, add this line at the end of your initWithSize method:

//Set Gravity

self.physicsWorld.gravity = CGPointMake(0.0, -9.8);

Cool!  But the can didn’t bounce quite so much huh!?  Well that’s probably what a can would do.  But just for fun, let’s say it was a rubber can.  Add this line after the can’s dynamic physicsBody setting to YES:

can.physicsBody.restitution = 0.5;

Neat!  Well but we’re not gonna be covering physics now.  So turn that property off for now.  We just need physics for collision detection.  This is done via collision groups.

First we adopt the SKPhysicsContactDelegate Protocol so we can set out scene as the delegate to receive notifications of collisions:

@interface MyScene : SKScene <SKPhysicsContactDelegate>{

First we set our scene as the delegate in the initWithSize method:

self.physicsWorld.contactDelegate = self;

Now we must set the categories in our can and cooler objects.  So after the cooler sprite creation in the initWithSize method, add this code to create a physics body for it and set its category mask:

//collision physics

cooler.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:cooler.size];

cooler.physicsBody.dynamic = YES;

cooler.physicsBody.categoryBitMask = coolerCategory;

cooler.physicsBody.collisionBitMask = canCategory;

cooler.physicsBody.contactTestBitMask = canCategory;

So we create a rectangular body instead of a circle and set its category to cooler but its collision mask to canCategory.

Likewise in the can creation method (createSodaCan) we use this code:

//Add physics body to can

can.physicsBody = [SKPhysicsBody bodyWithCircleOfRadius:can.size.width/2];

can.physicsBody.dynamic = YES;

//can.physicsBody.restitution = 0.5;

can.physicsBody.categoryBitMask = canCategory;

can.physicsBody.collisionBitMask = coolerCategory;

can.physicsBody.contactTestBitMask = coolerCategory;

As mentioned before, we set this body as a circle but commented out the restitution property for now.  We set its category to can and its collision mask to cooler.  We must define those categories above the @implementation line like so:


static const uint32_t canCategory =  0×1 << 0;

static const uint32_t coolerCategory =  0×1 << 1;

Finally, we override the beginContact method of the protocol which reads:


- (void)didBeginContact:(SKPhysicsContact *)contact


SKPhysicsBody *firstBody, *secondBody;

if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask)


firstBody = contact.bodyA;

secondBody = contact.bodyB;


else {

firstBody = contact.bodyB;

secondBody = contact.bodyA;


if ((firstBody.categoryBitMask & coolerCategory) != 0)


NSLog(@”They collisionated!”);



We pass in a contact, then create 2 body references which will come in as part of that contact.  We set the contact bodies to either one and test for a collision and log something in the console.

Well this is as far as SpriteKit basics can get.  There are more advanced topics such as advanced physics, forces, particles, animations, parallax and raycasting that could be material for a Part 2 should there be enough interest in the subject.

First Google Glass App – Part 7 – Bridge to Glass App GDK Development

March 14, 2014 1 comment

Before jumping into Glass dev, let’s understand how to create a Hello World project in Android Studio (AS) and run it on our device.

  1. Create New Project
  2. Get to know the guts
  3. Add Imports
  4. Add Code
  5. Tweak guts
  6. Run on Device

Create New Project

When you select New Project from the File Menu, you get this Wizard screen:

Android Studio Beginner App Development by Marcio Valenzuela

Android Studio Beginner App Development

Fill in the Application Name in a natural language and the Module Name without spaces.  Make sure to select API 15 for Minimum and Target SDK but Glass Development Kit Sneak Peek for Compile with.

Click Next and in the next screen just leave everything as is (the launch icon selector screen).

Android Studio Project Launcher Icon Window by Marcio Valenzuela

Android Studio Project Launcher Icon Window

After that screen, leave the Blank Activity option selected and again click Next.

Android Studio Project Blank Activity Window by Marcio Valenzuela

Android Studio Project Blank Activity Window

Finally in the Activity Name, leave MainActivity.  In the Layout Name leave activity_main but also copy that activity_main over to the Fragment Layout Name, replacing fragment_main.

Android Studio Project Layout Window by Marcio Valenzuela

Android Studio Project Layout Window

Everything else stays as is and Click Finish.  The reason for this last bit is that new in Android is this concept of Fragments.  This just complicates things for us at the moment so we will leave it out for now.  We must also remove the fragment method later.

Android Guts

Let’s familiarize ourselves with this screen:

Android Studio Layout Google Glass Development by Marcio Valenzuela

Android Studio Layout Google Glass Development

Let’s review these 10 top pointers:

  1. Your Java Classes or Android Activities
  2. Layout files in xml format
  3. Value files for storing global settings of sorts
  4. AndroidManifest is a sort of Central Registry
  5. Top level build.gradle file
  6. Low level build.gradle file
  7. Tab bar for displayed files
  8. Sync Gradle file button
  9. Run button
  10. Green = A-Ok button!
Take some time to explore these files.  If you have gone through the tutorial at:
You will be familiar with these pointers.  Otherwise, let’s take a closer look.
MainActivity is selected and displayed in the editor window.  This contains your default, boilerplate/template created MainActivity Class required for any app.
The layout folder contains your activity_main.xml file.  If you look inside that file you will see an xml file with some parameters and a TextView element.  You will also see a graphical representation of it off to the far right.
The values folder contains more xml files.  Most importantly, the strings.xml which contains global references to string values.  These are used throughout the app to assign string values where needed.
The AndroidManifest.xml file contains some general settings elements for your app such as the package name, launcher icon, activity tags which contain your declared activities and in this case, if the activity has an intent, which is like an action, it must also be specified here.  In our case we will add a Voice Trigger intent filter if there isn’t one already.
Build.gradle files are not to be messed around with much.  This is a new M.O. used by Android Studio to organize files in a workspace.  You must keep in mind here that there is a Top level and Low level build.gradle file so make sure you know which one you are being told to put things in.
The tabs display whatever files you have double clicked on the File Window on the left.
The Sync Gradle button is that green-blue circle with a solid circle inside and a green arrow pointing down.  Go Figure!  Its basically a sort of I’ve-made-some-changes-to-the-AndroidManifest-and/or-other-project-wide-parameters-which-require-project-workspace-reindexing (phew) button!
The Run button is of course the one used to build and launch the app in the emulator or device.
The Green=AOk button tells you all file and project inconsistencies have been resolved and that the project will build and run.  Sometimes you have resolved coding issues and this box is still red.  Just tap on the Sync Gradle button mentioned before and Just Like That, Its Magic…AOk!
Great now let’s look at some code…
If you expand the imports “+” sign in the MainActivity window’s left edge, you will get a list of what imports a project comes with.  Let’s just make sure they look like this:

import android.os.Bundle;

The last import as you can see is what allows us to create a Card instance, which is what Glass apps are based on.  This is what you put your info into in a Glass app.


Next, simply add this method inside your public class MainActivity extends Activity statement:

protected void onCreate(Bundle savedInstanceState) {

Card card = new Card(this);
card.setText(“你 好 吗”);


Here we are creating a new card, setting its text and footnote properties and setting its view to the Activity’s ContentView or the main view.

Voila!  Connect your Glass to your USB port, make sure to set it to Debug Mode ON and Run the app.  It will build and install on your Glass.


Now let’s tweak it.  In your AndroidManifest, declare this intent by making that file look like this:

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”;
package=”com.santiapps.glassapp” >

android:label=”@string/app_name” >
android:label=”@string/app_name” >
<action android:name=”” />
<meta-data android:name=””
android:resource=”@xml/voice_trigger” />


I’ve pasted my entire file here so as to clear up as much as I can.  Basically you just need to add the intent-filter and its metadata elements.

Let’s make it more interesting!  As with our First Android App tutorial, let’s add some user interaction in Part 2.

First Android App – Part 6

March 7, 2014 Leave a comment

My First Android App

Android Studio Tutorial by Marcio Valenzuela

Android Studio Tutorial

Now we are going to receive the input of this message and use the button to send it.

To do so, edit your Button declaration to look like this:





android:onClick=”sendMessage” />

We are simply telling it to respond to the onClick button action by calling the sendMessage method.

So we must declare this method in code, of course.  Open your file and add the following:

/** Called when the user clicks the Send button */

public void sendMessage(View view) {

// Do something in response to button


We are declaring a public method that returns void, is called sendMessage and takes a View type to be referenced locally as view.

In order to do this you will need imports such as:

import android.view.View;

Now we are going to have this method declare what is called an Intent.  An intent is an action that we wish to carry out.  We do so by inserting this line into the method:

Intent intent = new Intent(this, DisplayMessageActivity.class);

Here we create a ‘new’ intent for this class to call the DisplayMessageActivity class and we assign it to an Intent type called intent! :)

Ok great, but what is this intent going to do?!  Add this code right below:

EditText editText = (EditText) findViewById(;

String message = editText.getText().toString();

intent.putExtra(EXTRA_MESSAGE, message);

First we get a reference to our EditText and assign it to a new variable called, rightly so, editText.  We get to our EditText view by finding the view through its id, which is edit_message.  Now we get that editText object and call its getText method concatenated to its toString method.  This converts the editText’s text value into a string.  We are assigning it to a String type variable called message.

Finally we call an intent object’s putExtra method to send that message variable along with an EXTRA_MESSAGE value.

You need 2 more imports here:



Now let’s define the EXTRA_MESSAGE inside our MainActivity by adding this line right below the MainActivity public class declaration:

public class MainActivity extends Activity {

public final static String EXTRA_MESSAGE = “com.example.myfirstapp.MESSAGE”;


Now add the line that actually calls the new activity and your code should look like this:

public void sendMessage(View view) {

Intent intent = new Intent(this, DisplayMessageActivity.class);

EditText editText = (EditText) findViewById(;

String message = editText.getText().toString();

intent.putExtra(EXTRA_MESSAGE, message);



Let’s create the second activity by right clicking on our java folder and selecting new Android Activity like so:

Screenshot 2014-02-08 15.49.32

Once again select a Blank Activity, the click Next.  Now fill in the following window as follows:

Android Studio Tutorial Adding New Activity by Marcio Valenzuela

Android Studio Tutorial Adding New Activity

The Activity Name is self explanatory.  The layout file name is provided for you as are the others but remember that we are not using fragments.  So replace the fragment name again, with the same value as above in the Layout Name.  Leave the Title as is but for Hierarchichal Parent add in the name of the calling activity (MainActivity) preceded by your package name (which you can find in the AndroidManifest.xml in case you forgot.

Also remember to remove that fragment method created by default, Only If Its There!

Trim off some other unused stuff so that the final code looks like this:

public class DisplayMessageActivity extends Activity {


protected void onCreate(Bundle savedInstanceState) {





public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {



return true;


return super.onOptionsItemSelected(item);



We are doing the same thing here, which is call super.onCreate just to make sure something gets created.  Then we set the content view to be connected to this activity’s layout file.

Go to your strings.xml file and add a new string like so:

    <string name=”title_activity_display_message”>My Message</string>

Whenever we create a new activity we must declare it in the AndroidManifest.xml file.  Ours should now look like this:

<application … >




android:parentActivityName=”com.example.myfirstapp.MainActivity” >



android:value=”com.example.myfirstapp.MainActivity” />



Here we added the DisplayMessageActivity activity and its label as well as its parent.

So with our new activity created and the intent from the calling class, we now need to receive that intent in the new class.  Here is the code:


public void onCreate(Bundle savedInstanceState) {


// Get the message from the intent

Intent intent = getIntent();

String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

// Create the text view

TextView textView = new TextView(this);



// Set the text view as the activity layout



We again create an Intent object and get the message from the MainActivity.  We then get a TextView reference, set its text size and set its text property to that in the gotten message.  Finally we set the content view to what it needs to be now.

Voila!  Build & Run and enjoy your first android app.

Categories: Iphone Developer

Glass Development Mirror API – Part 4 – Where to start after setting up!

February 28, 2014 Leave a comment

So you have Glass and you want to develop apps for it?

You already have an IDE such as Eclipse or Android Studio to code your apps in, you know all about adb and Droid@Screen to view your Glass screen on your computer screen!

Google Glass GDK vs Mirror API by Marcio Valenzuela

Google Glass GDK vs Mirror API

Well you do have options, before jumping into your typical Hello World Glass app.

As with other platforms like iOS, you have the option of native apps and web based services apps.  This last option is basically an app that runs on a server(s) and interacts directly with your device (be it Glass or iDevice) by sending it information.

Native – GDK – Apps

These are the ones that you code for in Android and install on your Glass device.  These are covered in the Hello World Tutorials for Glass elsewhere on this site.

Web Based – Mirror API – Glassware

These are web based apps.  They will be the subject of this post for today.

If you don’t know much about web services, you have come to the right blog!  I have some experience with web services, which just means writing applications on a server, usually in php or python.  I barely picked up some php a few years back, so I feel sorta comfortable with it.  So if you go to:

You will see this is a Quickstart Project page for Glass Mirror API.  You can download a starter project in any language you feel comfortable with.  I chose php for the reason I mentioned earlier.  What a web service starter project means is, its a folder with some code files inside.  Its not like a normal Hello World project you would download for native apps where you run the project from the IDE.  In the case of software as a service apps (Saas) you usually have to do 2 things with a starter project like this:

  1. Download it to your computer and re-upload it to a server somewhere (yes, you’ll need a server or server hosting online)
  2. Modify a configurable or settings file somewhere to make it work on your server

So download the project that you feel more comfortable with.  If you don’t have a preference then Id suggest taking a free python or php course somewhere, at the most basic level, and then returning to this tutorial.

Ok so this was my first mistake.  Im not a server admin or anything close to it.  I do have a free account on a more or less sophisticated server (MediaTemple) and I thought I’d download the project and upload it to that server and run it there.  Ill make a long story short but basically after failing there, I tried Brinkter and then a free online hosting company but I always ran into trouble.  So here is the scoop:

  • You will download the project contained in a folder called mirror-quickstart-php-master
  • You would upload it to a server
  • You would configure the settings for it & run it by accessing that URL in a browser

Sounds simple huh?  It turns out I chose a php project.  The project also required sqlite which in my case was not preinstalled on my MediaTemple server.  Which meant I had two options, migrate my test account and everybody else in that account to a new server with sqlite already installed.  I was not allowed to do this for fear of extended down times and possible misconfigurations in the new server.  Or I could re-compile PHP on the entire existing server which would also cause issues for sure.  Recompile what?!  No way, that was not for me.

The easiest solution if you just want to work with Glass Mirror API is to simply run it on your local machine and worry about uploading to a production server once you have something real going. Luckily, Im on a mac.  This meant that most of the stuff I needed was already installed and I just had ton configure it to run.  Here is what I needed:

  • Apache Server – comes installed with Mavericks
  • PHP – also comes installed with Mavericks
  • SQLite – also seems to have come installed with Mavericks by virtue of PHP 5.4

Cool so I just had to:

  • Activate Apache:

Open up Terminal and type:

sudo apachectl start

To test if it works, simply point Safari to:


and you should get a white page with black bold letters reading:

It works!

Great!  {You can optionally customize your apache server to store files elsewhere and use virtual directories:}

  • Next PHP must be configured:

Again in terminal type:

sudo nano - c /private/etc/apache2/httpd.conf

This opens up a text editor called nano to use line numbers “-c” as sudo user, and opens the file httpd.conf for editing.

Scroll down to the approximate line 118 and uncomment the following line:

LoadModule php5_module libexec/apache2/

And approximately on line 231 add this line underneath the index.html line:

DirectoryIndex index.html index.php

Finally append this code block at the very end of  that file:

#PHP Settings
<IfModule php5_module>
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps
Now you are ready to save.  Hit Control-O to Write Out the new file, then it confirms if you want to save the httpd.conf file, Hit Enter and then Control-X to Exit.
  • Code! (Quickstart project)
Almost there!  Now you just have to move that downloaded folder to MacIntoshHD/Users/youruser/Sites folder.  If the folder doesn’t exist, just create it.
Once that folder is in place you modify the config.php file with the values you get from creating a ClientID at
and in APIs Turn ON the Glass Mirror API and finally in Credentials create a New ClientID with these features:
Some Name of your choosing
Type: Web Application
Javascript Origins: http://localhost
Redirect URIs: http://localhost/~youruser/mirror-quickstart-php-master/oauth2callback.php

[NOTE: There may be an omitted step here, depending on your setup.  In my case, Im using the default folder for my webroot as created by Mavericks for Apache.  The original setup is that the webroot as can be seen in the httpd.conf file is "/Library/WebServer/Documents".  This means that whatever I put in that folder will be loaded and displayed when I browse over to http://localhost.  I created a username.conf file which is placed in the /etc/apache2/users/.  That file has the following content:

<Directory "/Users/youruser/Sites/">
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all

which basically allows me to now use http://localhost/~youruser and the files it points to are not in your /Users/youruser/Sites folder created earlier.]

Now point your browser to:

How to create an app – Not programmatically

February 24, 2014 Leave a comment

A fellow coder asked:

“How does one go about developing an app from scratch?  Where does one start?”

Blueprint iOS App Design by Marcio Valenzuela

Blueprint iOS App Design

My response follows:

Some will say its a matter of style and you have to find your own. And eventually you will, after a lot of copy-paste programming. I started in 2009 and my first app was a copy-paste of a few different projects. All the app did was connect to the Internet, download XML and parse it into a uilabel.

Then I decided to look into more complex app samples. So I downloaded a few from Apple. In particular I remember iPhoneCoreDataRecipes. In hindsight, it was too complex for a beginner but I’m very visual. So the variety of viewcontroller objects made it easier for me to understand. I intentionally stayed away from the coredata logic and took it for granted. I focused on how data was created, passed around and manipulated in the program. I remember I printed out the main class files, about 10 classes in all. Then I started making drawings of each object and tried to decipher who called who and how. That’s when I learned about delegates and protocols. That’s also when I learned to use breakpoints because I went crazy trying to follow NSLogs. It was a great learning experience.

Then I tried following a Stanford course…it helped but it was confusing. So a funny thing happened…I bought Learn Cocos2d by Ray Wenderlich and Rod Strougo.
This is when OOP sank in! Oh yeah, everything is an object!

This was a real eye opener for me. Then I started using SO and the Dev forums which taught me to read the documentation. I learned because for the most part they would all say “Read the docs!!!”. So I was forced to learn how to read documentation. After that I was able to read other docs like Twitter and Cocos2d and many others.

So now when I start a project I grab a pencil and a lot of paper. I start with the business aspects, marketing namely; who is the app for, what others exist, how will they use it, what would the app need to have for those users to like it?

Then I draw viewcontroller objects. Kinda like a huge storyboard with viewcontrollers. This forces me to visually see where the user will start, where data will be created, manipulated and consumed. This way I know which view controller objects need access to data and how they will receive or send it.

Finally I start to write method names of what each view controller will do and how it will interact with other and the data it needs, right below each object in the pencil storyboard.

Only then will I start to code classes. And even when I DO code classes and their methods, I will usually create all empty methods with just comment lines of what a block of code should do. I’ve picked up some personal ideas along the way such as adding an Empty File to be my Journal of what I did each day and what to do the next time I open a project. I also use #warning #PENDING lines to call attention to the comment lines which say what to do but needs to be done in each class.

When in designing the pencil storyboard I’ll usually google for third party libraries that can do certain things that perhaps apple’s native ios sdk won’t do.

Looking at sample code helps a lot. It teaches you some basic patterns like how to use singletons to connect to resources or synchronize data stores and use blocks or protocols to communicate efficiently.

In the end you will develop your own style and procedures. I believe time is the answer you’re looking for. :-)


Get every new post delivered to your Inbox.

Join 544 other followers