Android dev blog

Convert It

noreply@blogger.com (kankan) — Thu, 28 Apr 2011 08:02:00 +0000

I'm glad to inform you about publishing the unit conversion application called Convert It.
The main reason was to have a simple unit converter without necessity of navigating through a lot of screens to set parameters for converting needed units, like it is for almost all such applications.

Next are a little description:

Nothing extra. Only the categories and units that are used in everyday life.
A simple interface allows you to select all the options you want, without using additional screens.
There is an ability to copy and paste the data from the clipboard.
Support for Ukrainian, English and Russian languages. Using the current system language (English by default).

It has been not finished yet. It is the initial version, and I have a lot of ideas how to improve it. Also I'd like to get feedback from users to make it more useful.

You can download it from the Android Market.

PS I'm going to describe the technical part in details in the next posts.

Android wheel update: custom views for items

noreply@blogger.com (kankan) — Thu, 27 Jan 2011 20:30:00 +0000

I'm glad to inform you about updating the wheel control. There has been implemented the main feature for this widget - the ability for using custom views for wheel items, like in the ListView control.

Now it is possible to show anything in the wheel, as simple text items

... as images

Looks nice :)

How to use
For simple text items there can be used ArrayWheelAdapter and ArrayWheelAdapter adapters, like before. They work also with user defined layouts for items and the wheel label.
For complex wheel items there should be used user defined adapters by implementing the WheelViewAdapter interface. For text based adapters there can be used the AbstractWheelAdapter class as a base.

Constraints

All wheel items should have the same height to be corrected rendered. The label height should be less than the height of wheel item.
The label width should not be so big since items are show in the rest area.

Backward compatibility
All application using the wheel should work with new adapters, but with small fix: ArrayWheelAdapter and ArrayWheelAdapter adapters have been moved to the kankan.wheel.widget.adapters package.
The old WheelAdapter interface has been set as deprecated and will be removed in next builds, with corresponding WheelView methods. There should be used the WheelViewAdapter interface instead.

Scrolling inside ScrollView

noreply@blogger.com (kankan) — Tue, 18 Jan 2011 20:51:00 +0000

There was an issue with wheel view related to the scrolling functionality. It did not work if wheel is placed inside a ScrollView.

I've investigated standard controls and found a one that does work alike (multiline EditText) and a one working as expected (SeekBar). I would like to check also ScrollView inside a ScrollView, but fortunately I did find a solution for this issue only by using SeekBar sources from Android SDK (I have old ones, but it was enough).

The main problem was with WheelView.onTouchEvent() - it did not receive all touch events because they were processed by parent (scroll view). So it needed to ask the ScrollView to skip touch events and allow the wheel to perform them by onTouchEvent(). There is a corresponding method for a parent view called ViewParent.requestDisallowInterceptTouchEvent(). SeekBar calls it during handling the ACTION_MOVE touch event action. I've added this approach to the wheel view and it works too! :)

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (getViewAdapter() == null) {
        return true;
    }
 
    if (!gestureDetector.onTouchEvent(event) && event.getAction() == MotionEvent.ACTION_UP) {
        justify();
    }
 
    // Fix scrolling
    if (event.getAction() == MotionEvent.ACTION_MOVE && getParent() != null) {
        getParent().requestDisallowInterceptTouchEvent(true);
    }
 
    return true;
}

I'm unable to commit this fix now because of working on custom views for wheel items; will do that later. So please fix your code manually. Thanks!

Android wheel update: animation

noreply@blogger.com (kankan) — Thu, 25 Nov 2010 20:30:00 +0000

The wheel widget has been updated. There has been added the main feature - animation.
Now it is possible to scroll the wheel automatically by using the finger fling.
In the same way there is the ability to scroll the wheel programmatically by using next methods:

void setCurrentItem(int index, boolean animated) - scrolls to specified items if animated is true
void scroll(int itemsToScroll, int time) - scrolls up/down by itemsToScroll items

The main feature that is not implemented at this moment is custom views for wheel items. It will be implemented soon.

Weather forecast widget: Weather providers

noreply@blogger.com (kankan) — Fri, 19 Nov 2010 19:27:00 +0000

The one of main parts of weather forecast widget is communication with weather provider.

I have found next providers (please let me know if you know another ones) that work only with the US cities (except Google weather):

Google weather API
Google provides API for getting weather data for US cities by name.
Next is the link to get weather data

http://www.google.com/ig/api?weather=City

The received weather data are stored in XML and contains next:

Information about received data (city name, state, forecast date)
Current weather conditions:

Conditions (Sunny, Rain, Cloudy, Showers etc)
Temperature (both Celsius and Fahrenheit)
Humidity (in percents)
Wind conditions
Weather icon (link to icon stored on Google)

Weather forecast for next few days:

Day of week of forecast (Mon, Tue, Wed etc)
Conditions (Rain, Cloudy, Showers etc)
Low temperature (in Fahrenheit)
High temperature (in Fahrenheit)
Weather icon (link to icon stored on Google)

Here is a sample XML received for NY

<xml_api_reply version="1">
     <weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
         <forecast_information>
             <city data="New York, NY"/>
             <postal_code data="new york,ny"/>
             <latitude_e6 data=""/>
             <longitude_e6 data=""/>
             <forecast_date data="2010-05-20"/>
             <current_date_time data="2010-05-20 07:44:43 +0000"/>
             <unit_system data="US"/>
         </forecast_information>
        <current_conditions>
            <condition data="Cloudy"/>
            <temp_f data="59"/>
            <temp_c data="15"/>
            <humidity data="Humidity: 80%"/>
            <icon data="/ig/images/weather/cloudy.gif"/>
            <wind_condition data="Wind: N at 0 mph"/>
        </current_conditions>
        <forecast_conditions>
            <day_of_week data="Thu"/>
            <low data="61"/>
            <high data="79"/>
            <icon data="/ig/images/weather/sunny.gif"/>
            <condition data="Sunny"/>
            </forecast_conditions>
        <forecast_conditions>
            <day_of_week data="Fri"/>
            <low data="60"/>
            <high data="83"/>
            <icon data="/ig/images/weather/partly_cloudy.gif"/>
            <condition data="Partly Cloudy"/>
        </forecast_conditions>
    </weather>
</xml_api_reply>

Next are some Google weather icons:

WeatherForecast web service from www.webservicex.net
This web service supports the following two operations:

GetWeatherByPlaceName - returns weather forecast for a place name (US cities only)
GetWeatherByZipCode - returns weather forecast for a Zip Code (US only)

The first one looks like the Google Weather API defined above. Let investigate it.
To get weather forecast for city it is possible to use HTTP POST request, like this (for New York).
The received weather data are stored in XML:

Information about received data (city name, latitude & longitude, state)
Weather forecast for next week:

