viernes, 30 de marzo de 2012

A simple guide to 9-patch for Android UI

Basically, 9-patch uses png transparency to do an advanced form of 9-slice or scale9. The guides are straight, 1-pixel black lines drawn on the edge of your image that define the scaling and fill of your image. By naming your image file name.9.png, Android will recognize the 9.png format and use the black guides to scale and fill your bitmaps.
Here’s a basic guide map:
As you can see, you have guides on each side of your image. The TOP and LEFT guides are for scaling your image (i.e. 9-slice), while the RIGHT and BOTTOM guides define the fill area.
The black guide lines are cut-off/removed from your image – they won’t show in the app.  Guides must only be one pixel wide, so if you want a 48×48 button, your png will actually be 50×50. Anything thicker than one pixel will remain part of your image. (My examples have 4-pixel wide guides for better visibility. They should really be only 1-pixel).
Your guides must be solid black (#000000). Even a slight difference in color (#000001) or alpha will cause it to fail and stretch normally. This failure won’t be obvious either*, it fails silently! Yes. Really. Now you know.
Also you should keep in mind that remaining area of the one-pixel outline must be completely transparent. This includes the four corners of the image – those should always be clear. This can be a bigger problem than you realize. For example, if you scale an image in Photoshop it will add anti-aliased pixels which may include almost-invisible pixels which will also cause it to fail*. If you must scale in Photoshop, use the Nearest Neighbor setting in the Resample Image pulldown menu (at the bottom of the Image Size pop-up menu) to keep sharp edges on your guides.
*(updated 1/2012) This is actually a “fix” in the latest dev kit. Previously it would manifest itself as all of yourother images and resources suddenly breaking, not the actually broken 9-patch image.

The TOP and LEFT guides are used to define the scalable portion of your image – LEFT for scaling height, TOP for scaling width. Using a button image as an example, this means the button can stretch horizontally and vertically within the black portion and everything else, such as the corners, will remain the same size. The allows you to have buttons that can scale to any size and maintain a uniform look.
It’s important to note that 9-patch images don’t scale down – they only scale up. So it’s best to start as small as possible.
Also, you can leave out portions in the middle of the scale line. So for example, if you have a button with a sharp glossy edge across the middle, you can leave out a few pixels in the middle of the LEFT guide. The center horizontal axis of your image won’t scale, just the parts above and below it, so your sharp gloss won’t get anti-aliased or fuzzy.
Fill area guides are optional and provide a way define the area for stuff like your text label. Fill determines how much room there is within your image to place text, or an icon, or other things. 9-patch isn’t just for buttons, it works for background images as well.
The above button & label example is exaggerated simply to explain the idea of fill – the label isn’t completely accurate. To be honest, I haven’t experienced how Android does multi-line labels, but there’s a good explanation of how to do them on Stack Overflow. Usually, a button label is usually a single row of text.
Finally, here’s a good demonstration of how scale and fill guides can vary, such as a LinearLayout with a background image & fully rounded sides:
With this example, the LEFT guide isn’t used but we’re still required to have a guide. The background image don’t scale vertically; it just scales horizontally (based on the TOP guide). Looking at the fill guides, the RIGHT and BOTTOM guides extend beyond where they meet the image’s curved edges. This allows me to place my round buttons close to the edges of the background for a tight, fitted look.
So that’s it. 9-patch is super easy, once you get it. It’s not a perfect way to do scaling, but the fill-area and multi-line scale-guides does offer more flexibility than traditional 9-slice and scale9. Give it a try and you’ll figure it out quickly.

A simple guide to 9-patch for Android UI | @radley

Android: Make httprequest behind a firewall

How you set up a proxy addres in your Android application:

If you have something like this in your current Android application:

HttpClient httpClient = new DefaultHttpClient();
HttpContext localContext = new BasicHttpContext();
HttpPost httpPost = new HttpPost(this.url);

Well, add a new call to the following method:

 public void setProxy(DefaultHttpClient httpclient) {  
           final String PROXY_IP = "<insert your IP here>";  
            final int PROXY_PORT = <insert_PROXY_PORT#>;  

                    new AuthScope(PROXY_IP, PROXY_PORT),  
                    new UsernamePasswordCredentials(  
                            "username", "password"));  

           HttpHost proxy = new HttpHost(PROXY_IP, PROXY_PORT);  



Like this:

setProxy( (DefaultHttpClient)httpClient );

And that will let you use a proxy!

Android: Unable to make httprequest behind firewall - Stack Overflow

CSS - Mobile - Custom Fonts

Recently, I was working with custom fonts for mobile web and I wanted to share the best way for doing this (in my opinion)

I tested this on iPod / iPhone, Android and BlackBerry and it's working fine.

How to use it:
In browsers that support the font-face property, custom fonts can be embedded with a small chunk of CSS:
@font-face {
    font-family: "Robson Celtic";
    src: url("http://site/fonts/rob-celt")
Afterwards the font can be used as normal within the CSS:
p {
    font-family: "Robson Celtic";
    font-size: 1em;

jueves, 22 de marzo de 2012

BlackBerry - Notifications and Background app

I know it's a mess with all this background application, notifications and more. So I decided to put all together and share it here.

If you need to do one (or more) of the stuff I'll enumerate here, well, this post is for you!

1) Don't want to deal with PUSH but you need to show a LED notification in your BlackBerry?
2) Want to show a custom icon on your BlackBerry desktop?
3) Want to run a task (Thread) in the background and make your own auto-start application?

