Android Development: Clickable TextView Relative Layout Using Tables

I’ve been playing around with the Google Android SDK, since there are a couple of mobile application ideas I’ve been tossing around.  However, since it’s been longer than 10 years since I’ve done any real Java development I’m taking it pretty slow and just getting used to the tools available for Android development.

The very first thing is to go through the tutorials that Google has put together, they will give you a very quick understanding on how Android is put together and what all the pieces do in order to construct an application.

Next, appearance is everything, so you need to get familiar with layouts and DroidDraw is the best tool available for understanding how things align.  Use the DroidDraw generated code as a template and play around accordingly.

Finally, play around.

The first application I wanted to create was a gym schedule for my local gym and I will be updating the world as I move along.  The first thing I’ve created is the layout and basic functionality of the application.  This will consist of a couple of rows with the pertinent information as well as a clickable text area which will provide more information about the class.  Notice that all data is static as this is just a framework for what I hope the final application to look like.

Here’s the final product as of this point:

image

The breakdown of the code is as follows:

colors.xml

   1: <;?xml version="1.0" encoding="UTF-8"?>

   2: <;resources>

   3:         <;color name="grey">#C0C0C0</color>

   4:         <;color name="black">#000000</color>

   5:         <;color name="light_grey">#A8A8A8</color>

   6: <;/resources>

main.xml

   1: <;?xml version="1.0" encoding="utf-8"?>

   2: <;TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

   3:     android:layout_width="fill_parent"

   4:     android:layout_height="fill_parent"

   5:     android:stretchColumns="*">;

   6:     <TableRow android:background="@color/grey" >

   7:         <;TextView

   8:             android:textStyle="bold"

   9:             android:text="Monday"

  10:             android:padding="3dip" 

  11:             android:textColor="@color/black"

  12:             android:textSize="18sp"

  13:             />;

  14:     </TableRow>

  15:     <;TableRow android:background="@color/light_grey">

  16:         <;TextView android:text="Time" android:padding="3dip" 

  17:             android:textColor="@color/black" android:textStyle="bold" />;

  18:         <TextView android:text="Class" android:padding="3dip" 

  19:             android:textColor="@color/black" android:textStyle="bold" />;

  20:         <TextView android:text="Studio" android:padding="3dip" 

  21:             android:textColor="@color/black" android:textStyle="bold" />;

  22:         <TextView android:text="Instructor" android:padding="3dip" 

  23:             android:textColor="@color/black" android:textStyle="bold"/>;

  24:     </TableRow>    

  25:     <;TableRow android:background="@color/grey">

  26:         <;TextView android:id="@+id/Time" android:text="6:00 AM" android:padding="3dip" 

  27:             android:textColor="@color/black" />;

  28:         <TextView android:id="@+id/Class" android:text="Cycle" android:padding="3dip" 

  29:             android:textColor="@color/black" />;

  30:         <TextView android:id="@+id/Studio" android:text="C" android:padding="3dip" 

  31:             android:textColor="@color/black" />;

  32:         <TextView android:id="@+id/Instructor" android:text="Jamie" android:padding="3dip" 

  33:             android:textColor="@color/black"/>;

  34:     </TableRow>

  35:     <;TableRow android:background="@color/light_grey" >

  36:         <;TextView />

  37:         <;TextView />

  38:         <;TextView />

  39:         <;TextView android:id="@+id/MoreInfo" android:text="More Info >" android:padding="3dip"

  40:         android:textColor="@color/black" android:onClick="onClick" android:clickable="true"/>; 

  41:     </TableRow>

  42:         <;TableRow android:background="@color/grey">

  43:         <;TextView android:id="@+id/Time" android:text="7:00 PM" android:padding="3dip" 

  44:             android:textColor="@color/black" />;

  45:         <TextView android:id="@+id/Class" android:text="Fundamentals of Yoga" android:padding="3dip" 

  46:             android:textColor="@color/black" />;

  47:         <TextView android:id="@+id/Studio" android:text="GF" android:padding="3dip" 

  48:             android:textColor="@color/black" />;

  49:         <TextView android:id="@+id/Instructor" android:text="Eleanor" android:padding="3dip" 

  50:             android:textColor="@color/black"/>;

  51:     </TableRow>

  52:     <;TableRow android:background="@color/light_grey" >

  53:         <;TextView />

  54:         <;TextView />

  55:         <;TextView />

  56:         <;TextView android:id="@+id/MoreInfo" android:text="More Info >" android:padding="3dip"

  57:         android:textColor="@color/black" android:onClick="onClick" android:clickable="true"/>; 

  58:     </TableRow>

  59: </TableLayout>

.java file:

   1: package com.example.RelativeLayout;

   2: 

   3: import android.app.Activity;

   4: import android.os.Bundle;

   5: import android.view.View;

   6: import android.widget.Toast;

   7: 

   8: public class RelativeLayout extends Activity {

   9:     /** Called when the activity is first created. */

  10:     @Override

  11:     public void onCreate(Bundle savedInstanceState) {

  12:         super.onCreate(savedInstanceState);

  13:         setContentView(R.layout.main);

  14:     }

  15:     public void onClick(View v){

  16:         Toast toast = Toast.makeText(getApplicationContext(), 

  17: "Cycle/Spinning – Stationary bike cardio workout in a 

  18: group setting. Water bottles and a towel required 

  19: for attendance.", Toast.LENGTH_LONG);

  20:         toast.show();

  21:     }

  22: }

  23:  

~david