Horizontal menu with HorizontalScrollView-android

Question

This is one horizontal menu I have to implement .And this menu should scroll horizontally smoothly with left and right arrow like this Fox News application https://market.android.com/details?id=com.foxnews.android with the first app screen shot.

By using google and other post on this forum I used horizontalScrollView to achieve it,but don't know how to set left and right transparent images with arrow to indicate that there are more element to left or right depending on scroll.

Whatever I coded ,achieved scrolling movement but its slow and struggling to show left and right images with arrow.

Kindly tell me if you have any solution on this.

This layout I am using

<HorizontalScrollView
    android:id="@+id/hor_svID"
    android:layout_width="wrap_content"
    android:layout_height="35dip"
    android:scrollbars="none"
    android:fillViewport="false"
    android:focusable="false"
    android:background="@drawable/submenu_bg">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:focusable="false"
        android:background="#FFFFFF"
        android:gravity="center">
        <TextView android:id="@+id/TechnologyTxtVId" 
                android:text="TECHNOLOGY"   
                android:textColor="#342D7E"
                android:textSize="12sp"
                android:textStyle="bold"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></TextView>
        <TextView android:id="@+id/SportsTxtVId" 
                android:text="SPORTS" 
                android:textColor="#342D7E" 
                android:textStyle="bold"
                android:textSize="12sp"
                android:gravity="center"
                android:layout_height="wrap_content" 
                android:layout_width="wrap_content" 
                android:paddingLeft="15dip"></TextView> 
        <TextView android:id="@+id/EntntTxtVId" 
                android:text="ENTERTAINMENT"    
                android:textStyle="bold"
                android:paddingLeft="15dip"
                android:textSize="12sp"
                android:gravity="center"
                android:textColor="#342D7E"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></TextView>
        <TextView android:id="@+id/LocalTxtVId" 
                android:text="LOCAL"    
                android:textStyle="bold"
                android:paddingLeft="15dip"
                android:textSize="12sp"
                android:textColor="#342D7E"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></TextView>        
        <TextView android:id="@+id/WorldTxtVId" 
                android:text="WORLD"    
                android:textStyle="bold"
                android:textSize="12sp"
                android:paddingLeft="15dip"
                android:gravity="center"
                android:textColor="#342D7E"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></TextView>    
        <TextView android:id="@+id/FeaturesTxtVId" 
                android:text="FEATURES" 
                android:textStyle="bold"
                android:textSize="12sp"
                android:paddingLeft="15dip"
                android:gravity="center"
                android:textColor="#342D7E"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></TextView>        
        <TextView android:id="@+id/RecentTxtVId" 
                android:text="RECENT"   
                android:textStyle="bold"
                android:textSize="12sp"
                android:paddingLeft="15dip"
                android:gravity="center"
                android:textColor="#342D7E"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></TextView>                                
    </LinearLayout>                                     
</HorizontalScrollView>

Answer 1

I don't know the exact context in which you are using this, but you should probably change the LinearLayout to a relative one (it's a simple change in to your textViews adding the following:

• For the first text:

  android:layout_alignParentLeft="true"

• For the next texts

  android:layout_toRightOf="@id/previous_text"

If you are embedding this inside other LinearLayouts, perhaps you should also reconsider whether you can use relativeLayouts there too as per the efficient layout guidelines provided below:

http://developer.android.com/resources/articles/layout-tricks-efficiency.html

Let me know if this helps with some kudos ;) Thanks and good luck!