Android Swipe Tabs With TableView

android swipe tabs

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

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post