Welcome to the fourth and final part of the Android tutorial on how to make your own zoom control like the one used in Sony Ericsson X10 Mini in the Camera and Album applications. Click here to go to the prevoius part of this tutorial. As usual the source code is included, see below. Don’t forgett to download ‘Sony Ericsson Tutorials’ from Android market to see demos of this and other tutorials in action.
In this part we’ll focus on introducing dynamic behavior to our zoom such as fling and bounce by animating the zoom state. Dynamic behavior adds a lot in terms of looks, feedback and usability.
Dynamics
To implement dynamic behavior we’re going to subclass the Dynamics class introduced in the final part of the list tutorial. Make sure to read through that tutorial if you want to know more about the Dynamics base class.
The Dynamics class is useful for applying dynamic behavior to a value, the class itself holds a position and a velocity and functionality for setting min and max positions. When subclassing Dynamics we must implement the onUpdate(int) method that is responsible for updating the state. This gives us control over the dynamic behavior and in our Dynamics sub-class we’ll implement basic friction and spring physics to handle fling and edge bounce. If you want to know more about spring physics then this is a nice place to start.
This is the third and final article in the series of how to make your own list view. Right now we have a basic working list with some nice graphics. Click here to go to the previus part of this tutorial. In this article we will add some behavior to our list and add the fling and bounce/snap effects. Fling support is in my view mandatory for any list where you navigate by touch. As a user I wouldn’t expect that the list simply stops when I lift my finger from the touch screen. If I give the list a velocity, I expect it to continue scrolling for a while, and gradually slow down until it comes to a halt. Fortunately, supporting fling is no big deal. In fact it’s very simple. Below is the source code for this part of the tutorial ready to be set up in e.g. Eclipse. And as usual: Don’t forget to download the ‘Sony Ericsson Tutorials’ app from Android market where all sample apps for this and other tutorials are collected.
As many of you probably saw yesterday Sony Ericsson announced a new product in the Xperia™ product line called X8. X8 brings together features from both X10 and X10 mini and will retail for under €200 in most markets. The X8 comes with a HVGA screen and a 3.2 mega pixel camera. Below is a short video showing what the X8 looks like.
More info on X8 and the Q3 update to Android 2.1 for X10 and X10 mini/pro can be found on our sister blog, the Sony Ericsson Product Blog
Last Thursday I attended the first Nordic Mobile Developers Summit in Stockholm arranged by the Swedish magazine mobile.se. I gave a presentation with the highly innovative title “Android for Developers” where I gave some tips and insights into successful Android application development. It was a very well received session that I will mostly likely repeat in updated forms at later events. All the slides from the event can be found online.
The sessions covered the major mobile platforms with representatives from both the device manufacturers and independent mobile application development companies. The common message from the device manufacturers was around the marketplaces for their platforms. While some platforms provide a very low entry barrier for application developers (i.e., Android Market) most of the marketplaces had a surprisingly high threshold for publishing applications.
Despite the name of the event, there was surprisingly little hard facts around actual application development. Most of the sessions concerned the business perspective of mobile applications. As for my own session, I tried to give some concrete tips’n'tricks for Android application development, what is most important to think about and what tools to use.
One of the more interesting presentation came from Johan Lindfors from Microsoft that demonstrated the development tools for Windows Phone 7. It is obvious that Microsoft knows how to make tools for developers. This is something that I believe could inspire for better tools in the Android community as well.
The second half of the event started with shorter presentations from various companies doing mobile application development, like Spotify and Bambuser. There were some quite interesting case studies, and it seems like Android is the easiest platform to develop for, from all aspects.
The event was summed up with a Q&A panel with many interesting (and challenging) questions. The interest for mobile application development is very high and it is obvious that developers want to have a much larer choice of tools and programming languages for their applications than what is available today.
Welcome to the third part of the Android tutorial on how to make your own zoom control like the one used in Sony Ericsson X10 Mini in the Camera and Album applications. Click here to read the second part of the tutorial.
Don’t forget to go to Android Market and download Sony Ericsson Tutorials, the app that collects all sample apps in this and other Sony Ericsson tutorials. Get the QR-code for the app here. Below is a link to the source code of part 3, prepared for you to set up your own project in e.g. Eclipse.
This tutorial part will focus on introducing a new way of interacting with the zoom, a new input paradigm as our designers would say. In the previous tutorial we laid the ground for exactly this when we created a new class for controlling the zoom state. Separating the state control from the input control handled by an OnTouchListener implementation.
Tomorrow, the 10th of June, Erik Hellman from Sony Ericsson will be speaking at the Nordic Mobile Developers Summit in Stockholm where he will be talking about how to make a successful Android application. At Sony Ericsson Erik works as an architect for Android software and has been involved in the X10 mini project from the start. Erik has long experience from Sony Ericsson and is a well known speaker at conferences all over the world.
Erik will be blogging from the event so keep your eyes open for blog posts from Erik in the next few days.
Last week we attended the SWDC 2010 event in Stockholm which ran over two-days from Wednesday 2nd to Thursday 3rd of June. The days were back-to-back with interesting sessions but we were mainly there for the second day which was focused on mobile.
Claes Nilsson and myself decided to talk about some of the work we are doing with standards and also the various tools and ideas we have available now and coming soon. We wanted developers to come and join us within W3C and get involved in some of the on-going standards work.
We are working on ways to expose phone features to the web runtime where we have 4 platforms and the common thread is the web browser – the cost is that you need to target lowest common denominator to work across platforms so we are trying to increase the default capabilities available and make them consistent.
The development of standards usually takes a long time – the trade-off in having well thought out and, as much as can be, long-term future relevance. We presented some middle-grounds, such as the WebSDK but also some prototypes of entirely web-based tools.
The main focus of our session was our ”WARP” (Web Application Runtime Platform) demo upon the X10. In essence it is a server that allows the web browser, through user-granted approval, to access and query the phone. Our intention is take ”real world” lessons-learned from implementation and testing and roll them back into the specifications work.
We had a small setup outside the main presentation area with some X10, X10 mini and X10 mini pros. The feedback was great and we really appreciated the time we got with people as they tested out apps – in some cases even some live coding to optimise layouts.
We would like to thank @petersvensson for putting on the event and his team of volunteers who did a great job.
Welcome to the second tutorial out of three in the series of how to make your own 3D list view implementation for an Android application. In this tutorial we continue to develop the quite basic list created in part one of the tutorial into a list with 3D look and feel. At the end of this article we will have something that looks a bit more interesting than the standard list.
To see what list will look like, download the ’Sony Ericsson Tutorials‘ application from Android Market. In this app you will also see what the list will look like after the third part of this tutorial. Below is a link to the source code of part 2, prepared for you to set up your own project in e.g. Eclipse.
Here is a QR-code of the Sony Ericsson Tutorials app on android Market for all of you who are interested in the tutorials we are running. Download a bar scanner to your Android phone and use it to scan the QR-code below and Sony Ericsson Tutorials will be found on Android market and you can install it fast and easy.
We are planning on doing more tutorials for Android developers and are very interested in knowing what kind of tutorials you developers would find useful. Please let us know!
Welcome to the second part of the Android tutorial on how to make your own zoom control like the one used in Sony Ericsson X10 Mini in the Camera and Album applications. Click here to read the first part of the tutorial.
Don’t forget to go to Android Market and download Sony Ericsson Tutorials, the app that collects all sample apps in this and other Sony Ericsson tutorials.
In this part of the tutorial we will build on the zoom application we started in part 1. As you might remember, in part 1 we finished with a zoom application that didn’t have any limits, we could zoom and pan into the void and back. In this tutorial we will introduce limits and we will also make sure that the pan always follows the finger as one would expect, as we in part 1 could see panning following the finger differently depending on the current zoom level. Below is a link to the source code for step 2 and the video showing what you will learn in the one finger zoom tutorial series.
Images illustrating how the zoom state works, the dashed gray area represents what is shown in the view and the patterned area represents the content. On the left: Zoom is 1, pan-x and pan-y are both 0.5, in this state the image fits the screen perfectly. In the middle: Zoom is 2, pan-x and pan-y are still both 0.5, less content is now shown on the screen but will be scaled up. To the right: Zoom is 3, pan-x is 0.7 and pan-y is 0.833, we now see less of the image, only the top right corner, scaled up.
