Android GridView PDF View - List,Render,Page,Zoom.

android pdf viewer

This is an android view pdf document programmitically tutorial and example.

We use pdf view android library called barteksc/AndroidPdfViewer, an open source pdf viewer library that is avaialble for free in android studio.

We create our project using android studio and we have the source available for download at the end of the tutorial.

Everybody knows PDFs, Portable Document Format. Am probably everybody has or uses them.Alot of information is rendered in PDFs and since android devices are the most popular devices around,we need a way of rendering these PDFs in our device.

Okay, there are PDF readers like Adobe and Foxit, but why not make yours as a side project while learning android development.Hey,with the wealth of libraries android has, its easier than you may think. You may make a quality PDF reader for yourself.

This is an example to introduce us by giving us a way to load PDFs into a GridView and render them. Then you can swipe through the pages,scroll, zoom a page etc. Here's a summary of what we do :

  • Read all PDF files from our SDCard and display in our GridView.
  • We shall display PDF icons alongside the PDF name.
  • We display these in a nice CardView in our custom gridview.
  • When the user clicks a single PDF from our gridview, we open the corresponding PDF and view it in a new activity.
  • There the user can scroll to read all the pages, or swipe side by side to move to next page.
  • Moreover he can zoom in and out.

STEP BY STEP

STEP 1 : Our Build.Gradle

We are using Android PDF Viewer library so we need to add it as a dependency in our app level build.gradle. Moreover our Custom GridView has CardViews as our viewitems so lets add the appropriate support libraries.

You may use the later versions of this library.   Our GridView will contain custom CardViews so we need to add the CardView dependency as well.

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "24.0.1"

    defaultConfig {
        applicationId "com.tutorials.hp.gridviewpdf"
        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 'com.android.support:cardview-v7:24.1.1'
    compile 'com.github.barteksc:android-pdf-viewer:1.4.0'
}

       

STEP 2 : Our AndroidManifest.xml

Given that we shall be reading our PDF documents from our File System in android device/emulator,lets add the permission for reading from external storage.

android.permission.READ_EXTERNAL_STORAGE allows us read files from the device's external storage. Please make sure you add this as failure to do so will result in you being unable to read the external storage at runtime. 

Moreover we will register two activities: one our main activity and the other the PDFViewer Activity.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tutorials.hp.gridviewpdf">

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".PDF_Activity"></activity>
    </application>

</manifest>

     

STEP 3 : Our PDFDoc class

What are we working with PDF Documents. Yes, so lets do that in an Object Oriented way.Lets create a POJO data object to represent a PDF document with its properties like name and file path.

This is a data object that represents a single PDF document. The PDF will have the name and path as it's properties.

We then generate their getters and setters. 

package com.tutorials.hp.gridviewpdf;

import android.net.Uri;

public class PDFDoc {
    String name,path;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }
}

       

STEP 4 : Our CustomAdapter class

Because we are working a custom gridview as our adapterview.It therefore needs its adapter. Therefore We will derive from baseadapter, an abstract class from which other adapters like ArrayAdapter do derive.

public class CustomAdapter extends BaseAdapter {..}

This class shall inflate our model layout into CardView view items of our gridview. So basically this gridview will contain cardviews with PDF documents.

This adapter class is also responsible for adapting our dataset into those respective views. A single cardview is comprising of image and text.

First a Context object as well as an arraylist of PDF Documents is passed to us via the constructor:

    public CustomAdapter(Context c, ArrayList<PDFDoc> pdfDocs) {
        this.c = c;
        this.pdfDocs = pdfDocs;
    }

We also open activity,pdf activity when an item is clicked. We will create a method to do that for us:

    private void openPDFView(String path)
    {
        Intent i=new Intent(c,PDF_Activity.class);
        i.putExtra("PATH",path);
        c.startActivity(i);
    }

As you can see we are using an intent, first instantiating, passing in the context as well as the target class.

Then using the putExtra() we pass the PATH and start the activity to open it.

 

package com.tutorials.hp.gridviewpdf;

import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class CustomAdapter extends BaseAdapter {

    Context c;
    ArrayList<PDFDoc> pdfDocs;

    public CustomAdapter(Context c, ArrayList<PDFDoc> pdfDocs) {
        this.c = c;
        this.pdfDocs = pdfDocs;
    }

    @Override
    public int getCount() {
        return pdfDocs.size();
    }

    @Override
    public Object getItem(int i) {
        return pdfDocs.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        if(view==null)
        {
            //INFLATE CUSTOM LAYOUT
            view= LayoutInflater.from(c).inflate(R.layout.model,viewGroup,false);
        }

        final PDFDoc pdfDoc= (PDFDoc) this.getItem(i);

        TextView nameTxt= (TextView) view.findViewById(R.id.nameTxt);
        ImageView img= (ImageView) view.findViewById(R.id.pdfImage);

        //BIND DATA
        nameTxt.setText(pdfDoc.getName());
        img.setImageResource(R.drawable.pdf_icon);

        //VIEW ITEM CLICK
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               openPDFView(pdfDoc.getPath());
            }
        });
        return view;
    }

    //OPEN PDF VIEW
    private void openPDFView(String path)
    {
        Intent i=new Intent(c,PDF_Activity.class);
        i.putExtra("PATH",path);
        c.startActivity(i);
    }
}

       

STEP 5 : Our MainActivity

This is our main activity. It will be extending the AppCompatActivity.

public class MainActivity extends AppCompatActivity {..}

This activity is responsible for listing our pdf documents in a list of gridview. The user can the scroll through those pdf documents.

We will start by referencing the gridview by its id:

        final GridView gv= (GridView) findViewById(R.id.gv);