Date for forecast
Low temperature in Fahrenheit and Celsius
High temperature in Fahrenheit and Celsius
Weather icon (link to icon from forecast.weather.gov, see below NDFD)

As you can see, there are poor weather data, but they contain almost all that we need, excluding weather conditions.
Next is a sample XML for NY

<WeatherForecasts>
     <Latitude>40.74838</Latitude>
     <Longitude>73.9967041</Longitude>
     <AllocationFactor>0.001051</AllocationFactor>
     <FipsCode>36</FipsCode>
     <PlaceName>NEW YORK</PlaceName>
     <StateCode>NY</StateCode>
     <Details>
          <WeatherData>
               <Day>Tuesday, May 25, 2010</Day>
               <WeatherImage>http://forecast.weather.gov/images/wtf/few.jpg</WeatherImage>
               <MaxTemperatureF>86</MaxTemperatureF>
               <MinTemperatureF>59</MinTemperatureF>
               <MaxTemperatureC>30</MaxTemperatureC>
               <MinTemperatureC>15</MinTemperatureC>
          </WeatherData>
          <WeatherData>
               <Day>Wednesday, May 26, 2010</Day>
               <WeatherImage>http://forecast.weather.gov/images/wtf/sct.jpg</WeatherImage>
               <MaxTemperatureF>92</MaxTemperatureF>
               <MinTemperatureF>66</MinTemperatureF>
               <MaxTemperatureC>33</MaxTemperatureC>
               <MinTemperatureC>19</MinTemperatureC>
          </WeatherData>
          <WeatherData>
               <Day>Thursday, May 27, 2010</Day>
               <WeatherImage>http://forecast.weather.gov/images/wtf/sct.jpg</WeatherImage>
               <MaxTemperatureF>88</MaxTemperatureF>
               <MinTemperatureF>63</MinTemperatureF>
               <MaxTemperatureC>31</MaxTemperatureC>
               <MinTemperatureC>17</MinTemperatureC>
          </WeatherData>
          <WeatherData>
               <Day>Friday, May 28, 2010</Day>
               <WeatherImage>http://forecast.weather.gov/images/wtf/tsra30.jpg</WeatherImage>
               <MaxTemperatureF>77</MaxTemperatureF>
               <MinTemperatureF>64</MinTemperatureF>
               <MaxTemperatureC>25</MaxTemperatureC>
               <MinTemperatureC>18</MinTemperatureC>
          </WeatherData>
          <WeatherData>
               <Day>Saturday, May 29, 2010</Day>
               <WeatherImage>http://forecast.weather.gov/images/wtf/scttsra30.jpg</WeatherImage>
               <MaxTemperatureF>73</MaxTemperatureF>
               <MinTemperatureF>61</MinTemperatureF>
               <MaxTemperatureC>23</MaxTemperatureC>
               <MinTemperatureC>16</MinTemperatureC>
          </WeatherData>
     </Details>
</WeatherForecasts>

Note this Web service is unavailable time to time.

National Digital Forecast Database
National Digital Forecast Database (NDFD) SOAP web service provides data from the National Weather Service’s (NWS) digital forecast database. It uses XML to store weather data. The NDFD XML language is called Digital Weather Markup Language (DWML) and its schema can be found here.

NDFD web service contains a lot of functions to get weather data. This page uses one of them.

Next is the XML data for Baltimore, MD (please correct date in link) received from NDFDgenByDay

<dwml version="1.0" xsi:noNamespaceSchemaLocation="http://www.nws.noaa.gov/forecasts/xml/DWMLgen/schema/DWML.xsd">
    <head>
        <product srsName="WGS 1984" concise-name="dwmlByDay" operational-mode="official">
            <title>
                NOAA's National Weather Service Forecast by 24 Hour Period
             </title>
            <field>meteorological</field>
            <category>forecast</category>
            <creation-date refresh-frequency="PT1H">2010-05-21T08:45:54Z</creation-date>
        </product>
        <source>
            <more-information>http://www.nws.noaa.gov/forecasts/xml/</more-information>
            <production-center>
                Meteorological Development Laboratory
                <sub-center>Product Generation Branch</sub-center>
            </production-center>
            <disclaimer>http://www.nws.noaa.gov/disclaimer.html</disclaimer>
            <credit>http://www.weather.gov/</credit>
            <credit-logo>http://www.weather.gov/images/xml_logo.gif</credit-logo>
            <feedback>http://www.weather.gov/feedback.php</feedback>
        </source>
    </head>
    <data>
        <location>
            <location-key>point1</location-key>
            <point latitude="39.29" longitude="-76.61"/>
        </location>
        <moreWeatherInformation applicable-location="point1">
            http://forecast.weather.gov/MapClick.php?textField1=39.29&textField2=-76.61
        </moreWeatherInformation>
        <time-layout time-coordinate="local" summarization="24hourly">
            <layout-key>k-p24h-n2-1</layout-key>
            <start-valid-time>2010-05-21T06:00:00-04:00</start-valid-time>
            <end-valid-time>2010-05-22T06:00:00-04:00</end-valid-time>
            <start-valid-time>2010-05-22T06:00:00-04:00</start-valid-time>
            <end-valid-time>2010-05-23T06:00:00-04:00</end-valid-time>
        </time-layout>
        <time-layout time-coordinate="local" summarization="12hourly">
            <layout-key>k-p12h-n4-2</layout-key>
            <start-valid-time>2010-05-20T18:00:00-04:00</start-valid-time>
            <end-valid-time>2010-05-21T06:00:00-04:00</end-valid-time>
            <start-valid-time>2010-05-21T06:00:00-04:00</start-valid-time>
            <end-valid-time>2010-05-21T18:00:00-04:00</end-valid-time>
            <start-valid-time>2010-05-21T18:00:00-04:00</start-valid-time>
            <end-valid-time>2010-05-22T06:00:00-04:00</end-valid-time>
            <start-valid-time>2010-05-22T06:00:00-04:00</start-valid-time>
            <end-valid-time>2010-05-22T18:00:00-04:00</end-valid-time>
        </time-layout>
        <time-layout time-coordinate="local" summarization="24hourly">
            <layout-key>k-p2d-n1-3</layout-key>
            <start-valid-time>2010-05-21T06:00:00-04:00</start-valid-time>
            <end-valid-time>2010-05-23T06:00:00-04:00</end-valid-time>
        </time-layout>
        <parameters applicable-location="point1">
            <temperature type="maximum" units="Fahrenheit" time-layout="k-p24h-n2-1">
                <name>Daily Maximum Temperature</name>
                <value>86</value>
                <value>73</value>
            </temperature>
            <temperature type="minimum" units="Fahrenheit" time-layout="k-p24h-n2-1">
                <name>Daily Minimum Temperature</name>
                <value>63</value>
                <value>63</value>
            </temperature>
            <probability-of-precipitation type="12 hour" units="percent" time-layout="k-p12h-n4-2">
                <name>12 Hourly Probability of Precipitation</name>
                <value>0</value>
                <value>0</value>
                <value>17</value>
                <value>39</value>
            </probability-of-precipitation>
            <weather time-layout="k-p24h-n2-1">
                <name>Weather Type, Coverage, and Intensity</name>
                <weather-conditions weather-summary="Partly Sunny"/>
                <weather-conditions weather-summary="Chance Thunderstorms">
                    <value coverage="chance" intensity="none" weather-type="thunderstorms" qualifier="none"/>
                    <value coverage="chance" intensity="light" additive="and" weather-type="rain showers" qualifier="none"/>
                </weather-conditions>
            </weather>
            <conditions-icon type="forecast-NWS" time-layout="k-p24h-n2-1">
                <name>Conditions Icons</name>
                <icon-link>
                    http://www.nws.noaa.gov/weather/images/fcicons/sct.jpg
                </icon-link>
                <icon-link>
                    http://www.nws.noaa.gov/weather/images/fcicons/tsra40.jpg
                </icon-link>
            </conditions-icon>
            <hazards time-layout="k-p2d-n1-3">
                <name>Watches, Warnings, and Advisories</name>
                <hazard-conditions xsi:nil="true"/>
            </hazards>
        </parameters>
    </data>
