Custom Layout Guide
  
   

Trackmaster allows you to create your own Logger layouts with your own images, text, and layout positions. The framework allows you to package your layout for easy installation on your Android device. You can even publish your layout to the Android Market. Trackmaster will automatically discover the layout and add it to your Logger layout selection list. It's a great way to personalize Trackmaster or even promote your business, club, or product.

Trackmaster uses the Android development tools and framework for creating layouts. So if you're familiar with Android development, this will be easy. But if you're new to this don't worry. It's not difficult to learn. Feel free to post questions in the Developer Forum or send email to Trackaroo Support.

Click on the links below to jump to a section.


1.Tools

The easiest way to package and manage your files is to use the Eclipse IDE with the Google Android Development Tool plugin in.

The Eclipse IDE can be downloaded from here.

To install the Android Development Tool, follow the instructions here.

2.Layout Directory Structure

The layout directory structure uses the Android scheme. Directory naming conventions for XML layouts, images, and string resources are exactly the same.

  • res/drawable - This is where you store your images.
  • res/layout - This is where you store your XML layouts.
  • res/layout-hdpi - This is an optional directory if you need an XML layout specific for high-density screens like for the Droid and Nexus One.
  • res/layout-land - This is an optional directory if you need an XML layout specific for landscape mode.
  • res/layout-land-hdpi - This is an optional directory if you need an XML layout specific for high-density screens in landscape mode.
  • res/values - This is where you will store any string resources.
  • res/values-es - This is an optional directory where you will store any Spanish-language string resources.

3.Android Manifest

Your layout will use the standard Android manifest to describe the package. In order for Trackmaster to discover your layout, you must have Trackmaster.layouts.logger in the package name. For example, you could have the following for your manifest:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.mydomain.Trackmaster.layouts.logger.MyLayout"
	android:versionCode="1"
	android:versionName="1.0">
	<application android:icon="@drawable/icon" android:label="@string/app_name">
	</application>
	<uses-sdk android:minSdkVersion="4" />
</manifest>
	            

The AndroidManifest.xml is located at the top level of your directory structure.

4.The Logger Layout (logger.xml)

The logger.xml file is your layout definition file. It determines how text and images are positioned. The XML elements contained in the file can be any element of the Android layout library.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/logger_table_group"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<ImageView
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:src="@drawable/logger_display"
		android:scaleType="fitXY"
		android:layout_centerInParent="true"/>
	<LinearLayout
		android:id="@+id/logger_elapsed_time_row"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_marginTop="50.0dip"
		android:orientation="horizontal"
		android:layout_marginLeft="75.0dip"
		android:layout_alignParentTop="true"
		android:layout_alignParentLeft="true">
		<RelativeLayout
			android:layout_width="wrap_content"
			android:layout_height="wrap_content">
			<TextView
				android:id="@+id/logger_elapsed_time_title"
				android:textColor="#FFFFFF"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_alignParentTop="true"
				android:layout_alignParentLeft="true"
				android:text="@string/logger_elapsed_time_title"
				android:textSize="10.0dip"/>
		.
		.
		.
				

You can place text elements and additional images in your layout.

5.Logger Data

You can place TextView widgets in your layout that will update with real-time data such as altitude, humidity, pressure, and temperature. TextView widgets can have the following IDs:

  • logger_elapsed_time_value - Elapsed time.
  • logger_session_time_value - Session time.
  • logger_speed_value - Speed.
  • logger_split_value - Current split time.
  • logger_split_delta_value - Current split time delta.
  • logger_split_speed_value - Current split speed.
  • logger_last_lap_value - Last lap time.
  • logger_last_lap_delta_value - last lap time delta.
  • logger_top_speed_value - Top speed.
  • logger_best_lap_value - Best lap time.
  • logger_lap_no_value - Current lap number.
  • logger_split_marker_value - The name of the current split marker set.

The following is an example of a TextView widget that will report the current speed.

<TextView
	android:id="@+id/logger_speed_value"
	android:textColor="#000000"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@id/logger_speed_title"
	android:layout_alignParentLeft="true"
	android:textSize="55.0dip"/>
			   	

6.String Resources

You may decide to have your own text in your logger layout. You could hardcode the text in your layout or you could define your text using strings.xml in the res/values directory. strings.xml serves as a lookup for your text. This is especially important if you want to support multiple languages. For example, to support Spanish, you could create a res/value-es/strings.xml with Spanish language text.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="app_name">Time Dash</string>
	<string name="logger_elapsed_time_title">Elapsed Time:</string>
	<string name="logger_speed_title">Speed:</string>
	<string name="logger_split_title">Split:</string>
	<string name="logger_last_lap_title">Last Lap:</string>
	<string name="logger_best_lap_title">Best Lap:</string>
	<string name="logger_lap_no_title">Lap #:</string>
	<string name="logger_split_speed_title">Split Speed:</string>
	<string name="logger_top_speed_title">Top Speed:</string>
	<string name="logger_avg_lap_speed_title">Avg Lap Speed:</string>
	<string name="logger_split_marker_title">Split Marker Set:</string>
	<string name="logger_altitude_title">Altitude:</string>
</resources>
				  

You then reference your text with the @string reference.

<TextView
	android:id="@+id/logger_speed_title"
	android:textColor="#000000"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentTop="true"
	android:layout_alignParentLeft="true"
	android:text="@string/logger_speed_title"
	android:textSize="10.0dip"/>
	            

7.Images

The Trackmaster layout framework allows you to define your own images. You can add your own background images, logos, or other graphics. In most cases, you would use the ImageView widget to place your image in the layout. Images must be placed in the res/drawable directory. A simple way to personalize your layout is to just add your own background image. In the following snippet, @drawable/logger_display is a custom image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/logger_table_group"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<ImageView
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:src="@drawable/logger_display"
		android:scaleType="fitXY"
		android:layout_centerInParent="true"/>
		.
		.
		.
	            

Another thing to keep in mind when creating and adding your own image is to keep your image sizes very low. If you add too many images or images that are too large, some devices with less memory will have memory errors.

8.Import a Project

The easiest way to get started is to import the following example layout project into Eclipse. Then you can customize it as you like.

Download Time Dash Eclipse Project

Follow the next steps to import the example project:

  1. Download and extract the example project to your Eclipse workspace.
  2. In Eclipse, select File > Import...
  3. Select Existing Project.
  4. Select your workspace directory.
  5. Select the example project.
  6. Click Finish.
  7. Right-click on the new project and select Refactor > Rename.
  8. Rename the project.
  9. Edit the AndroidManifest.xml to change the package name and application name (app_name).
  10. Start creating your layout!

9.Install a Layout

To install your layout, plug in your device via USB and make sure it is set for debuggable. Right-click on your project and select Run As > Android Application. This will install the layout on your device.

10.Android Market

You can publish your layout to Android Market. In fact, you can even charge a fee for it. Publishing your layout to the market is exactly the same as publishing a full application. Read the Google documentation here on how to publish to the Android Market.

11.Additional Resources

If you have any questions, please post to the Developer Forum or send email to Trackaroo Support. You may also find the following links useful: