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?

How to get images dynamically

Lets say you're storing items in a slqite db for your new, soon-to-be-award-winning application, and one of the columns you're storing is the name of the image to associate with that item.

How on earth do you reference it from within your app so you can display it?
Good question! Here's how:


//first get a reference to the ImageView in our XML layout file we want to display the image in..

ImageView imgVw = (ImageView) customView.findViewById(R.id.imgVwInXML);

//Next check that there is actually an image file name in the db column:

if (OurDBCursor.getString(OurDBCursor.getColumnIndex("imageName")) != null) 
{
 

//if there is a name for the image, get that name..

  myImageName  = OurDBCursor.getString(OurDBCursor.getColumnIndex("imageName"));  
 

//get a reference to the image (located in our drawable folder in our project):

          
  int resID = getResources().getIdentifier("com.BlueMongo.Test:drawable/" + myImageName, null, null);  
 

//assign the resouce with that ID to our ImageView:

               
  imgVw.setImageResource(resID);
}

.. And that's it.

Hope that helps. Have a great day.

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!

Including layouts: a working example

Here's a working example of including one layout inside another.

Let me know if you have any issues or questions.
This works with, and probably requires, a AVD version of 2.1 or thereabouts.



contents of droidTest1.java:

package androidforbeginners.droidTest1;

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

public class droidTest1 extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}


contents of main.xml:

<?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"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="combining layouts"
/>

<include android:id="@+id/cell1" layout="@layout/layout2" />
<include android:id="@+id/cell2" layout="@layout/layout3" />


</LinearLayout>



Contents of layout2.xml:

<?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="100px"
android:background="#0033cc"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="40px"
android:text="layout2"
/>
<CheckBox
android:layout_width="fill_parent"
android:layout_height="40px"
/>
</LinearLayout>


Contents of layout3.xml:

<?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="100px"
android:background="#0066cc"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="layout3"
/>
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>


Output:



You could also include multiple occurrences of the one layout in your main.xml like this if you wanted:

contents of main.xml (revised):

<?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"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="combining layouts"
/>

<include android:id="@+id/cell1" layout="@layout/layout2" />
<include android:id="@+id/cell2" layout="@layout/layout2" />
<include android:id="@+id/cell3" layout="@layout/layout2" />
<include android:id="@+id/cell4" layout="@layout/layout2" />


</LinearLayout>


Although if you do this, I can't see a way to reference individual repeating items.

I think include is more including a single layout across multiple Activities.

Let me know in the comments if you know a way.

Till next time: Enjoy!

Layout Tricks: Creating Reusable UI Components

The Android platform offers a wide variety of UI widgets, small visual construction blocks that you can glue together to present users with complex and useful interfaces. However applications often need higher-level visual components. To meet that need, and to do so efficiently, you can combine multiple standard widgets into a single, reusable component.

For example, you could create a reusable component that contains a progress bar and a cancel button, a panel containing two buttons (positive and negative actions), a panel with an icon, a title and a description, and so on. You can create UI components easily by writing a custom View, but you can do it even more easily using only XML.

In Android XML layout files, each tag is mapped to an actual class instance (the class is always a subclass of View, The UI toolkit lets you also use three special tags that are not mapped to a View instance: <requestFocus />, <merge /> and <include />. This article shows how to use <include /> to create pure XML visual components.

The <include /> element does exactly what its name suggests; it includes another XML layout. Using this tag is straightforward as shown in the following example:


<com.android.launcher.Workspace
android:id="@+id/workspace"
android:layout_width="fill_parent"
android:layout_height="fill_parent"

launcher:defaultScreen="1">

<include android:id="@+id/cell1" layout="@layout/workspace_screen" />
<include android:id="@+id/cell2" layout="@layout/workspace_screen" />
<include android:id="@+id/cell3" layout="@layout/workspace_screen" />

</com.android.launcher.Workspace>


In the <include /> only the layout attribute is required. This attribute, without the android namespace prefix, is a reference to the layout file you wish to include. In this example, the same layout is included three times in a row. This tag also lets you override a few attributes of the included layout. The above example shows that you can use android:id to specify the id of the root view of the included layout; it will also override the id of the included layout if one is defined. Similarly, you can override all the layout parameters. This means that any android:layout_* attribute can be used with the <include /> tag. Here is an example:



<include android:layout_width="fill_parent" layout="@layout/image_holder" />
<include android:layout_width="256dip" layout="@layout/image_holder" />