</dwml>

Next are some weather icons:

NDFD provides all necessary weather data for each point of the USA and I suppose all defined above providers use data from this one.
The disadvantage of using NDFD web service from Android, is the used DWML format for storing weather data. It is some difficult to parse it.

As for me, it's enough to use the Google provider - it provides as current condition as forecast for next few days stored in simple XML.

Note this post was created in May 2010; I planned to post it before, but did not have enough time to finish it. This is why there is used weather data for the May month.

Project for beginners

noreply@blogger.com (kankan) — Fri, 12 Nov 2010 19:46:00 +0000

The main problem for beginners is to choose a project to learn Android. It needs to invent a test app for each topic from Android SDK Developer's Guide. And as a result there are lots projects that in general don't have any value.

It would be better to choose a one project that covers as much as possible items from Android SDK. A one of good project that helps learning Android is the Weather forecast App widget.

There can be covered next items:

App Widgets
User Interface (layouts, menus, dialogs etc.)
Resources (drawables, stings, styles & themes)
Intents
Content Providers
XML and Web servers (weather providers)

I've found my Weather App widget and I see it is not bad as for beginner. The main problems were to work with weather providers and design widget view. In one of next topic I'll describe it.

Android wheel update: scrolling

noreply@blogger.com (kankan) — Sat, 30 Oct 2010 18:53:00 +0000

I'm glad to inform that the Android wheel widget has been updated.
Now scrolling feature looks more user friendly and the wheel is updated smoothly, like expected.

I've also renamed methods of the scrolling listener interface to make them clear to understand. They are called now onScrollingStarted() and onScrollingFinished().

The next feature planned to be added is the animation. It is the main feature of Wheel control, and in the same time it is the most difficult to implement. So, it requires some time to be done, and I hope I will have enough time to do that.

BTW, some people try to implement the animation, moreover, there is an job offer that asks to implement the animation for the money :)
Unfortunately, I'm not able to do that as quick as expected, so they could wait for 1-2 months until I implement that.

Android wheel update: event listeners

noreply@blogger.com (kankan) — Sun, 29 Aug 2010 18:56:00 +0000

The wheel control has been updated.
There have been added next wheel event listeners:

OnWheelChangedListener - onChange() callback is invoked whenever current wheel position is changed
OnWheelScrollListener - onScrollStarts() and onScrollEnds() callbacks are invoked when wheel begins/ends being scrolling.

Also there have been updated demo activities to show how events are performed.

The time activity updates the time picker labels according to selected value. If there is chosen the "1" value the label has the singular form (hour or min), otherwise plural form is used (hours or mins).
There is also added a standard Android time picker that is synchronized with used time picker via events listeners.

The password activity has been also changed. It checks the entered PIN. Note that PIN is been not validating when one of wheel is scrolled.

The valid PIN is 2461 :)

Rounding picture

noreply@blogger.com (kankan) — Mon, 16 Aug 2010 12:11:00 +0000

Suppose we have an image and we would like to make it's corners rounded.

The main idea is to combine the original image and already prepared rounded image with the same height and width, and use only those pixels from original image that are present at the rounded one:

Next code does that by using PorterDuffXfermode Xfermode:

/**
 * Creates rounded bitmap
 * @param bitmap the source bitmap
 * @return the rounded bitmap
 */
public static Bitmap createRoundedBitmap(Bitmap bitmap, int round) {
    if (bitmap == null) {
        return null;
    }
        
    Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

    // create output bitmap
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);

    // assign canvas with output bitmap
    Canvas canvas = new Canvas(output);
    canvas.drawARGB(0, 0, 0, 0);
        
    // initialize paint
    Paint paint = new Paint();
    paint.setAntiAlias(true);

    // draw rounded rect to bitmap
    paint.setColor(0xFFFFFFFF);
    canvas.drawRoundRect(new RectF(rect), round, round, paint);

    // copy original bitmap to rounded area
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
        
    return output;
}

Notes
There was used an icon from Google weather API.
There are different modes for the Porter-Duff composing, and next picture from w3.org shows some of them:

Android wheel Google code project

noreply@blogger.com (kankan) — Mon, 12 Jul 2010 08:08:00 +0000

I've upload my wheel widget to the Google code and time to time update it.

At this moment I've implemented adapters for wheel view called ArrayWheelAdapter and NumericWheelAdapter. There has been created demo app that contains activities for all these adapters.
The NumericWheelAdapter demos look like in original NumericWheel control (password and date picker activity). And ArrayWheelAdapter is used to set text to wheel items, like next.

I hope this project will be useful for developers.

Updated: You can find my control by Google - it is a one of the top item of search results.

SOAP on Android

noreply@blogger.com (kankan) — Tue, 15 Jun 2010 11:05:00 +0000

Some projects require to communicate with Web services.
The JDK provides tool called wsimport that generates classes from WSDL, and user works with them like with other Java classes and may not know that he works with a Web service.

But it does not work on Android... Android SDK does not provide classes to work with Web services. So, it needs to manually work with Web services by using SOAP.

There is a good library called kSOAP 2 that is a lightweight SOAP Web service client library for constrained Java environments such as Applets or J2ME applications. There is a port of this library to Android platform that is allowed on Google code.

Weather forecast Web service
Lets try to use kSOAP 2 for getting weather forecast from the WeatherForecast Web service.

Next code calls the GetWeatherByPlaceName operation on Web service to get weather forecast for specified city for next few days

