Designing the Avatar Feature


Build Mobile Apps With Zero Coding

Get Instant Access

Many mobile applications today are networked and have some social component. One way for users to differentiate themselves from others is by setting custom icons to represent who they are. To give users this ability, you can implement the avatar feature on the settings screen. Avatars come in many forms; an avatar may be a close-up photograph of the user's face, or it might be a funky graphic that speaks to the user's personality.

To incorporate of the avatar feature into the Been There, Done That! Settings screen, you need to modify the screen design slightly to include the graphic as well as some mechanism by which the user can change the graphic. Figure 13.1 shows a rough design of how the avatar feature will be incorporated into the settings screen.


Rough design for the Been There, Done That! avatar feature.


(20 characters max)

(Will be used as unique account id)


(Password requires entering twice to verify)


(DOB requires entering Month, Day, Year)


(Male, Female, or Prefer Not To Say)

Space is at a premium in a mobile application, and you want to keep the settings screen for the Been There, Done That! application as easy to use as possible. The avatar feature has two requirements: The user must be able to set the avatar from a custom graphic, and the graphic chosen must be displayed on the settings screen. Of the various controls available in Android, the ImageButton control would be able to handle both tasks.

To incorporate your avatar design changes into the /res/layout/settings.xml layout file, you need to modify the region of the screen where the nickname controls reside.

Because you want to add a control to the left of the nickname controls, you need to encapsulate all three controls (the avatar ImageButton, nickname label TextView, and nickname EditText controls) inside a child layout control such as a nested LinearLayout Control (horizontally oriented). By nesting the nickname controls in their own vertically oriented LinearLayout control, you get the intended results. Figure 13.2 shows the layout updates required by the avatar feature.

Was this article helpful?

0 0
Living With Android

Living With Android

Get All The Support And Guidance You Need To Finally Be A Success At Using Android. This Book Is One Of The Most Valuable Resources In The World When It Comes To Playing With the Hottest Android Tablet.

Get My Free Ebook

Post a comment