Amazon Gift Cards

Wednesday, December 31, 2008

Code to show your XML Visual in Android

After posting some layout related xml examples in Android, i realized that there is no example on how to set your xml as your view/presentation layer. Here is the code:
package <yourPackage, example: com.almondmendoza.firstDemo>
import android.app.Activity;
import android.os.Bundle;

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


Quick Explanation
If you had developed in Rails/CakePHP like framework, this code, this.setContentView(R.layout.main); is like setting which layout (R.layout.main) to use to your controller (Activity).

I'll update the previous post to point to this. Hope it helps

Update History
   Jan 17, 2012 - Visual Update

Tuesday, December 30, 2008

LinearLayout in Android (Horizontal, XML)

If you had read our post on Vertical LinearLayout then this one is just the reverse or Horizontal LinearLayout, on the example we interchange the width's value with the height. And change left to bottom and right to top.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal"
>
    <Button android:id="@+id/RecordBtn" 
        android:text="Record"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" />

    <Button android:id="@+id/PlayBtn" 
        android:text="Play" 
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="top" />

    <Button android:id="@+id/StopBtn" 
        android:text="Stop"
        android:layout_width="wrap_content" 
        android:layout_height="fill_parent" 
        android:gravity="bottom" />

    <Button android:id="@+id/PauseBtn" 
        android:text="Pause"
        android:layout_width="wrap_content" 
    android:layout_height="fill_parent" />
</LinearLayout>

Quick Explanation
Same as the Vertical one, there are 4 buttons and the gravity shows you the text alignment in android.

Further reading
LinearLayout in Hello View in Android

Update History
   before 2012: Here is how you can set this as your layout in your java code
   Jan 17, 2012 - Visual Update

LinearLayout in Android (Vertical, XML)

Reading this, you probably have a clue that LinearLayout lays out object linearly and can only have a vertical and horizontal layout, no diagonal layout.

Here is an example of a vertical LinearLayout:
(update: horizontal LinearLayout here)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
>
    <Button android:id="@+id/RecordBtn"
        android:text="Record"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button android:id="@+id/PlayBtn"
        android:text="Play"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_width="fill_parent" />

    <Button android:id="@+id/StopBtn"
        android:text="Stop"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="left" />

    <Button android:id="@+id/PauseBtn"
        android:text="Pause"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" />
</LinearLayout>

Quick Explanation:
There would be 4 buttons here, Record, Play, Stop and Pause, each one have its id and a wrap_content height, 3 of the buttons have fill_parent which mean fill up all spaces their width, gravity is text-align in css. See the picture below to better understand.

Further reading
LinearLayout in Hello View in Android

Update History
   Somewhere before 2012: Here is how you can set this as your layout in your java code

   Jan 17, 2012 - Visual Update

Monday, December 29, 2008

Simple TableLayout in Android

First of our Containers Example on android is TableLayout, coming from Web development background, TableLayout is probably the easiest to understand. TableLayout in android is the same as table tag on HTML. Here is an example of it:

HTML:
<body>
<table>
    <tr>
        <td><input type="button" value="Record"></td>
        <td><input type="button" value="Play"></td>
        <td><input type="button" value="Stop"></td>
    </tr>
    <tr>
        <td><input type="button" value="Pause"></td>
        <td><input type="button" value="Forward"></td>
        <td><input type="button" value="Rewind"></td>
    </tr>
</table>
</body>


Android:
<xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
>
    <TableRow>
        <Button android:id="@+id/RecordBtn"
            android:text="Record" />
        <Button android:id="@+id/PlayBtn"
            android:text="Play" />
        <Button android:id="@+id/StopBtn"
            android:text="Stop" />
    </TableRow>
    <TableRow>
        <Button android:id="@+id/PauseBtn" 
            android:text="Pause" />
        <Button android:id="@+id/Forward"
            android:text="Forward" />
        <Button android:id="@+id/Rewind" 
            android:text="Rewind" />
    </TableRow>
</TableLayout>

Explanation:
If you know html then by now you know that there is no td and instead we use one of the the views/components in android.
This the most basic example of tableLayout, in the future post we shall tackle on some of its properties.


Hope it helps :)

Update History
   Jan 17, 2012 - Visual Update

Sunday, December 28, 2008

Android Containers

Android like other language have containers, these containers hold components together to form the design of your application. Having knowledge in java and in other xml based design, you sometimes what to jump into knowing what the containers and components are.

For the people who don't have knowledge in flex,xul,wpf or even html, in every layout you have components or view(in android) and these components have a parent that holds them, these parent components are called container or layouts or view group(android), now parents have different layouts and this is what this post is about. In the following post after this article, i shall give you some example of the basic view.

But for now i want to link to other sites that might help you to understand it, these sites might explain it better then i do so on our future post i'll try to limit the explanation and focus more on examples.

