How to make a PDF viewer

In this tutorial we make a pdf viewer.

Open a new project.

First Look about the logic and ideas to do: 

* To load a pdf file we need to pick the path to the pdf document by click the FAB button.

* Once picked we need to show the file in a linear layout. 

* And we must define to display the file with correct pdf page number and give a possibility to step forward or back. 

* At last we give the possibility to show the file at a specific page number we enter in a EditText.

-> We can realize that with buttons for back and forward or do it more comfortable with a ViewPager to swipe left (go back) or right (go forward).

(Read the tutorial How to use Fragment Adapter component for first understanding of ViewPager.)

But instead of Fragments we show a custom view inside the ViewPager and bind it with a ListMap.

💡We use here the filepicker dialog component instead the old filepicker component. With the old filepicker component we only can filter a kind of files like text-, audio- or image-files. But here we need only to show except pdf files. So we use the filepicker dialog component to do this. 

To use this component it's necessary to import and activate the Filepicker V1.1.1 local library. 

(Read the How to use Filepicker dialog component tutorial. 

To remember here the library link to copy:

com.github.angads25:filepicker:1.1.1

Once downloaded activate the library.)

Well done open the Component Manager and add a Filepicker dialog component and name it as "filepicker" (or as you want)

How to use Fragment Adapter component

Diese Website verwendet Cookies von Google, um Dienste anzubieten und Zugriffe zu analysieren. Deine IP-Adresse und dein User-Agent werden zusammen mit Messwerten zur Leistung und Sicherheit für Google freigegeben. So können Nutzungsstatistiken generiert, Missbrauchsfälle erkannt und behoben und die Qualität des Dienstes gewährleistet werden

We know about Activities and custom views. But there is another kind of activity: the Fragment.

You can define a Fragment as any Activity with different views and own events and components. 

You usually embedded a Fragment with a Viewpager view to swipe all fragments to left and right.

With a Tab Layout you can select a fragment with different buttons in the Tab Layout. 

To make this work we use the Fragment Adapter component.

So let's start. 

Create the fragment activities

Start a new project. Open the left Configuration drawer an click the View Button. 

Here in the View Manager we can arrange all activities in this project. 

Click the '+' button. 

* Give the name 'red' 

* deactivate statusbar and toolbar to make a blank activity

and set the type to 'fragment' then save the new fragment.

Add now three more fragments with name 'blue', 'yellow' and 'green'.

