Text

VerticalText – Part 2

In the previous article in this series we began looking at how we can creat vertical text on Android. When searching for a solution to this problem I found was another approach that appealed to me because it is just plain sneaky! Also, it uses a vanilla TextView control and doesn’t break any of its standard behaviour, as far as I’m aware. I wasn’t able to find any sample code which met my requirement so, once I understood the concept, I was able to create my own implementation.

The basic concept is to apply an animation to the control to do the required translation and rotation, but set the duration of the animation to 0 so it happens instantly, and ensure that the animation is not reset to its start position once the animation is complete.

Let’s start by adding a standard TextView to our main layout in res/layout/main.xml

[xml]
[/xml]

Once again we’re using the style and string that we set up earlier, and giving the control an ID as we’ll need to access it from code.

The next thing we need to do is create our animation in :

[xml]



[/xml]

This is declares an animation set which allows us to have two separate animations happening simultaneously. The set has its duration set to 0 which means that it will reach it’s final state immediately, and it has fillAfter value set to true which means that the final state of the animation will be maintained once the animation has finished.

We then have a rotation of -90 degrees, and the translation to do what we described at the start of this article.

All that we need to do is to run this animation on the TextView by adding a couple of lines to the onCreate() method of VerticaltextActivity:

[java] @Override
public void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView( R.layout.main );

TextView tv = (TextView)findViewById(
R.id.animated_rotation );
tv.startAnimation(
AnimationUtils.loadAnimation( this,
R.anim.rotatetext ) );
}
[/java]

This is loading the animation that we just defined and running it on the TextView.

This produces an almost identical result visually to the solution is the previous article, but the TextView will behave much more like a standard TextView because it is a standard TextView:

Rotated Text
Rotated Text

There are certainly other methods of achieving the same results as I have here, I have merely covered a couple that worked rather well for me.

The source code for this article can be found here

© 2012, Mark Allison. All rights reserved.

Copyright © 2012 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.