Horizontal-Scrollable menu bar with tweening animation

I wanted to build a custom UI component which consist of a button and a menu bar.

When the button is clicked, the button will tween away from the screen, then the menu bar will tween in. The menu bar is built a set of icons scrollable horizontally. Such example is like the Fox News app where y开发者_如何学JAVAou select the type news you want from the scroll bar. Such as shown here.

Another example is on the app Thinking Space, when user click on the menu button and the drawing toolbar comes up. I need exactly shown on this app.

I've read several guides on building a custom UI component from android's page but have not yet got a clue on where should I start. Do I need to completely build from scratch by extending View class? If it's so, how do I implement the tweening animation, I do not know which should be drawn in onDraw() method as the bar and the button will not both appear on the screen.

Any advice or example to guide me to the light? It's my first time building custom UI components.

I'll provide more information for you to help me, if needed.

Thank you very much!

did you think about using Tabhost , and in each Tabspec , use an HorizontalScrollView which will contains your menu

?? is that what you want ?

in your LAyout xml :

<!-- scroll des pays de filtre -->
    <HorizontalScrollView android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:layout_alignParentTop="true"
        android:id="@+id/scrollPays">

        <LinearLayout android:layout_height="wrap_content"
            android:layout_width="fill_parent" android:id="@+id/layoutScrollPays"
            android:orientation="horizontal">

            <Button android:id="@+id/filtrePaysPromo" android:layout_width="wrap_content"
                android:textStyle="bold" android:textSize="17px" android:textColor="#fafafa" 
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Promo" android:padding="2px"
                android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysMaroc" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Maroc" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center" />

            <Button android:id="@+id/filtrePaysTunisie" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Tunisie" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysEspagne" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Espagne" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysTurquie" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Turquie" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysGrece" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Grece" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysMaurice" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Ile Maurice" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysRepDom" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Rep. Dominicaine" android:textSize="17px" 
                android:textColor="#fafafa" android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysItalie" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Italie" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysEgypt" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Egypt" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>
        </LinearLayout>
    </HorizontalScrollView>

that's work for me , it looks like this :