Creating a Android left panel just like the one in "TV & Movies" application in google tv

Question

I have a situation where i need to create a left panel. My manager says that this should be like the one used in TV & Movies application on Google TV device, which initially shows only the icons and expands over the contents to the right to show the icon's text too when it gets focus.

I want tabs to be like in the following image (the white boxes are my links and red ractangle is my left panel):

Enlarged image can be viewed here

My requirements for the left panel are:

1. It should expand over the right side portion when any of its link is focussed. I thing the animation the width should not be difficult. But how would i know that a control is Left Panel got/lost focus

2. A seperate activity is loaded into a FrameLayout on right side when any of the link is clicked in left panel... I have also done it too using a workaround. But i would prefer to know some decent good approach.

3. The left panel should decrease in width and should hide the icon's text when the user focuses the loaded activity by pressing the RIGHT D-PAD button.

4. I must be freely able to navigate using KEYBOARD between Left panel and child activity controls that is loaded in the container FrameLayout. This is because my application is for Google TV where users would preffer navigation using D-Pad. this is the main issue i am facing... as i am unable to navigate from a child control to its parent's neighbor control

To have all the above mentioned points, i looked at the TabHost but could not find a way to make it look like the one i need.

I also have seen themissingtabwidget but its vertical tabs fills all the vertically available space and there placement is not controlable for me, i need more like a left panel like structure where i can place links at any place i want. So this also failed.

Now i decided to create one myself. I am doing it the following way:

1. main.xml contains a FrameLayout at root that holds
   • FrameLayout for holding activities -- i have set its margin from left so that the next left panel would fit in that space & when would cover the frame instean of going under it when i animate the panel's size
   • RelativeLayout for holding left panel items.

Main.xml is as follows:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<!-- 
    THIS First TabHost IS NOT USED AT ALL.
    I JUST PUT IT HERE AS THE underlying TabActivity required it and was giving me error.
    You can see its visibility is set to GONE.
    
    You can just minimize it and forget it as its a silly Workaround.
    and help me if you know of some better way
 -->
<TabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="100dp"
            android:layout_height="fill_parent"
            android:layout_weight="0"
            android:orientation="vertical" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1" />
    </LinearLayout>
</TabHost>

<!-- 
    Activities are loaded here in this frame.
    Its margin from Left is set to 150dp to have space.
    Its placed on the first place as the second RelativeLayout would be used as Left Panel.
-->
<FrameLayout
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginLeft="150dp"
    android:nextFocusLeft="@+id/leftpanel"
    android:background="#CCAAAA" >
</FrameLayout>
    
<!--
    Left Panel holding links/buttons etc to load a separate activity in above FrameLayout 
 -->
<RelativeLayout
    android:id="@+id/leftpanel"
    android:layout_width="200dp"        
    android:layout_height="fill_parent"
    android:background="#33FAFAFA"
    android:focusable="True"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btnArtists"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Artists" >
    </Button>

    <Button
        android:id="@+id/btnAlbum"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnArtists"
        android:text="Album" >
    </Button>

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="True"
        android:text="Login" >
    </Button>
</RelativeLayout>

the main tab activity is as follows:

public class TestActivity extends TabActivity {
FrameLayout container;
Intent artistsIntent;
Intent albumsIntent;

/** Called when the activity is first created. */
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    
    container = (FrameLayout)findViewById(R.id.container);
    artistsIntent = new Intent().setClass(this, ArtistsActivity.class);
    albumsIntent = new Intent().setClass(this, AlbumsActivity.class);
    
    Button btnArtist = (Button)findViewById(R.id.btnArtists);        
    btnArtist.setOnClickListener(new OnClickListener() {
        
        public void onClick(View v) {
            container.removeAllViews();
            View view = getLocalActivityManager().startActivity("ArtistsActivity",
                    new Intent(getApplicationContext(), ArtistsActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)).getDecorView();
            container.addView(view);                
        }
    });
    
    Button btnlbum = (Button)findViewById(R.id.btnAlbum);
    btnlbum.setOnClickListener(new OnClickListener() {
        
        public void onClick(View v) {
            container.removeAllViews();   
            View view = getLocalActivityManager().startActivity("AlbumsActivity",
                    new Intent(getApplicationContext(), AlbumsActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)).getDecorView();
            container.addView(view);
            
        }
    });
}    
}

As you can see that the main TestActivity is a TabActivity which provides the functionality for implementing tabs. I extended my activity from TabActivity because , according to my knowledge, this was the only way to add an activity to a FrameLayout as a child view.

This also forced me to have a TabHost with that specific name. so i added it and set its visibility to gone to make it stop complaining. ... YES I KNOW... THIS IS A SILLY WORKAROUND .. BUT i would not be here if i knew some proper way... so help me if there is some better way to do it.

Another issue with my current test project is that when i focus a button in a child activity that is loaded in a FrameLayout using Right arrow key .. I can not focus back on the buttons in Left Panel using LEFT keyboard key...

HOW TO DO IT????????????

I have uploaded small sample project here. Please download it and have a look at it. Also set the Theme of .TestActivity to android:theme="@android:style/Theme.Holo" in AndroidManifest.xml to see the app in full screen as intended.

Your help is greatly appreciated.

NOTE: I am creating this app for Google TV... where the navigation mainly depends upon D-Pad... so i have to make sure that i can reach anywhere using Kayboard.

So Help me.

Answer 1

If I'm not mistaken, you're looking for the Left Navigation Bar Library provided by Google just for such purpose.

Also see the provided sample code for using it.

Answer 2

Android fragments would be perfect for your purpose. Take a look at the documentation, which is really clear and explains how to use it properly.