Home Android TableView : Fill From Array – With Headers and RowClick

Android TableView : Fill From Array – With Headers and RowClick

Android TableView : Fill From Array – With Headers and RowClick




Introduction

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.

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.
  • 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'
}

 

 

 

 

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.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();
            }
        });

    }

}

 

 

SECTION 5 : 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 xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    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 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 xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    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>

 

 

SECTION 6 : Downloadable Source Reference

To be uploaded soon.

SECTION 7 : Our Result

LAST SECTION

Lets share more tips in OUR FB PAGE.

Cheers.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Leave a Comment