Horizontal menu with HorizontalScrollView-android

Question

This is one horizontal menu that I have to implement. And this menu should scroll horizontally smoothly using the left and right arrows, as this Fox News application https://market.android.com/details?id=com.foxnews.android with the first screenshot of the application.

Using google and another post on this forum, I used horizontalScrollView to achieve it, but I don’t know how to set the left and right transparent images with an arrow to indicate that there are more elements left or right depending on the scroll.

Regardless of what I encoded, the scroll motion achieved, but it is slow and struggles to show the left and right images with an arrow.

Please tell me if you have any solution.

This layout that I use

<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 use this, but you should probably change LinearLayout to relative (this is a simple change in your text application, adding the following:

• For the first text:

  Android: layout_alignParentLeft = "true"

• For the following texts

  Android: layout_toRightOf = "@ identifier / previous_text"

If you are embedding this in other LinearLayouts, you might also need to reconsider whether you can also use relativeLayouts in accordance with the recommendations for efficient layout below:

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

Let me know if this helps with some benefits;) Thank you and good luck!