HTCdev - OpenSense SDK | Common Controls

Common Controls

Common Controls Sample Code

The following code snippets illustrate the use of the common controls. The complete source code is available in the SDK download. Since TimePicker is similar to DatePicker, only code snippets for DatePicker together with HtcListView and TabPlus are listed below.

DatePicker Demo - shows how to use DatePicker APIs

HtcListView Demo - demonstrates how to use HtcListView APIs

TabPlus Demo - shows how to use TabPlus APIs

TabPlus4 Demo - shows how to use TabPlus APIs in HTC Sense 4.0

DatePicker Demo

HTC Sense API DatePicker is a configurable dial selector. It can be tailored to custom requirements, such as date representations.

It is very simple and easy to use. Developer needs to extend the standard Android Activity and implement listeners to handle the events of date change, date set.

From HtcDatePickerDemo

package com.htc.sample.datetimepicker;

import java.util.Calendar;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.htc.sample.datetimepicker.R;
import com.htc.widget.HtcDatePicker;
import com.htc.widget.HtcDatePickerDialog;

public class HtcDatePickerDemo extends Activity {
    private Calendar mCalendar;
    private TextView showDateTimeTxt;
    private Button showDatePickerDialog;
    private HtcDatePicker mDatePicker;
    
    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.htc_date_picker_demo);
        
        mCalendar = Calendar.getInstance();
        showDateTimeTxt = (TextView)findViewById(R.id.txtv1);
        showDatePickerDialog = (Button)findViewById(R.id.show_datedialog);
        mDatePicker = (HtcDatePicker)findViewById(R.id.hdp);

        mDatePicker.setRepeatEnable(true);
        
        showDateTimeTxt.setText(mCalendar.getTime().toString());
        mDatePicker.init(mCalendar.get(Calendar.YEAR), 
                mCalendar.get(Calendar.MONTH), 
                mCalendar.get(Calendar.DAY_OF_MONTH), mDateListener);
        
        showDatePickerDialog.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                new HtcDatePickerDialog(
                        HtcDatePickerDemo.this, mDateDialogListener, 
                        1911, 2021, mCalendar.get(Calendar.YEAR), 
                        mCalendar.get(Calendar.MONTH), 
                        mCalendar.get(Calendar.DAY_OF_MONTH), true).show();
            }
        });
    }
    
    private HtcDatePicker.OnDateChangedListener mDateListener = 
            new HtcDatePicker.OnDateChangedListener() {
                public void onDateChanged(
                        HtcDatePicker view, int year, int monthOfYear, int dayOfMonth) {
                        mCalendar.set(year, monthOfYear, dayOfMonth);
                        showDateTimeTxt.setText(mCalendar.getTime().toString());
                }
            };

    private HtcDatePickerDialog.OnDateSetListener mDateDialogListener = 
            new HtcDatePickerDialog.OnDateSetListener() {
                public void onDateSet(
                        HtcDatePicker view, int year, int monthOfYear, int dayOfMonth) {
                        mCalendar.set(year, monthOfYear, dayOfMonth);
                        showDateTimeTxt.setText(mCalendar.getTime().toString());
                }
            };
} 

and in the layout

<com.htc.widget.HtcDatePicker 
    android:id="@+id/hdp" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
/> 

HtcListView Demo

HtcListView control shows items in a vertically scrolling list similar to a common ListView. It includes bouncing and fast scrolling which provides an added user experience. The HTC list view can be used in a similar way as an Android list view with an adapter.

From HtcListViewDemo

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.htc.sample.htclistview.simpledemo.R;
import com.htc.widget.HtcListView;

public class HtcListViewDemoActivity extends Activity {
    HtcListView mList;
    int mItemCount = 90;
    @Override
    public void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mList = (HtcListView) this.findViewById(R.id.list);
        mList.setAdapter(new ListViewAdapter());        
    }
        
    public class ListViewAdapter extends BaseAdapter {
    @Override
    public int getCount() {            
        return mItemCount;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TextView view = null;
        if(convertView == null) {
            LayoutInflater inflater = (LayoutInflater) HtcListViewDemoActivity.
                                this.getSystemService("layout_inflater");
            view= (TextView) inflater.inflate(R.layout.list_item, parent, false);
            view.setTextSize(30);
        } else {
            view = (TextView) convertView;
        }                     
        view.setText("This is List Item " + position);            
        return view;
    } 
    }
} 

and in the layout

<com.htc.widget.HtcListView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list"
     android:layout_width="match_parent"
    android:layout_height="match_parent"
/> 

TabPlus Demo

The following screenshots illustrate a couple of the tab selections using similar tabs as those found in the HTC Sense music application. The panes can include views or activities, such as the Android SDK sample API demo shown on the right.

When one holds and drags a "tab", one can quickly scan though the panes with each pane's tab icon image displayed in the main panel area as shown in the following screenshot:

To start, create an activity that extends CarouselActivity. In onCreate() obtain access to the CarouselHost and add each tab.

From DemoActivity:

import com.htc.widget.CarouselActivity;
import com.htc.widget.CarouselHost;

public class DemoActivity extends CarouselActivity {
    final static String AUTHORITY =
        "com.htc.htccommoncontrols.demo.carousel.MyProvider";

