Monday, December 26, 2011

SAMSUNG Galaxy S ICS Petition!

Some angry Samsung Galaxy S users have done petition to get Samsung to give the GS Android4.0 Ice Cream Sandwich, its already 8000+ signatures strong and growing:

http://change.org/petitions/wwwsamsungcom-distribution-of-ice-cream-sandwich-version-for-users-of-the-samsung-i9000

 Please sign it if you believe SAMSUNG made the wrong decision when leaving the Galaxy i900x devices out of their ICS update roadmap.

Monday, December 19, 2011

How to use the raw resource files in the native code


Russian translation. Pending...


As you know the Android application is packed to the ".apk" container and all resources of the application are there. But what if you want to use a resource file inside the native code? Sure, you may move it to the external card and do with it all what you want. But it seems to be a slightly clumsy way. Really, I want to treat a raw resource file as it was an ordinary file stream. What we have at start: java code able to open and work with raw data files. Here is the sample code:
    
    AssetFileDescriptor descriptor = context.getResources().
        openRawResourceFd(R.raw.rawFile);
    FileDescriptor fd = desc.getFileDescriptor();
Let's look at the documentation:

Instances of the file descriptor class serve as an opaque handle to the underlying machine-specific structure representing an open file, an open socket, or another source or sink of bytes.
So it is what we are looking for. Moreover from the "AssetFileDescriptor" we can get the length of the file and its offset in the "apk" file.
    long offset = descriptor.getStartOffset();
    long lenth = descriptor.getLength();
And, at last, how to get the real native file descriptor:
    try {
        Field field = fd.getClass().getDeclaredField("descriptor");
        field.setAccessible(true);
        nativeDescriptor = (Integer) field.get(fd);
    } catch (NoSuchFieldException e1) {
    } catch (IllegalArgumentException e) {
    } catch (IllegalAccessException e) {
    }
Again, let's look at the documentation about "raw" files:

Arbitrary files to save in their raw form
So, they are saved as is - without compression and we can read them. Now we may go to the native part with following entry data:

1. The native file descriptor of the "apk" file.
2. The Offset of the "raw" file.
3. The length of the "raw" file.

The base idea is to map this part of the "apk" file into a memory and use the "fmemopen" function to get the "FILE" structure. Android doesn't support the "fmemopen" function, but you can find its implementation here:

fmemopen.c

And at last:
    int desc = dup(fd);
    long pa_offset = off & ~(sysconf(_SC_PAGE_SIZE) - 1);

    void *mapped = mmap(NULL, len + off - pa_offset, PROT_READ,
   MAP_PRIVATE, desc, pa_offset);
    if (mapped == MAP_FAILED) {
        ... error handling...
    }

    FILE *memoFile = fmemopen((void*) (mapped + off - pa_offset), len, "r");
    if (memoFile == NULL){
        ... error handling...
    }
And don't forget to free resources...

Tuesday, December 13, 2011

Source code

The source code for all articles was moved to the Google Code. There are links for articles: 3D Carousel Demo:
3D Carousel


ImageView with SVG support:
SVG ImageView


All other articles are combined into one project:
Android.Tips


Links in articles are updated too.

Monday, December 5, 2011

Using a mask with EditText



Source Code

Русский перевод.


To continue the theme about formatting a text with regular expressions we will
implement a functionality for using a mask with the EditText control.

Sure we can use InputType, but it would be nice to have more flexible functionality.


To begin let's look at the MaskFormatter class of the Swing framework.
It has all what we need. So, let's make some changes in this class.
We leave inner classes as is. But the MaskFormatter class works with
the JFormattedTextField control. We must remove this appendix.
As a result we have something like this:
public class MaskedFormatter {
 
    // Potential values in mask.
    private static final char DIGIT_KEY = '#';
    private static final char LITERAL_KEY = '\'';
    private static final char UPPERCASE_KEY = 'U';
    private static final char LOWERCASE_KEY = 'L';
    private static final char ALPHA_NUMERIC_KEY = 'A';
    private static final char CHARACTER_KEY = '?';
    private static final char ANYTHING_KEY = '*';
    private static final char HEX_KEY = 'H';
    
    /** The user specified mask. */
    private String mask;    
    
    /** Indicates if the value contains the literal characters. */
    private boolean containsLiteralChars;
    
    private static final MaskCharacter[] EmptyMaskChars = 
           new MaskCharacter[0];

    /** List of valid characters. */
    private String validCharacters;
    
    /** List of invalid characters. */
    private String invalidCharacters;

    /** String used to represent characters not present. */
    private char placeholder;  
    
    /** String used for the passed in value if it does not completely
     * fill the mask. */
    private String placeholderString;    
    
    private transient MaskCharacter[] maskChars;
    
    
    /** Indicates if the value being edited must match the mask. */
    @SuppressWarnings("unused")
 private boolean allowsInvalid;
    
    
    /**
     * Creates a MaskFormatter with no mask.
     */
    public MaskedFormatter() {
        setAllowsInvalid(false);
        containsLiteralChars = true;
        maskChars = EmptyMaskChars;
        placeholder = ' ';
    }

    /**
     * Creates a MaskFormatter with the specified mask.
     * A ParseException
     * will be thrown if mask is an invalid mask.
     *
     * @throws ParseException if mask does not contain valid mask characters
     */
    public MaskedFormatter(String mask) throws ParseException {
        this();
        setMask(mask);
    }    
    
    /**
     * Sets the mask dictating the legal characters.
     * This will throw a ParseException if mask is
     * not valid.
     *
     * @throws ParseException if mask does not contain valid mask characters
     */
    public void setMask(String mask) throws ParseException {
        this.mask = mask;
        updateInternalMask();
    }
    
    /**
     * Returns the formatting mask.
     *
     * @return Mask dictating legal character values.
     */
    public String getMask() {
        return mask;
    }    
    
    /**
     * Updates the internal representation of the mask.
     */
    private void updateInternalMask() throws ParseException {
        String mask = getMask();
        ArrayList<MaskCharacter> fixed = new ArrayList<MaskCharacter>();
        ArrayList<MaskCharacter> temp = fixed;

        if (mask != null) {
            for (int counter = 0, maxCounter = mask.length();
                 counter < maxCounter; counter++) {
                char maskChar = mask.charAt(counter);

                switch (maskChar) {
                case DIGIT_KEY:
                    temp.add(new DigitMaskCharacter());
                    break;
                case LITERAL_KEY:
                    if (++counter < maxCounter) {
                        maskChar = mask.charAt(counter);
                        temp.add(new LiteralCharacter(maskChar));
                    }
                    // else: Could actually throw if else
                    break;
                case UPPERCASE_KEY:
                    temp.add(new UpperCaseCharacter());
                    break;
                case LOWERCASE_KEY:
                    temp.add(new LowerCaseCharacter());
                    break;
                case ALPHA_NUMERIC_KEY:
                    temp.add(new AlphaNumericCharacter());
                    break;
                case CHARACTER_KEY:
                    temp.add(new CharCharacter());
                    break;
                case ANYTHING_KEY:
                    temp.add(new MaskCharacter());
                    break;
                case HEX_KEY:
                    temp.add(new HexCharacter());
                    break;
                default:
                    temp.add(new LiteralCharacter(maskChar));
                    break;
                }
            }
        }
        if (fixed.size() == 0) {
            maskChars = EmptyMaskChars;
        }
        else {
            maskChars = new MaskCharacter[fixed.size()];
            fixed.toArray(maskChars);
        }
    }    
    
    
    /**
     * Sets whether or not the value being edited is allowed to be invalid
     * for a length of time (that is, stringToValue throws
     * a ParseException).
     * It is often convenient to allow the user to temporarily input an
     * invalid value.
     *
     * @param allowsInvalid Used to indicate if the edited value must always
     *        be valid
     */
    public void setAllowsInvalid(boolean allowsInvalid) {
        this.allowsInvalid = allowsInvalid;
    }    


    /**
     * Allows for further restricting of the characters that can be input.
     * Only characters specified in the mask, not in the
     * invalidCharacters, and in
     * validCharacters will be allowed to be input. Passing
     * in null (the default) implies the valid characters are only bound
     * by the mask and the invalid characters.
     *
     * @param validCharacters If non-null, specifies legal characters.
     */
    public void setValidCharacters(String validCharacters) {
        this.validCharacters = validCharacters;
    }

    /**
     * Returns the valid characters that can be input.
     *
     * @return Legal characters
     */
    public String getValidCharacters() {
        return validCharacters;
    }
 
