May 9th, 2013
The latest release of Play Store has introduced a more streamlined look-and-feel for the tab strip of our ViewPagers. If you don’t use it in your project, you should.
ViewPager comes with two implementations of the tab strip – PagerTitleStrip and PagerTabStrip. The first one is not really worth talking about. The second one is much nicer, allowing tapping the titles to switch to the relevant tab and exposing APIs to control a couple of visual aspects. We were using PagerTabStrip up until the latest iteration of the store app. That is, until our visual designers wanted a nicer appearance that is more inline with the general direction of where the platform tab indicator is heading.
On the visual side of things, we wanted to:
- Use different colors for full underline and the selected tab indicator.
- Use translucent vertical separators between the tabs.
- Have the left-of-the current tab “peek out” to indicate that there’s additional content available.
- More compact display of tabs – instead of having left/right title all the way at the edges (which looked particularly bad on wide tablets), display the title tabs as a “connected” chain.
- Nicer swiping feedback as the user swipes between tabs.
As it turns out, you can write your own tab strip control.
Step 1: make yourself familiar with the source code of the existing components. That always helps.
Step 2: throw some code around and see how it looks like on the screen. At some point, after enough Mountain Dew has been consumed, it starts looking somewhat decent. Rinse and repeat.
Let’s talk about the particular implementation details.
- Each tab title is a TextView. This provides nice accessibility support. Mark it as focusable and set a background drawable that has your app’s assets for pressed and focused state.
- If the content of your ViewPager is static, iterate over all page titles and create a TextView for each one. Set a click listener on each text to call ViewPager.setCurrentItem.
- Add a global layout listener and call scrollToChild with ViewPager.getCurrentItem. Don’t forget to remove that listener after you’re done with the initial scroll. The intent here is to respect the initial tab selection and scroll the selected tab into view.
- Implement ViewPager.OnPageChangeListener (somewhere outside your view pager / tab strip).
- In onPageScrollStateChanged remember the current scroll state.
- In onPageSelected if the current scroll state is SCROLL_STATE_IDLE, remember the selected index, set offset (more on this in the next points) to 0 and call invalidate on your tab strip.
- In onPageScrolled remember the selected index and the offset, call invalidate on your tab strip and also call scrollTo on the tab strip to scroll its contents based on the selected index and the offset.
- You want to keep the scroll state of the tab strip in sync with what the user is doing with the your view pager. If the user swipes right to go to the tab that is currently to the left, you want to start scrolling the title of that tab as well. How much? That depends on your design. Our target is to have some part of that title always peeking in. So you would need to compute the value of the first parameter of scrollTo based on the tab index, relative scroll offset and that extra peeking delta.
- Now about the pretty pixels. Designers love assets. You can create a whole bunch of assets for the individual tab – normal state, pressed state, focused state, pressed+focused state, let’s throw the selected state in, and what about the disabled state? That’s nice. But. Take a look at the second screenshot – the selected underline “slides” between the two tabs. That’s not something that you can do with assets set on each individual TextView behind these two tabs. I guess you can do an empty View, set those assets on it and start laying it out dynamically as you slide. Kind of gross.
- So instead, right now we’re painting the underlines in code. Canvas.drawRect is your friend. Just don’t create the Paint objects every single time in onDraw.
- First layer the thick colored selection underline. This is where you need the index of the selected tab and the relative scroll amount. During scroll, this underline “slides” from one tab to the next (left or right). So you use the scroll amount to interpolate the X coordinate of both the left and the right edge of that underline based on the X coordinates of the two tabs.
- Second layer is the thin transparent black underline that goes across the entire tab strip. Using transparency creates a nice layered effect across the bottom edge of the colored underline.
- Finally, since we’re already drawing lines in code, why not draw the vertical separators in code too? These can be done with drawables set on each title TextView, but you have the edge case of the first/last tab. Since we want separators between the tabs, but not on the outside, you’d need to create two sets of assets – one for the tabs that show that separator (say, along the right edge), and one for that special tab that doesn’t (in this case, the very last tab). If you use translucent black for these separators, you’ll get a nice blend with the press/focus highlight assets set on the tabs – provided that they are translucent too.
- You’ll need to provide a way to swipe the tabs themselves. Our current solution is to have the tab views live in a horizontal LinearLayout that lives inside a HorizontalScrollView.
So, to summarize. Track the scrolling. Draw translucent lines. Make your designers happy. Oh, almost forgot. Don’t ignore edge cases. Such as, say, all the tabs fitting in on the screen – in which case you don’t need anything to “peek in” from the left edge.
May 7th, 2013
A concept artist. An illustrator. A designer. Meet Ash Thorp. In this conversation he talks about his concept work on “X-Men”, “Thor” and “Prometheus”, the user interface work he did for “Total Recall”, coming up with creative concepts and bringing his ideas to life, his thoughts on where the human-computer interaction is going and the evolving landscape of making indie sci-fi movies.
Kirill: Tell us a little bit about yourself and your work so far.
Ash: My name’s Ash Thorp and I am a designer, an illustrator, art director, creative director. I do a lot of stuff for film, multimedia and video games. I’ve been freelancing from my home studio for almost a year now, and I’ve been in the film industry for about three years. I’ve been drawing since I was a little kid. I picked design in college and got two degrees, and after that I immersed myself into the furthering my education via the internet, which lead to me discovering my own voice.
Kirill: Was it your intended goal to get to work on movies?
Ash: I grew up on a really healthy dose of Saturday morning cartoons and anime and film, and I feel that film is a great medium of storytelling. It was always a big goal of mine to do something in film on way or another. It was always in the back of my head that I wanted to do it, and even though I didn’t know how I would do it, I figured out I’d make it happen.
I was working at a design firm down in San Diego doing graphics for action sports. It was fun, but I felt that I wanted to do something greater for myself, on a higher level, for more mass appeal if you will. I decided I wanted to design for film, and I had to figure out the niche I wanted to be in. I started following a few companies doing motion graphics. I suppose I was OK at design at the time – nowhere near where I am now, and there’s always place to grow anyways – and I saw that it was the niche for me. So I gave myself a time limit of three months to build a portfolio. Every time my wife and my daughter would go to bed around 11PM, I’d work until about 4AM on just building the portfolio, making a bunch of projects, which lead to creating the web site with much material.
I put this portfolio together, and I sent it out to around 50 studios. I got contacted back by only one of them directly, and it was Prologue, I was extremely surprised because they were my favorite company. I went there to interview, and they offered me the position of a junior designer. There was a little bit of negotiating, and a lot of talking with my wife. We live in San Diego and Prologue’s office is in Marina Del Rey up in LA. It’s about 2.5-hour drive, so I had to figure out a system to make it work, commuting every day for a whole year, building my skills and getting better at it. It was pretty crazy, commuting six to seven hours every day to work.
Prologue works on tons of films, and there was a lot of opportunity to grow. The artists and creatives there are just amazing, and it was really great to understand what it takes to do design at that level. It was like bootcamp. It was the hardest thing I ever had to do in my life – the endurance of the whole year, not being able to see my family and friends that much, being completely exhausted and drained, working really hard. Prologue is a very intense environment, great for building yourself but really taxing, with extremely rigid timelines. You gotta do a lot of productions and a lot of work. It was good, and that’s how it all worked out. I left after a year, helped out a friend for about six months, and then started working on my own things from my home as a freelance artist for hire.
Kirill: Were you surprised during that first year, working on real-life productions across multiple departments?
Ash: I learned something new every day, a new surprise every day. You know, when you learn a magic trick, it takes the magic out of it, but it’s still really interesting. I feel that the deeper I go into film and understand it, the further I go from the original thing that I loved about it – which is the innocence of being a fan, now that I understand how the things are made.
Kirill: What were the specific productions you worked on at Prologue, and what was your role?
Ash: Some of the movie projects I worked on there were X-Men First class, Thor, then Walking Dead which became concept pitches to the director. Design houses like Prologue compete in this over saturated market where the client requests to see the design vision for a certain production – usually for free, which is pretty crazy. Those were my original concepts and ideas for things that I worked on with a group of people. Each project would change or shift depending on the notes and feedback from the clients and things would move along from then on taking on a life of its own.
Read the rest of this entry »
April 29th, 2013
Continuing the ongoing series of interviews with illustrators, today I’m pleased to welcome Natalie Smith on my blog. Natalie’s portfolio is a charming collection with particular emphasis on delightfully quirky character illustration. She also designs T-shirts, and selected illustrations are available for sale over at Society6. Natalie’s Dribbble page, DeviantART gallery and Tumblr stream are full of sketches and work-in-progress snippets that provide a fascinating glimpse into her creative flow.
Kirill: Tell us a little bit about yourself and how you got started in the field.
Natalie: I am a self-taught, freelance illustrator born and based in Yorkshire, England. Although I’ve always enjoyed drawing, I kind of fell into illustration a few years ago after winning a couple of t-shirt design competitions and through people taking notice of my personal work on Web sites such as DeviantART and Dribbble.
Kirill: Is it important to evolve your stylistic choices? Is there ever a thought of exploring radically different directions? Is there a concern of falling into a certain rigidity of style?
Natalie: I’m not sure if it’s about evolving my stylistic choices per se, but I do think it’s important to experiment and try out new ways of approaching an illustration in order to progress. In fact, it’s more a case of “what can I do to make my work better”? For me it doesn’t even have to be anything too drastic either; it could be something as simple as using a different brush in Photoshop, for example.
As for style, I think it’s ultimately just an amalgamation of what interests you at a given time. As you go through life these interests naturally change and evolve and with it so does your style.
Kirill: From pencil sketches, to the initial transfer to the digital mode, to circling on finer details – what’s your favorite phase?
Natalie: It really depends on the project but generally speaking sketching is my favourite, as that’s the most creative phase of the process and the part where you still have the freedom to do anything. Then it would probably be adding the finer details.
The most tedious part of my process, due to how I work and produce my illustrations, would be laying out the paths and the base colours for my piece.
Kirill: When you transfer your pencil sketches to the digital world, do you try to preserve some amount of hand-drawn imperfection? Is this important to you?
Natalie: I actually do a lot of sketching straight in to Photoshop these days, but when I do use my sketchbook it’s nearly always to put down and explore ideas, crank out thumbnails and try out different compositions and layouts. So my pencil sketches are really just a foundation to build upon rather than a piece of the finished illustration. Sometimes I will do individual bits of the illustration and then piece them together once I’m on my computer.
That being said, I have been trying to incorporate more of a “roughness” to my work, which I think adds a little more character. For this reason I also tend to create a lot of textures, which I use in my work, from traditional sources such as different types of paper and scanning in brush marks.
Above all though, it really depends on what is needed and what will best help communicate the message of the illustration.
Kirill: What do you like about character design and why?
Natalie: I’m not sure exactly what it is, but the first thing I really remember properly sitting down and drawing lots of were the characters from The Simpsons – so I think it’s just something I’ve always been interested in.
Kirill: What’s different about designing t-shirts? Which parts translate well to the wearable medium, and which do not?
Natalie: The biggest thing you have to remember is that a design someone may hang on their wall isn’t necessarily what they would want to wear! But the way I approach designing a t-shirt is largely similar to how I would tackle other illustrative work; composition, colour etc are just as important.
However, there are certain things I do take into consideration when specifically creating a design for t-shirts. For example, where the design is placed on the t-shirt is important – either to give the design more impact or to avoid it from being unflattering. From my own experience, I also tend to find that simpler designs tend to do better (though this may not be the case for others).
Kirill: Do you think that advances in software tools and global connectivity are making it simpler to start in your field, and at the same time creating more competition and diversity for the clients to choose from? Does it make harder to stand out?
Natalie: Not so much advances in software, as I believe it will only take you so far, but definitely having access to sites like Dribbble, which broadcast your work on a global scale, has made it easier for me to get started in the field. At the same time I do think it creates more competition, but I believe that if you have the passion to progress and the talent then you will always, in the end, stand out.
As a side note on this subject, because I’m self-taught the ease at which you can now have access to other artist’s work and be able to communicate with them and learn from them has been a huge boon for me.
Kirill: How valuable is self-initiated work for you?
Natalie: Extremely! First of all, it’s a time when you can really play around and experiment with your illustrations. It also creates a consistent output and allows you to refine your process and become more efficient at what you do.
Kirill: What’s the best thing about being an illustrator?
Natalie: The variety of the work and having a great excuse to watch cartoons (it’s for research purposes, obviously).
And here I’d like to thank Natalie Smith for answering a few questions I had about her art and craft. You can find Natalie online at her portfolio and buy selected prints in her shop. She can also be found at Dribbble, DeviantART, Tumblr and Twitter.
April 26th, 2013
I’ve talked about item details pages in the Play Store before. It’s a very interesting content hierarchy, with blocks that vary by their internal complexity and the overall logical importance.
Some blocks are more important than others. For example, the item cover and (in this case) the movie trailer are very visual, and we want to put them above the fold. There’s the item name, and some additional secondary info (such as movie genre, ratings, release date or running time) that “deserve” to be above the fold. There’s a certain logical hierarchy to that information that needs to be consistently exposed on the screen no matter what the device configuration is – some blocks “belong” together, no matter if it’s a single-column or a double-column layout.
And then there are action buttons. The buttons that keep us in business. We want them to be immediately identifiable, and – as much as we can – always there no matter how far you scroll the content.
Our previous solution for the buttons was twofold. Visually, the buttons are using a light blue color that sets them apart from all the other elements on the screen (apart from the rather awkward rating stars). Then, as you scroll the left column, we have the scroll-to-snap thingie where the buttons actually snap to the top edge of the viewport and stay there as you keep on scrolling that column.
As we started working on redesigning the main streams, it became quite clear that we need to redesign the details pages as well. Removing the heavy dark grey boxes and pinstripe textures was kind of a given, but that left us with the question of how to create a lighter, flatter look while still maintaining the same logical hierarchy of content. What you see in the latest Play Store release is the first lightweight iteration of where we’re heading.
The summary section has been redesigned to be more consistent across all device configurations. The title is more prominent, and the action buttons have moved to the right edge of the screen. The global rating stars and count have moved into what we call the byline section, going back to a consistent layout across the devices as well. And now, the space vacated by the action buttons and the stars in the left column can be given back to display larger, more visceral cover art. This is particularly relevant for “traditional” media that encodes additional information in the cover art – information that is lost if you start downscaling it by too much.
Going beyond the summary section, we’ve “lost” quite a few visual elements that helped separating the sections. No more colored headers, no more fancy textured footers. We’re going for a simpler, flatter look that uses typography and thin separators. Losing all this color has a nice side effect of making the action buttons maintain their visual importance. We removed the blue color that helped them stand out. But not having too many elements that use the same main color makes them stand out in the new design.
Finally, one of my favorite pieces is how the new design keeps the nice alignment of content above the fold. If you trace the bottom edge of the dark gray box in the left column and the bottom edge of the trailer in the right column, you’ll see that they align perfectly. This helps delineating the blocks that we consider to have more logical importance. The same delineation is maintained in the new design as well. Note how we’re able to move more information into the “main” section while still displaying larger cover art. Also, note how the visual alignment works across the bottom edge of the trailer and the bottom edge of the white area in the left column – not its drop shadow.