Custom Horizontal Scrollable Table Layout in Android
Posted By : Prince Bhardwaj | 29-Sep-2017
To create horizontal scrollable table layout on your screen, you have put your table layout in HorizontalScrollView.
<HorizontalScrollView
android:id="@+id/horizontal_scroll_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/color_primary_table_bg"
android:scrollbarThumbHorizontal="@drawable/scroll_indicator"
android:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/table"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="@dimen/margin_4">
<LinearLayout
android:layout_width="@dimen/table_column_width"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text"
android:textColor="@android:color/white"
android:textSize="@dimen/text_size_primary" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/margin_4"
android:paddingRight="@dimen/margin_4"
android:src="@mipmap/down_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="@dimen/table_column_width"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text"
android:textColor="@android:color/white"
android:textSize="@dimen/text_size_primary" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/margin_4"
android:paddingRight="@dimen/margin_4"
android:src="@mipmap/down_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="@dimen/table_column_width"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text"
android:textColor="@android:color/white"
android:textSize="@dimen/text_size_primary" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/margin_4"
android:paddingRight="@dimen/margin_4"
android:src="@mipmap/down_icon" />
</LinearLayout>
</TableRow>
</LinearLayout>
</TableLayout>
<View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="@dimen/margin_12"
android:background="@color/colorPrimary" />
</LinearLayout>
</HorizontalScrollView>
In this layout, we have created a horizontal line at the bottom of table row and to to customize scrollbar, we have created a custom drawable for it named - scroll_indicator and set it as scrollbarThumbIndicator. Here is the xml drawble for this -
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/app_grey"/>
<corners android:radius="@dimen/margin_12" />
</shape>
Now you run your application and see how horizontal scrollable table layout with custom scrollbar indicator works...:)
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Prince Bhardwaj
Prince Bhardwaj is having Talent as Application Developer, he is an enthusiastic team player in Oodles Technologies.