    /**
     * Allows for further restricting of the characters that can be input.
     * Only characters specified in the mask, not in the
     * invalidCharacters, and in
     * validCharacters will be allowed to be input. Passing
     * in null (the default) implies the valid characters are only bound
     * by the mask and the valid characters.
     *
     * @param invalidCharacters If non-null, specifies illegal characters.
     */
    public void setInvalidCharacters(String invalidCharacters) {
        this.invalidCharacters = invalidCharacters;
    }

    /**
     * Returns the characters that are not valid for input.
     *
     * @return illegal characters.
     */
    public String getInvalidCharacters() {
        return invalidCharacters;
    }    
    
    /**
     * If true, the returned value and set value will also contain the literal
     * characters in mask.
     * 
     * For example, if the mask is '(###) ###-####', the
     * current value is '(415) 555-1212', and
     * valueContainsLiteralCharacters is
     * true stringToValue will return
     * '(415) 555-1212'. On the other hand, if
     * valueContainsLiteralCharacters is false,
     * stringToValue will return '4155551212'.
     *
     * @param containsLiteralChars Used to indicate if literal characters in
     *        mask should be returned in stringToValue
     */
    public void setValueContainsLiteralCharacters(
                        boolean containsLiteralChars) {
        this.containsLiteralChars = containsLiteralChars;
    }

    /**
     * Returns true if stringToValue should return literal
     * characters in the mask.
     *
     * @return True if literal characters in mask should be returned in
     *         stringToValue
     */
    public boolean getValueContainsLiteralCharacters() {
        return containsLiteralChars;
    }    
    
    /**
     * Sets the character to use in place of characters that are not present
     * in the value, ie the user must fill them in. The default value is
     * a space.
     * 
     * This is only applicable if the placeholder string has not been
     * specified, or does not completely fill in the mask.
     *
     * @param placeholder Character used when formatting if the value does not
     *        completely fill the mask
     */
    public void setPlaceholderCharacter(char placeholder) {
        this.placeholder = placeholder;
    }

    /**
     * Returns the character to use in place of characters that are not present
     * in the value, ie the user must fill them in.
     *
     * @return Character used when formatting if the value does not
     *        completely fill the mask
     */
    public char getPlaceholderCharacter() {
        return placeholder;
    }
    
    /**
     * Sets the string to use if the value does not completely fill in
     * the mask. A null value implies the placeholder char should be used.
     *
     * @param placeholder String used when formatting if the value does not
     *        completely fill the mask
     */
    public void setPlaceholder(String placeholder) {
        this.placeholderString = placeholder;
    }

    /**
     * Returns the String to use if the value does not completely fill
     * in the mask.
     *
     * @return String used when formatting if the value does not
     *        completely fill the mask
     */
    public String getPlaceholder() {
        return placeholderString;
    }    
    /**
     * Returns a String representation of the Object value
     * based on the mask.  Refer to
     * {@link #setValueContainsLiteralCharacters} for details
     * on how literals are treated.
     *
     * @throws ParseException if there is an error in the conversion
     * @param value Value to convert
     * @see #setValueContainsLiteralCharacters
     * @return String representation of value
     */
    public String valueToString(Object value) throws ParseException {
        String sValue = (value == null) ? "" : value.toString();
        StringBuilder result = new StringBuilder();
        String placeholder = getPlaceholder();
        int[] valueCounter = { 0 };

        append(result, sValue, valueCounter, placeholder, maskChars);
        return result.toString();
    }    
    
    /**
     * Invokes append on the mask characters in
     * mask.
     */
    private void append(StringBuilder result, String value, int[] index,
                        String placeholder, MaskCharacter[] mask)
                          throws ParseException {
        for (int counter = 0, maxCounter = mask.length;
             counter < maxCounter; counter++) {
            mask[counter].append(result, value, index, placeholder);
        }
    }    



And to simplify the life we will create a TextWatcher class to work with the formatter:
 public class MaskedWatcher implements TextWatcher {
 
 private String mMask;
 String mResult = ""; 
 
 public MaskedWatcher(String mask){
  mMask = mask;
 }

 @Override
 public void afterTextChanged(Editable s) {
  
  String mask = mMask;
  String value = s.toString();
  
  if(value.equals(mResult))
   return;

  try {
   
   // prepare the formatter
   MaskedFormatter formatter = new MaskedFormatter(mask);
   formatter.setValueContainsLiteralCharacters(false);
   formatter.setPlaceholderCharacter((char)1);
   
   // get a string with applied mask and placeholder chars
   value = formatter.valueToString(value);
   
   try{
    
    // find first placeholder
    value = value.substring(0, value.indexOf((char)1));

    //process a mask char
    if(value.charAt(value.length()-1) == 
                                      mask.charAt(value.length()-1)){
     value = value.substring(0, value.length() - 1);
    }
    
   }
   catch(Exception e){}
   
   mResult = value;
   
   s.replace(0, s.length(), value);
   
   
  } catch (ParseException e) {
   
   //the entered value does not match a mask
   int offset = e.getErrorOffset();
   value = removeCharAt(value, offset);
   s.replace(0, s.length(), value);
   
  }
  
  
 }

 @Override
 public void beforeTextChanged(CharSequence s, int start, int count,
   int after) {
 }

 @Override
 public void onTextChanged(CharSequence s, int start, 
             int before, int count) {
 }

 public static String removeCharAt(String s, int pos) {

  StringBuffer buffer = new StringBuffer(s.length() - 1);
  buffer.append(s.substring(0, pos)).append(s.substring(pos + 1));
  return buffer.toString();

 } 
 
}


And now we can work with masks:
        EditText phone = (EditText)findViewById(R.id.phone);
        phone.addTextChangedListener(
          new MaskedWatcher("(###) ###-##-##")
        )





Wednesday, November 30, 2011

Android 3D Carousel bug. Android 3.0+

In the "CarouselItem" class there is the "getMatrix" method. But since API level 11 there is such method in View class. Just rename this method to something else in CarouselItem class and in the "pointToPosition" method of the "CarouselSpinner" class.

In the near future I will update the source code.

Thanks

ARM released Development Studio CE

ARM has released a new Development Studio Community Edition. The tools work alongside the existing Android Native Development Kit (NDK), and allow low-level access to the processor in ARM devices — crucial to creating high-performance applications on any platform. Ultimately, this means that apps can be written in native code (C or C++)...

It's cool. It's worth a try...

Friday, November 18, 2011

Formatting EditText input with regular expressions.

Source Code

Русский перевод.


It will be the short article. Now we will format text in EditText with regular expressions.

The simple class will extend Input Filter:

public class PartialRegexInputFilter implements InputFilter {
 
    private Pattern mPattern;
 
    public PartialRegexInputFilter(String pattern){
      mPattern = Pattern.compile(pattern);
    } 

    @Override
    public CharSequence filter(CharSequence source,
            int sourceStart, int sourceEnd,
            Spanned destination, int destinationStart,
            int destinationEnd) 
    {  
        String textToCheck = destination.subSequence(0, destinationStart).
            toString() + source.subSequence(sourceStart, sourceEnd) +
            destination.subSequence(
            destinationEnd, destination.length()).toString();
  
        Matcher matcher = mPattern.matcher(textToCheck);
  
        // Entered text does not match the pattern
        if(!matcher.matches()){
   
            // It does not match partially too
             if(!matcher.hitEnd()){
                 return "";
             }
   
        }
  
        return null;
    }

}


The trick is that if the input text does not match the pattern it can match it partially.
If so we will allow the text pasting.

And finally formatting a phone number:

final String regex = "\\(\\d{3}\\)\\d{3}\\-\\d{2}\\-\\d{2}";
        
txt.setFilters(
    new InputFilter[] {
        new PartialRegexInputFilter(regex)
    }
);
        
txt.addTextChangedListener(
    new TextWatcher(){

            @Override
            public void afterTextChanged(Editable s) {
                String value  = s.toString();
                if(value.matches(regex))
                    txt.setTextColor(Color.BLACK);
                else
                    txt.setTextColor(Color.RED);
            }

            @Override
            public void beforeTextChanged(CharSequence s, int start,
                int count, int after) {}

            @Override
            public void onTextChanged(CharSequence s, int start,
               int before, int count) {}
           
         }
);
        



We have:




Tuesday, November 8, 2011

Two activities on the screen at the same time

Source code

Русский перевод.


Perhaps you've seen that some applications such as winamp, gimp and so on have several separated windows. It was interesting if it's possible to implement such a functionality on Android. Sure it could be done just with layouts, but we are not looking for easy ways.

First, let's define styles:

<style name="Theme.Transparent" parent="android:Theme">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>

