Home Android Tabs TableView

Android Tabs TableView

Android Tabs TableView




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

You can download the full source code above for reference,or watch our video tutorial below fro both demo and explanations.

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;

/**
 * Created by Oclemy on 9/29/2016 for ProgrammingWizards Channel and http://www.camposha.com.
 */
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

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 :

 

    Leave a Reply

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

    sixteen + twelve =

    Leave a Comment

    twenty − seventeen =