Android LayerDrawable in HTML using CSS

So a neat feature for Android is the LayerDrawable which lets you make an image compiled from other images. You define an array of images that shuld be drawn on top of each other and receive the resulting image.
This feature exists in CSS too. It's called background-image and lets you define one or more images to be displayed as a background of a container.

background-image: url(front.png), url(behind.png);

Remember to make the container a block element and if you don't have any content in it you should set the container height and width or a padding-bottom to give it size (Otherwise you will be shown approximately 0px of your background). See http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div

.container-with-background-image {
    width: 100%;
    padding-bottom: 75%;
}

Source:
http://www.css3.info/preview/multiple-backgrounds/
http://stackoverflow.com/questions/5846637/why-an-inline-background-image-style-doesnt-work-in-chrome-10-and-internet-ex

Android 9-patch image in HTML5 CSS3

One feature that Android has adopted is 9-patch images. The Android Studio contains a Draw 9-patch tool which lets you 'create bitmap images that automatically resize'. Basically you select areas of an image that can be repeated or stretched while others are kept at the same size. Giving you almost SVG functionality for bitmap images, especially great for buttons.

Now this feature would be great for web as well, e.g. responsive design pages. To achieve this we can use the CSS3 feature border-image which combines border-image-source, border-image-width, border-image-slice and border-image-outset.

border-image-source defines which image to use.

border-image-width defines the width of the border image. Stretches or shrinks the image regions to fit the widths.

border-image-slice divides the image into 9 regions, thereby the name (see the image above) deciding which parts can be repeated/stretched. The regions are: four corners, four edges and a middle. The fill property decides if the middle should be filled in or kept transparent.

border-image-outset decides how far out from the border the image will appear. Together with border-width this enables the border to not take up all the space inside the container caused by it having a wide border to fit the image inside (See http://www.norabrowndesign.com/css-experiments/border-image-frame.html#one). This is especially great for select/dropdown boxes as they can't work around this by using line-height (http://stackoverflow.com/questions/18613279/text-over-the-top-of-a-border-image-using-the-border-as-an-expandable-backgroun)

border-image combines the four above properties, but I felt I had more control when splitting them up. However, as of right now browser support for border-image and especially border-image-outset is a bit limited. Most browsers support border-image, but might need browser-specific CSS (e.g. -webkit-border-image).


 Example:
border-style: solid;
border-width: 5px;
border-image-source: url(dropdown.png);
border-image-width: 25% 10% 25% 5%;
border-image-slice: 10 70 20 60 fill;
border-image-outset: 12px;

http://border-image.com lets you generate border-image CSS from an image. but it doesn't put in border-image-outset.

Source:
https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/What-Are-9-Patch-Images
http://stackoverflow.com/questions/6806559/does-9-patch-png-can-work-somehow-with-css-on-browsers
http://stackoverflow.com/questions/3659457/nine-patch-images-for-web-development
https://teamtreehouse.com/forum/borderimageslice-vs-borderimagewidth 

Android SMS & MMS Backup

If you want to backup your SMSes and MMSes from your Android phone I found 2 apps to do this:

SMS Backup & Restore by Ritesh Sahu - Excellent for backing up your SMSes to an XML with included XSL file for easy reading in a webbrowser.
Save MMS by Andrew Schwimmer - Let you save MMS images one by one, ok if you don't have more than maximum a couple of hundred MMS images to save.

They both save data to your SD card which you can then copy when connecting your mobile to a computer or just pop in the SD card in a pc with a card reader.

Thx to for SMS backup: http://androidforums.com/htc-droid-incredible/281188-sms-mms-back-up.html,

"Recent changes" in Android Market

Been frustrated over apps updating, but not telling you about what changes they have done?
Not so big a problem anymore.
A "recent changes" section has been added in the latest release of Android Market, here's how to find it:

- Open the page for an app in Android Market.
- Scroll down to Description
- Click on More and scroll to the end of the section
- Under the title "Recently changed in this version" you'll find the latest changes.

How to get Flash on Froyo on the Nexus One

First of all you need to upgrade to Android 2.2 Froyo. Follow the guide at http://nexus404.com/Blog/2010/05/22/google-nexus-one-android-froyo-official-installation-instructions-android-froyo-almost-ready-for-your-nexus-one-you-can-install-it-alone-here’s-how/.

Next, you would think Flash was installed out of the box. It is not. To install it go to the Market, search for flash and select "Flash Player 10.1 BETA" (with an Adobe 'f' icon). Install this. Now you should be able to view flash content in your browser.

Solution found at: http://www.sizzledcore.com/2010/05/23/flash-player-10-1-beta-for-android-2-2/