Creating a simple border with rounded corners for a layout or view

not the border in question..

Hi all, just thought I'd post this simple snippet that I've just found.
This allows you to simply add a border ( even with rounded corners!) to a layout or view.

All you need to do is create a new xml file somewhere in /res/drawable called 'the_border.xml'
with this or similar as the contents:

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <stroke android:width="1dp" android:color="#FFFFFF" /> 
    <padding android:left="7dp" android:top="13dp" 
            android:right="7dp" android:bottom="17dp" /> 
    <corners android:radius="4dp" /> 
</shape> 

You can then reference this as the background of an item in your layout like this (in xml)

android:background="@drawable/the_border"

or like this in code:

llErrorMessage.setBackgroundResource(R.drawable.the_border);

Nice eh?

TextView background is black when setting colour from xml?

I had a colour defined in a 'colours.xml' file in my project's 'values' folder like so:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="tvBackground">#337700</color>
</resources>

Which, for those of you who cannot transpose directly from hex, looks like this:

My code looked like this:

   TextView tv = new TextView(getApplicationContext());
       
   tv.setBackgroundColor(R.color.tvBackground);

Seems reasonable doesn't it?

But when I ran my code, my shiny new little TextView came out with the background colour of this:

(that's #000000 in hex, or 'black' btw)

What was going on here?
Turns out, I wasn't using the correct method to set the background colour so that it comes out correctly, what I should have used was either of these:

   tv.setBackgroundResource(R.color.tvBackground);

- or -

   tv.setBackgroundColor(getResources().getColor(R.color.tvBackground));

.. Not especially well documented, but easily fixed.


Anyhow, now my TextView shows with the background colour of:

.. So all is now well with the world. Thought I'd just post this in case it helps someone out there (or myself when I forget next time)


until that next time, bye bye.

Finding the users language settings via code

We've seen before how easy it is to reference difference resources based on the users language settings, but that was more-or-less managed by the Android framework itself.

What if you want to programmatically make decisions in your code based on what the user's language and local settings are?

Turns out, it's very easy, and here's how:
(this example assumes you have a TextView in your layout.main called tvLocale)

package com.Bluemongo.LanguageTest;

import java.util.Locale;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class LanguageTest extends Activity 

{
 @Override
 public void onCreate(Bundle savedInstanceState) 

 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
        
  TextView tvLocale = (TextView) findViewById(R.id.tvLocale);
        
       if (Locale.getDefault().getLanguage().equals("en")) 
        {tvLocale.setText("you're speaking English");}

        if (Locale.getDefault().getLanguage().equals("de")) 
        {tvLocale.setText("you're speaking German");}
        
        if (Locale.getDefault().getLanguage().equals("fr")) 
        { tvLocale.setText("you're speaking French");}   
        
  }
}

.. Told you it was easy.

Spinner down arrow stretching?

.. Styling the inner and outer views of a Spinner individually.


I was working with a Spinner with a lot of rows fetched from a database, and wanted to put a bit of padding around each item to make it easier for the user to select them.

So I went into my res\layout\spinner_view_row.xml (which controls how the Spinner rows display) and added this:

android:padding="5dip"

Then, when I went and re-ran my app, what used to look like this:

.. now looks like this:



.. Ooops. 


Looks like a condom doesn't it. Not what I was trying to achieve, really. If I made the padding large enough, it will also look like that before I've even selected anything.

Not what I wanted at all.

But I do want that padding around each item in my Spinner, otherwise my users will have too much trouble choosing items from my latest super-dooper, take-the-world-by-storm, #1 in the world market app, and it might not stay #1 for long at all.

Luckily, the answer is really, really simple.

You might recogise the below as the piece of code that binds a cursor from the database (containing all the items we want to display), to the xml view spinner_view_row, located at  res\layout\spinner_view_row.xml (this is the xml file in which we put the extra padding, above).

  final SimpleCursorAdapter ingredientAdapter =
  new SimpleCursorAdapter(this, android.R.layout.simple_spinner_item, ingredientsCursor, from, to); 
  ingredientAdapter.setDropDownViewResource(R.layout.spinner_view_row);

  spnIngredients.setAdapter(ingredientAdapter);

All we need to do to avoid the stretchy condom spinner arrow is to define another xml view in res\layout\ and call it something like spinner_view_closed, then paste into it the same code that you have in spinner_view_row.
Simply then customise this xml to have less padding, or a smaller text size for instance, then replace the reference to

simple_spinner_item

with a reference to this new xml file, like this:

  final SimpleCursorAdapter ingredientAdapter =
  new SimpleCursorAdapter(this, R.layout.spinner_view_row_closed, ingredientsCursor, from, to); 
  ingredientAdapter.setDropDownViewResource(R.layout.spinner_view_row);

  spnIngredients.setAdapter(ingredientAdapter);