We are showing a gridview with cardviews with images and text. The images are the pdf icons while the textviews will show the pdf document name.

When the user clicks the pdf document, we render the document in a new activity.

We will also be retrieving our pdf documents from the device and hold them in an arraylist here. 

We will have a method called getPDFs(). This method will read all PDF files from the Download's directory in our external storage. In that way we can get the PDF names and their paths and assign them to a PDFDoc instance. Then return an arraylist of PDFDocs.

To do this first we get the downlaod's folder:

        File downloadsFolder= Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS);

Then ensure it actually exists:

        if(downloadsFolder.exists())
        {
            ...
        }

Then read all the files inside it into a file array:

            File[] files=downloadsFolder.listFiles();

We will use the endsWith() method to filter out PDF documents:

                if(file.getPath().endsWith("pdf"))
                {
                    ...
                }
package com.tutorials.hp.gridviewpdf;

import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.GridView;

import java.io.File;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final GridView gv= (GridView) findViewById(R.id.gv);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                gv.setAdapter(new CustomAdapter(MainActivity.this,getPDFs()));

            }
        });
    }

    private ArrayList<PDFDoc> getPDFs()

    {
        ArrayList<PDFDoc> pdfDocs=new ArrayList<>();
        //TARGET FOLDER
        File downloadsFolder= Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS);

        PDFDoc pdfDoc;

        if(downloadsFolder.exists())
        {
            //GET ALL FILES IN DOWNLOAD FOLDER
            File[] files=downloadsFolder.listFiles();

            //LOOP THRU THOSE FILES GETTING NAME AND URI
            for (int i=0;i<files.length;i++)
            {
                File file=files[i];

                if(file.getPath().endsWith("pdf"))
                {
                    pdfDoc=new PDFDoc();
                    pdfDoc.setName(file.getName());
                    pdfDoc.setPath(file.getAbsolutePath());

                    pdfDocs.add(pdfDoc);
                }

            }
        }

        return pdfDocs;
    }

}

     

STEP 5 : Our PDF Activity

This is the activity that actually renders the pdf document. The PDFs will be loaded from the device external storage and this activity will display them for viewing.

The path of the PDF document will be passed from the main activity via intent.

Then we load the pdf document via the path.

  • This activity renders our PDF document.
  • It receives the path to the PDF from our MainActivity and renders it.

As an Activity this class will also derive from AppCompatActivity:

public class PDF_Activity extends AppCompatActivity {...}

We will reference the PDFView from our layout:

        PDFView pdfView= (PDFView) findViewById(R.id.pdfView);

Beware that newer versions of PDF don't require you to specify the ScrollBar as we did here.  

We will unpack or retrieve data that was sent via Intent from our MainActivity then use the getExtras() to get the path that was passed.

        Intent i=this.getIntent();
        String path=i.getExtras().getString("PATH");

We will create a file from that path:

        File file=new File(path);

Then check if that file can be read:

            if(file.canRead())
            {
                ...
            }

And load our PDF file into the PDFView:

                pdfView.fromFile(file).defaultPage(1).onLoad(new OnLoadCompleteListener() {
                    @Override
                    public void loadComplete(int nbPages) {
                        Toast.makeText(PDF_Activity.this, String.valueOf(nbPages), Toast.LENGTH_LONG).show();
                    }
                }).load();
package com.tutorials.hp.gridviewpdf;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

import com.github.barteksc.pdfviewer.PDFView;
import com.github.barteksc.pdfviewer.ScrollBar;
import com.github.barteksc.pdfviewer.listener.OnLoadCompleteListener;

import java.io.File;

public class PDF_Activity extends AppCompatActivity {

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

        //PDFVIEW SHALL DISPLAY OUR PDFS
        PDFView pdfView= (PDFView) findViewById(R.id.pdfView);
        //SCROLLBAR TO ENABLE SCROLLING
        ScrollBar scrollBar = (ScrollBar) findViewById(R.id.scrollBar);
        pdfView.setScrollBar(scrollBar);
        //VERTICAL SCROLLING
        scrollBar.setHorizontal(false);
        //SACRIFICE MEMORY FOR QUALITY
        //pdfView.useBestQuality(true)

        //UNPACK OUR DATA FROM INTENT
        Intent i=this.getIntent();
        String path=i.getExtras().getString("PATH");

        //GET THE PDF FILE
        File file=new File(path);

            if(file.canRead())
            {
                //LOAD IT
                pdfView.fromFile(file).defaultPage(1).onLoad(new OnLoadCompleteListener() {
                    @Override
                    public void loadComplete(int nbPages) {
                        Toast.makeText(PDF_Activity.this, String.valueOf(nbPages), Toast.LENGTH_LONG).show();
                    }
                }).load();

            }

    }
}

     

STEP 6 : Our Layouts

Here's our PDF Activity layout. All XML Layouts and source code are in the link below so please download it and run.

We have a RelativeLayout as our root layout.

We then specify the PDFView element in our XML document. This will be responsible for rendering or viewing our pdf document.

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    tools:context="com.tutorials.hp.gridviewpdf.PDF_Activity">

    <com.github.barteksc.pdfviewer.PDFView
        android:id="@+id/pdfView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@+id/scrollBar"/>

    <com.github.barteksc.pdfviewer.ScrollBar
        android:id="@+id/scrollBar"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

   

How To Download and Run

  • Download the project above.
  • You'll get a zipped file,extract it.
  • Open the Android Studio.
  • Now close, already open project
  • From the Menu bar click on File >New> Import Project
  • Now Choose a Destination Folder, from where you want to import project.
  • Choose an Android Project.
  • Now Click on “OK“.
  • Done, your importing Project.
  • Obviously you must have the PDFs you wanna display.

 

More

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