GridView PDF - List,Render,Page,Zoom.
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 into 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 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.
Direct Download
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.
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.
<?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>
\ No newline at end of file
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.
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
- We are working a custom gridview as our adapterview.It therefore needs its adapter.
- We derive from baseadapter.
- This class shall inflate our model layout into CardView viewitems of our gridview.
- It shall also adapt our dataset into their respective views.
- We also open activity,pdf activity when an item is clicked.
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
- Okay, here's our launcher activity.
- Lets initialize views like GridView here.
- We also set the instance ofthe basedapter subclass we called CustomAdapter to our GridView.
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 activity renders our PDF document.
- It receives the path to the PDF from our MainActivity and renders it.
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 above so please download it and run.
<?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
- Visit our channel for more examples like these. Visist our Facebook Page
Oclemy,Cheers.
Comments