(don't forget to set types fragment and deactivate statusbar and toolbar in all fragment-activities).

Activate AppCompbat library

Open the Configuration drawer and click the Library button

Here in the Library Manager click the AppCompbat library,

then activate the switch to activate.

Continue in Main activity 

Add Fragment Adapter component 

Be sure to be in Main activity. Open the component tab and add the Fragment Adapter component.

Give it the name 'frag_adapt' (or as you want)

And click add.

Main activity: the views

 In Main activity add 

* TabLayout tablayout1

* ViewPager viewpager1

Well done 👍

Fragment activities: 

the views

Open the red_fragment.xml.

Add a LinearV linear1.

* set width and height to 'match_parent'.

* set background color to RED

Open now each other fragment, 

add a linear, set width and height to 'match_parent' and set the background color to the corresponding name (blue_fragment.xml -> background color BLUE, 

yellow_fragment.xml ->background color YELLOW, 

green_fragment.xml -> background color GREEN)

💡The colored linears are for demonstrating. You can create each fragment as you want.

Main activity: 

the events

Open the onCreate event.

Add from the View palette flowing blocks:

* From AndroidX section the 'TabLayout setupWithViewPager' block

Set TabLayout to tablayout1 and ViewPager to viewpager1.

* From List section the 'ViewPager 

setFragmentAdapter' block

Set ViewPager to viewpager1, FragmantAdapter to frag_adapt and count to 4.

Now the TabLayout tablayout1 is setup with ViewPager viewpager1 and the ViewPager viewpager1 is bound to Fragment Adapter frag_adapt with 4 entries also according to the TabLayout.

Now it's time to determine the titles of the four TabLayout buttons and to determine the fragments to be shown in the ViewPager.

In the event section click the Component tab.

Add the events of the comment: 

* frag_adapt Return Title

* frag_adapt Return Fragment 

The Return Title event 

Open the Return Title event.

Add a if block and set it's condition to 'position'=''.

Scroll down the block list to 'TabLayout sk' and drag and drop the 'return title' block inside the if block.

Copy this if-block combination 3 times to get four of it.

Set the position numbers according to the titles: 

* position = 0 -> title : "RED" 

* position = 1 -> title : "BLUE" 

* position = 2 -> title : "YELLOW" 

* position = 3 -> title : "GREEN" 

The Return Fragment event 

Close the event and open the Return Fragment event.

Add the if block like in the Return Title event. Then scroll down the block list to 'fragments sk' and drag and drop the 'return fragment' block.

Copy again this if-block combination three times to get four of it. 

Set the position numbers according to the fragments: 

* position = 0 -> Content: RedFragmentActivity

* position = 1 -> Content: BlueFragmentActivity

* position = 2 -> Content: YellowFragmentActivity

* position = 3 -> Content: GreenFragmentActivity

So, well done 👍

You can run the App.

Swipe around the four fragments or select one in the TabLayout.

How to use the Filepicker Component

Diese Website verwendet Cookies von Google, um Dienste anzubieten und Zugriffe zu analysieren. Deine IP-Adresse und dein User-Agent werden zusammen mit Messwerten zur Leistung und Sicherheit für Google freigegeben. So können Nutzungsstatistiken generiert, Missbrauchsfälle erkannt und behoben und die Qualität des Dienstes gewährleistet werden

In this tutorial we create a Listview with pictures. To load the pictures from your phone we use 

the Filepicker Component.

There exit a Filepicker Component in the old original Sketchware, but there is also a new Filepicker Component added with the Sketchware Pro system Components. 

Most important new feature is the multiple select possibility. 

Copy the link of the Filepicker library 

To use this new component we need to import the Filepicker V1.1 library. 

This library you can find on the GitHub website. We need now to copy the link to it.

So first open Google (or another browser) and search for:

Filepicker V1.1 GitHub

Then you find the website for Filepicker on GitHub and open it.

Here the link you opened: 

https://github.com/singhangadin/android-filepicker

Scroll down to 'Installation' and look at the compile code.

Then copy the text between the two ' ' signs.

Download the Filepicker library to Sketchware 

Close the browser and open Sketchware Pro to create a new project.

Once you opened the project, click the right 'Configuration' drawer and scroll down to 'Local library'. Open it.

Click the download button on the right top.

Choose 'dx'

Then paste your copied text from the GitHub website and click 'start'.

If success you have added the Filepicker library to Sketchware Pro. Click it to add it to your project. 👍

💡 TIPP: Save or zip the library to storage.

The library you download is located on following directory:

". sketchware/libs/local_libs/"

You can copy or zip the 'filepicker_V_1_1_1' folder and save it to a directory or USB storage you want.

So if you ever need to reinstall Sketchware Pro you can copy the library to the directory and don't need to download it from GitHub.

The Views 

First in MainActivity

* add a Button button1 and set it's text to 'load pictures'

* add a ListView listview1.

Add a custom view. I called it 'item'

* Add a Image view imageview1,

* add a TextView textview1.

Back on MainActivity set the custom view of listview1 to item.

The views are ready. 👍

The component

Add a Filepicker Dialog component.

and name it 'filepicker' (or as you want)

and add it.

The component is ready. 👍

The events 

First we need to import the 'java.io.File' package.

Click the activity-tab and add the import event.

Then open it and drag and drop the Import-Block with Text 'java.io.File'

The onClick event 

open now the onClick event for button1

Add a number 'pos' and a ListMap 'list'

Add from FileUtil palette the 'write string to path' block to get permission to Sketchware. 

And add 'clear list' block with List 'list'.

Now scroll down the block list to palette 'Custom FP'. Here you find the blocks for the filepicker component.

Add following blocks like shown below.

Set for all new block the FilePickerDialog to component 'filepicker'.

If this don't work go to Variable palette, scroll down and drag and drop the Variable block for it.

The 'filepicker set..' block

Short overview: With this block we set where the files come from: 

* Single or multiple selection

* The extension or the extensions to pick allowed

* The file path on storage to pick from

Scroll down again to CustomFP palette.

For the second block 'filepicker set... ' we need the blocks in the first section.

If you want to pick only one file drag and drop 'single selection' to the 'selection_mode' field.

We want to pick more than one file, so we drag a d drop 'multi selection' to the 'selection_mode' field.

Now declare the extension/s. Drag and drop 'extension' block to the 'extension' field.

If you have only one type of file to pick you can write the extension into the white field. 

We want to pick files with '.png', '.jpg' and '.bmp'. Add two 'and' block into the white field.

Now write even one extensions into one field. Write all extensions with the dot!

Fine all extensions are declared.👍

At last we must define the path from where images can be picked.

💡For your phone storage you can write 

"storage/emulated/0/" 

or you can add a 'join' block from Operator palette and insert the 'get external storage directory' block from FileUtil palette.

Usually the pictures are stored on your phone in the folder '/DCIM/Camera/' also pictures are stored in the folder '/pictures/'. We use the Camera folder.

Insert now the "/DCIM/Camera/' to the empty white field.

The 'filepicker create..' block

Overview of this block:

* The activity to view the custom filepicker view.

* The title to show in the filepicker dialog view.

On this block set Activity to MainActivity and the title to "Load pictures"

The 'filepicker on file picked' block

This if-like block includes all what happened if the files are picked and the filepicker dialog view is dismissed.

We want to save all patches as string to the ListMap list and show this in the ListView listview1.

Set number pos to 0.

Then Add a repeat block and insert the increase block for pos.

Scroll down now the block list to CustomFP and drag and drop the 'get picked files length' number block 

as condition of the repeat block.

Inside the repeat over the increase block insert 'add key value to ListMap' block from List palette.

* Set key as "picture" (or as you want).

* From CustomFP palette drag and drop the 'get file path at' string block

to the value field and set the number to pos.

* At last set the ListMap to list.

The repeat block is ready. 👍All paths of the picked files are stored in the ListMap list. 

Now we must set 'list' to the list of listview1 and refresh it.

Paste both blocks from the View palette under the repeat block.

Set ListView to listview1 and ListMap to list.

Fine, the 'filepicker on file picked' block is finished. 👍

The 'filepicker setPositive/NegativeBtnName' block

With this blocks you set the text of the buttons. 

* Set text of setPositiveBtnname to "save"

* Set text of setNegativeBtnName to "cancel"

The 'filepicker show' block

All settings for the filepicker dialog view are now ready. 

The 'filepicker show' block loads the view and make it visible. 

Well done all for the onClick event for the button1. 👍👍

Here the complete blocks.

The onBindCustomView event for ListView listview1 

Leave the onClick event and add for ListView listview1 the onBindCustomView event, then open it.

Here we bind the saved imagepath from 'list' to the views in the custom view 'item': ImageView imageview1 and TextView textview1.

From the View palette 

* add 'ImageView set Image from file path' block. Set Image view to imageview1

* add 'TextView set text' block. Set TextView to textview1

From List palette insert the 'get value at key of ListMap' block into both blocks. 

Set even ListMap to 'list'.

Drag and drop from top the 'position' number block into both 'get value... ' blocks.

Set value of both 'get value...' blocks to "picture" (or you have defined).

Well done 👍

The app is now ready.

Run and test the app

Click the "LOAD IMAGES" Button.

Select the pictures.

And see the list.

Ok that's all. 👍🙂