    <style name="Theme.Transparent.Floating">
        <item name="android:windowIsFloating">true</item>
    </style>

The "Theme.Transparent" style is like one we used for the splash screen but lacks "windowIsFloating" item. Due to this the first activity will fill the screen. And for the second activity there is "Theme.Transparent.Floating" style. So this activity won't fill the screen and our touches will be available for the first onу. No. By default activities are modal. And touches won't be available. We must do such workaround:

getWindow().setFlags(
       WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL,
       WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL);
   

Ok, now we see the screen of the device, two activities and first activity is available behind the scene.
But there is one thing to do: communication between these activities. In normal workflow we use
startActivityForResult. But it's not applicable in this case. The simplest way to make them know one of another - to broadcast custom action:

mReceiver = new BroadcastReceiver() {

   @Override
   public void onReceive(Context context, Intent intent) {
    
         // The first activity wants to close this one
         String operation = intent.getStringExtra("operation");
         if(operation.equals("hide"))
           finish();
    
         }

   };



And as a result:




Maybe it will be usefull for something.


Thursday, November 3, 2011

Android. iPhone-style dialog. XML – only.

Source Code

Русский перевод


As the next exercise I will show how to implement the dialog that looks like iPhone alert view. No pictures will be used. We will use only XML.

Really it’s simple. First, let’s define xml-drawable for the button:


<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
<shape android:shape="rectangle" >

            <corners android:radius="8dip" />

            <gradient
                android:angle="270"
                android:endColor="#FF440000"
                android:startColor="#FF990000"
                android:type="linear" />
        </shape></item>

    <item android:top="20dip">
<shape android:shape="rectangle" >

            <corners
                android:bottomLeftRadius="8dp"
                android:bottomRightRadius="8dp" />

            <solid android:color="#40000000" />
        </shape></item>

</layer-list>


Here we have two layers. The first layer – the rectangle with the gradient. The second layer – the rectangle shifted 20 dip top. This layer should overlap the half of the first one. So, real button should be 40 dip high.

Second, we’ll define the content of the dialog – the header, the text view for a message and the OK button:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal|center_vertical"
    android:orientation="vertical" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/alert_wrapper"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dip"
        android:layout_marginRight="20dip"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/dialog_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dip"
            android:text="Header container"
            android:textColor="#ffffff"
            android:textSize="17dip"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/dialog_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dip"
            android:gravity="center_horizontal"
            android:maxLines="5"
            android:scrollbars="vertical"
            android:text="Text container"
            android:textColor="#ffffff"
            android:textSize="15dip" />

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dip"
            android:layout_marginTop="10dip"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/ok"
                android:layout_width="fill_parent"
                android:layout_height="40dip"
                android:layout_marginBottom="10dip"
                android:layout_marginLeft="10dip"
                android:layout_marginRight="10dip"
                android:background="@drawable/iphone_style_button"
                android:text="@string/ok"
                android:textColor="@color/White"
                android:textSize="17dip"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>


And at last the background for the dialog will be defined in a code. We will need a drawable with three layers for this – a rectangle shape with white border, a rectangle shape with main color and a rectangle shape that will contain a gloss effect.
To make the white border visible under the first layer we’ll set insets for this layer:



// Layers array
  Drawable[] arr = new Drawable[3];

  float roundedCorner[] = new float[] { 8, 8, 8, 8, 8, 8, 8, 8 };

  // First layer - to make a border
  GradientDrawable first = new GradientDrawable();
  first.setShape(GradientDrawable.RECTANGLE);
  first.setCornerRadii(roundedCorner);
  first.setStroke(2, Color.WHITE);

  // Second layer - background
  GradientDrawable second = new GradientDrawable();
  second.setShape(GradientDrawable.RECTANGLE);
  second.setCornerRadii(roundedCorner);
  second.setColor(Color.argb(255, 127, 0, 0));

  // Third layer - for the gloss effect
  GlossDrawable third = new GlossDrawable();

  arr[0] = first;
  arr[1] = second;
  arr[2] = third;

  LayerDrawable background = new LayerDrawable(arr);





The more complicated stuff is in the GlossDrawable class. There we will override onDraw method to calculate where the gloss gradient will be.

The picture describing calculations:



Using the Pythagoras' theorem we have sides of the inscribed triangle:

Then using Heron’s formula we’ll find the area of the inscribed triangle:



And at last the radius:


Now we should draw the circle slightly lower (1/8 of the shape height). The center of the circle will be:


int centerX = (int) shape.getWidth() / 2;
  int centerY = (int) (-radius + shape.getHeight() / 2);


The rectangle to draw the circle will be:

RectF rectf = new RectF(shape.getWidth() / 2 - radius,  
  shape.getHeight() / 4 - radius * 2, 
  shape.getWidth() / 2 + radius, shape.getHeight() / 4);

Applying the gradient we have:



Use the same technique to make info and confirm dialogs. All you need is to change the background color and the content layout.

Cheerio!

Tuesday, November 1, 2011

Android 3D Carousel



Source Code

Русский перевод.


This my article was originally published on The Code Project web site. You can see it at 
Codeproject.

Introduction

For a while, I was looking for a 3D carousel control for Android platform. The only one I found was UltimateFaves at [1]. But as it turned out, it uses OpenGL. And it’s not open source. I thought if it is possible to avoid a use of OpenGL. Continuing my investigations, I stamped on Coverflow Widget at [2]. And it uses standard Android 2D libraries. So the idea was the same – to use Gallery class for the carousel. The Coverflow Widget just rotates images and I wanted to rotate all group of them. Well, at least it implies the use of simple trig methods. More complicated stuff goes with the Gallery class. If you’d look through the article about Coverflow Widget at [3], you’d see a bunch of problems, such as unavailability of default scope variables in AbsSpinner and AdapterView classes. So I went the same way and rewrote some classes. And the Scroller class will be replaced by the Rotator class which looks like Scroller but it rotates the group of images.

The Preparations

At first, we should decide what parameters will define a behavior of our Carousel. For example, a min quantity of items in the carousel. It will not look nice if it has only one or two items, won’t it? As for performance issue, we have to define max quantity of items. Also, we will need max theta angle for the carousel, what items will be in there, current selected item and if items will be reflected. So let’s define them in attrs.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="Carousel">
  <attr name="android:gravity" /> 
  <attr name="android:animationDuration" />
  <attr name="UseReflection" format="boolean"/>
  <attr name="Items" format="integer"/>
  <attr name="SelectedItem" format="integer"/>
  <attr name="maxTheta" format="float"/>
  <attr name="minQuantity" format="integer"/>
  <attr name="maxQuantity" format="integer"/>
 </declare-styleable> 
</resources>
 

The Carousel Item Class

To simplify some stuff with carousel, I’ve created CarouselItem:

public class CarouselItem extends FrameLayout 
 implements Comparable<CarouselItem> {
 
 private ImageView mImage;
 private TextView mText;
 
 private int index;
 private float currentAngle;
 private float x;
 private float y;
 private float z;
 private boolean drawn; 

 // It's needed to find screen coordinates
 private Matrix mMatrix;
 
 public CarouselItem(Context context) {
  
  super(context);
  
  FrameLayout.LayoutParams params = 
    new FrameLayout.LayoutParams(
      LayoutParams.WRAP_CONTENT, 
      LayoutParams.WRAP_CONTENT);
  
  this.setLayoutParams(params);
  
    LayoutInflater inflater = LayoutInflater.from(context);
  View itemTemplate = inflater.inflate(R.layout.item, this, true);
    
  mImage = (ImageView)itemTemplate.findViewById(R.id.item_image);
  mText = (TextView)itemTemplate.findViewById(R.id.item_text);
    
 } 
 
 public String getName(){
  return mText.getText().toString();
 } 
 
 public void setIndex(int index) {
  this.index = index;
 }

 public int getIndex() {
  return index;
 }
 

 public void setCurrentAngle(float currentAngle) {
  
  if(index == 0 && currentAngle > 5){
   Log.d("", "");
  }
  
  this.currentAngle = currentAngle;
 }

 public float getCurrentAngle() {
  return currentAngle;
 }

 public int compareTo(CarouselItem another) {
  return (int)(another.z - this.z);
 }

 …
}
 

It incapsulates the position in 3D space, the index of an item and the current angle of an item. Also implementing it as Comparable will be helpful when we’ll determine a draw order of the items.

The Rotator Class

If you’d look at the source code of Scroller class, you’ll see two modes: the scroll mode and the fling mode supposed just to calculate current offset from the given start point. We’ll just need to remove extra members, add our own and replace the corresponding calculations:

public class Rotator {
    private int mMode;
    private float mStartAngle;
    private float mCurrAngle;
    
