Android TableView : Fill From Array – With Headers and RowClick

Read-only properties in JavaFX 8

Android TableView : Fill From Array – With Headers and RowClick



Rating : No ratings yet.




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.

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 LevelMainActivity.javaActivityMain.xmlContentMain.xmlVideo/PreviewDownload
  • 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'
}

 

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

 

  • 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>

 

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

Android TableView Ep.01 - Table With Header and OnRowClick

  • You can Download the full Project below. Source code is well commented.
Download

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

YouTube

  • Visit our channel for more examples like these.

Facebook

Oclemy,Cheers.

 



Rating :

Leave a Reply

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

20 − five =

COMMENTS