.. and your new Spinner will look like this when open:

.. and this when closed.

Easy eh?
.. Told you so.

Using spinner.setSelection & finding the spinner doesn't show the selected item when closed?

Ok, I've just spent a couple of hours trying to figure this out, and now I have, I thought I'd share the incredibly simple solution with you.

The issue: I was needing to set a Spinner's selected item via code, but found when calling the Spinner's setSelection method and passing in the position to set it to, something odd would happen, the closed spinner would appear blank, yet, when clicking on it, the item I've asked to be selected would be correctly located at the top of the spinner.

It looks like a Spinner is not told to redraw when using .setSelection(position), what you have to do is call .setSelection(int position, boolean animate) unless you want your selection to happen silently behind the scenes.

Odd, but easily sorted out.

The incredibly simple solution:

This won't show the fact that the Spinner selection has been set:


spnIngredients.setAdapter(ingredientAdapter);
spnIngredients.setSelection(position);

This will:

spnIngredients.setAdapter(ingredientAdapter);

spnIngredients.setSelection(pos, true);

Hope that helps someone out there.
.. Happy Spinning.

How to tile a background image in Android

For one of the apps I'm working on I wanted to have a nice pixel pattern tiled behind my widgets.
After a little bit of hunting around I found this tutorial, and I thought I'd clean up the lessons within and show you how.

Here's the contents of my main.xml layout file,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/backrepeat"
    android:gravity="center_horizontal"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />  

</LinearLayout>

which is referenced in code in the standard way like this:

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

...// (rest of onCreate method continues here..)

Now note this line:

android:background="@drawable/backrepeat"


What's going on there?
.. Glad you asked!

Here's a quick screenshot of the contents of one of my drawable folders in my project:

What is this
backrepeat.xml?

Well, here's the contents of that file here:

<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/scale1"
android:tileMode="repeat"
android:dither="true" />


Can you see what's going on?
Backrepeat.xml defines an instance of the BitmapDrawable class, and that class references our simple scale1.jpg, located in the drawable-hdpi folder.

Simply by adding the:

<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/scale1"
    android:tileMode="repeat"
    android:dither="true" />

line in bold, we are able to achieve results such as this:

Easy isn't it?

One thing to keep in mind is that you should have folders drawable-hdpi, drawable-mdpi & drawable-ldpi, you'll need to add this backrepeat.xml file and the relevant images to each of these to allow this functionality in high, medium and low dpi (dots per inch) screen sizes.

Enjoy.

Learn what it takes to make a good Android app great.

Jason, John, and David, mobile industry veterans from Hands-On Mobile, present a technical overview of ways to improve your Android applications stickiness, boost adoption, engage users, and increase monetization and ROI.

This event was hosted by The San Francisco Android User Group at CBS Interactive in San Francisco on August 27th, 2009. The event was sponsored by Hands-On Mobile and organized by Marakana Inc.

Default text for an EditText? Here's a Hint

Sometimes it can be a nice idea to put default values in an EditText to let your users know what sort of information you're wanting them to enter.

What I had been doing previously was setting the .text value of the EditText to some default value, then clearing it onClick, after checking if the value was still the default, like this:

etName.setOnClickListener(new OnClickListener() {


String name = etName.getText().toString();
String origVal = getResources().getText(R.string.NameDefault).toString();

@Override
public void onClick(View v) {
if(name.equals(origVal));
{
etName.setText("");

}

}
});


Here's my String resource, stored in res/strings.xml as used above:

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="NameDefault">Enter your name</string>
</resources>


But there is another, easier way, and it's called a Hint.

Simply by adding the below, bold attribute into my xml layout, my EditText by default contains a default string, which only exists when the EditText is empty.

It's all done for me!

.. here is my layout xml, note the android:hint line:

<EditText android:id="@+id/etName"
android:hint="@string/NameDefault"
android:minWidth="100dip"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</EditText>


Psst..Remember that your layout files must have lowercase names..

Remember that your layout files must have lowercase names, or they won't show up in your autoComplete list of options after 'R.layout' in Eclipse when you try this :

setContentView(R.layout.test_db);


The file won't actually show up as having any errors in your package explorer (on the right by default in the IDE), but if you look down in the console (by default down the bottom), you'll see this:

Invalid file name: must contain only [a-z0-9_.]


You might see an error on your project name, but with all the folders and files it can be hard to track down the cause.

When you try to run your application you will see:

'Your project contains error(s) please fix them before running your application'


.. and it won't be happy until you delete the offending file, even if you're not actively referencing it in your code.



Hope that helps.. Happy coding!