Custom ListViews in Android

Quick post about some code I threw together yesterday for a project. Needed to make some uber custom listviews for a project at work so decided to just create a test package and have at it, there are a ton of resources already online but figured i’d take the best parts of each and make a nice clean project if anyone else wanted to check it out. (ignore package name, not using net.trippedout since i started it at work and been in a habit of naming stuff this way)

Simple answer – extend ArrayAdapter and create a model to hold your data for the list item you’re trying to populate, override getView in your custom ArrayAdapter and create/update the view (referenced by your xml layout id) as needed. Fairly straightforward but could still use some tweaks. If you are going to use this in conjunction with drawables, just pass reference ids to the images you’ll be using and your good to go. My task today is to figure out the best practices of downloading groups of images/data from the network on a phone while still saving battery and caching stuff as I need it. If I come up with anything good I’ll be sure to share it.

Code is here: https://github.com/trippedout/CustomListViews

Comments/Questions hit me up here or @trippedout!

*Edit: adding pic of final product
Screenshot of custom listview

A Quick Recap – Part 1

So I guess i’ll finally get this started.

The last year has been pretty wild. We’ve moved into the new office at LBi exactly one year ago and it has felt like a whole new job.

But right before we moved, I actually had some fun in the penthouse at the Puck Building with the rest of the tech team. Paolo (boss man) gave us a couple weeks to play with a few Kinects and see what we could come up with. Being a flash dev i’d never played much with any other languages so it was fun/insane diving right into C/C++.

Hole in the Wall

I ended up figuring out the basics of OpenFrameworks and understanding enough of the API and beta kinect drivers to get a couple demos together. I first figured out how to use OpenCV to grab my outline from the kinect data, then figured out how to interact with a simple game mechanic.

I don’t have any footage of the final product, but it had an awesome title board and some sweet music courtesy of Mega Man 2. People had a ton of fun with it at beer fridge.

Smack My Pidge Up

Playing with the Kinect was fun so I kept up with it after we moved into the new building. This is about when I got sick of C++ and moved over to Java and, more importantly at the time, Processing. Processing/Java had a few super solid Kinect libraries that let me prototype and play a bunch, and soon I was tasked with ‘make something cool for internet week/webbys’.

With a two week timeline and breaking balls to find a budget, I built Smack My Pidge Up, a simple game/twitter wall installation that was displayed at Internet Week in NYC. Here’s the making of video, and you can find the source here – altho it is a pain to install due to the random experimental NITE builds I was using at the time.

Here’s a couple videos of the project as it grew: test 1, test 2, test 3, test 4.

Best of all? Smack My Pidge Up was a finalist for an award at SXSW! I was super proud of my work, and much props to Julie for designing it last minute with the help of Andy and Martine to realize it on 20 foot projector screens that looked super dope. A lot of stress but a ton of fun.

More posts to come (very) soon!

It’s been a long time coming…

But I figure I’m fairly due for a large-scale update to this site.

Over the coming weeks I’m going to post all (most) of the things I’ve been working on for the past 6-12 months, which is going to look a lot different than the things I’ve had up here prior to that. Mobile has kinda consumed my life (while I haven’t been skiing) and hopefully my new love is a step in the right direction.

Let’s see what we can make of this, shall we?

TO INFINITY, AND BEYOND

First Processing Test – updated!

Now, with interactivity! :)

Click on the image to start the applet, and then move the mouse around to interact with the circles. You might have to click and drag around to get it working the first time. I switched from sphere to ellipse solely so I could add many more connections and still smooth the lines without taking a hit in framerate. So much fun! Lemme know what you think! Hit me up – @trippedout.