    public DemoActivity() {
        super(AUTHORITY);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        this.setGId(1);
        super.onCreate(savedInstanceState);

        final CarouselHost mPanelHost = getCarouselHost();

        mPanelHost.addTab("Artist", this, R.string.artists_title,
                R.drawable.common_icon_artist_rest,
                R.drawable.common_icon_artist_on,
                R.drawable.common_icon_overlay_artist,
                    (new Intent("com.htc.test.show1")));

        mPanelHost.addTab("Album", this, R.string.albums_title,
                R.drawable.common_icon_albums_rest,
                R.drawable.common_icon_albums_on,
                R.drawable.common_icon_overlay_album, 
                    (new Intent("com.htc.test.reorder")));

        mPanelHost.addTab("Playlist", this, R.string.playlists_title,
                R.drawable.common_icon_playlist_rest,
                R.drawable.common_icon_playlist_on,
                R.drawable.common_icon_overlay_playlist,
                    (new Intent("com.htc.test.dialog")));

        mPanelHost.addTab("Track", this, R.string.tracks_title,
                R.drawable.common_icon_all_songs_rest,
                R.drawable.common_icon_all_songs_on,
                R.drawable.common_icon_overlay_allsongs, 
                    (new Intent("com.htc.test.show2")));

        mPanelHost.addTab("Genre", this, R.string.genre_title,
                R.drawable.common_icon_genres_rest,
                R.drawable.common_icon_genres_on,
                R.drawable.common_icon_overlay_genres, 
                    (new Intent("com.htc.test.show1")));

        mPanelHost.addTab("Composer", this, R.string.composer_title,
                R.drawable.common_icon_composer_rest,
                R.drawable.common_icon_composer_on,
                R.drawable.common_icon_overlay_composer, 
                    (new Intent("com.htc.test.show2")));
    } 

Note, each intent target is defined in the manifest file that corresponds to different activities. In this example we reuse several of the activities for different tabs. In particular, ShowActivity1 and ShowActivity2 simply display 2 different images.

In the DemoActivity2 class we define a separate "instance" of a TabPlus control, and hence we can have one tab call another set of tabs, in essence defining nested tabs. As you'll note, in this example we have a button in the ReorderActivity to access the "nested tabs". In the second CarouselActivity (DemoActivity2), we "reorder" the tabs.

DemoActivity2.java

public class DemoActivity2 extends CarouselActivity {
    final static String AUTHORITY =
        "com.htc.htccommoncontrols.demo.carousel.MyProvider";

    public DemoActivity2() {
        super(AUTHORITY);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        this.setGId(2);
        super.onCreate(savedInstanceState);

        final CarouselHost mPanelHost = getCarouselHost();

        mPanelHost.addTab("Artist2", this, R.string.artists_title,
                R.drawable.common_icon_artist_rest
                , R.drawable.common_icon_artist_on
                , R.drawable.common_icon_overlay_artist
                , (new Intent("com.htc.test.show2"))); 

You'll notice in onCreate() that we have a setGId(int groupId) CarouselActivity method called. This uniquely identifies each group of ids. This is required for nested tabs support. Also required, as part of the constructor for all CarouselActivity instances, is the AUTHORITY parameter. This identifies your custom CarouselProvider subclass that serves as your database which contains the information of every element of your tab. The following provides the simplest form of subclassing CarouselProvider:

MyProvider.java

import com.htc.content.CarouselProvider;

public class MyProvider extends CarouselProvider {
    final static String AUTHORITY =
      "com.htc.htccommoncontrols.demo.carousel.MyProvider";

    public MyProvider() {
        super();
        setupCarousel(AUTHORITY);

    }

} 

This will also give you the additional feature for the user to able to rearrange the tabs after a "long hold" to enter an edit mode for rearranging the tabs or even add and remove tabs. The first time you "long hold" to enter this tab edit mode you will see the following:

TabPlus 4 Demo

In HTC Sense4.0 or later, the TabPlus APIs can be used together with other APIs to provide more unique user experiences.

The following sample code shows how to use the TabPlus APIs in HTC Sense 4.0

Developer may create a simple carousel object by extending HTC CarouselFragment

From SimpleCarousel.java

public class SimpleCarousel extends CarouselFragment {


    
    public SimpleCarousel() {
        super(TabPlus4Demo.AUTHORITY);

        if(TabPlus4Demo.USE_HTCSTYLE)
            requestCarouselFeature(CarouselFragment.FEATURE_CUSTOM_TITLE);
    }

    private void addTab(CarouselHost host, String tag, int icon, int str) {
        host.addTab(getActivity(), new CarouselTabSpec(tag,
                str, icon, icon, icon, SimpleTab.class.getName()));
    }

    private void addTab(CarouselHost host, String tag, int icon, int str, String alt) {
        addTab(host, tag, icon, str);
        host.setAlternativeTabName(tag, alt);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        final CarouselHost host = getCarouselHost();

        addTab(host, "Tab1", R.drawable.icon_tab_check_in,
                R.string.tab1, "Family");
        addTab(host, "Tab2", R.drawable.icon_tab_all_footprints,
                R.string.tab2, "Location");
        addTab(host, "Tab3", R.drawable.icon_tab_group_action,
                R.string.tab3, "Shared contacts");
        addTab(host, "Tab4", R.drawable.icon_tab_messages,
                R.string.tab4, "Messages");
        addTab(host, "Tab5", R.drawable.icon_tab_photos,
                R.string.tab5, "Photos");

    }
} 

and a simple tab by extending Fragment.

From SimpleTab.java

public class SimpleTab extends Fragment {   
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        if(getArguments() != null) {
            int resId = getArguments().getInt("LAYOUT");
            if(resId != 0)
                return inflater.inflate(resId, null);
        }               
        return inflater.inflate(R.layout.main, null);
    }
} 

A CarouselProvider is also needed

From TabProvider.java

public class TabProvider extends CarouselProvider {
    public TabProvider(){
        super();
        setupCarousel(TabPlus4Demo.AUTHORITY);
    }
} 

Inside of the TabPlus4 demo activity, an inner class is needed to handle tab change events. This class needs to implement CarouselHost.OnTabChangeListener.