public SoapObject getWeather(String city) throws Exception {
    SoapObject request = new SoapObject("http://www.webservicex.net", "GetWeatherByPlaceName");
    request.addProperty("PlaceName", city);
        
    SoapSerializationEnvelope envelope = new SoapSerializationEnvelope(SoapEnvelope.VER11);
    envelope.setOutputSoapObject(request);
    // It seems that it is a .NET Web service because it doesn't work without next line
    envelope.dotNet = true;

    HttpTransportSE transport = new HttpTransportSE("http://www.webservicex.net/WeatherForecast.asmx");
    transport.call("http://www.webservicex.net/GetWeatherByPlaceName", envelope);
    
    return (SoapObject) envelope.getResponse();
}

As you can see it's easy. But it needs also to parse data received from the Web service.

public List<CharSequence> getWeatherForecast(String city) throws Exception {
    SoapObject obj = getWeather(city);
    SoapObject details = (SoapObject) obj.getProperty("Details");
        
    List<CharSequence> list = new ArrayList<CharSequence>(details.getPropertyCount());
    for (int i = 0; i < details.getPropertyCount(); i++) {
        Object property = details.getProperty(i);
        if (property instanceof SoapObject) {
            SoapObject weather = (SoapObject) property;
            String day = weather.getProperty("Day").toString();
            String min = weather.getProperty("MinTemperatureF").toString();
            String max = weather.getProperty("MaxTemperatureF").toString();
                
            list.add(day + " :: " + min + "-" + max);
        }
    }
    return list;
}

Next are weather forecast for the Atlanta city, received by using this routine.

[Tuesday, June 15, 2010 :: 77-90, Wednesday, June 16, 2010 :: 73-92, Thursday, June 17, 2010 :: 73-95, Friday, June 18, 2010 :: 74-96, Saturday, June 19, 2010 :: 75-95, Sunday, June 20, 2010 :: 74-96, Monday, June 21, 2010 :: 74-96]

Note: .NET services
There are problems with .Net Web services, so it needs to set the dotNet variable of the SoapSerializationEnvelope class. Next are Java docs about it.

dotNet

public boolean dotNet

Set this variable to true for compatibility with what seems to be the default encoding for .Net-Services. This feature is an extremely ugly hack. A much better option is to change the configuration of the .Net-Server to standard Soap Serialization!

Note: Weather forecast Web service
The WeatherForecast Web service works also with HTTP POST and GET requests, that don't requires using SOAP. But you should parse received XML manually. This page contains their descriptions and the Test form.

Wheel UI contol: ideas for the future

noreply@blogger.com (kankan) — Wed, 02 Jun 2010 08:54:00 +0000

The wheel control described in previous posts contains all necessary functionality and is ready for using by other applications.
But I would consider it just as a draft for a real wheel view. It needs to "tune" this control to make it more attractive.
Next are some ideas that I'd like to realize:

Implement the animation like in the original iPhone widget
Add the ability to work not only with numbers. Make it to use Adapters like the ListView.

Make the control to be composed. It should contain as much wheels as necessary, so it will allow to avoid defining a set of the wheels for complex widget, like for password and date time picker widgets from the first post about the wheel widget. It can be used by next way:

 // Get the wheel view
 WheelView picker = (WheelView) findViewById(R.id.date_time);

 // Add the hours wheel
 WheelViewSection hours = picker.addSection("hours");
 // Set adapter for hours.
 hours.setAdapter(new NumericAdapter(0, 23));

 // Add the mins wheel
 WheelViewSection mins = picker.addSection("mins");
 // Set adapter for it
 mins.setAdapter(new NumericAdapter(0, 59));

 // Set current values
 Calendar c = Calendar.getInstance();
 mins.setSelectedIndex(c.get(Calendar.MINUTE));
 hours.setSelectedIndex(c.get(Calendar.HOUR_OF_DAY));

 // ...

 // Get password view
 WheelView passw = (WheelView) findViewById(R.id.passw);
 // Set count of sections
 passw.setSectionCount(4);
 // Set numeric adapter for all sections
 passw.setAdapter(new NumericAdapter(0, 9));

Repeat the wheel items when necessary. It means to show the first item after the last one. For example, when user select 59 mins there will be shown the 0 and 1 value below; for hours it can be not used and it can show blank items below the 23 and above the 0 hours.

It's all the ideas that I have at this moment. If you have more ideas please let me know.

See also
Introduction to the Wheel control
The Wheel control layouts
The Wheel control backgrounds
Scrolling the wheel control

Updated: I've posted sources of the Wheel widget to Google code. Please use this link.

Wheel UI contol: Scrolling

noreply@blogger.com (kankan) — Fri, 28 May 2010 13:36:00 +0000

The main feature of the Wheel control is a scrolling (rotation). And I'd like to describe a simple wheel scrolling, without animation.

The wheel control should be scrolled on touch motion event. So, it needs to override onTouchEvent() method to rotate the wheel. Each time it needs to update the wheel according to motion distance that can be calculated as the difference between the last and current Y motion position.
In our case we will update the wheel control by setting the current number. If motion distance is less than zero (the movement from bottom to top) we have to increment it, and decrement otherwise. Note that we have to skip that if the movement is so small (is less than one item height).

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        lastYTouch = event.getY();
        break;

    case MotionEvent.ACTION_MOVE:
        float delta = event.getY() - lastYTouch;
        int count = (int) (visibleItems * delta / getHeight());
        int pos = currentValue - count;
        pos = Math.max(pos, minValue);
        pos = Math.min(pos, maxValue);
        if (pos != currentValue) {
            lastYTouch = event.getY();
            setValue(pos);
        }
        break;
    case MotionEvent.ACTION_UP:
        break;
    }
    return true;
}

/**
 * Sets current value
 * 
 * @param value the value to set
 */
public void setValue(int value) {
    if (value != currentValue && value >= minValue && value <= maxValue) {
        itemsLayout = null;
        valueLayout = null;
        currentValue = value;
        invalidate();
    }
}

Note that it is just a simple scrolling implementation, and it is not as good as expected. But there is nothing impossible, and I think it can be extended to have the behavior like original iPhone widget.

See also
    Introduction to the Wheel control
    The Wheel control layouts
    The Wheel control backgrounds
Ideas for the future

Wheel UI contol: Backgrounds

noreply@blogger.com (kankan) — Thu, 27 May 2010 11:05:00 +0000

The NumericWheel widget has a simple design. It contains only text data (described in previous topic) and gradient backgrounds that are described in this post.

Backgrounds
There are used next backgrounds:

Main widget background
Center (current item) background
Top and bottom shadows

