Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to develop a comic viewer for Android

In this article, we will learn to develop a comic viewer application for android. This developed application will contain features that are used to view .cbz format files.

In order to setup the comic viewer, there is a need to certain features which should have certain characteristics. The details of the features required are as follows:

The first thing is to have a list view of the .cbz files.

Shows the list view of .cbz files

Figure 1: Shows the list view of .cbz files

The characteristics required in the list view of the comic viewer are:

  • Firstly, it should show the thumbnail of the first page of the comic along with its name.
  • The second and the important thing is that it should allow the user to start viewing the rest of the file.

The second feature that we require is viewer which will read the .cbz file. The characteristics of viewer are:

  • Firstly, the viewer will show one page at a time along with the pitch gestures that will be used to move to the previous or next page.
  • Secondly, double tap on the page must zoom in page where it is tapped. During zoom in, the image can be scrolled during drag gestures.

Last but not the least, there should be a menu which performs the following features:

  • Setup the bookmark, where the application will directly go when it is started.
  • Return to the bookmark.
  • Allows the user to go to a list view of .cbz files to select a different comic to view.

No, let us make a layout of the work to be done. The whole process will be done in five steps. They are as follows:

  1. Comic Book file format
  2. Reading the contents of a Zip archive file
  3. Viewing the pages of a comic
  4. Viewing list of comic book files
  5. Setting up bookmark

Firstly, the user must understand the type of format which we will be using to store the comic books. It is .cbz format. In this format, we will be having a set of images that are packed into a zip archive file. Each image shown will be a page of the comic.

After understanding the format of the comic file, the next thing that is required is to read the contents of the zip archive file. We will be developing the comic viewer for android and as we know android provides two main classes to read a ZIP file. They are as follows:

  • ZipFile provides random read access to a Zip file. In order to move both forward and backward, and even jump to a specific page of the comic, this class is required.
  • ZipInputStream which allows access to the contents of the file in a serial fashion.

We will be using the ZipFile class for developing our application which is very simple.

Listing 1: Shows the code for the ZipFile class.

public CbzComic(String fileName) {
        mFileName = fileName;
        try {
            // populate mPages with the names of all the ZipEntries
            mZip = new ZipFile(fileName);
            mPages = new ArrayList<string>();
            Enumeration<? extends ZipEntry> entries = mZip.entries();
            while (entries.hasMoreElements()) {
                ZipEntry entry = entries.nextElement();
                if (isImageFile(entry)) {
                    mPages.add(entry.getName());
                }
            }
        } catch (IOException e) {
            Log.e(Globals.TAG, "Error opening file", e);
        }
    }

    public Bitmap getPage(int pageNum) {
        Bitmap bitmap = null;
        try {
            ZipEntry entry = mZip.getEntry(mPages.get(pageNum));
            InputStream in = null;
            try {
                in = mZip.getInputStream(entry);
                bitmap = BitmapFactory.decodeStream(in);
            }  finally {
                if (in != null) { 
                    in.close();
                }
            }
        } catch (IOException e) {
            Log.e(Globals.TAG, "Error loading bitmap", e);
        }
        return bitmap;
    }</string>

Now, after reading the contents of the comic book, we need to view the pages of a comic. The viewing of a comic is between two classes. They are as follows:

  • BitmapView.java: It is responsible for showing the page image and responding to the user's zoom, pinch and scroll gestures to display the appropriate part of the selected image.
  • BitmapViewController.java: It is responsible for responding to the users fling gestures, to change the currently selected page in the BitmapView.

Listing 2: Shows the code to link the BitmapView and BitmapViewController

mBitmapView = (BitmapView) findViewById(R.id.comicView);
 mBitmapController = new BitmapViewController(mBitmapView, (Activity) this);
 mBitmapView.setController(mBitmapController);

The next step is to view the list of the comic book files. In this, we will be developing a class which will perform the following functions:

  • Firstly, it finds the available .cbz files.
  • Secondly, it shows the found files to the user, in a way that allows the user to select one of them.
  • Finally, it returns the selection to the main activity.

Listing 3: Shows the code to get a lsit of the files

private boolean isMediaAvailable() {
        String state = Environment.getExternalStorageState();
        if (Environment.MEDIA_MOUNTED.equals(state)) {
            return true;
        } else {
            return Environment.MEDIA_MOUNTED_READ_ONLY.equals(state);
        }
    }

    private void listComicFiles() {
        if (!isMediaAvailable()) {
            Utility.showToast(this, R.string.sd_card_not_mounted);
        } else {
            File path = Environment
                    .getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS);
            mRootPath = path.toString();
            mFileNames = new ArrayList<string>();
            String[] filesInDirectory = path.list();
            if (filesInDirectory != null) {
                for (String fileName : filesInDirectory) {
                    mFileNames.add(fileName);
                }
            }
            if (mFileNames.isEmpty()) {
                Utility.showToast(this, R.string.no_comics_found);
            }
        }
    }</string>

The final feature of this created application is to set and restore a bookmark. This is made in order to tell the application to remember the currently displayed comic and page so that later on, when the application is restarted, it should return to the comic and page.

Listing 4: Shows the code for the bookmark

public void saveToSharedPreferences(Context context) {
        if (!isEmpty()) {
            SharedPreferences settings = context.getSharedPreferences(PREFS_NAME,
                    Context.MODE_PRIVATE);
            SharedPreferences.Editor editor = settings.edit();
            editor.putString(PREFS_COMIC_NAME, mComicName);
            editor.putInt(PREFS_PAGE, mPage);
            editor.commit();
        }
    }

    public Bookmark(Context context) {
        SharedPreferences settings = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
        mComicName = settings.getString(PREFS_COMIC_NAME, "");
        mPage = settings.getInt(PREFS_PAGE, -1);
    }

Conclusion

In this way, we can create an application for android in which we can view comic books. We have also learned the use of creating a bookmark and the method of creating it also.



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login