Saturday, December 27, 2008

Sdcard on google android in Mac

Back when i was still posting my tech post on monmonja, i created a post which talks about sdcard on android, that post was done on ubuntu, and currently i shifted to mac coz i feel 8.10 has no big changes (im using it on my ps3). Anyways based on my old post, this is a tutorial on how to get sdcard on android in mac.
SanDisk 2 GB Class 2 SD Flash Memory Card SDSDB-2048-A11
1) Using terminal goto your tools folder
-- cd ~/myandroid/tools

2) make an sdcard (lets put it on our Desktop)
mksdcard 2147483648 ~/Desktop/sdcard.img

3) The beauty of mac is that i knows how to mount files when it sees it's mountable, on our ubuntu guide we need the help of losetup, here just go to the file and double click it. It will be mounted and you can do anything with it (drag,copy,paste) as long as finder can do it.

4) Last final step is to mount our sdcard to our emulator, on eclipse, goto
Run > Run Configuration > Target Tabs > Additional Emulator Command Line Options
* Type the following
-sdcard /Users/almondmendoza/Desktop/androidsdcard.img

Replace almondmendoza with your login name

Thursday, December 25, 2008

Display Contact Names in Android

There are a lot of tutorial on this but most of them either failed when you run the codes or they forgat to tell you something, while i don't guaranty anything coz it took me 3 hours to figure what's wrong with what i was doing, i would try to make it as simple as i can.

First of all when you need to read Contacts on android, you need the user's permission that you will read their contact list. To do this
* Open AndroidManifest.xml and add the following codes in between manifest tags
<uses-permission android:name="android.permission.READ_CONTACTS">
</uses-permission>

- On eclipse, open AndroidManifest.xml then go to Permissions Tab, Click Add, Click on "Uses Permission", on the right side, on the name field select android.permission.READ_CONTACTS


After adding the permission, let us go to the codes: On your codes,
import android.app.ListActivity;
import android.database.Cursor;
import android.os.Bundle;
import android.provider.Contacts.People;
import android.widget.ListAdapter;
import android.widget.SimpleCursorAdapter;

public class Main extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Cursor contactsCursor = this.managedQuery(People.CONTENT_URI, null, null, null, null);
        startManagingCursor(contactsCursor);

        String[] columnsToMap = new String[] {People.NAME};
        int[] mapTo = new int[] {android.R.id.text1};

        ListAdapter mAdapter = new SimpleCursorAdapter(this, android.R.layout.simple_list_item_1, contactsCursor, columnsToMap, mapTo);
        this.setListAdapter(mAdapter);
    }
}



A brief explanation to the core codes:
Cursor contactsCursor = this.managedQuery(People.CONTENT_URI, null, null, null, null);
-- This would query our Contacts, you can treat this somehow like SQL statement, we query the People.CONTENT_URI model, you can find out what the null represents in here

startManagingCursor(contactsCursor);
-- Tell it to start managing this cursor

String[] columnsToMap = new String[] {People.NAME};
-- As stated, you can treat this as sql, what we just did here is that we put the field People.NAME to an Array of String, you may have many fields as possible in this array. Here you can see we use People.NAME instead of a string field name, well this is the same except the class People has a static variable named NAME which translate to the string field name. The whole list of possible fields are in here

int[] mapTo = new int[] {android.R.id.text1};
-- This part is confusing but to explain it, we would map the People.NAME field to a textbox, now where did we specify the textbox?

ListAdapter mAdapter = new SimpleCursorAdapter(this, android.R.layout.simple_list_item_1, contactsCursor, columnsToMap, mapTo);
-- SimpleCursorAdaptor would bind/map our Cursor with our layout, you can refer here on what the parameters represent. The 2nd parameter here is layout, android by default has a lot of layout given to you by default, one of the layout that it has is the simple_list_item_1 layout, the 2nd comment on this thread would help you understand why we need the textbox mentioned on the top. The 3rd parameter is our cursor, the fourth is the fields/columns we need from our cursor to be mapped to our fifth parameters.

Hope i didn't confuse you and hope it helps :)

Update History
   Jan 17, 2012 - Visual Update

Monday, December 22, 2008

Display icon next to radio button in Android

Here is how to display icons on RadioButton on Android
<RadioButton android:id="@+id/RadioButton01"
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="Text"
   android:drawableLeft="@drawable/icon" 
   android:drawableRight="@drawable/icon" 
   android:drawableTop="@drawable/icon" 
   android:drawableBottom="@drawable/icon" />

Quick Explanation:
Here you shall see 4 locations where you can put the icons, mainly top, right, bottom and left. The names are android:drawableTop, android:drawableRight, android:drawableBottom and android:drawableLeft.
Hope it helps

Update History
   Jan 17, 2012 - Visual Update