Main Background
Main background consists of two parts: the gradient bevel and the gradient background.
It's easy to create that, just find necessary colors. Not that the best way it to combine them by using layers that are described here.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#333"
                android:centerColor="#DDD"
                android:endColor="#333"
                android:angle="90" />
                
                <stroke android:width="1dp" android:color="#FF333333" />
        </shape>
    </item>
    <item android:left="4dp" android:right="4dp" android:top="1dp" android:bottom="1dp">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#AAA"
                android:centerColor="#FFF"
                android:endColor="#AAA"
                android:angle="90" />
        </shape>
    </item>
</layer-list>

Just set it as a widget background by calling setBackgroundResource().

Center background
Center background is used to mark the current item value and widget label. It is also defined in XML and is a little transparent.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#70222222"
        android:centerColor="#70222222"
        android:endColor="#70EEEEEE"
        android:angle="90" />

    <stroke android:width="1dp" android:color="#70333333" /> 
</shape>

Just draw it on center of our widget:

/**
 * Draws rect for current value
 * @param canvas the canvas for drawing
 */
private void drawCenterRect(Canvas canvas) {
    int center = getHeight() / 2;
    int offset = getHeight() / visibleItems / 2;
    centerDrawable.setBounds(0, center - offset, getWidth(), center + offset);
    centerDrawable.draw(canvas);
}

Top and bottom shadows
The main background (see above) does not make widget to look so nice (like the original iPhone widget) because it is not enough dark on top and bottom. So, I decided to draw additional gradient drawable to get shadow effect:

/** Top and bottom shadows colors */
private static final int[] SHADOWS_COLORS = new int[] { 0xFF111111,
        0x00AAAAAA, 0x00AAAAAA };

/**
 * Draws shadows on top and bottom of control
 * @param canvas the canvas for drawing
 */
private void drawShadows(Canvas canvas) {
    if (topShadow == null) {
        topShadow = new GradientDrawable(Orientation.TOP_BOTTOM, SHADOWS_COLORS);
    }
    topShadow.setBounds(0, 0, getWidth(), getHeight() / visibleItems);
    topShadow.draw(canvas);

    if (bottomShadow == null) {
        bottomShadow = new GradientDrawable(Orientation.BOTTOM_TOP, SHADOWS_COLORS);
    }
    bottomShadow.setBounds(0, getHeight() - getHeight() / visibleItems,
                getWidth(), getHeight());
    bottomShadow.draw(canvas);
}

onDraw()
So, all drawable are defined, and we can draw the Wheel control. We need to draw text layouts and all defined above drawables excluding the widget background.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if (itemsLayout == null) {
        calculateLayoutWidth(getWidth(), MeasureSpec.EXACTLY);
    }

    drawCenterRect(canvas);

    canvas.save();
    // Skip padding space and hide a part of top and bottom items
    canvas.translate(PADDING, -ITEM_OFFSET);
    drawItems(canvas);
    drawValue(canvas);
    canvas.restore();

    drawShadows(canvas);
}

/**
 * Draws value and label layout
 * @param canvas the canvas for drawing
 */
private void drawValue(Canvas canvas) {
    valuePaint.setColor(VALUE_TEXT_COLOR);
    valuePaint.drawableState = getDrawableState();

    Rect bounds = new Rect();
    itemsLayout.getLineBounds(visibleItems / 2, bounds);

    // draw label
    if (labelLayout != null) {
        canvas.save();
        canvas.translate(itemsLayout.getWidth() + LABEL_OFFSET, bounds.top);
        labelLayout.draw(canvas);
        canvas.restore();
    }

    // draw current value
    canvas.save();
    canvas.translate(0, bounds.top);
    valueLayout.draw(canvas);
    canvas.restore();
}

/**
 * Draws items
 * @param canvas the canvas for drawing
 */
private void drawItems(Canvas canvas) {
    itemsPaint.setColor(ITEMS_TEXT_COLOR);
    itemsPaint.drawableState = getDrawableState();
    itemsLayout.draw(canvas);
}

Note that to draw StaticLayout it needs to "move" it to necessary position by using Canvas.translate() method.

Notes
The first part of Wheel UI control implementation has been done.
What is not implemented yet? Of course, rotation - the main behavior of this widget. I'll describe it in next post.

See also
Introduction to the Wheel control
The Wheel control layouts
Scrolling the wheel control
Ideas for the future

Wheel UI contol: Layouts

noreply@blogger.com (kankan) — Wed, 26 May 2010 11:36:00 +0000

The NumericWheel widget has a simple design. It contains only text data and gradient backgrounds. In this post I'd like to write about text layouts.

Text layouts
Widget contains three text fields:

Current value - number on middle area ("11" on image above)
Label - text on right area ("hour" on image above)
Items - all visible numbers excluding current value ("9", "10", "12", "13" on image above)

Next picture shows how all these items are "placed" on the widget.

About the Control area - it is just a space where defined above items are placed. It is the whole widget area excluding left and right padding. Note that there is also indent between Items and the Label areas.

To show text fields there is used the StaticLayout class that does all hard work. It renders text using a lot of settings, such as text paint, text alignment and so on.
Note that the Current value item is excluded from Items field because there is used another text settings for drawing it - it is drown with the same settings as the Label field.

As you can see, design is easy. It needs only to calculate their sizes and the whole widget dimensions.

Width
Before creating the StaticLayout object we should know its width (further it is possible only to make it more). So it needs to calculate it at first.

    int widthItems = (int) FloatMath.ceil(Layout.getDesiredWidth(getMaxText(), itemsPaint));
    widthItems += ADDITIONAL_ITEMS_SPACE; // make it some more

    int widthLabel = 0;
    if (label != null && label.length() > 0) {
         widthLabel = (int) FloatMath.ceil(Layout.getDesiredWidth(label, valuePaint));
    }

Then it needs to update width according to the widget layout width settings (android:layout_width) and, finally, calculate the whole widget width that is the sum of text fields width, left and top padding and indent between text fields. Next code does that.

/**
* Calculates control width and creates text layouts
* @param widthSize the input layout width
* @param mode the layout mode
* @return the calculated control width
*/
private int calculateLayoutWidth(int widthSize, int mode) {
    initResourcesIfNecessary();

    int width = widthSize;

    int widthItems = (int) FloatMath.ceil(Layout.getDesiredWidth(getMaxText(), itemsPaint));
    widthItems += ADDITIONAL_ITEMS_SPACE; // make it some more

    int widthLabel = 0;
    if (label != null && label.length() > 0) {
        widthLabel = (int) FloatMath.ceil(Layout.getDesiredWidth(label, valuePaint));
    }

    boolean recalculate = false;
    if (mode == MeasureSpec.EXACTLY) {
        width = widthSize;
        recalculate = true;
    } else {
        width = widthItems + widthLabel + 2 * PADDING;
        if (widthLabel > 0) {
            width += LABEL_OFFSET;
        }

        // Check against our minimum width
        width = Math.max(width, getSuggestedMinimumWidth());

        if (mode == MeasureSpec.AT_MOST && widthSize < width) {
            width = widthSize;
            recalculate = true;
        }
    }

    if (recalculate) {
        // recalculate width
        int pureWidth = width - LABEL_OFFSET - 2 * PADDING;
        if (widthLabel > 0) {
            double newWidthItems = (double) widthItems * pureWidth / (widthItems + widthLabel);
            widthItems = (int) newWidthItems;
            widthLabel = pureWidth - widthItems;
        } else {
            widthItems = pureWidth + LABEL_OFFSET; // no label
        }
    }

    createLayouts(widthItems, widthLabel);

    return width;
}

