android illegal: user interface

Home / Posts filed under user interface

Tampilkan postingan dengan label user interface. Tampilkan semua postingan

Solution for Android ViewPager inside a ScrollView

Posted by Unknown Minggu, 02 Juni 2013 0 komentar

I really like Android ViewPager component. It can be used in so many ways: from app navigation to gallery like screens.

ViewPager scrolling issue.
However, as I mentioned in my previous article ViewPager is not very usable if it's nested into a container with vertical scrolling. E.g. ViewPager inside ScrollView or ListView with ViewPager as a list item view. Imagine the case: you drag the ViewPager's page to view the next one, and booms! page horizontal scrolling is interrupted and parent vertical scrolling begins.

Why? The issue is caused by intercepting of touch events from ViewPager by parent container. Parent scroll container listens for scroll touch events and if there vertical shift it steals the event from it's child views. It just thinks that user wants to scroll the parent container vertically.
So, let's help him with a more accurate decision!

Solution.
Full source code of my ViewPager subclass that resolves scrolling directions much much better is available here: SmartViewPager.java
It doesn't require any special configuration or actions from you. Just use it instead of the regular ViewPager and your users will be happy with a new smooth and expected scrolling behavior! ;-)
So, how it's done? There are two extras to help.

custom SimpleOnGestureListener subclass helps us to detect the initial direction of scrolling. If the X-axis shift greater than the Y-axis shift, it will tell ViewPager to call requestDisallowInterceptTouchEvent at the parent.
if the scroll gesture was initiated horizontally then ViewPager will be "locked" until gesture completion (finger up). So the parent scroll container will not be able to intercept ViewPager's events. It's somewhat similar to iOS scroll view behavior which locks the scrolling axis when the scrolling direction (horizontal or vertical) was resolved.

Will that extras break the original parent vertical scrolling? No, don't worry, all scroll directions are perfectly accessible. Here is the sample video from my Urban Curiosity application:

Check out that article to read more about the pitfalls you may encounter during 4-directions swipe navigation implementation:
http://vision-apps.blogspot.com/2013/05/4-directions-swipe-navigation.html

Sample project is available here:
https://bitbucket.org/NxAlex/swipes-navigation-demo

Thanks for your attention! :-)

Baca Selengkapnya ....

4-directions swipe navigation

Posted by Unknown Senin, 27 Mei 2013 0 komentar

Gestures navigation.
I like fresh approach. And while I was developing my Urban Curiosity application I wanted to make it fresh by solving the common issue in a different manner . So I decided to make the application navigation based on swipe gestures and not on ActionBar, which is cool and handy navigation pattern that is used in near all modern applications.

Why gestures? Well, gestures can be performed on a larger screen area, so you can make a desired action faster and easier if to compare with a finger tap. Just swipe with your finger from any place to the desired direction! Also gestures are fun to use. :-)

In Urban Curiosity application you may navigate across all 4 main parts (Places, Profile, History and More) with a swipe gesture. Regular tap navigation is also available. I've prepared a short demo of the 4-directions (left, right, top, bottom) swipe navigation. The video itself is jaggy a little bit due to the video recording frame rate limitation. You may play with the real app to see how smooth it is. The demo video:

So in this article I want to share how to implement this in your projects.

Implementation.
Horizontal swipes are trivial - ViewPager class from the support library is perfect for this purpose. But what about vertical swipes and how to mix it with horizontal VerticalPager?

I've played with several open source implementations of vertical pagers for Android.
Not so buggy one as others is implementation by Grantland Chew: https://github.com/grantland/android-verticalpager

So I have chosen it as a base for vertical paging. However, to reach my needs I needed to extend it a little bit:

remove the code that shrinks the first page a little bit to make the beginning of the next page visible
change onMeasure to a better mesuring pages height
add method to request page snap with a custom duration
add method to lock/unlock pages switching

Now, we have the following choice: embed VerticalPager into ViewPager or vice versa. For the sake of simplicity and usage of nested fragments I decided to embed ViewPager into the VerticalPager. That way, our activity will have a VerticalPager with three fragments: top, central and bottom. Central fragment is a composite fragment and has three nested fragments: left, central and right. Pretty simple. Why fragments? More than likely each page will be completely different from thee others and has a custom behavior logic. In order not to overburden Activity object with all that stuff - fragments will help you to separate your code into smart reusable modules.

Next, we need to notify somehow VerticalPager (it's part of the activity) from the ViewPager (it's part of the fragment) about pages swipes to allow/disallow vertical scrolling. E.g. for left and right pages there should be no (i.e. disabled) vertical scrolling, while for central page there should be one (swipe to the top or bottom pages).

The common way for fragment-activity or fragment-fragment communication is to:

declare an interface into a fragment
implement it into an activity
provide that implementation to the fragment
finally, the fragment will trigger it when needed (e.g. page changed).

