1 year ago

#225122

test-img

S. B.

How to create a custom table like structure using Grid Layout in Android Studio?

I want to create a custom report which should look something like this in Android: enter image description here

The number of schools and number of years will be dynamic. I had created this using the Table Layout but since it is very large data it is taking way too much long to display results. I have also tried using Grid Layout but the column spanning is not working there, the result is just coming as all columns with same width. If I try to set the width using GridLayout.params, it only accepts size in pixels so it is visible differently on various devices.

Is there any way i can specify column width in dp or span the column? titleTxtSpecColumn= GridLayout.spec (5,5) is not working, its still displaying as wrap content.

       val gridLayout = findViewById<GridLayout>(R.id.reportgrid)
       var titleRowSpec: GridLayout.Spec
       var titleTxtSpecColumn: GridLayout.Spec
        titleRowSpec= GridLayout.spec(1)
        titleTxtSpecColumn= GridLayout.spec (0,4)
        val tv0 = layoutInflater.inflate(R.layout.gridcell_header, gridLayout, false) as TextView?
        tv0!!.text = getString(R.string.lbl_date)
        tv0.setBackgroundResource(R.drawable.tablerow_border)
        gridLayout.addView(tv0, GridLayout.LayoutParams(titleRowSpec, titleTxtSpecColumn))

        titleTxtSpecColumn= GridLayout.spec (4)
        val tv1 = layoutInflater.inflate(R.layout.gridcell_header, gridLayout, false) as TextView?
        tv1!!.text = getString(R.string.lbl_grade)
        tv1.setBackgroundResource(R.drawable.tablerow_border)
        gridLayout.addView(tv1, GridLayout.LayoutParams(titleRowSpec, titleTxtSpecColumn))

        titleTxtSpecColumn= GridLayout.spec (5,5)
        val tv2 = layoutInflater.inflate(R.layout.gridcell_header, gridLayout, false) as TextView?
        tv2!!.text = getString(R.string.lbl_grade)
        tv2.setBackgroundResource(R.drawable.tablerow_border)
        gridLayout.addView(tv2, GridLayout.LayoutParams(titleRowSpec, titleTxtSpecColumn))

Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activities.ReportActivity"
    android:background="@color/eggshell">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Theme.Account.Toolbar">
        <TextView
            android:id="@+id/custom_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            style="@style/Toolbar"
            />
    </androidx.appcompat.widget.Toolbar>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:scrollbarStyle="outsideInset"
        android:fillViewport="true">
        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="horizontal">
            <GridLayout
                android:id="@+id/reportgrid"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/tablerowdata_border"
                tools:ignore="ScrollViewSize">
                
            </GridLayout>
        </HorizontalScrollView>
    </ScrollView>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="350dp"
    android:layout_height="0dp"
    style="@style/ReportHeading"/>

Style:

<style name="ReportHeading" parent="@style/Widget.MaterialComponents.TextView">
    <item name="android:textColor">@color/black</item>
    <item name="android:textSize">18sp</item>
    <item name="android:textAlignment">center</item>
    <item name="android:textStyle">bold</item>
    <item name="android:padding">8dp</item>
    <item name="android:background">@color/colorLightGray</item>

Border:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/colorLightGray" />
    <stroke android:width="2dp" android:color="@color/black" />
</shape>

android

kotlin

android-gridlayout

0 Answers

Your Answer

Accepted video resources