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...:)

About Author

Author Image
Prince Bhardwaj

Prince Bhardwaj is having Talent as Application Developer, he is an enthusiastic team player in Oodles Technologies.

Request for Proposal

Name is required

Comment is required

Sending message..