I like that way in general, it allows to keep things loosely coupled. However, that approach is pretty verbose. So there is another way to establish a "blind" communication between application parts. It's an event bus.

There are several Android event bus implementations. I wish to highlight three of them here. They were created specifically for Android and I used each of them extensively in a lot of projects. So feel free to choose the one you like more.

For this sample project I chose Otto. It has proven history of usage (at least by me and my team and by Square guys in their apps :-) and pretty easy to integrate and use.

So all communications are pretty easy now:

fragment with a ViewPager will post an PageChangedEvent event
activity with a VerticalPager will receive that event and decide whether there is any need to lock the vertical paging or not.

Do you see the cool thing here? Activity knows nothing about the fragment internals, it just declares "hey, notify me about page changes. I don't care where they came from, just notify me - I will do the rest". However, I want to warn you to use event bus very carefully. With a bad project design and events usage it can be hard to understand what and why happens in the project. Yes, there is a plugin for Intellij IDEA to navigate between events posted by Otto. But, you know, tools are never smart enough to make all the things for you.
So, event bus is a powerful tool in your arsenal, but use it with caution.

The last thing I want to mention is ViewPager scrolling behavior. The default ViewPager from support library is a good and mature component. However, when it's used in a scroll based container it becomes hardly usable due to the scroll container touch events interception. I will write a note about soon. Right now you can find here my ViewPager extension that is much much better at resolving scrolling directions.

Sources.
The full sample project with 4-directions swipe navigation is shared at my Bitbucket account:
https://bitbucket.org/NxAlex/swipes-navigation-demo

Let me to know if it helps you or you have some question related to the topic! :-)

Baca Selengkapnya ....

Android: easy trick to make beautiful background for you Android application

Posted by Unknown Rabu, 28 September 2011 0 komentar

Nice screen background, isn't it? :)
Today I will show you an easy Android design trick how to create very beautiful backgrounds for your Android applications in just 2 minutes!

For example, imagine that you have some simple form like this:

It's pretty boring, huh?

Now let's make this UI screen more attractive. ;-) What we can do with background? Yeah, we can set some fancy solid color or even gradient fill. But it doesn't change entire situation too much.

What is the solution? I recommend you to apply pattern fill for background. All you need is just an seamless pattern image and 1 minute for coding! :)

Find any seamless pattern image that you like and put it into drawable folder (or in drawable-ldpi, drawable-mdpi, etc. folders if you have several images of the same pattern for different screens).
Create new XML file and put it into drawable folder: (e.g. drawable/background_pattern_fill.xml)

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/background_pattern"
android:tileMode="repeat">
</bitmap>

where is "background_pattern_image" is your favorite seamless pattern for custom background.

3. Apply created custom background to any View component:

<LinearLayout
...
android:background="@drawable/background_pattern_fill"
...>

Voilà! Now our UI screen looks much better! You can download the source code here.

More examples:

Baca Selengkapnya ....

Android: Pixel perfect user interfaces for Android applications

Posted by Unknown 0 komentar

We all know that User Interface is an extremely important part for every application that pretends to be attractive and popular among users. This is the axiom. Android mobile system is very popular and is installed on a big variety of devices: from low-tier cell phones (like HTC Hero) with small low density screens to high-tier phones (like Motorola Atrix, Samsung Galaxy S, etc.) and tablets with big high density screens. Moreover there are a lot of Android devices vendors - Samsung, HTC, Motorola, LG, Dell, etc. As a result we have so called "fragmentation" problem.

Today I want to reveal one useful feature of ADT (Android Development Tools) plug-in for Eclipse. Do you think that it will be DDMS perspective? No, man! :) I think any Android developer (from novice to expert) should know and use DDMS perspective which is so useful and powerful.

But there is also one more nice ADT feature that will help us to create better User Interfaces!

This is a "Pixel Perfect" perspective. It can be accessed from the menu:

Windows - Open Perspective - Other - Pixel Perfect

The main goal of "Pixel Perfect" perspective is to provide easy way to review user interface of our application in details. There are several useful features:

image of the screen that is currently visible on the emulator or device and
magnified image of that screen.You can move the cross-hair to inspect every detail (including color values) of your screen to make pixel perfect user interface! :)

"Pixel Perfect Tree" - to inspect visual objects hierarchy

"Load image overlay over the screen" - it's very useful for matching actual screen with the desired screen from a specification.

As you may see "Pixel Perfect" goal is similar with the Hierarchy Viewer tool (which is free standalone tool, available at android-sdk\tools\). Hierarchy Viewer tool has not only all features of the "Pixel Perfect" perspective, but also a lot of unique features: extended Tree Hierarchy view, visual indicators for measure/layout/draw performance, etc. But if you prefer doing all the stuff using IDE and you need just pixels and colors matching, then the "Pixel Perfect" ADT perspective is a good choice.

I want to believe that one day most of Android apps will be designed so well that even iOS users (who are so proud of iOS design) will be envious! ;-)

Baca Selengkapnya ....