Tag Archives: ui

Examples of Store Item Activities in Android

This is a follow-up to my previous note about a StoreItemFragment object in Android. That fragment can be used to display items in a store. My plan is to use this fragment for purchases made in a game with virtual currency and to use it so a player can make an in-app purchase using real money to purchase game coins. Continue reading

Posted in Android, Game Design | Tagged , , , | 4 Comments

Android Fragment for an Item in a Store

I am working on a game that has items that players can buy from a store. I needed a way to display the list of items on the screen. I am using a StoreItemFragment to display them on the screen. In this blog post, I describe a demo app that I built that uses the fragment in a list of items for sale.
Each item for sale has a picture, a description, and a button to push to make the purchase. The image next to the purchase button indicates the currency used for the payment. In this demo, players pay in gold coins or crystals. I plan to use this Fragment for purchases made in the game with virtual currency, and I will use it with a second activity where the player can start an in-app purchase using real money to purchase game coins.

(Note: This is an excerpt of the blog article. Click the link for the full article, which includes screenshots, detailed explanations, and a link to the full source code.) Continue reading

Posted in Android, Game Design | Tagged , , , , , | 7 Comments

Tridroid – Android Switch Fragment Demo

I gave a presentation last week at my local Android developers’ meetup group, Tridroid. The topic of the meeting was fragments. In my presentation, I described a fragment I built to implement simple switches. The figures below show what the demo app looks like. Links to the full presentation and the demo source code are provided. Continue reading

Posted in Android | Tagged , , , , | 1 Comment

Two Progress Bars for Android

I built two different views to show progress bars in Android. One is a horizontal progress bar and the other is a vertical progress bar, made up of a stack of horizontal bars. Here they are displayed in a demo app, running on a Galaxy Nexus phone.

For the horizontal progress, you can control the colors used, the width and height of the bar, and the number of divisions. For the vertical progress bar, I wanted it to look like a stack of bars. When you run the demo app, you can see the values change by touching a progress bar. Complete source code is provided below.
Continue reading

Posted in Android | Tagged , , , , | 4 Comments

Multitouch Panning and Zooming Examples for Android

I have done some work so I better understand multitouch features in Android. I built a simple demo with examples of pinch zooming and panning. Most of the examples involve using drawing operations on the canvas of a view.
About two years ago, I started some work on moving images in Android. I started with the “Making Sense of Multitouch” blog article and ended up doing some simple things with moving images and then drag-drop based on the Android Launcher (see references for links). It’s interesting to me that I have gone back to that same article for a different purpose. I am working on apps where the basic zoom and pan operations are needed. Continue reading

Posted in Android | Tagged , , , , | 35 Comments

Three Variations for Image Square Grids in Android

In a new Android app I am working on, I have a need to display a a square grid of images. I have tried several variations of doing this using a GridView. Each of the solutions involves using aViewTreeObserver, which is something I would not have thought of on my own. Fortunately, I found several notes on StackOverflow that pointed me in the right direction.

I’ll describe three of the variations in this blog post. The end result for each variation is good: square images on a grid. My favorite variation is the one in which the sizes of the images are determined dynamically, based on the size of the screen. It requires the least amount of work and delivers good results.

Complete source code is provided for all three variations.
Continue reading

Posted in Android | Tagged , , , , , , | 4 Comments

Android Images With Clickable Areas – Part 1

I want to display images in Android and have different clickable regions within the image. I have read about two different ways of doing this. The first is a bit like image maps in HTML. You define areas on the screen, using a list of coordinates, and connect the areas to actions. The second method involves overlaying a hotspot image on top of the real image being displayed. The overlay image has exactly the same size as the first image. It uses different colored regions to indicate the hotspots. When the user clicks on the primary image, code runs to check the pixel at the corresponding point in the hotspot image. In this, the first of two articles about image maps in Android, I will explain what I learned for the second technique. Full source code is provided for this sample app.
Continue reading

Posted in Android | Tagged , , , , | 92 Comments

Horizontal Scrolling Pages of Images in Android

With the Android V4 compatibility library, you can use Fragments even if you are not using Android Ice Cream Sandwich (API 14+). That opens up some interesting possibilities for your applications, particularly if you want to be more creative in your use of the extra space available on tablets. For this article, I want to focus on another use for fragments: horizontal scrolling pages.

I started with an article on the Android Developers’ blog: Horizontal View Swiping With View Pager. It is a very useful article that shows you how to get pages of lists scrolling. I wanted to build a demo app based on this. Having spent some time reading the new Android Design website, where there is a heavy emphasis on visual elements, I decided to figure out how to have pages of images that scroll left and right. My inspiration was the section named “Pictures Are Faster Than Words” on the Design Principles page.

My demo app shows pages of images. It has a structure very similar to the Fragments demo that is in the support package. I started with that and replaced the ListView fragments with GridView fragments. Each GridView holds images. Each of the images has a title. When you long-click on an image, you zoom in on the picture, and from there you can click the picture to see the text for the topic.

Full source for this demo app is provided. Continue reading

Posted in Android | Tagged , , , , , | 16 Comments