Adv

Android TableView

The concept here is tableview and it’s various usages. TableView isn’t a standard widget but can be created via a recyclerview or via third party libraries.

Below are various examples of tableview usages with various collections.

Share

Related Concepts

Adv

5 Examples

  1. Android TableView Library

    Android TableView Tutorial.

    TableView is an android library that allows us create and work with Tables in android.

    It contains a simple TableView and an advanced SortableTableView.

    There is both a free and a premium version of tableView.

     

    Requirements of a TableView

    TableView requires Android Minimum SDK version of 11 and Compule SDK Version of 25.

    Installing TableView

    TableView can be installed by adding the following implementation statement in your app leve build.gradle:

    implementation 'de.codecrafters.tableview:tableview:2.8.0'

    Working with TableView

    This involves two processes:

    1. Addding the TableView Element in Your Layout:
    <de.codecrafters.tableview.TableView
        
        android_id="@+id/tableView"
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        table_tableView_columnCount="4" />

    You can modify the number of columns you want your android table to have.

    1. Referencing the TableView:
      Then you reference the TableView in your Java code:

      TableView tableView = (TableView) findViewById(R.id.tableView);

      Here you can also modify the number of columns you want:

      tableView.setColumnCount(4);

    Handling Column Widths

    TableView allows you modify the column widths in various manners:

    1. Absolutely Using TableColumnDpWidthModel or TableColumnPxWidthModel
      Here’s an example with TableColumnDpWidthModel:

      TableColumnDpWidthModel columnModel = new TableColumnDpWidthModel(context, 4, 200);
      columnModel.setColumnWidth(1, 300);
      columnModel.setColumnWidth(2, 250);
      tableView.setColumnModel(columnModel);

      And here’s one with TableColumnPxWidthModel:

      TableColumnPxWidthModel columnModel = new TableColumnPxWidthModel(4, 350);
      columnModel.setColumnWidth(1, 500);
      columnModel.setColumnWidth(2, 600);
      tableView.setColumnModel(columnModel);
    2. Relatively with the TableColumnWeightModel
      The defauly column weight is 1.

      TableColumnWeightModel columnModel = new TableColumnWeightModel(4);
      columnModel.setColumnWeight(1, 2);
      columnModel.setColumnWeight(2, 2);
      tableView.setColumnModel(columnModel);

    Showing Data

    Data can be shown easily in TableView with help of SimpleTableDataAdapter class.

    This allows us easily render two-dimensional string array in a tabular format.

    This adapter will turn the strings you supply into TextViews and display them inside TableView at the same position as previous in the 2D-String-Array.

    Here’s an example:

    public class MainActivity extends AppCompatActivity {
    
        private static final String[][] DATA_TO_SHOW = { { "This", "is", "a", "test" }, 
                                                         { "and", "a", "second", "test" } };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            TableView<String[]> tableView = (TableView<String[]>) findViewById(R.id.tableView);
            tableView.setDataAdapter(new SimpleTableDataAdapter(this, DATA_TO_SHOW));
        }
    }

     

  2. Adv
  3. Android TableView – Fill From Array – With Headers and RowClick

    Android has a couple of inbuilt adapterviews like ListView,GridView,RecyclerView and Spinner that are used as the core of most modern apps.And thats pretty good cause most apps consist of Lists of data.

    The above generally display lists of data.However,there are situations where you want to use the old fashioned table,with rows and columns.Infact in desktop and web development,with programming languages like Java and C# the tableviews are the most popular.Think components like JTable and DataGridView.

    Today we use TableView library by Codecrafters and craft a table with header,rows and columns.Moreover,we handle ItemClicks,showing a toast
    message.

    We are Building a Vibrant YouTube Community

    We have a fast rising YouTube Channel of friends. So far we’ve accumulated almost 3 million agreggate views and more than 10,000 subscribers as of the time of writing this. Here’s the Channel: ProgrammingWizards TV.

    Please go ahead subscribe(free obviously) as well. If you have a question or a comment you can post there instead of in this site.People are suggesting us tutorials to do there so you can too.

    Before we get into our example, we need to introduce the few classes that we will be using.

    What is a String?

    Well you know android is coded in java. Java is the primary programming language for android development as of yet.

    In our example we will be looking at binding a two-dimensional string array into our TableView. In the process we have a simple TableView with headers, columns and rows.

    Java doesn’t have a primitive type for strings. However, there is a class called String that can be used to store and process strings of characters.

    Here’s an example of displaying a string literal:

    System.out.println("Hello Camposha.");

    And here’s how to declare a string in java:

    String name;

    Then we can assign it in the following manner:

    name = "Oclemy";

    Or we can have it in a single statement:

    String name = "Oclemy"

    What is an Array?

    An array is a data structure that behaves like a list of variables with a uniform naming mechanism that can be declared in a single line of simple code.

    You use an array to store a sequence of similar data type values. You can for instance have an array of strings or an array of integers.

    You can create an array in the following manner:

    double[] scores = new double[10];

    You can get the length of an array using the length property:

    System.out.println("Enter " + score.length + " scores:");

    You can initialize an array in the following manner:

    int[] age = {20, 42, 19,35};

    What is TableView?

    TableView is an android library that allows us create and work with Tables in android.

    It contains a simple TableView and an advanced SortableTableView.

    There is both a free and a premium version of tableView.

    Requirements of a TableView

    TableView requires Android Minimum SDK version of 11 and Compule SDK Version of 25.

    Installing TableView

    TableView can be installed by adding the following implementation statement in your app leve build.gradle:

    implementation 'de.codecrafters.tableview:tableview:2.8.0'

    Working with TableView

    This involves two processes:

    1. Addding the TableView Element in Your Layout:
    <de.codecrafters.tableview.TableView
        
        android_id="@+id/tableView"
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        table_tableView_columnCount="4" />

    You can modify the number of columns you want your android table to have.

    1. Referencing the TableView:
      Then you reference the TableView in your Java code:

      TableView tableView = (TableView) findViewById(R.id.tableView);

      Here you can also modify the number of columns you want:

      tableView.setColumnCount(4);

    Handling Column Widths

    TableView allows you modify the column widths in various manners:

    1. Absolutely Using TableColumnDpWidthModel or TableColumnPxWidthModel
      Here’s an example with TableColumnDpWidthModel:

      TableColumnDpWidthModel columnModel = new TableColumnDpWidthModel(context, 4, 200);
      columnModel.setColumnWidth(1, 300);
      columnModel.setColumnWidth(2, 250);
      tableView.setColumnModel(columnModel);

      And here’s one with TableColumnPxWidthModel:

      TableColumnPxWidthModel columnModel = new TableColumnPxWidthModel(4, 350);
      columnModel.setColumnWidth(1, 500);
      columnModel.setColumnWidth(2, 600);
      tableView.setColumnModel(columnModel);
    2. Relatively with the TableColumnWeightModel
      The defauly column weight is 1.

      TableColumnWeightModel columnModel = new TableColumnWeightModel(4);
      columnModel.setColumnWeight(1, 2);
      columnModel.setColumnWeight(2, 2);
      tableView.setColumnModel(columnModel);

    Showing Data

    Data can be shown easily in TableView with help of SimpleTableDataAdapter class.

    This allows us easily render two-dimensional string array in a tabular format.

    This adapter will turn the strings you supply into TextViews and display them inside TableView at the same position as previous in the 2D-String-Array.

    Here’s an example:

    public class MainActivity extends AppCompatActivity {
    
        private static final String[][] SPACESHIPS = { { "Casini", "Chemical", "NASA", "Jupiter" }, 
                                                         { "Spitzer", "Nuclear", "NASA", "Alpha Centauri" } };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            TableView<String[]> tableView = (TableView<String[]>) findViewById(R.id.tableView);
            tableView.setDataAdapter(new SimpleTableDataAdapter(this, SPACESHIPS));
        }
    }

    Let’s look at a full example.

    What we do :

    • Show a tableview.
    • Populate its column headers with data.The header has its own adapter using SimpleTableHeaderAdapter.
    • Populate rows with data .It has its own adapter using SimpleTableDataAdapter.
    • Change header background color and set its column count.
    • Handle ItemClicks for our rows.
    • When a row is clicked show a toast with clicked data.
    Screenshot
    • Here’s the screenshot of the project.

    Tools Used

    This example was written with the following tools:

    • Windows 8
    • AndroidStudio IDE
    • Genymotion Emulator
    • Language : Java

    Source Code

    Lets jump directly to the source code.

    Build.Gradle App Level

    • Android Studio has added for us dependencies for AppCompat and Design support libraries.
    • Now lets add dependencies for TableView.
    • It shall be fetched from online so be connected fro the first time you are adding.
    apply plugin: 'com.android.application'
    
    android {
        compileSdkVersion 24
        buildToolsVersion "24.0.1"
    
        defaultConfig {
            applicationId "com.tutorials.hp.simpletable"
            minSdkVersion 15
            targetSdkVersion 24
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:24.1.1'
        compile 'com.android.support:design:24.1.1'
        compile 'de.codecrafters.tableview:tableview:2.2.0'
    }

    MainActivity.java

    Main Responsibility : LAUNCH OUR APP.

    • We shall reference the views like TableView  here,from our XML Layouts.
    • We then initialize our SimpleTableHeaderAdapter and SimpleTableDataAdapters.
    • Then pass our data aray to it.
    • Header shall take a single dimensional array while the data shall take a multidimensional array.
    • Then set them to our tableview.
    • Then hande our itemclicks.
    package com.tutorials.hp.simpletable;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.support.design.widget.FloatingActionButton;
    import android.support.design.widget.Snackbar;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.view.View;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
    
    import java.util.ArrayList;
    
    import de.codecrafters.tableview.TableView;
    import de.codecrafters.tableview.listeners.TableDataClickListener;
    import de.codecrafters.tableview.toolkit.SimpleTableDataAdapter;
    import de.codecrafters.tableview.toolkit.SimpleTableHeaderAdapter;
    
    public class MainActivity extends AppCompatActivity {
    
        static String[][] spaceProbes={
                {"1","Pioneer","Chemical","Jupiter"},
                {"2","Voyager","Plasma","Andromeda"},
                {"3","Casini","Solar","Saturn"},
                {"4","Spitzer","Anti-Matter","Andromeda"},
                {"5","Apollo","Chemical","Moon"},
                {"6","Curiosity","Solar","Mars"},
    
        };
        static String[] spaceProbeHeaders={"No","Name","Propellant","Destination"};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    
            final TableView<String[]> tableView = (TableView<String[]>) findViewById(R.id.tableView);
    
            //SET PROP
            tableView.setHeaderBackgroundColor(Color.parseColor("#2ecc71"));
            tableView.setHeaderAdapter(new SimpleTableHeaderAdapter(this,spaceProbeHeaders));
            tableView.setColumnCount(4);
    
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    tableView.setDataAdapter(new SimpleTableDataAdapter(MainActivity.this, spaceProbes));
    
                }
            });
    
            tableView.addDataClickListener(new TableDataClickListener() {
                @Override
                public void onDataClicked(int rowIndex, Object clickedData) {
                    Toast.makeText(MainActivity.this, ((String[])clickedData)[1], Toast.LENGTH_SHORT).show();
                }
            });
    
        }
    
    }

    ActivityMain.xml

    • Inflated as our activity’s view.
    • Includes our content main.
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout 
        
        
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_fitsSystemWindows="true"
        tools_context="com.tutorials.hp.simpletable.MainActivity">
    
        <android.support.design.widget.AppBarLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_theme="@style/AppTheme.AppBarOverlay">
    
            <android.support.v7.widget.Toolbar
                android_id="@+id/toolbar"
                android_layout_width="match_parent"
                android_layout_height="?attr/actionBarSize"
                android_background="?attr/colorPrimary"
                app_popupTheme="@style/AppTheme.PopupOverlay" />
    
        </android.support.design.widget.AppBarLayout>
    
        <include layout="@layout/content_main" />
    
        <android.support.design.widget.FloatingActionButton
            android_id="@+id/fab"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_layout_gravity="bottom|end"
            android_layout_margin="@dimen/fab_margin"
            android_src="@android:drawable/ic_dialog_email" />
    
    </android.support.design.widget.CoordinatorLayout>

    ContentMain.xml

    • Defines our view hierarchy.
    • In this case shall hold our tableview.So please add the below tableview tag with its appropriate properties.
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        
        
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_paddingBottom="@dimen/activity_vertical_margin"
        android_paddingLeft="@dimen/activity_horizontal_margin"
        android_paddingRight="@dimen/activity_horizontal_margin"
        android_paddingTop="@dimen/activity_vertical_margin"
        app_layout_behavior="@string/appbar_scrolling_view_behavior"
        tools_context="com.tutorials.hp.simpletable.MainActivity"
        tools_showIn="@layout/activity_main">
    
        <de.codecrafters.tableview.TableView
            android_id="@+id/tableView"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
             />
    </RelativeLayout>

    Video/Preview

    • We have a YouTube channel with almost a thousand tutorials, this one below being one of them.

    How To Run

    1. Download the project above.
    2. You’ll get a zipped file,extract it.
    3. Open the Android Studio.
    4. Now close, already open project.
    5. From the Menu bar click on File >New> Import Project.
    6. Now Choose a Destination Folder, from where you want to import project.
    7. Choose an Android Project.
    8. Now Click on “OK“.
    9. Done, your done importing the project,now edit it.

    More Resources

    Resource Link
    Source Code Download
    Video Tutorial YouTube Video

    Best regards.

  4. Adv
  5. Android TableView – Fill With HashTable of Objects – With Headers and RowClick

     

    Android has a couple of inbuilt adapterviews like ListView,GridView,RecyclerView and Spinner that are used as the core of most modern apps.And thats pretty good cause most apps consist of Lists of data.

    The above generally display lists of data.However,there are situations where you want to use the old fashioned table,with rows and columns.Infact in desktop and web development,with programming languages like Java and C# the tableviews are the most popular.

    Think components like JTable and DataGridView. Today we use TableView library by Codecrafters and craft a table with header,rows and columns.Moreover,we handle ItemClicks,showing a toast message.

    Project Demo

    What we do :

    • Show a tableview.
    • Populate its column headers with data.The header has its own adapter using SimpleTableHeaderAdapter.
    • Populate rows with data .It has its own adapter using SimpleTableDataAdapter.
    • Change header background color and set its column count.
    • Handle ItemClicks for our rows.
    • When a row is clicked show a toast with clicked data.

    SECTION 1 : Our Dependencies

    Build.Gradle

    • Android Studio has added for us dependencies for AppCompat and Design support libraries.
    • Note we are using AppCompatActivity.
    • Design support libraries are for cordinatorlayout,appbar layout,toolbar and floating action button.All contained in our ActivityMain.xml layout specification.
    • Now lets add dependencies for TableView.
    • It shall be fetched from online so be connected fro the first time you are adding.
    apply plugin: 'com.android.application'
    
    android {
        compileSdkVersion 24
        buildToolsVersion "24.0.1"
    
        defaultConfig {
            applicationId "com.tutorials.hp.tableviewhashtable"
            minSdkVersion 15
            targetSdkVersion 24
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:24.2.0'
        compile 'com.android.support:design:24.2.0'
        compile 'de.codecrafters.tableview:tableview:2.2.0'
    }

    SECTION 2 : Our Data Object

    Spacecraft.java

    Main Responsibility : IS A SINGLE DATA OBJECT

    • Represents a single object.Here I’ll use Spacecraft.
    • The object shall have various properties like name,title,date etc.
    • Each object shall occupy a specific row.
    • Its corresponding properties then occupy the cells.
    package com.tutorials.hp.tableviewhashtable;
    
    public class Spaceprobe {
    
        String id,name,propellant,destination;
    
        public String getId() {
            return id;
        }
    
        public void setId(String id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getPropellant() {
            return propellant;
        }
    
        public void setPropellant(String propellant) {
            this.propellant = propellant;
        }
    
        public String getDestination() {
            return destination;
        }
    
        public void setDestination(String destination) {
            this.destination = destination;
        }
    }

    SECTION 3 : Our Activity

    MainActivity class.

    Main Responsibility : LAUNCH OUR APP.

    • We shall reference the views like TableView  here,from our XML Layouts.
    • We then initialize our SimpleTableHeaderAdapter and SimpleTableDataAdapters.
    • Our data source shall be a hashtable filled with our data objects.
    • We read from our hashtable and fill an array.
    • Then pass our data array to it.
    • Header shall take a single dimensional array while the data shall take a multidimensional array.
    • Then set them to our tableview.
    • Then hande our itemclicks.
    package com.tutorials.hp.tableviewhashtable;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.support.design.widget.FloatingActionButton;
    import android.support.design.widget.Snackbar;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.view.View;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
    
    import java.util.Hashtable;
    
    import de.codecrafters.tableview.TableView;
    import de.codecrafters.tableview.listeners.TableDataClickListener;
    import de.codecrafters.tableview.toolkit.SimpleTableDataAdapter;
    import de.codecrafters.tableview.toolkit.SimpleTableHeaderAdapter;
    
    public class MainActivity extends AppCompatActivity {
    
        String[] spaceProbeHeaders={"ID","Name","Propellant","Destination"};
        String[][] spaceProbes;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            final TableView<String[]> tb = (TableView<String[]>) findViewById(R.id.tableView);
            tb.setColumnCount(4);
            tb.setHeaderBackgroundColor(Color.parseColor("#2ecc71"));
    
            //POPULATE
            populateData();
    
            //ADAPTERS
            tb.setHeaderAdapter(new SimpleTableHeaderAdapter(this,spaceProbeHeaders));
            tb.setDataAdapter(new SimpleTableDataAdapter(this, spaceProbes));
    
            tb.addDataClickListener(new TableDataClickListener() {
                @Override
                public void onDataClicked(int rowIndex, Object clickedData) {
                    Toast.makeText(MainActivity.this, ((String[])clickedData)[1], Toast.LENGTH_SHORT).show();
                }
            });
    
        }
        private void populateData()
        {
            Spaceprobe spaceprobe=new Spaceprobe();
            Hashtable<String,Spaceprobe> spaceprobeList=new Hashtable<>();
    
            spaceprobe.setId("1");
            spaceprobe.setName("Pioneer");
            spaceprobe.setPropellant("Solar");
            spaceprobe.setDestination("Venus");
            spaceprobeList.put(spaceprobe.getId(),spaceprobe);
    
            spaceprobe=new Spaceprobe();
            spaceprobe.setId("2");
            spaceprobe.setName("Casini");
            spaceprobe.setPropellant("Nuclear");
            spaceprobe.setDestination("Jupiter");
            spaceprobeList.put(spaceprobe.getId(),spaceprobe);
    
            spaceprobe=new Spaceprobe();
            spaceprobe.setId("3");
            spaceprobe.setName("Apollo");
            spaceprobe.setPropellant("Chemical");
            spaceprobe.setDestination("Moon");
            spaceprobeList.put(spaceprobe.getId(),spaceprobe);
    
            spaceprobe=new Spaceprobe();
            spaceprobe.setId("4");
            spaceprobe.setName("Enterpise");
            spaceprobe.setPropellant("Anti-Matter");
            spaceprobe.setDestination("Andromeda");
            spaceprobeList.put(spaceprobe.getId(),spaceprobe);
    
            spaceProbes= new String[spaceprobeList.size()][4];
    
            for (int i=0;i<spaceprobeList.size();i++) {
    
                Spaceprobe s=spaceprobeList.get(i);
    
                spaceProbes[i][0]=s.getId();
                spaceProbes[i][1]=s.getName();
                spaceProbes[i][2]=s.getPropellant();
                spaceProbes[i][3]=s.getDestination();
            }
        }
    }

    SECTION 4 : Our Layouts

    ActivityMain.xml Layout.

    • Inflated as our activity’s view.
    • Includes our content main.
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout 
        
        
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_fitsSystemWindows="true"
        tools_context="com.tutorials.hp.tableviewhashtable.MainActivity">
    
        <android.support.design.widget.AppBarLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_theme="@style/AppTheme.AppBarOverlay">
    
            <android.support.v7.widget.Toolbar
                android_id="@+id/toolbar"
                android_layout_width="match_parent"
                android_layout_height="?attr/actionBarSize"
                android_background="?attr/colorPrimary"
                app_popupTheme="@style/AppTheme.PopupOverlay" />
    
        </android.support.design.widget.AppBarLayout>
    
        <include layout="@layout/content_main" />
    
        <android.support.design.widget.FloatingActionButton
            android_id="@+id/fab"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_layout_gravity="bottom|end"
            android_layout_margin="@dimen/fab_margin"
            android_src="@android:drawable/ic_dialog_email" />
    
    </android.support.design.widget.CoordinatorLayout>

    ContentMain.xml Layout.

    • Defines our view hierarchy.
    • In this case shall hold our tableview.So please add the below tableview tag with its appropriate properties.
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        
        
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_paddingBottom="@dimen/activity_vertical_margin"
        android_paddingLeft="@dimen/activity_horizontal_margin"
        android_paddingRight="@dimen/activity_horizontal_margin"
        android_paddingTop="@dimen/activity_vertical_margin"
        app_layout_behavior="@string/appbar_scrolling_view_behavior"
        tools_context="com.tutorials.hp.tableviewhashtable.MainActivity"
        tools_showIn="@layout/activity_main">
    
        <de.codecrafters.tableview.TableView
            android_id="@+id/tableView"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            />
    
    </RelativeLayout>
  6. Adv
  7. Android TableView – Fill With List of Objects – With Headers and RowClick

    Android has a couple of inbuilt adapterviews like ListView,GridView,RecyclerView and Spinner that are used as the core of most modern apps.And thats pretty good cause most apps consist of Lists of data.The above generally display lists of data.

    However,there are situations where you want to use the old fashioned table,with rows and columns.Infact in desktop and web development,with programming languages like Java and C# the tableviews are the most popular.Think components like JTable and DataGridView.

    Today we use TableView library by Codecrafters and craft a table with header,rows and columns.Moreover,we handle ItemClicks,showing a toast message.

    Project Demo

    We are Building a Vibrant YouTube Community

    We have a fast rising YouTube Channel of friends. So far we’ve accumulated almost 3 million agreggate views and more than 10,000 subscribers as of the time of writing this. Here’s the Channel: ProgrammingWizards TV.

    Please go ahead subscribe(free obviously) as well. If you have a question or a comment you can post there instead of in this site.People are suggesting us tutorials to do there so you can too.

    Before we get into our example, we need to introduce the few classes that we will be using.

    What is TableView?

    TableView is an android library that allows us create and work with Tables in android.

    It contains a simple TableView and an advanced SortableTableView.

    There is both a free and a premium version of tableView.

    Requirements of a TableView

    TableView requires Android Minimum SDK version of 11 and Compule SDK Version of 25.

    Installing TableView

    TableView can be installed by adding the following implementation statement in your app leve build.gradle:

    implementation 'de.codecrafters.tableview:tableview:2.8.0'

    Working with TableView

    This involves two processes:

    1. Addding the TableView Element in Your Layout:
    <de.codecrafters.tableview.TableView
        
        android_id="@+id/tableView"
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        table_tableView_columnCount="4" />

    You can modify the number of columns you want your android table to have.

    1. Referencing the TableView:
      Then you reference the TableView in your Java code:

      TableView tableView = (TableView) findViewById(R.id.tableView);

      Here you can also modify the number of columns you want:

      tableView.setColumnCount(4);

    Handling Column Widths

    TableView allows you modify the column widths in various manners:

    1. Absolutely Using TableColumnDpWidthModel or TableColumnPxWidthModel
      Here’s an example with TableColumnDpWidthModel:

      TableColumnDpWidthModel columnModel = new TableColumnDpWidthModel(context, 4, 200);
      columnModel.setColumnWidth(1, 300);
      columnModel.setColumnWidth(2, 250);
      tableView.setColumnModel(columnModel);

      And here’s one with TableColumnPxWidthModel:

      TableColumnPxWidthModel columnModel = new TableColumnPxWidthModel(4, 350);
      columnModel.setColumnWidth(1, 500);
      columnModel.setColumnWidth(2, 600);
      tableView.setColumnModel(columnModel);
    2. Relatively with the TableColumnWeightModel
      The defauly column weight is 1.

      TableColumnWeightModel columnModel = new TableColumnWeightModel(4);
      columnModel.setColumnWeight(1, 2);
      columnModel.setColumnWeight(2, 2);
      tableView.setColumnModel(columnModel);

    Showing Data

    Data can be shown easily in TableView with help of SimpleTableDataAdapter class.

    This allows us easily render two-dimensional string array in a tabular format.

    This adapter will turn the strings you supply into TextViews and display them inside TableView at the same position as previous in the 2D-String-Array.

    Here’s an example:

    public class MainActivity extends AppCompatActivity {
    
        private static final String[][] SPACESHIPS = { "Casini", "Chemical", "NASA", "Jupiter" }, 
                                                         { "Spitzer", "Nuclear", "NASA", "Alpha Centauri" } };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            TableView<String[]> tableView = (TableView<String[]>) findViewById(R.id.tableView);
            tableView.setDataAdapter(new SimpleTableDataAdapter(this, SPACESHIPS));
        }
    }

    Let’s look at a full example.

    What we do :

    • Show a tableview.
    • Populate its column headers with data.The header has its own adapter using SimpleTableHeaderAdapter.
    • Populate rows with data .It has its own adapter using SimpleTableDataAdapter.
    • Change header background color and set its column count.
    • Handle ItemClicks for our rows.
    • When a row is clicked show a toast with clicked data.

    SECTION 1 : Our Dependencies

    Build.Gradle

    • Android Studio has added for us dependencies for AppCompat library for our AppCompatActivity.
    • Now lets add dependencies for TableView.
    • It shall be fetched from online so be connected fro the first time you are adding.
    apply plugin: 'com.android.application'
    
    android {
        compileSdkVersion 24
        buildToolsVersion "24.0.1"
    
        defaultConfig {
            applicationId "com.tutorials.hp.tablelistobjects"
            minSdkVersion 15
            targetSdkVersion 24
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:24.1.1'
        compile 'de.codecrafters.tableview:tableview:2.2.0'
    }

    SECTION 2 : Our Data Object

    Spacecraft.java

    • Represents a single object.Here I’ll use Spacecraft.
    • The object shall have various properties like name,title,date etc.
    • Each object shall occupy a specific row.
    • Its corresponding properties then occupy the cells.
    package com.tutorials.hp.tablelistobjects;
    
    public class Spaceprobe {
    
        String id,name,propellant,destination;
    
        public String getId() {
            return id;
        }
    
        public void setId(String id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getPropellant() {
            return propellant;
        }
    
        public void setPropellant(String propellant) {
            this.propellant = propellant;
        }
    
        public String getDestination() {
            return destination;
        }
    
        public void setDestination(String destination) {
            this.destination = destination;
        }
    }

    SECTION 3 : Our Activity

    MainActivity class.

    Main Responsibility : LAUNCH OUR APP.

    • We shall reference the views like TableView  here,from our XML Layouts.
    • We then initialize our SimpleTableHeaderAdapter and SimpleTableDataAdapters.
    • Then pass our data aray to it.
    • Header shall take a single dimensional array while the data shall take a multidimensional array.
    • Then set them to our tableview.
    • Then hande our itemclicks.
    package com.tutorials.hp.tablelistobjects;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.Toast;
    
    import java.util.ArrayList;
    
    import de.codecrafters.tableview.TableView;
    import de.codecrafters.tableview.listeners.TableDataClickListener;
    import de.codecrafters.tableview.toolkit.SimpleTableDataAdapter;
    import de.codecrafters.tableview.toolkit.SimpleTableHeaderAdapter;
    
    public class MainActivity extends AppCompatActivity {
    
        String[] spaceProbeHeaders={"ID","Name","Propellant","Destination"};
        String[][] spaceProbes;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            final TableView<String[]> tb = (TableView<String[]>) findViewById(R.id.tableView);
            tb.setColumnCount(4);
            tb.setHeaderBackgroundColor(Color.parseColor("#2ecc71"));
    
            //POPULATE
            populateData();
    
             //ADAPTERS
            tb.setHeaderAdapter(new SimpleTableHeaderAdapter(this,spaceProbeHeaders));
            tb.setDataAdapter(new SimpleTableDataAdapter(this, spaceProbes));
    
            tb.addDataClickListener(new TableDataClickListener() {
                @Override
                public void onDataClicked(int rowIndex, Object clickedData) {
                    Toast.makeText(MainActivity.this, ((String[])clickedData)[1], Toast.LENGTH_SHORT).show();
                }
            });
    
        }
        private void populateData()
        {
            Spaceprobe spaceprobe=new Spaceprobe();
            ArrayList<Spaceprobe> spaceprobeList=new ArrayList<>();
    
            spaceprobe.setId("1");
            spaceprobe.setName("Pioneer");
            spaceprobe.setPropellant("Solar");
            spaceprobe.setDestination("Venus");
            spaceprobeList.add(spaceprobe);
    
            spaceprobe=new Spaceprobe();
            spaceprobe.setId("2");
            spaceprobe.setName("Casini");
            spaceprobe.setPropellant("Nuclear");
            spaceprobe.setDestination("Jupiter");
            spaceprobeList.add(spaceprobe);
    
            spaceprobe=new Spaceprobe();
            spaceprobe.setId("3");
            spaceprobe.setName("Apollo");
            spaceprobe.setPropellant("Chemical");
            spaceprobe.setDestination("Moon");
            spaceprobeList.add(spaceprobe);
    
            spaceprobe=new Spaceprobe();
            spaceprobe.setId("4");
            spaceprobe.setName("Enterpise");
            spaceprobe.setPropellant("Anti-Matter");
            spaceprobe.setDestination("Andromeda");
            spaceprobeList.add(spaceprobe);
    
            spaceProbes= new String[spaceprobeList.size()][4];
            // spaceProbes= new String[][]{{}};
    
            for (int i=0;i<spaceprobeList.size();i++) {
    
                Spaceprobe s=spaceprobeList.get(i);
    
                spaceProbes[i][0]=s.getId();
                spaceProbes[i][1]=s.getName();
                spaceProbes[i][2]=s.getPropellant();
                spaceProbes[i][3]=s.getDestination();
    
            }
        }
    
    }

    SECTION 5 : Our Layouts

    ActivityMain.xml Layout.

    • Inflated as our activity’s view.
    • Includes our content main.
    • In this case shall hold our tableview.So please add the below tableview tag with its appropriate properties.
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_paddingBottom="@dimen/activity_vertical_margin"
        android_paddingLeft="@dimen/activity_horizontal_margin"
        android_paddingRight="@dimen/activity_horizontal_margin"
        android_paddingTop="@dimen/activity_vertical_margin"
        tools_context="com.tutorials.hp.tablelistobjects.MainActivity">
    
        <de.codecrafters.tableview.TableView
            android_id="@+id/tableView"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            />
    </RelativeLayout>
  8. Adv
  9. Android Swipe Tabs With TableView

    This is a practical tutorial meant to allow us work with both Fragments and TableViews. We will also be working TabLayouts and ViewPager.

    In the process we make an application that has swipe fragments each containing its own TableView. The user can swipe through the tabs or fragments and have different set of data displayed in their TableViews in each fragment.

    Here’s a brief aim of this tutorial:

    • The aim is simple and clear.
    • We want fragments with TableViews.
    • Each tableview has its own unique dataset.
    • Now the user can swipe through the fragments or click the tabs.
    • We use TabLayout for our material tabs.
    • For swiping the general is Viewpager of course.

    But first we need understand various terminologies.

    What is Android?

    Android is a platform that is carefully crafted for mobile devices including smartphones, and tablets.

    It is a combination of an operating system, companion native libraries, application runtime, and an application
    framework.

    Android relies on various open source technologies to provide a solid mobile .platform that can satisfy mobile needs. The platform architecture can be
    best described as a series of five main layers that handle different core operations.

    We are Building a Vibrant YouTube Community

    We have a fast rising YouTube Channel of friends. So far we’ve accumulated almost 3 million agreggate views and more than 10,000 subscribers as of the time of writing this. Here’s the Channel: ProgrammingWizards TV.

    Please go ahead subscribe(free obviously) as well. If you have a question or a comment you can post there instead of in this site.People are suggesting us tutorials to do there so you can too.

    What is a Fragment?

    A Fragment is a piece of an application’s user interface or behavior that can be placed in an Activity.

    Interaction with fragments is done through FragmentManager, which can be obtained via Activity.getFragmentManager() and Fragment.getFragmentManager().

    The Fragment class resides in the android.app package.

    The main purpose of a Fragment is to represent a particular operation or interface that is running within a larger Activity.

    A Fragment can either be defined as part of a layout or created programmatically.

    Here’s an example Fragment as part of a layout:

    <FrameLayout 
        android_layout_width="match_parent" android_layout_height="match_parent">
        <fragment class="com.example.android.apis.app.FragmentLayout$TitlesFragment"
                android_id="@+id/titles"
                android_layout_width="match_parent" android_layout_height="match_parent" />
    </FrameLayout>

    Then that layout can be installed into the MainActivity via java code through inflation:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    
        setContentView(R.layout.fragment_layout);
    }

    What is TabLayout?

    TabLayout provides a horizontal layout to display tabs.

    Then you can fill the tabs to display through TabLayout.Tab instances.

    The newTab() method allows us create new Tab instances.

    Then you can change the tab’s label using the setText(int) method. On the other hand you can change the Tabs Icon via the setIcon(int) method.

     TabLayout tabLayout = ...;
     tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
     tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
     tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

    What is ViewPager?

    ViewPager is a layout manager that allows the user to flip left and right through pages of data.

    You supply an implementation of a PagerAdapter to generate the pages that the view shows.

    ViewPager is quite common in applications and normally allows us to implement the popular swipable tabs design.

    ViewPager normally has to be defined in the layout:

     <android.support.v4.view.ViewPager
         android_layout_width="match_parent"
         android_layout_height="match_parent">
    
         <android.support.v4.view.PagerTitleStrip
             android_layout_width="match_parent"
             android_layout_height="wrap_content"
             android_layout_gravity="top" />
    
     </android.support.v4.view.ViewPager>

    What is TableView?

    TableView is an android library that allows us create and work with Tables in android.

    It contains a simple TableView and an advanced SortableTableView.

    There is both a free and a premium version of tableView.

    Requirements of a TableView

    TableView requires Android Minimum SDK version of 11 and Compule SDK Version of 25.

    Installing TableView

    TableView can be installed by adding the following implementation statement in your app leve build.gradle:

    implementation 'de.codecrafters.tableview:tableview:2.8.0'

    Working with TableView

    This involves two processes:

    1. Addding the TableView Element in Your Layout:
    <de.codecrafters.tableview.TableView
        
        android_id="@+id/tableView"
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        table_tableView_columnCount="4" />

    You can modify the number of columns you want your android table to have.

    1. Referencing the TableView:
      Then you reference the TableView in your Java code:

      TableView tableView = (TableView) findViewById(R.id.tableView);

      Here you can also modify the number of columns you want:

      tableView.setColumnCount(4);

    Handling Column Widths

    TableView allows you modify the column widths in various manners:

    1. Absolutely Using TableColumnDpWidthModel or TableColumnPxWidthModel
      Here’s an example with TableColumnDpWidthModel:

      TableColumnDpWidthModel columnModel = new TableColumnDpWidthModel(context, 4, 200);
      columnModel.setColumnWidth(1, 300);
      columnModel.setColumnWidth(2, 250);
      tableView.setColumnModel(columnModel);

      And here’s one with TableColumnPxWidthModel:

      TableColumnPxWidthModel columnModel = new TableColumnPxWidthModel(4, 350);
      columnModel.setColumnWidth(1, 500);
      columnModel.setColumnWidth(2, 600);
      tableView.setColumnModel(columnModel);
    2. Relatively with the TableColumnWeightModel
      The defauly column weight is 1.

      TableColumnWeightModel columnModel = new TableColumnWeightModel(4);
      columnModel.setColumnWeight(1, 2);
      columnModel.setColumnWeight(2, 2);
      tableView.setColumnModel(columnModel);

    Showing Data

    Data can be shown easily in TableView with help of SimpleTableDataAdapter class.

    This allows us easily render two-dimensional string array in a tabular format.

    This adapter will turn the strings you supply into TextViews and display them inside TableView at the same position as previous in the 2D-String-Array.

    Here’s an example:

    public class MainActivity extends AppCompatActivity {
    
        private static final String[][] SPACESHIPS = { "Casini", "Chemical", "NASA", "Jupiter" }, 
                                                         { "Spitzer", "Nuclear", "NASA", "Alpha Centauri" } };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            TableView<String[]> tableView = (TableView<String[]>) findViewById(R.id.tableView);
            tableView.setDataAdapter(new SimpleTableDataAdapter(this, SPACESHIPS));
        }
    }

    Project Structure

    Here’s our project structure:

    Project Structure

    First we use TableView library,fetch it by adding the following in your build.gradle app level  :

    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:24.2.0'
        compile 'com.android.support:design:24.2.0'
        compile 'com.android.support:cardview-v7:24.2.0'
        compile 'de.codecrafters.tableview:tableview:2.2.0'
    
    }

    Below is an example of fragment :

    package com.tutorials.hp.tabstableview.mFragments;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.Toast;
    
    import com.tutorials.hp.tabstableview.R;
    
    import de.codecrafters.tableview.TableView;
    import de.codecrafters.tableview.listeners.TableDataClickListener;
    import de.codecrafters.tableview.toolkit.SimpleTableDataAdapter;
    import de.codecrafters.tableview.toolkit.SimpleTableHeaderAdapter;
    
    public class InterStellar  extends Fragment {
    
        //ROWS DATA SOURCE
        static String[][] spaceProbes={
                {"1","WMAP","Laser Beam","Uranus"},
                {"2","Juno","Nuclear","Asteroid Belt"},
                {"3","Casini","Solar","Saturn"},
                {"4","Kepler","Laser","Jupiter"},
                {"5","Chandra","Chemical","Saturn"},
                {"6","Curiosity","Solar","Mars"},
    
        };
        //HEADER DATA SOURCE
        static String[] spaceProbeHeaders={"No","Name","Propellant","Destination"};
    
        public static InterStellar newInstance() {
            return new InterStellar();
        }
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
            View rootView = inflater.inflate(R.layout.interstellar, null);
    
            final TableView<String[]> tableView = (TableView<String[]>) rootView.findViewById(R.id.interStellar_TB);
    
            //SET TABLE PROPERTIES
            tableView.setHeaderBackgroundColor(Color.parseColor("#03a9f4"));
            tableView.setHeaderAdapter(new SimpleTableHeaderAdapter(getActivity(),spaceProbeHeaders));
            tableView.setColumnCount(4);
    
            //ADAPTER
            tableView.setDataAdapter(new SimpleTableDataAdapter(getActivity(), spaceProbes));
    
            //ROW CLICK LISTENER
            tableView.addDataClickListener(new TableDataClickListener() {
                @Override
                public void onDataClicked(int rowIndex, Object clickedData) {
                    Toast.makeText(getActivity(), ((String[])clickedData)[1], Toast.LENGTH_SHORT).show();
                }
            });
    
            return rootView;
        }
    
        @Override
        public String toString() {
            return "Inter-Stellar";
        }
    }

    Fragment With tableView

    Then we have our MainActivity as below :

    package com.tutorials.hp.tabstableview;
    
    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    
    import com.tutorials.hp.tabstableview.mFragments.InterGalactic;
    import com.tutorials.hp.tabstableview.mFragments.InterPlanetary;
    import com.tutorials.hp.tabstableview.mFragments.InterStellar;
    
    public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {
    
        private TabLayout tab;
        private ViewPager vp;
    
           @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
    
            //VIEWPAGER AND TABS
            vp = (ViewPager) findViewById(R.id.viewpager);
            addPages();
    
            tab = (TabLayout) findViewById(R.id.tabs);
            tab.setTabGravity(TabLayout.GRAVITY_FILL);
            tab.setupWithViewPager(vp);
            tab.addOnTabSelectedListener(this);
        }
        private void addPages()
        {
            MyPagerAdapter myPagerAdapter=new MyPagerAdapter(getSupportFragmentManager());
            myPagerAdapter.addPage(InterPlanetary.newInstance());
            myPagerAdapter.addPage(InterStellar.newInstance());
            myPagerAdapter.addPage(InterGalactic.newInstance());
    
            vp.setAdapter(myPagerAdapter);
        }
    
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            vp.setCurrentItem(tab.getPosition());
        }
    
        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
    
        }
    
        @Override
        public void onTabReselected(TabLayout.Tab tab) {
    
        }
    }

    Hey the whole tutorial and demo is here : https://www.youtube.com/watch?v=zRmSeeU2-m0

    Resouces Link
    Source Code GitHub Download
    Video Tutorial YouTube Tutorial

    Best regards.




Share an Example

Share an Example

Browse
What is the capital of Egypt? ( Cairo )