/**
* Creates layouts
* @param widthItems width of items layout
* @param widthLabel width of label layout
*/
private void createLayouts(int widthItems, int widthLabel) {
    if (itemsLayout == null || itemsLayout.getWidth() > widthItems) {
        itemsLayout = new StaticLayout(buildText(), itemsPaint, widthItems,
            widthLabel > 0 ? Layout.Alignment.ALIGN_OPPOSITE :
                Layout.Alignment.ALIGN_CENTER,
            1, ADDITIONAL_ITEM_HEIGHT, false);
    } else {
        itemsLayout.increaseWidthTo(widthItems);
    }

    if (valueLayout == null || valueLayout.getWidth() > widthItems) {
        valueLayout = new StaticLayout(Integer.toString(currentValue),
            valuePaint, widthItems, widthLabel > 0 ?
            Layout.Alignment.ALIGN_OPPOSITE : Layout.Alignment.ALIGN_CENTER,
            1, ADDITIONAL_ITEM_HEIGHT, false);
    } else {
        valueLayout.increaseWidthTo(widthItems);
    }

    if (widthLabel > 0) {
        if (labelLayout == null || labelLayout.getWidth() > widthLabel) {
            labelLayout = new StaticLayout(label, valuePaint,
                widthLabel, Layout.Alignment.ALIGN_NORMAL, 1,
                    ADDITIONAL_ITEM_HEIGHT, false);
        } else {
            labelLayout.increaseWidthTo(widthLabel);
        }
    }
}

As you can see there is not calculated the Current item width. It is because it has the same width as the Items layout that is as long as the longest text that it can contain.
How to build a text for the Items layout? Just create a string that contains five lines (in general, the wheel can have any count of items): the first two are the previous numbers of current value, the last two are the next numbers, and the middle one is empty - at this position there will be shown current value.

Height
The StaticLayout class allows to get its height, so it is not necessary co calculate that. It needs only to calculate the whole control height.
As you can see the Wheel control height is equal to the Items layout height. Just correct it to show top and bottom items not fully.

/**
* Calculates desired height for layout
*
* @param layout the source layout
* @return the desired layout height
*/
private int getDesiredHeight(Layout layout) {
     if (layout == null) {
          return 0;
     }

     int linecount = layout.getLineCount();
     int desired = layout.getLineTop(linecount) - ITEM_OFFSET * 2 - ADDITIONAL_ITEM_HEIGHT;

     // Check against our minimum height
     desired = Math.max(desired, getSuggestedMinimumHeight());

     return desired;
}

onMeasure
So, all code for necessary implementation of onMeasure() method is written. Just correct height according to the widget layout height settings

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
     int widthMode = MeasureSpec.getMode(widthMeasureSpec);
     int heightMode = MeasureSpec.getMode(heightMeasureSpec);
     int widthSize = MeasureSpec.getSize(widthMeasureSpec);
     int heightSize = MeasureSpec.getSize(heightMeasureSpec);

     int width = calculateLayoutWidth(widthSize, widthMode);

     int height;
     if (heightMode == MeasureSpec.EXACTLY) {
          height = heightSize;
     } else {
          height = getDesiredHeight(itemsLayout);

          if (heightMode == MeasureSpec.AT_MOST) {
               height = Math.min(height, heightSize);
        }
     }

     setMeasuredDimension(width, height);
}

In next post I'll describe how to create nice backgrounds for the Wheel widget.

See also
Introduction to the Wheel control
The Wheel control backgrounds
Scrolling the wheel control
Ideas for the future

Wheel UI contol

noreply@blogger.com (kankan) — Tue, 25 May 2010 10:32:00 +0000

Have you ever seen the iPhone date time picker?

Next is the corresponding Android control

Poor design...

But, fortunately, there is an ability to create own UI controls. So I decided to implement this one.

Actually, this time picker is a sample activity that uses my control called NumericWheel.
XML Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_height="wrap_content"
     android:layout_gravity="center_horizontal"
     android:layout_width="fill_parent"
     android:paddingLeft="12dp"
     android:paddingRight="12dp"
     android:paddingTop="4dp"
     android:background="@drawable/layout_bg">

     <test.android.ui.NumericWheel android:id="@+id/hour"
          android:layout_height="wrap_content"
          android:layout_width="fill_parent"
          android:layout_weight="1"/>
     <test.android.ui.NumericWheel android:id="@+id/mins"
          android:layout_height="wrap_content"
          android:layout_width="fill_parent"
          android:layout_weight="1"/>
</LinearLayout>

Activity code:

public class TimeActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.time_layout);

        NumericWheel hours = (NumericWheel) findViewById(R.id.hour);
        hours.setMaxValue(23);
        hours.setCaption("hour");

        NumericWheel mins = (NumericWheel) findViewById(R.id.mins);
        mins.setMaxValue(59);
        mins.setCaption("mins");

        Calendar c = Calendar.getInstance();
        mins.setValue(c.get(Calendar.MINUTE));
        hours.setValue(c.get(Calendar.HOUR_OF_DAY));
    }
}

It is possible also to use the wheel control, for example, to enter PIN code or something like that:

Here are used four wheel controls.

It is a very interesting theme, and in next topics I'll describe functionality of the wheel control and how to implement and improve it

See also
The Wheel control layouts
The Wheel control backgrounds
Scrolling the wheel control
Ideas for the future

Creating backgrounds: it's easy (part 3)

noreply@blogger.com (kankan) — Tue, 18 May 2010 08:12:00 +0000

Here is the last topic about creating simple Android backgrounds.

I had some problems during investigating XML Android drawable because there were missed good docs about that. Definitions in Android API documentation are not full and clear.

Fortunately, I've found a great doc that describes all XML drawable :) Here it is.
As you can see Android provides a lot of useful things for defining XML drawable: rotating, animating, scaling, uniting a set of drawable etc.

Creating backgrounds: it's easy (part 2)

noreply@blogger.com (kankan) — Wed, 12 May 2010 13:36:00 +0000

Here is the first topic about creating simple Android backgrounds.