    private long mStartTime;
    private long mDuration;
    
    private float mDeltaAngle;
    
    private boolean mFinished;

    private float mCoeffVelocity = 0.05f;
    private float mVelocity;
    
    private static final int DEFAULT_DURATION = 250;
    private static final int SCROLL_MODE = 0;
    private static final int FLING_MODE = 1;
    
    private final float mDeceleration = 240.0f;
    
    
    /**
     * Create a Scroller with the specified interpolator. 
     * If the interpolator is null, the default (viscous)
     *  interpolator will be used.
     */
    public Rotator(Context context) {
        mFinished = true;
    }
    
    /**
     * 
     * Returns whether the scroller has finished scrolling.
     * 
     * @return True if the scroller has finished scrolling, 
     * false otherwise.
     */
    public final boolean isFinished() {
        return mFinished;
    }
    
    /**
     * Force the finished field to a particular value.
     *  
     * @param finished The new finished value.
     */
    public final void forceFinished(boolean finished) {
        mFinished = finished;
    }
    
    /**
     * Returns how long the scroll event will take, in milliseconds.
     * 
     * @return The duration of the scroll in milliseconds.
     */
    public final long getDuration() {
        return mDuration;
    }
    
    /**
     * Returns the current X offset in the scroll. 
     * 
     * @return The new X offset as an absolute distance from the origin.
     */
    public final float getCurrAngle() {
        return mCurrAngle;
    }   
    
    /**
     * @hide
     * Returns the current velocity.
     *
     * @return The original velocity less the deceleration. 
     * Result may be negative.
     */
    public float getCurrVelocity() {
        return mCoeffVelocity * mVelocity - mDeceleration 
             * timePassed() /* / 2000.0f*/;
    }

    /**
     * Returns the start X offset in the scroll. 
     * 
     * @return The start X offset as an absolute distance from the origin.
     */
    public final float getStartAngle() {
        return mStartAngle;
    }           
    
    /**
     * Returns the time elapsed since the beginning of the scrolling.
     *
     * @return The elapsed time in milliseconds.
     */
    public int timePassed() {
        return (int)(AnimationUtils.currentAnimationTimeMillis() - 
              mStartTime);
    }
    
    /**
     * Extend the scroll animation. This allows 
     * a running animation to scroll further and longer,
     *  when used with {@link #setFinalX(int)}  
     * or {@link #setFinalY(int)}.
     *
     * @param extend Additional time to scroll in milliseconds.
     * @see #setFinalX(int)
     * @see #setFinalY(int)
     */
    public void extendDuration(int extend) {
        int passed = timePassed();
        mDuration = passed + extend;
        mFinished = false;
    }
    
    /**
     * Stops the animation. Contrary to {@link #forceFinished(boolean)},
     * aborting the animating cause the scroller to 
     * move to the final x and y position
     *
     * @see #forceFinished(boolean)
     */
    public void abortAnimation() {
        mFinished = true;
    }        

    /**
     * Call this when you want to know the new location.  
     * If it returns true, the animation is not yet finished.  
     * loc will be altered to provide the
     * new location.
     */ 
    public boolean computeAngleOffset()
    {
        if (mFinished) {
            return false;
        }
        
        long systemClock = AnimationUtils.currentAnimationTimeMillis();
        long timePassed = systemClock - mStartTime;
        
        if (timePassed < mDuration) {
         switch (mMode) {
          case SCROLL_MODE:

           float sc = (float)timePassed / mDuration;
                     mCurrAngle = mStartAngle + 
                      Math.round(mDeltaAngle * sc);    
                    break;
                    
           case FLING_MODE:

           float timePassedSeconds = timePassed / 1000.0f;
           float distance;

           if(mVelocity < 0)
           {
                     distance = mCoeffVelocity * 
                        mVelocity * timePassedSeconds - 
                         (mDeceleration * timePassedSeconds * 
                           timePassedSeconds / 2.0f);
           }
           else{
                     distance = -mCoeffVelocity * mVelocity * 
                        timePassedSeconds - (mDeceleration * 
                         timePassedSeconds * timePassedSeconds / 2.0f);
           }

                    mCurrAngle = mStartAngle - Math.signum(mVelocity)*
                        Math.round(distance);
                    
                    break;                    
         }
            return true;
        }
        else
        {
         mFinished = true;
         return false;
        }
    }    
    
    /**
     * Start scrolling by providing a starting point 
     * and the distance to travel.
     * 
     * @param startX Starting horizontal scroll 
     *  offset in pixels. Positive numbers will 
     *  scroll the content to the left.
     * @param startY Starting vertical scroll 
     *    offset in pixels. Positive numbers
     *    will scroll the content up.
     * @param dx Horizontal distance to travel. 
     *  Positive numbers will scroll the
     *  content to the left.
     * @param dy Vertical distance to travel. 
     * Positive numbers will scroll the content up.
     * @param duration Duration of the scroll 
     * in milliseconds.
     */
    public void startRotate(float startAngle, float dAngle, int duration) {
        mMode = SCROLL_MODE;
        mFinished = false;
        mDuration = duration;
        mStartTime = AnimationUtils.currentAnimationTimeMillis();
        mStartAngle = startAngle;
        mDeltaAngle = dAngle;
    }    
    
    /**
     * Start scrolling by providing a starting point and the 
     * distance to travel. The scroll will use the default 
     * value of 250 milliseconds for the duration.
     * 
     * @param startX Starting horizontal scroll 
     *  offset in pixels. Positive numbers will 
     *  scroll the content to the left.
     * @param startY Starting vertical scroll 
     *    offset in pixels. Positive numbers
     *    will scroll the content up.
     * @param dx Horizontal distance to travel. 
     *  Positive numbers will scroll the
     *  content to the left.
     * @param dy Vertical distance to travel. 
     * Positive numbers will scroll the content up.
     */
    public void startRotate(float startAngle, float dAngle) {
        startRotate(startAngle, dAngle, DEFAULT_DURATION);
    }
        
    /**
     * Start scrolling based on a fling gesture. 
     * The distance travelled will
     * depend on the initial velocity of the fling.
     * 
     * @param velocityAngle Initial velocity of the fling (X) 
     * measured in pixels per second.
     */
    public void fling(float velocityAngle) {
     
        mMode = FLING_MODE;
        mFinished = false;

        float velocity = velocityAngle;
     
        mVelocity = velocity;
        mDuration = (int)(1000.0f * Math.sqrt(2.0f * mCoeffVelocity * 
          Math.abs(velocity)/mDeceleration));
        
        mStartTime = AnimationUtils.currentAnimationTimeMillis();        
    }
}
 

The CarouselSpinner Differences with the AbsSpinner

First, it extends CarouselAdapter vs AdapterView. Those differences I’ll describe later. Second, the modified constructor where the retrieving of AbsSpinner entries were removed. The third difference is modified setSelection(int) method. It was just call to setSelectionInt left. The next change is unavailable variables were replaced with their getters. As for default generated layout parameters, both were set to WRAP_CONTENT. The main changes concern pointToPosition method. In AbsSpinner, it determines if definite item was touched on a screen no matter whether it’s current or not. So, we beed to make the projection from 3D space to screen coordinates:

public int pointToPosition(int x, int y) {     

     ArrayList<CarouselItem> fitting = new ArrayList<CarouselItem>();
     
     for(int i = 0; i < mAdapter.getCount(); i++){

      CarouselItem item = (CarouselItem)getChildAt(i);

      Matrix mm = item.getMatrix();
      float[] pts = new float[3];
      
      pts[0] = item.getLeft();
      pts[1] = item.getTop();
      pts[2] = 0;
      
      mm.mapPoints(pts);
      
      int mappedLeft = (int)pts[0];
      int mappedTop =  (int)pts[1];
            
      pts[0] = item.getRight();
      pts[1] = item.getBottom();
      pts[2] = 0;
      
      mm.mapPoints(pts);

      int mappedRight = (int)pts[0];
      int mappedBottom = (int)pts[1];
      
      if(mappedLeft < x && mappedRight > x & 
            mappedTop < y && mappedBottom > y)
       fitting.add(item);
      
     }
     
     Collections.sort(fitting);
     
     if(fitting.size() != 0)
      return fitting.get(0).getIndex();
     else
      return mSelectedPosition;
    }
 

The CarouselAdapter vs. AdapterView

The only changes are in updateEmptyStatus method where unavailable variables were replaced with their getters.

The Carousel Class

Here FlingRunnable class was replaced with FlingRotateRunnable which is much like FlingRunnable but makes deal with angle vs. x-coordinate:

private class FlingRotateRunnable implements Runnable {

