Search code examples
androidscrollviewtablelayout

How to add scrollview in Table Layout?


this is my first time using Scrollview and i want to make application with tablelayout 3x8 rows. The rows have same size height and width, and the table can scrolled vertically. how can i do this this in xml layout? thanks for your help

<ScrollView android:id="@+id/layout"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_marginTop="5dip"
    android:scrollbarStyle="outsideInset"
    android:fillViewport="true"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="*"
    >
    <TableRow
        android:layout_weight="1"
        android:gravity="center">
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
    <TableRow
        android:layout_weight="1"
        android:gravity="center">
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
    <TableRow
        android:layout_weight="1"
        android:gravity="center">
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
    <TableRow
        android:layout_weight="1"
        android:gravity="center">
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
</TableLayout>

<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="*"
    >
    <TableRow
        android:layout_weight="1"
        android:gravity="center">
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
    <TableRow
        android:layout_weight="1"
        android:gravity="center">
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
    <TableRow
        android:layout_weight="1"
        android:gravity="center">
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
    <TableRow
        android:layout_weight="1"
        android:gravity="center">
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
        <Button android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
</TableLayout>
    </LinearLayout>
</ScrollView>

Solution

  • this is one of the approach where you have to give your TableRow manually height so you can achieve this as follows

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        <ScrollView android:id="@+id/layout"
            android:layout_height="match_parent"
            android:scrollbars="horizontal|vertical"
            android:layout_width="match_parent"
            android:layout_marginTop="5dip"
            android:scrollbarStyle="outsideInset"
            android:fillViewport="true"
            xmlns:android="http://schemas.android.com/apk/res/android">
            <LinearLayout
                android:layout_width="match_parent" android:orientation="vertical"
                android:layout_height="match_parent">
    
                <TableRow
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="match_parent" android:layout_height="match_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                </TableRow>
                <TableRow
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="match_parent" android:layout_height="match_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                </TableRow>
                <TableRow
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="match_parent" android:layout_height="match_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                </TableRow>
                <TableRow
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="match_parent" android:layout_height="match_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                </TableRow>
                <TableRow
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="match_parent" android:layout_height="match_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                </TableRow>
                <TableRow
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="match_parent" android:layout_height="match_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                </TableRow>
                <TableRow
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="match_parent" android:layout_height="match_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                </TableRow>
                <TableRow
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="match_parent" android:layout_height="match_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                    <Button android:layout_weight="1" android:text="Button" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
                </TableRow>
    
            </LinearLayout>
        </ScrollView>
    
    </LinearLayout>  
    

    Another way of achieving the this you can use GridView or RecyclerView. RecyclerView is easiest way to achieve this. I hope its work for you. Thank you