What about gradients?

It's easy - just use gradient XML tag:

Creating backgrounds: it's easy (part 1)

noreply@blogger.com (kankan) — Fri, 23 Apr 2010 08:44:00 +0000

During developing UI applications for Android, you often have to work with images: icons, backgrounds and others. If you need icon, you (or your designer) paint it using some image editor, like PhotoShop. But what should you do when it needs to create just a simple background for your widget? Install an image editor, research that, and then create background? - Too many actions for creating a simple background.

Android SDK provides a set of easy ways to define backgrounds, and one of them is the shape drawable XML element. For instance, here is a rounded green drawable:

Let create a simple rounded App widget that has an icon and text with a transparent background:

It changes own view on selecting and pressing, like a lot of Android widgets (icons on Home, buttons etc.):

State Selected

State Pressed

Here is the background drawable of App widget:

Normal background (bg_normal.xml) has transparent color and rounded corners:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="#AA111111"/>
     <padding android:left="6dp" android:top="6dp"
         android:right="6dp" android:bottom="6dp" />
     <corners android:radius="8dp" />
</shape>

Selected (bg_selected.xml) and Pressed (bg_pressed.xml) backgrounds extend Normal background by adding border and changing background color. They look alike, just have different border colors (#FFEEC000 - for pressed, #FFFF8000 - for selected):

Android system images (eng)

noreply@blogger.com (kankan) — Wed, 14 Apr 2010 12:18:00 +0000

HTC provides images of their devices that can be run by the Android emulator.
Just download necessary system image from HTC developer center page, create a new Android virtual device and put the downloaded image into the created AVD folder. Then start the emulator.

Next are a few screen shots.

After you sign in with a Google account, you have access to all of the market apps right from the emulator.

Android resources (eng)

noreply@blogger.com (kankan) — Fri, 02 Apr 2010 08:03:00 +0000

Do you know Android SDK contains all resources used by standard widgets? Icons, animations, styles and so on.
They are placed on the <Android SDK folder>/data/res folder. And it is possible to use them directly, so it is not necessary to add them into project.

For example, here is a checked list view that uses starts instead of habitual marks:

To do that just do next:

Define list view item layout (let call it star_checked_item). You can use standard layout for android.R.layout.simple_list_item_checked - layouts/simple_list_item_checked.xml file.

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+android:id/text1"
          android:layout_width="fill_parent"
      android:layout_height="?android:attr/listPreferredItemHeight"
      android:textAppearance="?android:attr/textAppearanceLarge"

          android:gravity="center_vertical"
          android:checkMark="@android:drawable/btn_star" 
    android:paddingLeft="6dip"
          android:paddingRight="6dip"/>

Use this layout in list view adapter

ArrayAdapter adapter = new ArrayAdapter(this, R.layout.star_checked_item);
list.setAdapter(adapter);

Android resources

noreply@blogger.com (kankan) — Fri, 02 Apr 2010 08:03:00 +0000

Знаете ли вы, что Android SDK содержит ресурсы, которые используются стандартными контролами? Это иконки, анимации, стили, лайауты и пр.
Все они находится в папке <Android SDK folder>/data/res. При этом, к ним можно обращаться напрямую, то есть нет необходимости добавлять их в свой проект.

Вот, например, приложение, которое представляет собой checked list view, только использует звездочки вместо привычных галочек для своих элементов:

Все, что надо для этого - это:

Определить лайаут для элеметов списка (назовем его star_checked_item) Можно использовать как шаблон лайаут для android.R.layout.simple_list_item_checked - файл layouts/simple_list_item_checked.xml

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+android:id/text1"
          android:layout_width="fill_parent"
      android:layout_height="?android:attr/listPreferredItemHeight"
      android:textAppearance="?android:attr/textAppearanceLarge"
          android:gravity="center_vertical"
          android:checkMark="@android:drawable/btn_star" 
    android:paddingLeft="6dip"
          android:paddingRight="6dip"/>

Использовать этот лайаут в адаптере

ArrayAdapter adapter = new ArrayAdapter(this, R.layout.star_checked_item);
list.setAdapter(adapter);

Android Options menu: Internals (eng)

noreply@blogger.com (kankan) — Wed, 24 Mar 2010 09:33:00 +0000

Android applications (Activities) can have own menus next types:

Options menu - the main menu of application, is displayed when user clicks Menu button
Сontext menu - the context menu, is shown when user makes long click on some control

Сontext menu looks like a simple List view dialog and there is a possibility to change its view by using Android themes. I have been investigated an ability to manage the Options menu view and would like to share results in this post.

A typical Android menu looks like next:

It can have icon and caption, it is possible to use sub-menus that looks like the Android Context menu.
There are some constraints for menus:

There is displayed not more than 6 menu items меню, three per row. If menu items are more than 6 they are collected into the "More" sub-menu.
There are supported only a one level sub-menus, so it is not possible to create a sub-menu for sub-menu item..

Implementation
Options menu is realized by Android Menu class which object is passed into Activity.onCreateOptionsMenu() that is called at once, when Application creates menu.

This interface allow to work only with menu structure and does not provide methods to manage menu view. But it would like to set menu background, items count per row, menu sizes, - in general, make menu more attractive.

Internal classes
Android draws menu by using the com.android.internal.view.menu package that contains next interesting classes:

IconMenuView - menu view class
IconMenuItemView - menu item view class
MenuBuilder - implements the Menu interface and creates (builds) IconMenuView
MenuItemImpl - implements the MenuItem interface and creates a view for it

We are interested by only IconMenuView class which creates view for Android menu.

IconMenuView
The IconMenuView class has next properties:

rowHeight - the height of a single menu row
maxRows - the maximum quantity of menu rows
maxItemsPerRow - the maximum quantity of menu items per row
maxItems - the maximum quantity of visible menu items
moreIcon - icon for grouped hidden menu items

Next properties are delivered from MenuView:

horizontalDivider - horizontal divider (drawable)
verticalDivider - vertical divider (drawable)
itemBackground - menu background (drawable)
windowAnimationStyle - animation style

All of them are defined in <Android SDK folder>/data/res/values/attrs.xml, and their identifiers are defined in <Android SDK folder>/res/values/public.xml.

Next is an example of menu definition (<Android SDK folder>/data/res/layout-land/icon_menu_layout.xml):
<com.android.internal.view.menu.IconMenuView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+android:id/icon_menu"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:rowHeight="65dip"
    android:maxItems="6"
    android:maxRows="2"
    android:maxItemsPerRow="6" />

Managing menu view
As you can see, the is an ability to tune the Android menu. But not all so simple...
The problem is that com.android.internal.* are the internal system packages and it is not convenient to use them because they can be modified at any time by Android team. For example, there is described in Android docs that the PhoneWindow class (implements the Window interface) will be refactored in the future).