You can find all these tasks by following this link. Enjoy!

Don't forget to set your AppDescriptor.xml

<Properties ModelVersion="1.1.2">
  <General Title="" Version="1.0.0" Vendor="BlackBerry Developer" Description=""/>
  <Application Type="BlackBerry Application" MainMIDletName="" MainArgs="gui" HomeScreenPosition="0" StartupTier="7" IsSystemModule="false" IsAutostartup="true"/>
  <Resources hasTitleResource="false" TitleResourceBundleName="" TitleResourceBundleRelativePath="" TitleResourceBundleClassName="" TitleResourceBundleKey="" DescriptionId="">
      <Icon CanonicalFileName="res/img/icon.png" IsFocus="false"/>
      <Icon CanonicalFileName="res/img/icon_focus.png" IsFocus="true"/>
  <KeywordResources KeywordResourceBundleName="" KeywordResourceBundleRelativePath="" KeywordResourceBundleClassName="" KeywordResourceBundleKey=""/>
  <Compile OutputCompilerMessages="false" ConvertImages="true" CreateWarningForNoExportedRoutine="true" CompressResources="false" AliasList="">
  <Packaging PreBuildStep="" PostBuildStep="" CleanStep="" OutputFileName="_Notification" OutputFolder="deliverables" GenerateALXFile="true">

martes, 6 de marzo de 2012

QR Code Tech Info: MECARD Format

Before anything: If you're looking for VCARD format, check wikipedia: 

Cool VCARD generator:

So, what’s inside the MECARD format?
The first few characters are ‘MECARD:’ and this helps the decoding software to understand what it is looking at. The rest of the fields are as follows. Note that a) no field is compulsory – you can skip any of them and b) each field can be repeated. However, most likely your decoding application will be happy with multiple telephone numbers for a single contact, but multiple names are going to give it problems
The field names used are:
N: Contact name (if comma separated, uses LASTNAME,FIRSTNAME)
SOUND: Contact name in Japanese (Kana). Same comma rules as N:
TEL: Telephone number
TEL-AV: Videophone Tel number
EMAIL: Email address
NOTE: Memo text field
BDAY: Birthday (YYYMMDD format)
ADR: Address. Comma separated: PO box, room number, house number, city, prefecture, zip code and country
URL: Website
NICKNAME: Display name
(for more complete specs, please see DotCoMo’s website
Let’s look at one and see what we can get.
when we decode this, we get:
MECARD:N:Anonymous Aardvark;ADR:The Highstreet Cityville Big State 55555555 United Kingdom;TEL:+1111111111;TEL:+3333333333;TEL:+2222222222;TEL:+4444444444;;;;
Adding in some line breaks:
N:Anonymous Aardvark;
ADR:The Highstreet Cityville Big State 55555555 United Kingdom;
Now, at first glance, it seems fairly simple and comprehensive. However, taking some time to look deeper shows some potential problems that we should be aware of: specifically, there are 4 different telephone numbers, but no distinction between them. In this sample, we have a work, mobile, fax and home number, but no indication which is which.
If the same software is used to decode and encode the QR Code, then we should be alright, but there is no guarantee of this at all. Perhaps Encoder A believes that they are 1)work, 2)mobile, 3)fax, 4)home – but Decoder B believes they are 1)mobile, 2)work, 3)home 4)fax. The potential for mixing up a contact’s details is high.
A really good QR Code encoder will allow you to select which fields are included in the QR Code.
A really good and well-thought out QR Code decoder will allow you to edit the details of a contact and swap around the label of the various fields.
If you are creating your own QR Code for sharing your personal details (perhaps for printing on a business card, or similar), then it seems that the best option is to only include as much information as the MECARD standard defines; for example, one telephone number and one email address only.
If you are encoding QR Codes directly from your phone’s address book, be aware of the limitations of this format and choose an encoder that lets you limit the number of fields used.

QR Code Tech Info: MECARD Format « The QR Place

Draw a Link and Graphic over another graphic

html - Draw a Link and Graphic over another graphic - Stack Overflow

sábado, 3 de marzo de 2012

BlackBerry - Smooth Moving Managers

I let you here some code I did for moving manager in a smooth way. Hope you find it useful ;-)

Source Code.

Check this video:

viernes, 2 de marzo de 2012

Android - Overlap Images

Here I let you an improvement I just did for overlapping dinamically images in Android.
Fell free to let me any comment about it.

Hope it helps ;-)