How to Customize the Navigation & Tool Bars on Android

Some times you may want to hide or restrict certain features of the default reader capability whereas in other occasions you’ll need to change the look and feel of your PDF reader. This can be done by customizing the SimpleReaderControlView.

The PlugPDF SDK’s SimpleReaderControlView class offers a simple way to put PDF reading capability into your app. Below are shown three different ways to customize it.

  1. How to show/hide the default menu items on the navigation/tool bar
  2. Adding a custom menu item to the navigation/tool bar
  3. Creating a custom navigation/tool bar

How to show/hide default menu items on the navigation bar

The left image below shows you the default navigation bar. You can see five items on the bar. For example, suppose you want to remove the Rotate View (reload), Edit Mode (edit) button items. You can do it very easily by adding the code below to the init() method.

1-1        1-2

Adding a custom menu item to the navigation bar

Let’s now add a special action button to the navigation bar as it is shown on the right picture below.

1-1        2-1

In order to add a button, you should edit layout\simple_reader_control.xml located in PlugPDF Project. In the image below, you see the outline of the .xml file (simple_reader_control.xml).

Under the highlighted LinearLayout are the menu items which you see on the navigation bar.

2-2

So please take the xml file above and add the six lines below to LinearLayout:

There’s one more thing to do. You have to add the same lines to layout-lend\simple_reader_control.xml and layout\simple_reader_control.xml. After adding the red 6 lines to the three xml files, you’ll see a newly added button item on the navigation bar. Now you’re just one step away from finishing it.

Add the code below to the init() method so an action can occur when the new button is clicked.

Creating a custom navigation/tool bar

You can change the navigation/tool bar background image by customizing the SimpleReaderControlView. The properties of the navigation/tool bar are defined in styles.xml. In this xml file, you can see the lines of code below.

If you replace @drawable/top_bar_bg with #0f0f0f, you can see the navigation/tool bar background color changed like the image below.

3-1

We hope this helps.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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