        /**
         * Tracks the decay of a fling rotation
         */  
  private Rotator mRotator;

  /**
         * Angle value reported by mRotator on the previous fling
         */
        private float mLastFlingAngle;
        
        /**
         * Constructor
         */
        public FlingRotateRunnable(){
         mRotator = new Rotator(getContext());
        }
        
        private void startCommon() {
            // Remove any pending flings
            removeCallbacks(this);
        }
        
        public void startUsingVelocity(float initialVelocity) {
            if (initialVelocity == 0) return;
            
            startCommon();
                        
            mLastFlingAngle = 0.0f;
            
            mRotator.fling(initialVelocity);
                        
            post(this);
        }               
        
        public void startUsingDistance(float deltaAngle) {
            if (deltaAngle == 0) return;
            
            startCommon();
            
            mLastFlingAngle = 0;
            synchronized(this)
            {
             mRotator.startRotate(0.0f, -deltaAngle, mAnimationDuration);
            }
            post(this);
        }
        
        public void stop(boolean scrollIntoSlots) {
            removeCallbacks(this);
            endFling(scrollIntoSlots);
        }        
        
        private void endFling(boolean scrollIntoSlots) {
            /*
             * Force the scroller's status to finished 
               (without setting its position to the end)
             */
         synchronized(this){
          mRotator.forceFinished(true);
         }
            
            if (scrollIntoSlots) scrollIntoSlots();
        }
                  
  public void run() {
            if (Carousel.this.getChildCount() == 0) {
                endFling(true);
                return;
            }   
            
            mShouldStopFling = false;
            
            final Rotator rotator;
            final float angle;
            boolean more;
            synchronized(this){
             rotator = mRotator;
             more = rotator.computeAngleOffset();
             angle = rotator.getCurrAngle();             
            }            
         
            // Flip sign to convert finger direction to 
            // list items direction (e.g. finger moving down 
            // means list is moving towards the top)
            float delta = mLastFlingAngle - angle;                        
            
            //////// Should be reworked
            trackMotionScroll(delta);
            
            if (more && !mShouldStopFling) {
                mLastFlingAngle = angle;
                post(this);
            } else {
                mLastFlingAngle = 0.0f;
                endFling(true);
            }              
 }  
}
 
I also added ImageAdapter class as it is in Coverflow Widget with a possibility to add a reflection to the images. And some new private variables were added to support Y-axe angle, reflection and so on. The constructor retrieves list of images, creates ImageAdapter and sets it. The main thing in the constructor is setting the object to support static transformations. And to place images into their places:

/**
  * Setting up images
  */
 void layout(int delta, boolean animate){
          
        if (mDataChanged) {
            handleDataChanged();
        }
        
        // Handle an empty gallery by removing all views.
        if (this.getCount() == 0) {
            resetList();
            return;
        }
        
        // Update to the new selected position.
        if (mNextSelectedPosition >= 0) {
            setSelectedPositionInt(mNextSelectedPosition);
        }        
        
        // All views go in recycler while we are in layout
        recycleAllViews();        
        
        // Clear out old views
        detachAllViewsFromParent();
        
        
        int count = getAdapter().getCount();
        float angleUnit = 360.0f / count;

        float angleOffset = mSelectedPosition * angleUnit;
        for(int i = 0; i< getAdapter().getCount(); i++){
         float angle = angleUnit * i - angleOffset;
         if(angle < 0.0f)
          angle = 360.0f + angle;
            makeAndAddView(i, angle);         
        }

        // Flush any cached views that did not get reused above
        mRecycler.clear();

        invalidate();

        setNextSelectedPositionInt(mSelectedPosition);
        
        checkSelectionChanged();
        
        ////////mDataChanged = false;
        mNeedSync = false;
        
        updateSelectedItemMetadata();
        }
 

Here are the methods to set up images. The height of an image is set
three times lesser than parent height to make the carousel fit parent
view. It should be reworked later.

private void makeAndAddView(int position, float angleOffset) {
        CarouselItem child;
  
        if (!mDataChanged) {
            child = (CarouselItem)mRecycler.get(position);
            if (child != null) {

                // Position the view
                setUpChild(child, child.getIndex(), angleOffset);
            }
            else
            {
                // Nothing found in the recycler -- 
                // ask the adapter for a view
                child = (CarouselItem)mAdapter.
                        getView(position, null, this);

                // Position the view
                setUpChild(child, 
                    child.getIndex(), angleOffset);             
            }
            return;
        }

        // Nothing found in the recycler -- 
        // ask the adapter for a view
        child = (CarouselItem)mAdapter.
                   getView(position, null, this);

        // Position the view
        setUpChild(child, 
                child.getIndex(), angleOffset);

    }      
      

    private void setUpChild(CarouselItem child, 
             int index, float angleOffset) {
                
     // Ignore any layout parameters for child, 
     // use wrap content
        addViewInLayout(child, -1 /*index*/, 
            generateDefaultLayoutParams());

        child.setSelected(index == mSelectedPosition);
        
        int h;
        int w;
        int d;
        
        if(mInLayout)
        {
            w = child.getMeasuredWidth();
            h = child.getMeasuredHeight();
            d = getMeasuredWidth();
         
        }
        else
        {
            w = child.getMeasuredWidth();
            h = child.getMeasuredHeight();
            d = getWidth();
         
        }
        
        child.setCurrentAngle(angleOffset);
        
        // Measure child
        child.measure(w, h);
        
        int childLeft;
        
        // Position vertically based on gravity setting
        int childTop = calculateTop(child, true);
        
        childLeft = 0;

        child.layout(childLeft, childTop, w, h);
        
        Calculate3DPosition(child, d, angleOffset);
        
    } 


Let’s look at trackMotionScroll method in the Gallery class, it’s called when the widget is being scrolled or flinged and does the necessary stuff for the Gallary animation. But it moves images just by x-coordinate. To make them rotate in 3D space, we must create different functionality. We just change the current angle of an image and calculate it’s position in 3D space:

void trackMotionScroll(float deltaAngle) {
    
        if (getChildCount() == 0) {
            return;
        }
                
        for(int i = 0; i < getAdapter().getCount(); i++){
         CarouselItem child = (CarouselItem)getAdapter().
                      getView(i, null, null);
         float angle = child.getCurrentAngle();
         angle += deltaAngle;
         while(angle > 360.0f)
          angle -= 360.0f;
         while(angle < 0.0f)
          angle += 360.0f;
         child.setCurrentAngle(angle);
            Calculate3DPosition(child, getWidth(), angle);         
        }
        
        // Clear unused views
        mRecycler.clear();        
        
        invalidate();
    }  
 
And after images were flinged or scrolled, we have to place them into the corresponding places:
/**
     * Brings an item with nearest to 0 degrees angle to 
     * this angle and sets it selected 
     */
    private void scrollIntoSlots(){
     
     // Nothing to do
        if (getChildCount() == 0 || mSelectedChild == null) return;
        
        // get nearest item to the 0 degrees angle
        // Sort itmes and get nearest angle
     float angle; 
     int position;
     
     ArrayList<CarouselItem> arr = new ArrayList<CarouselItem>();
     
        for(int i = 0; i < getAdapter().getCount(); i++)
         arr.add(((CarouselItem)getAdapter().getView(i, null, null)));
        
        Collections.sort(arr, new Comparator<CarouselItem>(){
           @Override
             public int compare(CarouselItem c1, CarouselItem c2) {
            int a1 = (int)c1.getCurrentAngle();
            if(a1 > 180)
             a1 = 360 - a1;
            int a2 = (int)c2.getCurrentAngle();
            if(a2 > 180)
             a2 = 360 - a2;
            return (a1 - a2) ;
           }
         
        });
        
        
        angle = arr.get(0).getCurrentAngle();
                
        // Make it minimum to rotate
     if(angle > 180.0f)
      angle = -(360.0f - angle);
     
        // Start rotation if needed
        if(angle != 0.0f)
        {
         mFlingRunnable.startUsingDistance(-angle);
        }
        else
        {
            // Set selected position
            position = arr.get(0).getIndex();
            setSelectedPositionInt(position);
         onFinishedMovement();
        }

        
    }
 
And to scroll to the definite item:
void scrollToChild(int i){  
  
  CarouselItem view = (CarouselItem)getAdapter().
                  getView(i, null, null);
  float angle = view.getCurrentAngle();
  
  if(angle == 0)
   return;
  
  if(angle > 180.0f)
   angle = 360.0f - angle;
  else
   angle = -angle;

             mFlingRunnable.startUsingDistance(angle);

  
 }
 
Here’s the Calculate3DPosition method:
private void Calculate3DPosition(CarouselItem child, int diameter, 
        float angleOffset){
     
     angleOffset = angleOffset * (float)(Math.PI/180.0f);     
     
     float x = - (float)(diameter/2  * Math.sin(angleOffset)) + 
              diameter/2 - child.getWidth()/2;
     float z = diameter/2 * (1.0f - (float)Math.cos(angleOffset));
     float y = - getHeight()/2 + (float) (z * Math.sin(mTheta));
     
     child.setX(x);
     child.setZ(z);
     child.setY(y);
     
    }

Some methods that don’t have a sense with 3D gallery were removed: offsetChildrenLeftAndRight, detachOffScreenChildren, setSelectionToCenterChild, fillToGalleryLeft, fillToGalleryRight. So, the main thing that happens with images is in getChildStaticTransformation method, where they are transformed in 3D space. It just takes a ready to use position from CarouselImage class that was calculated by Calculate3DPosition while flinging/scrolling and moves an image there:
protected boolean getChildStaticTransformation
 (View child, Transformation transformation) {

 transformation.clear();
 transformation.setTransformationType(Transformation.TYPE_MATRIX);
  
 // Center of the item
 float centerX = (float)child.getWidth()/2, 
    centerY = (float)child.getHeight()/2;
  
 // Save camera
 mCamera.save();
  
 // Translate the item to it's coordinates
 final Matrix matrix = transformation.getMatrix();
 mCamera.translate(((CarouselImageView)child).getX(), 
    ((CarouselImageView)child).getY(), 
    ((CarouselImageView)child).getZ());
  
 // Align the item
 mCamera.getMatrix(matrix);
 matrix.preTranslate(-centerX, -centerY);
 matrix.postTranslate(centerX, centerY);
  
 // Restore camera
 mCamera.restore();  
  
 return true;
}    
 
One thing to know is that if you will just rotate images and position them in 3D space, they can overlap each other in the wrong order. For example, an image with 100.0 z-coordinate can be drawn in front of image with 50.0 z-coordinate. To resolve this trouble, we can override getChildDrawingOrder:
protected int getChildDrawingOrder(int childCount, int i) {

     // Sort Carousel items by z coordinate in reverse order
     ArrayList<CarouselItem> sl = new ArrayList<CarouselItem>();
     for(int j = 0; j < childCount; j++)
     {
      CarouselItem view = (CarouselItem)getAdapter().getView(j,null, null);
      if(i == 0)
       view.setDrawn(false);
      sl.add((CarouselItem)getAdapter().getView(j,null, null));
     }

     Collections.sort(sl);
     
     // Get first undrawn item in array and get result index
     int idx = 0;
     
     for(CarouselItem civ : sl)
     {
      if(!civ.isDrawn())
      {
       civ.setDrawn(true);
       idx = civ.getIndex();
       break;
      }
     }
     
     return idx;

    }
 
Ok, it still has a lot to do, like bugs catching and optimization. I didn’t yet test all the functionality, but in the first approximation, it works. Icons were taken from here: [4]. P.S. Fixed bug in Rotator class. Jerky "scroll into slots" was made more soft and fluid. Reworked the Rotator class. It uses only angular acceleration now.

Resources