[processing width=”545″ height=”500″ file=”http://trippedout.net/w/processing/Balls_02.jar” method=”onclick”][/processing]

Also (somewhat ridiculously) simple source can be found here!

Finally some free time… Processing!

Two posts in a week(ish)? ASTONISHING.

Last night I had some free time to see what all the fuss my coworkers were making about Processing and I’m glad I did. Essentially, processing makes programmatic ‘sketching’ a rather simple task. The reference guides and tutorials are great, and the code is super easy to follow. And ever since I saw Jared Tarbell speak at Geeky By Nature, I’ve been dying to play around. So obviously, this was inspired by browsing his site whenever I got a chance for the last couple weeks. Eventually I promise I’ll make something cool to call my own. I want to turn this into something fun and interactive for my company’s new office.

Click on the image to start the applet, and then click again to reset the spheres. Lemme know what you think! Hit me up – @trippedout.

[processing width=”545″ height=”500″ file=”http://trippedout.net/w/processing/Balls.jar” method=”onclick”][/processing]

(Ridiculously) Simple source can be found here.

Animate any Quadratic BezierLine with me

Wow, it’s been a while. Regardless, let’s get right into it shall we?

So, my code sucks, so feel free to let me know what I could do better, but made this simple class for a project I’m working on now. Hit me up on twitter (@trippedout) if you have any questions.

Fairly simple – pass it two anchor points and two control points, optional threshold and linestyle objects (feel free to change). Threshold controls the amount of times a line is broken down into smaller segs if you’re animating your line quickly and it isn’t smooth enough (smaller is smoother).

Use your favorite tweening engine to tween the ‘time’ attribute and shazam – animated quad beziers!

Usage:
[cc lang=”php” width=”545″]
var bezLine:BezierLine = new BezierLine( anchor1, control1, control2, anchor2 );
addChild( bezLine )

TweenLite.to( bezLine, .35, { time:1, ease:Cubic.easeOut } );
[/cc]

Code:
[cc lang=”php” width=”545″]
package utils
{
import flash.display.Shape;
import flash.geom.Point;

public class BezierLine extends Shape
{
private var _time :Number = 0;
private var _prevTime :Number = 0;
private var _threshold :Number;
private var _frozen :Boolean = true;

private var anchor1 :Point;
private var anchor2 :Point;
private var control1 :Point;
private var control2 :Point;

private var _lineStyle :Object = { thickness:2, color:0xffffff, alpha:.35 };

public function BezierLine( $anchor1:Point, $control1:Point, $control2:Point, $anchor2:Point, $threshold:Number = .025, $lineStyle:Object = null )
{
anchor1 = $anchor1;
anchor2 = $anchor2;
control1 = $control1;
control2 = $control2;

_threshold = $threshold;

if( $lineStyle )
this.graphics.lineStyle( $lineStyle.thickness, $lineStyle.color, $lineStyle.alpha );
else
this.graphics.lineStyle( _lineStyle.thickness, _lineStyle.color, _lineStyle.alpha );

this.graphics.moveTo( anchor1.x, anchor1.y );
}

private function updateLine():void
{
if( _frozen ) return;

var len:int = 1, i:int, dif:Number,
posx:Number, posy:Number, u:Number;

if( _time < 1 )
{
dif = _time - _prevTime;

//check to see if the difference between last frame and this is under
//the threshold, if it is, change the length of the for loop for
//how many segments the current line will be broken in to
if( dif > _threshold ) len = Math.ceil( dif / _threshold );

for( i = 0; i < len; ++i )
{
//if on last loop (or first of len=1) set to time, else
//increment thru the time by the threshold amount, making smoother lines
if( i == len – 1 )
u = _time;
else
u = _prevTime + ( i * _threshold );

//draw lines based on http://www.paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/
posx = Math.pow(u,3)*(anchor2.x+3*(control1.x-control2.x)-anchor1.x)
+3*Math.pow(u,2)*(anchor1.x-2*control1.x+control2.x)
+3*u*(control1.x-anchor1.x)+anchor1.x;

posy = Math.pow(u,3)*(anchor2.y+3*(control1.y-control2.y)-anchor1.y)
+3*Math.pow(u,2)*(anchor1.y-2*control1.y+control2.y)
+3*u*(control1.y-anchor1.y)+anchor1.y;

this.graphics.lineTo(posx,posy);
}
}
else
this.graphics.lineTo(anchor2.x,anchor2.y);

_prevTime = _time;
}

public function clear():void
{
_frozen = true;
this.graphics.clear();
}

public function get time():Number
{
return _time;
}

/**
* Tween this value from 0-1 to animate the line in and out.
*/
public function set time(value:Number):void
{
_time = value;
_frozen = false;
updateLine();
}

}
}
[/cc]

Be sure to leave a comment if you have any questions/ideas/tell me i suck!

the HYPE Framework

What more can be said about Joshua Davis. The guy is a genius.

So when I found out the Hype Framework came from the combined effort of him and Branden Hall, another genius technologist, I had to give it a shot.

The premise is simple, give simple access to seemingly hard concepts for designers and programmers alike and see what they can come up with. Classes such as VariableVibration and SimpleRhythm that make random motion and timing of events super simple.

The first time I got to see it at work was actually during Flash And The City during Stacey Mulcahy’s histerical presentation. She took random tweets, ran the text through a text-to-speech API and then took the sound data and displayed it with HYPE. It was super neat.

I hope I have more time to play in the future, rarely have enough time to even sleep with work and freelance lately. Here’s something I threw together in a few minutes for my boys at typcut. Click it to reset the circles and create new ones.

CBS Around the World For Free – success!

And so my life can begin again!

Told ya I was super busy, and now I’m finally done. Spent the last 3 months working with Robotlegs for the first time, and I gotta say, I was super happy that I learned it cuz now I don’t think I’ll ever use another framework (implying that i’ve ever used another framework haha). Regardless, check out the site by clicking on the screenshot below!

CBS Around the World

Long story short – Jeff Schroeder from Big Brother and the Amazing Race is going to spend 100 days traveling around the world “for free”. Our application tracks him in pseudo real time throughout his individual ‘journeys’. His path is drawn onto the map using GPS data from twitter, tweetphoto, his digital cam photo uploads, and a GPS Locator which is represented by the blue dot on the map of his current journey.

Users can create accounts with CBS, log into the application, and place tips/photos on the map to tell him where to go, as well as message Jeff directly if they want to meet up and show him around an area, give him a ride somewhere, etc. Jeff has to rely heavily on his fans and this site to get around.

It was alot of fun to work on this project, and it’s truly gratifying to hear how happy the execs at CBS are. Plus we got 29,000 unique hits on launch day Monday! Super stoked about it all. But more importantly, with the free time I’m going to have (i forgot what its like!) hopefully I’ll get some more experiments up here and keep content updated a little more regularly.

Ohh, also launched Neutrogena Wave microsite last week, another reason I’ve been so busy, go play the games and lemme know what you think. It was kind of a rush project but i think it’s pretty cool.

Till next time!

RobotLegs – AsyncCommand video tutorial

So i’ve been spending the last day or two playing around with RobotLegs after seeing the presentation on it at FATC by Joel Hooks. It’s been tough to just dive right into a framework like MVC when i’ve never done anything like that before, but the docs that I read prior to this past weekend from PureMVC as well as the docs at RobotLegs have helped.

And as an even more help, check out this video just posted at pv3d.org that brought it all together.

(Also the totally awesome amount of shortcuts used to make programming that much easier)

Life and Flash

Long story short, Flash and the City was a true turning point in my career/life/nerd-ness. The speakers there were absolutely amazing and my retarded amount of projects/stress seemed to take a turn for the calm.

That being said, I apologize for anyone who stumbles upon this and sees how little has actually been accomplished. Too many contracts, too little time.

But on a solid note, huge things in the future. AIR 2.0 will allow me to create a project i’ve been dreaming up for a solid few months and my ‘social media expert’ girlfriend believes that there could be some super interesting law suits in my future. I’m super stoked.

Early July i’ll be done with most of my major side shit so then I’ll have some more stuff to post and hopefully everyone will enjoy. Let the battle for internet freedom/privacy begin. Stay tuned.