But I decided to look at next ways (each next of them was invented after the previous one had been failed):

Create a theme, set necessary properties and apply it for Activity. Unfortunately, there is no way to use IconMenuView properties in theme definition
Set properties directly to IconMenuView class. In general, it is possible to set some properties, for example background, for each menu item by using standard Android interfaces, but not more - the IconMenuView class does not have set- methods, so it is not possible to set any defined above properties
Redefine menu settings in resources. Unfortunately, it is not possible to edit resources on run-time
"Hack" resources - implement own resources/themes/etc classes. Unfortunately, all necessary Android methods and classes are final.

Conclusion
Unfortunately, it is impossible to change standard menu settings. All defined above properties can be used only by internal classes, so only Android team is able to use them.

So, there is only a one solution - create own Options menu and show it when used clicks on Menu button, and hide system menu.

Android Options menu: Internals

noreply@blogger.com (kankan) — Wed, 24 Mar 2010 09:19:00 +0000

Как и во всех платвормах, приложения (Activity) на Андроиде могут иметь свои собственные меню двух видов:

Options menu - главное меню программы, появляется при нажатии клавиши Menu.
Сontext menu - контекстное меню, появляется при длительном нажатии на каком-либо элементе управления.

Сontext menu представляет собой обычный List view диалог и есть возможность менять его вид, используя темы. Я исследовал возможность управление видом Options menu и хочу поделиться в этом посте полученными результатами.

Типичное меню Андроида выглядит так:

Меню может иметь иконку и надпись, также есть возможность использовать подменю, которые имеют тот же вид что и контекстные меню. Есть некоторые ограничения:

Андроид показывает максимум 6 элементов в меню, по 3 на строку. Если их больше, то они группируются в подменю More.
Подменю имеют только один уровень, то есть нельзя создать подменю у подменю.

Реализация
Options menu представляется в Андроиде интерфесом Menu, обьект которого передается в Activity.onCreateOptionsMenu() , который вызывается один раз, когда надо создать меню.

Этот интерфейс предоставляет возможность работать только со структурой меню, самим видом управлять нельзя. Но хотелось бы задать задний фон, количество элементов в строке, размеры меню, - в общем, сделать его более привлекательным.

Внутренние классы
Система сама рисует меню, используя пакет com.android.internal.view.menu, который содержит следующие интересные классы:

IconMenuView - класс представления меню
IconMenuItemView - класс представления пункта меню
MenuBuilder - реализует интерфейс Menu и создает (строит) IconMenuView
MenuItemImpl - реализует интерфейс MenuItem (пункт меню) и создает его представление

В принципе, нам интересен только IconMenuView класс, который формирует вид меню.

IconMenuView
Клас IconMenuView имеет такие свойства:

rowHeight - высота одной строки меню
maxRows - максимальное количество строк
maxItemsPerRow - максимальное количество элементов на строку
maxItems - максимальное количество видимых элементов
moreIcon - иконка для сгруппированных элементов

Следующие свойства унаследованы от MenuView:

horizontalDivider - горизонтальный разделитель (drawable)
verticalDivider - вертикальный разделитель (drawable)
itemBackground - задний фон меню (drawable)
windowAnimationStyle - стиль анимации

Все они описанные в файле <Android SDK folder>/data/res/values/attrs.xml, их идентификаторы - в <Android SDK folder>/res/values/public.xml.

Вот пример описания меню (файл <Android SDK folder>/data/res/layout-land/icon_menu_layout.xml):
<com.android.internal.view.menu.IconMenuView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+android:id/icon_menu"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:rowHeight="65dip"
    android:maxItems="6"
    android:maxRows="2"
    android:maxItemsPerRow="6" />

Настраивание меню
Как видно, предусмотрена возможность настраивать меню. Но не все так просто...
Беда в том, что com.android.internal.* - служебные пакеты, и использовать их не стоит, поскольку в любой момент могут быть изменены командой Андроида. Например в документации прямо написано, что класс PhoneWindow (реализует интерфейс Window) в дальнейшем будет отрефакторен.

И все же, я решил просмотреть такие варианты, каждый следующий из которых возникал при неудаче предыдущего:

Создать тему, задать необходимые параметры для меню, и применить ее к Activity. К сожаленью, нет возможности достучаться к свойствам IconMenuView в описании темы.
Задать параметры непосредственно IconMenuView. В принципе, можно задать некоторые свойства, например задний фон для каждого элемента меню, используя стандартные интерфейсы и классы Андроида, но не более - IconMenuView не имеет сеттеров, поэтому установить, например, максимальное количество строк не получиться
Переопределить параметры меню в ресурсах. К сожалению,нет возможности править ресурсы во время выполнения
"Хакнуть" ресурсы - реализовать свои классы ресурсов/тем/пр. Такой возможности тоже нет - либо все необходимые классы финальные, либо необходимые методы финальные.

Выводы
К сожаленью, как не крути, изменить стандартные свойства меню нельзя. Все перечисленные выше свойста могут использоваться только служебными классами, то есть что-то менять под силу только разработчикам из команды Андроида.

Поэтому здесь существует только одно решение - создать свое собственное меню и показывать его когда пользователь кликает на кнопку Меню, при этом надо прятать стандартное меню.

Android SDK: first impression (eng)

noreply@blogger.com (kankan) — Tue, 16 Mar 2010 11:38:00 +0000

I have started learning the Android SDK. And I'd like to share my impressions about this technology that is new for me.

So, what I liked:

There is used the Java programming language, although Android does not support established Java standards (SE or ME) - it just uses Java syntax and provides a lot of Java standards classes (streams, threads, collections etc)
The familiar development environment (eclipse) with Android plug-in (ADT) that does all routine work automatically. For example, it automatically generates classes from defined .aidl files. There are also built-in widgets (layout) editor, manifest file editor that allows editing it as raw XML data as by clicking to necessary buttons :)
Simple, clear for understanding documentation. To start developing something for Android it is enough to read the "Android fundamentals" article on developer.android.com.
There are supported all famous platforms: Windows, Linux, Mac OS X. For example, In iPhone I don't like the necessity for developing only on Mac OS.
Good Virtual devise with an ability to customize device features. There is a set of SDK tools to monitor/control the device - it is possible to view info about each running process, cause Garbage collector etc.

What I didn't like:

The virtual device is starting too slow. For example, iPhone emulator starts immediately with already loaded operation system. Like the "true" device, the Android starts with black screen of terminal :) The good news is that it is enough to start device at once and after work with it, eclipse connects automatically to this device each time. But not skilled developers often close virtual device window and each time have to wait until it starts :)
Virtual device works slowly sometimes
Sometimes eclipse don't allow to debug application, and it needs to restart it.

In general, developing for Android is an interesting and very promising direction.