  1. http://ultimatefaves.com/
  2. http://www.inter-fuser.com/2010/02/android-coverflow-widget-v2.html
  3. http://www.inter-fuser.com/2010/01/android-coverflow-widget.html
  4. http://www.iconsmaster.com/Plush-Icons-Set/

Wednesday, October 26, 2011

Android. ImageView with SVG Support


Русский перевод


Source Code


This my article was originally published on The Code Project web site. You can see it at Codeproject.

Introduction

As you know, Android doesn’t support SVG format. But benefits of SVG are obvious. First, it’s scalable. You don’t need to have pictures in different resolutions, no need to scale, for example, bitmap image with a quality loss. SVG image can be scaled to any resolution and the quality will be the same. Second, SVG is an ordinary XML file, so its size can be much lesser than the raster format file of the same picture. Moreover, you can change a picture on the fly due to this feature. You can open an SVG file in an ordinary text editor and look how it's composed. And so on… But as Android doesn’t deal with SVG, it will imply some native coding. The good news is that there won’t be a lot of native coding. There are some open source libraries for parsing and rasterizing SVG format.

There are a lot of tutorials how to begin the native development for the Android platform, so I won’t repeat all of them here. I will just give some useful tips.

  • First, you need the Eclipse IDE. You can download it at [1].
  • Or as an alternative, you can use Motodev Studio [2]. I prefer the second one as it has some delicious features. BTW, you can install Motodev Studio as a plugin for the Eclipse IDE. I couldn’t setup it on OpenSUSE, but as the plugin it works fine.
  • Once Eclipse is installed, add CDT plugin to it.
  • Add Android plugin [3].
  • After that, add Eclipse Sequoyah[4] plugin needed for the native debugging. But make sure you installed CDT before Sequoyah. As the Sequoyah project claims, it installs all dependencies it didn’t really install CDT in my case. While installing Sequoyah, make sure you unchecked “Group Items by Category” and checked “Sequoyah Android Native Support”.
  • Also Windows users will need cygwin[5] (Add the Cygwin/bin path to your system. Also configure build path - set build command to something like "bash C:\AndroidNDK\ndk-build"). While installing it, setup development tools.
  • Download Android SDK [6].
  • And at last, you will need Android NDK. Download CrystaX NDK[7]. It has support for C++ exceptions, RTTI and Standard C++ Library. (Current(6) Google Android NDK supports them but can't build libsvg)
  • In Eclipse preferences, set Android SDK & NDK locations. That’s all for now. 
 For the first approach, I will use android-libsvg [8] library. Really it depends on libsvg, libpng, libjpeg, libexpat and zlib. But at this moment, it has support for almost all features of SVG format. To get its sources, create android-libsvg folder somewhere in a file system and go to this folder in console (in cygwin for windows users) and run “bzr branch lp:libsvg-android” command. Bazaar will download sources to this folder.

Ok. Create a new Android project “ImageViewSvg”. Now right click on the project and go to AndroidTools/Add Native support. It will create “jni” folder in the project. Delete all stuff from it and copy contents of “jni” folder of android-libsvg project. Refresh jni folder in the project. Let’s look at Android.mk file in “jni” folder. I'll explain some variables:


  • LOCAL_PATH := $(call my-dir) – my-dyr macro sets LOCAL_PATH variable used to locate source files into current directory
  • include $(CLEAR_VARS) – clears all local variables
  • LOCAL_MODULE – the name of the library
  • LOCAL_CFLAGS – sets compiler flags and some include directories
  • LIBJPEG_SOURCES, … - the list of sources files for each library that will be used
  • LOCAL_LDLIBS – links to additional libraries
  • LOCAL_SRC_FILES – the list of all source files to be compiled, here it contains all sources for all libraries
  • BUILD_SHARED_LIBRARY – link to mk file to build shared library 


For more information, please see ANDROID-MK.TXT in NDK.
Sometimes on Windows, after restarting IDE, it can’t run ndk-build. Then right click the project and go to “Build Path/Configure Build Path” and change “Build command” to something like “bash /cygdrive/c/ndk/ndk-build”.

Next create com.toolkits.libsvgandroid package and copy there SvgRaster.java from the libsvg-android project. Preparations are over.


To make ImageView class to support SVG format, it’s enough to inherit from it and override some methods. But I want it to set standard android:src attribute as SVG file and to be able to pick the file from standard “drawable” folder vs. “raw” folder. At the beginning, let’s make all logic to be done in the constructor. To get access to the android:src attribute, add attrs.xml file to the res/values folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="ImageViewSvg">
  <attr name="android:src"/>
 </declare-styleable>
</resources>
 
Let’s look at ImageView class constructor sources. It contains the following code:

Drawable d = 
   a.getDrawable(com.android.internal.R.styleable.ImageView_src);
if (d != null) {
    setImageDrawable(d);
}
 



And look at setImageBitmap method. It just calls setImageDrawable. So we can use it in our constructor if we have the corresponding bitmap. But what about getting file from “drawable” folder. Nothing supernatural – get resource ID from the android:src attribute and read raw file into an input stream. Next, libandroidsvg gives us a way to parse SVG file:

So, the constructor will look like this:

public ImageViewSvg(Context context, AttributeSet attrs, int defStyle) {

  // Let's try load supported by ImageView formats
  super(context, attrs, defStyle);
        
        if(this.getDrawable() == null)
        {
         //  Get defined attributes
            TypedArray a = context.obtainStyledAttributes(attrs,
                    R.styleable.ImageViewSvg, defStyle, 0);
                        
            // Getting a file name
            CharSequence cs = 
                a.getText(R.styleable.ImageViewSvg_android_src);
            String file = cs.toString();
            
            // Is it SVG file?
            if (file.endsWith(".svg")) {
             
             // Retrieve ID of the resource
                int id = 
                    a.getResourceId(
                    R.styleable.ImageViewSvg_android_src, -1);
                if(id != -1){
                try {
                  // Get the input stream for the raw resource
                  InputStream inStream = 
                                     getResources().openRawResource(id);
                  int size = inStream.available();
                  
                  // Read into the buffer
                  byte[] buffer = new byte[size];
                  inStream.read(buffer);
      inStream.close();
      
      // And make a string
      mSvgContent = 
      EncodingUtils.getString
       (buffer, "UTF-8");
      
      // Parse it
               mSvgId = SvgRaster.svgAndroidCreate();
               SvgRaster.svgAndroidParseBuffer
     (mSvgId, mSvgContent.toString());
               SvgRaster.svgAndroidSetAntialiasing(mSvgId, true);
                                                
               mIsSvg = true; 

      
     } catch (IOException e) {
      mIsSvg = false;
      e.printStackTrace();
     }                 
                }
            }
        }
}
 
Another problem is that SVG doesn’t have a size(Not always, some have desired ones. See P.S.). It’s scalable and it’s all. Moreover ImageView layout parameters can be set to wrap_content, fill_parent or we can set predefined size of the image. But when a layout is required, Android sets the size and we can override onSizeChanged method. The only problem is wrap_content attribute. In this case, the size will be 0. The idea is to replace wrap_content with fill_parent on the fly. But doing it in the constructor will give nothing. If you debug through source codes, you will see that parent layout drags layout parameters from attributes directly and calls setLayoutParams method. Let’s override it:

@Override 
public void setLayoutParams(ViewGroup.LayoutParams params){
 if(mIsSvg)
 {
  // replace WRAP_CONTENT if needed
  if(params.width == ViewGroup.LayoutParams.WRAP_CONTENT
    && getSuggestedMinimumWidth() == 0)
   params.width = ViewGroup.LayoutParams.FILL_PARENT;
  if(params.height == ViewGroup.LayoutParams.WRAP_CONTENT
    && getSuggestedMinimumHeight() == 0)
   params.height = ViewGroup.LayoutParams.FILL_PARENT;
 }
 super.setLayoutParams(params);
}
 
And onSizeChanged:

@Override 
public void onSizeChanged(int w, int h, int ow, int oh){
 if(mIsSvg){
  //Create the bitmap to raster svg to
   Canvas canvas = new Canvas();
  mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
  canvas.setBitmap(mBitmap);
  // Render SVG with use of libandroidsvg
  SvgRaster.svgAndroidRenderToArea(
   mSvgId, canvas,
   0, 0, canvas.getWidth(), canvas.getHeight()); 
  this.setImageBitmap(mBitmap);
 }
 else
  super.onSizeChanged(w, h, ow, oh);
}
 


And at last, it’s the time to try it. Create the following layout:

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:background="#AA0000"
  android:layout_height="fill_parent" 
  android:layout_width="fill_parent"
  android:layout_weight="1.0" 
  android:gravity="center"
  >
  <com.imageviewsvg.controls.ImageViewSvg
   android:src="@drawable/lion" 
   android:layout_width="100dip"
   android:layout_height="100dip" 
   android:id="@+id/svgview"
   android:layout_gravity="center" 
   />
 </LinearLayout>
 

And run:




Debugging Native Code

To debug native code, you can follow the instructions given by Carlos Souto at Sequoyah Project [9]. But during the first time, some things are unclear. So there are several tips:
  • While configuring C++ debug configuration, the application really must be app_process, don’t care Eclipse says the program doesn’t exist, it will be created later.
  • You should run ndk-gdb each time you run debugging. Sometimes the command should be ndk-gdb –adb=/tools/adb –force.
  • Don’t forget to set "debuggable" in the manifest.

Second Approach. Anti Grain Geometry.

There is another library where you can use to rasterize SVG files. It’s Anti Grain Geometry[10]. The only extra library that will be needed is libexpat. We already have it in our project. In the jni folder, create folders like this:



Copy the corresponding files from agg sources folder into gpc/include/src folders. There in an examples folder where you can find svg_viewer folder. Copy all files except svg_test into aggsvg jni folder. It will parse and rasterize SVG with use of AGG. But it has only basic support for SVG and can’t parse complicated stuff. You should extend the parser by yourself. In aggsvg-android folder, create aggsvgandroid.cpp file. The example parses SVG from a file system. To parse a string, add the following method to a parser class:

void parser::parse(const char *chars, int length){

     char msg[1024];

     XML_Parser p = XML_ParserCreate(NULL);
     if(p == 0)
     {
      throw exception("Couldn't allocate memory for parser");
     }

     XML_SetParamEntityParsing(p, XML_PARAM_ENTITY_PARSING_ALWAYS);
     XML_UseForeignDTD(p, true);

     XML_SetUserData(p, this);
     XML_SetElementHandler(p, start_element, end_element);
     XML_SetCharacterDataHandler(p, content);

     int done = 0;
     std::string str = std::string(chars);
     std::istringstream inputString(str);

     while(true){
      if(done)
       break;
            size_t len = inputString.readsome(m_buf, buf_size);
            done = len < buf_size;
            if(!XML_Parse(p, m_buf, len, done))
            {
                sprintf(msg,
                    "%s at line %d\n",
                    XML_ErrorString(XML_GetErrorCode(p)),
                    (int)XML_GetCurrentLineNumber(p));
                throw exception(msg);
            }
     }
        XML_ParserFree(p);

        char* ts = m_title;
        while(*ts)
        {
            if(*ts < ' ') *ts = ' ';
            ++ts;
        }
    }
 

At the end of Android.mk file, add section to build another
library. It’s pretty simple. Just clear variables after the first
library build and set them to build another library. And here is the
class to rasterize with use of AGG:

class SvgRasterizer{
 agg::svg::path_renderer m_path;
    double m_min_x;
    double m_min_y;
    double m_max_x;
    double m_max_y;
    double m_x;
    double m_y;
    pix_format_e pixformat;
 agg::rendering_buffer m_rbuf_window;

public:
 SvgRasterizer(pix_format_e format, uint32_t width, 
   uint32_t height, void *pixels) : \
  m_path(), \
  m_min_x(0.0), \
  m_min_y(0.0), \
  m_max_x(0.0), \
  m_max_y(0.0), \
  pixformat(format)
 {
  m_rbuf_window.attach((unsigned char*)pixels, width, height, 4*width);
 }

 void parse_svg(const char* svg, int length){
  // Create parser
  agg::svg::parser p(m_path);
  // Parse SVG
  p.parse(svg, length);
  // Make all polygons CCW-oriented
  m_path.arrange_orientations();
  // Get bounds of the image defined in SVG
        m_path.bounding_rect(&m_min_x, &m_min_y, &m_max_x, &m_max_y);
 }

 void rasterize_svg()
 {
  typedef agg::pixfmt_rgba32 pixfmt;
  typedef agg::renderer_base<pixfmt> renderer_base;
  typedef agg::renderer_scanline_aa_solid<renderer_base> renderer_solid;

        pixfmt pixf(m_rbuf_window);
        renderer_base rb(pixf);
        renderer_solid ren(rb);

        agg::rasterizer_scanline_aa<> ras;
        agg::scanline_p8 sl;
        agg::trans_affine mtx;

        double scl;
        // Calculate the scale the image to fit given bitmap
        if(m_max_y > m_max_x)
         scl = pixf.height()/m_max_y;
        else
         scl = pixf.width()/m_max_x;

        // Default gamma as is
        ras.gamma(agg::gamma_power(1.0));
        mtx *= agg::trans_affine_scaling(scl);

        m_path.expand(0.0);

        // Render image
        m_path.render(ras, sl, ren, mtx, rb.clip_box(), 1.0);

        ras.gamma(agg::gamma_none());
 }
};
 

And in sources, I’ve added an ability to test both approaches:




Conclusion

So, there are at last two ways to show SVG file in Android. The main benefit of libsvg-android is that it is ready to use, but it is more than three times slower than AGG, with which you should extend SVG parser by your own. Also with AGG, you get extra features for the image processing. I’ve just used ImageView in the layout, but to use it programmatically you, of cause, should override more methods, such as setImageResource for example.

That’s all. Thanks!


Resources

  1. http://www.eclipse.org
  2. http://developer.motorola.com/docstools/motodevstudio
  3. http://developer.android.com/guide/developing/tools/adt.html
  4. http://www.eclipse.org/sequoyah/
  5. http://www.cygwin.com/
  6. http://developer.android.com/sdk/index.html
  7. http://www.crystax.net/en/android/ndk/6
  8. https://launchpad.net/libsvg-android
  9. http://www.eclipse.org/sequoyah/documentation/native_debug.php
  10. http://www.antigrain.com/



P.S. Also there is the article in Code Project with some additional improvements for SVG usage:
Drawable with SVG Support

Known issues:

ibsvg-android doesn't support rgb(255, 255, 255) color representation (used by Inkscape). (At least at the moment I wrote the article.)
Check if there are occurences of such representation and use fill: #ffffff

Also, there may be some other unsupported features unsupported by libsvg-android.
Check the structure of the .svg file you're using.


Tuesday, October 25, 2011

Animated Splash


An Advanced Splash Screen for Android App

Русский перевод


This my article was originally published on The Code Project web site. You can see it at Codeproject.

Source Code

Introduction


     Everyone wants his/her application to be beautiful and attractive for an eye of a user. And there are a lot of applications, at least desktop applications, mostly games that use splash screens. It’s nice and, moreover, while the splash screen is working, you can initialize your application. Many tutorials exist explaining how to begin Android programming and I won't repeat them here. You can find them all over the internet. So I will show only the programming stuff.


The Beginning


Create a new Android Eclipse project with the following settings:

Project name : AdvancedSplashDemo
Build target: I've set it to Android 2.1
Application name: Advanced Splash Demo
Package name: Advanced Splash Demo
Create Activity: MainActivity – it will be the application itself 
 

So, as we don’t need a splash screen after it’s done, the first thought is to use another activity that will start the main activity and silently die after that. Let’s create a layout for the splash – it will be a linear layout and an Image View inside it. Create a new Android XML file "splash.xml" in appfolder/res/layout folder. Don’t make it fill parent, as we want it to be really as splash screen. The image view has to wrap a content too:

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TheSplashLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >

    <ImageView
        android:id="@+id/SplashImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >
    </ImageView>
</LinearLayout>
 

Here the gravity attribute value is set to "center" to make the splash to be at the center of the screen. Add some picture to the appfolder/res/drawable folder and press F5 on the project. I’ve added lnxins.png and as you can see, set it as the image view source.

So far, let’s look at the application manifest. It has now just one “.MainActivity” activity set as a launcher. We’ll set it as default category and add another splash activity with a splash layout and will set it as the launcher. Open the manifest and open an application tab. For the main activity, change an Android intent category to default. Near application nodes press an “Add…” button, choose create a new element at top level and double click on Activity. For new activity, click on a “Name*” hyperlink and enter “SplashScreen” class. In sources, a new class will be added for the splash activity. Next, press the “Add…” button again for the SplashScreen node and add the intent filter. Again, for just added intent filter, add an action and a category.

Set the action to android.intent.action.MAIN and the category to android.intent.category.LAUNCHER. So the Splash screen activity will be run first. The manifest should look like the following:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.yourname.main"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MainActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.DEFAULT"/>
            </intent-filter>
        </activity>    
        <activity android:name="SplashScreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"></action>
                <category android:name="android.intent.category.LAUNCHER"></category>
            </intent-filter>
        </activity>
    </application>
</manifest> 
 

A Little Coding

Open SplashScreen.java class. Now it has overridden onCreate method only. Override onTouchEvent method to give the user a possibility to close splash screen at every moment. And don’t forget synchronization or you will have random crashes. Here’s the class code:

public class SplashScreen extends Activity {
    
    /**
     * The thread to process splash screen events
     */
    private Thread mSplashThread;    

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Splash screen view
        setContentView(R.layout.splash);
        
        final SplashScreen sPlashScreen = this;   
        
        // The thread to wait for splash screen events
        mSplashThread =  new Thread(){
            @Override
            public void run(){
                try {
                    synchronized(this){
                        // Wait given period of time or exit on touch
                        wait(5000);
                    }
                }
                catch(InterruptedException ex){                    
                }

                finish();
                
                // Run next activity
                Intent intent = new Intent();
                intent.setClass(sPlashScreen, MainActivity.class);
                startActivity(intent);
                stop();                    
            }
        };
        
        mSplashThread.start();        
    }
        
    /**
     * Processes splash screen touch events
     */
    @Override
    public boolean onTouchEvent(MotionEvent evt)
    {
        if(evt.getAction() == MotionEvent.ACTION_DOWN)
        {
            synchronized(mSplashThread){
                mSplashThread.notifyAll();
            }
        }
        return true;
    }    
}


A Little Beautification

First, let’s make the splash screen transparent. In appfolder/res/values, add new Android XML file styles.xml and add to it a transparent theme:

<resources>
    <style name="Theme.Transparent" parent="android:Theme">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>    
</resources>



Here are some explanations: as you can see, the style’s parent is android:Theme so we could apply it to our activity. And as you can see, the attribute's names are clear and you can understand what they mean.
Next, we’ll apply this theme to our splash. In the manifest file for the splash activity, set a "theme" attribute to the just created theme:

<activity 
    android:name="SplashScreen"
    android:theme="@style/Theme.Transparent"            
>
    <intent-filter>
        <action android:name="android.intent.action.MAIN"></action>
        <category android:name="android.intent.category.LAUNCHER"></category>
    </intent-filter>
</activity> 


Let’s suppose we’re developing a game application. And gamers don’t like when something distracts them from the game process. Most of them prefer fullscreen mode. So, set the fullscreen theme for the main activity:

<activity android:name=".MainActivity"
          android:label="@string/app_name"
          android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
          >
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>
</activity>


Run it. Looks better. Now we’ll make it fade-in and fade-out. Create in appfolder/res folder new folder "anim" and add to it two Android XML files – appear.xml and disappear.xml. They will be alpha animations.

Appear.xml



<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="800"
    />
</set>


Disappear.xml



<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:interpolator="@android:anim/decelerate_interpolator"
        android:fromAlpha="1.0" android:toAlpha="0.0"
        android:duration="800"
    />
</set> 

In these animations, they just change the alpha channel of an object from fromAlpha value to toAlpha value for a given period of time. Now add new style in styles.xml:

<style name="Animations" parent="@android:Animation" />
    <style name="Animations.SplashScreen">
        <item name="android:windowEnterAnimation">@anim/appear</item>
        <item name="android:windowExitAnimation">@anim/disappear</item> 
    </style>
</style>

So, on the window, enter the “appear” animation will be performed and on the window exit the “disappear” animation will be performed. Add this style to Theme.Transparent theme:

<style name="Theme.Transparent" parent="android:Theme">
        ………
  <item name="android:windowAnimationStyle">
      @style/Animations.SplashScreen
  </item>
</style>


Ok, it’s time to run it again. Now it looks nice. And more…

Don’t Shoot at a Programmer, He Draws As He Can…

Let’s create an animated splash screen. As an artist, I’m not very good so I used Gimp’s Script-Fu to generate a set of frames for animations. First, remove android:src attribute in splash.xml. Then, in the drawable folder, create flag.xml:

<?xml version="1.0" encoding="utf-8"?>
<animation-list     
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/flaganim"
    android:oneshot="false"
    >
    <item android:drawable="@drawable/f03" android:duration="100" />
    <item android:drawable="@drawable/f04" android:duration="100" />
    <item android:drawable="@drawable/f05" android:duration="100" />
    <item android:drawable="@drawable/f06" android:duration="100" />
    <item android:drawable="@drawable/f07" android:duration="100" />
    <item android:drawable="@drawable/f08" android:duration="100" />
    <item android:drawable="@drawable/f09" android:duration="100" />
    <item android:drawable="@drawable/f10" android:duration="100" />    
</animation-list>

Here is a set of frames and “oneshot” attribute says to loop them. To run animation, we need to change the splash screen class code. To the onCreate method, add the following:

final ImageView splashImageView = 
        (ImageView) findViewById(R.id.SplashImageView);
 splashImageView.setBackgroundResource(R.drawable.flag);
 final AnimationDrawable frameAnimation = 
              (AnimationDrawable)splashImageView.getBackground(); 


We've set the animation for the splash, but here’s a little problem. We can’t start it from the onCreate method. The animation must be started from GUI thread. For this, we’ll use a “post” method of the ImageView class. It will add our runnable to a message queue and when GUI thread will be available, it will start it:

splashImageView.post(new Runnable(){
            @Override
            public void run() {
                frameAnimation.start();                
            }            
        });


And here we are:


That’s all. Have fun with Android programming.

Thanks!