Skip to content

Kitaboo SDK components

As mentioned earlier Kitaboo SDK comes with Kitaboo reader. This is everything else in the reader except for the area that shows the content and the interactions with the content. In this section we are going to describe the main components of our SDK and how it's utilized in the reader that results in the end product.

The code snippets you see below are from Kitaboo reader. This will give you a good idea of both the SDK and the reader in case you'd like to modify certain functionality or completely replace it. We have a section for various customization that you can do using our SDK and reader as well.

Actionbar

Introduction

The basic functionality of this feature is to display all the component icons in an systematic manner so that they are accessible by the user.

Implementation

KitabooSdk exposes an interface "KitabooActionBar " which help you in creating TopBar and Bottom bar and add actionbar items with the help of "KitabooActionItemView" class "KitabooActionItemView" is a class which helps user(Developer) in creating and customizing the Actionbar item in the following way.

Listeners

"KitabooActionbarBuilder.KitabooActionBarMenuClick"which a class "PlayerActivity" of KitabooSampleReader implement and override method "**onMenuItemClick(View menu)" which be triggered when any KitabooActionBar item clicked .User can perform certain action based on which KitabooActionBar item clicked .

/**
*  An interface to provide callbacks on Action bar item click events.
*/
public interface KitabooActionBarMenuClick{
   /**
    * Callback on ActionBar item click.
    * @param menu anction bar view.
    */
   public void onMenuItemClick(View menu);
}

Customization

You can customize both the topbar and bottom bar that comes with our reader. If you only want to replace the entire action bar with your own then jump to Customize action bar section.

1. Basic customization

  • Add/Change menu items in the following way.
// Creating KitabooActionBar Item (Home button) view 

KitabooActionItemView actionHome = new KitabooActionItemView(this);
Private int actionBarItemColor = Color.parseColor(themeUserSettingVo.get_reader_icon_color());

setTopActionbar(actionHome , R.id.action_home, "A", "a", actionBarItemColor, Gravity.LEFT);

/**
* @param item view if KitabooActionbar item
* @param itemId id of the KitabooActionItem
* @param itemName name of KitabooActionItem
* @param charManningChar chrachter used in TTF file.
* @param itemColor color if the KitabooActionbar item which you want to set.
* @param itemGravity will decide the postion of KitabooActionbar.
*/
private void setTopActionbar(KitabooActionItemView item, int itemId, String itemName, String charManningChar, int itemColor, int itemGravity) {
   item.setId(itemId);
   item.setUniqueName(itemName);
   item.setCharatorManningChar(charManningChar);
   item.setTextColor(itemColor);
   item.setGravity(Gravity.CENTER);
   item.setTypeface(topActionbar.defaultActionbarTypeface(this));
   item.setAllCaps(false);
   item.setTextSize(15);

// Adding the ActionBar item to ActionBar ,customizing background of Actionbar and registering the // listener on the click event of ActionBar item.

KitabooActionbar topActionbar = (KitabooActionbar) findViewById(R.id.topActionbarid);
   topActionbar.setBackgroundColor(actionbarBackGroundColor);
   topActionbar.addActionItem(item, itemGravity);
   topActionbar.addEventCallback(this);

}
  • After changing the items in the action bar, change the code to match the item ID in onMenuItemClick() in the reader and its corresponding functionality.
/**
 * Click event of each button in actionbar
 *
 * @param menu : clicked item view
 */
@Override
public void onMenuItemClick(View menu) {

    if (menu.getId() == R.id.action_toc) {
        showTableOfContent(menu);
        showActionBar();
    } else if (menu.getId() == R.id.action_home) {
        onBackPressed();

    } else if (menu.getId() == R.id.action_search) {
        openSearchDialog(false);
        showActionBar();
    } else if (menu.getId() == R.id.action_my_data) {
        openMydataView(menu);
     }
}

2. Advanced customization

The position of action bar can be customized which means you can place your Toolbar position on the Bottom,Top,Left,Right of the Reader. To achieve this,the layout of the reader should be structured and toolbar layout position should be placed accordingly.

Add below line of code in Activity's xml of "PlayerActivity" class above and below of layout of renderview.

  • TopAction Bar
<com.hurix.customui.actionbar.KitabooActionbar
   android:id="@+id/topActionbarid"
   android:layout_width="match_parent"
   android:layout_gravity="top"
   android:layout_height="50dp">
</com.hurix.customui.actionbar.KitabooActionbar>
  • BottomActionBar
<com.hurix.customui.actionbar.KitabooActionbar
   android:id="@+id/bottomActionbarid"
   android:layout_width="match_parent"
   android:layout_height="50dp"
   android:layout_gravity="bottom">

</com.hurix.customui.actionbar.KitabooActionbar>
  • Implement KitabooActionbarBuilder.KitabooActionBarMenuClick listener to "PlayerActivity" and get a callback .
public void onMenuItemClick(View menu) {}

Table of content (TOC)

Introduction

Kitaboo Sdk exposes a component where you can find the list structure of Page contents in Contents Tab, created books list on Bookmark Tab and resources list on Resources Tab.By clicking on list items user will navigate to current corresponding page.

Implementation

KitabooSDK supports a default TOC view( TocView class) to show the different view as per tabs. User can customise TOC view by their own ways.

/**
* Invoking TOCview to display the TOC data.
*
* @param v : anchor view
*/
private void showTableOfContent(View v) {

Here,
readerType = Kitaboo Reader type like:Pdf support,Epub Support(Reflow/Fixed)
isMobile = Device type as boolean

       TocView toc = TocView.newInstance("toc", v, readerType, isMobile);
       toc.setitemclickListener(this);
       toc.setviewlistner(this);
       toc.setThemeColor(themeUserSettingVo);
       createTabs(toc);//Create tabs :Refer 1.3 Add or remove tabs section below in customization
       int[] params = setDilaoglayout();
       toc.setParams(params[0], params[1]);
       toc.show(getSupportFragmentManager(), "toc");

}

**
* Return view class as per tab.
*
* @param tag: String tag
* @param listner: TOCEnterpriseView.TocItemClickListener listner
*/

// Data required in View Classes for showing the list

mTocdata = book.getTocdata();// User will get Table of contents data in book object from onBookLoaded @Override method.

@Override
public void onBookLoaded(IBook book) {
   mTocdata = book.getTocdata();

}

// User will get Table of Resources data in book object from onBookLoaded @Override method.
@Override
public void onBookLoaded(IBook book) {
   mTocdata = book.getBookTorUserVoList();

} 

//   Table of BookMark data 

DatabaseManager.getInstance(this).getAllBookMarkForToc(userID, bookId)


// Return view as per tag to display in TOCView
@Override
public View returnTabView(String tag, TOCEnterpriseView.TocItemClickListener listner) {

   /*  Return view as per  tab tag
   /* */

   if (tag.equals(<Contents>)) {

//Return view for Pdf books
       return new TOCEnterpriseView(context, tocdata, listner, isMobile, themeUserSettingVo);

//Return view for Epub books
 return new TOCEnterpriseViewEpub(this, mTocdata, listner, Utility.isDeviceTypeMobile(this), themeUserSettingVo);

Here,
 context= activity context|| tocdata= table of content data || llistner= listner for click event || isMobile=Utility.isDeviceTypeMobile(this). is type of device Tab/Mobile || themeUserSettingVo = Kitaboo theme pozo class



   } else if  (tag.equals(<Bookmark>))  {
tobdata =DatabaseManager.getInstance(this).getAllBookMarkForToc(userID, bookId)
 //   Table of BookMark data  

TOBView tobView = new TOBView(context);
       tobView.setdata(context, tobdata , mReaderType, listner, this, Utility.isDeviceTypeMobile(this), themeUserSettingVo);
 return tobView;

Here,
 context= activity context|| tobdata = table of bookmark data || listner= listner for click event || isMobile=Utility.isDeviceTypeMobile(this). is type of device Tab/Mobile || themeUserSettingVo = Kitaboo theme pozo class

   } else if (tag.equals(<Resources>)) {

mTorData= book.getBookTorUserVoList();


     return new TORView(PlayerActivity.this, mTorData, this, themeUserSettingVo);

Here,
 context= activity context|| mTorData= table of resources data || listner= listner for click event || isMobile=Utility.isDeviceTypeMobile(this). is type of device Tab/Mobile || themeUserSettingVo = Kitaboo theme pozo class
   }
}

Listeners

  • KitabooSDK facilitates 3 Default View- interface to perform the click event of list as per their tab category.
/**
* Callback for TOC item click.
* @param folioid folioId of the page.
* @param baseUrl url
* @param anchor anchor ( An anchor is a piece of text which marks the beginning and/or the end of a hypertext,Valid of Epub books.
* @param isMobile boolean value 1 or 0 will decide the type of device(Mobile/Tablet)l
* @param pageid id of the page.
*/
void onTocitemClick(String folioid, String baseUrl, String anchor, boolean isMobile, int pageid);
  • Navigate to specific page when user click on TOC item.Since kitabooSdk supports two type of rendering of books [ KitabooFixed( PDF version) and Epub books],so navigation will processed based on types of books.
renderView.navigatePage(0, baseUrl, anchor, isMobile, false); // navigate to page using folioId/pageId/baseUrl/anchor

}
// Navigation for pdf books: use Pageid/FolioiD,For Epub books use : baseUrl/anchor

ie:
renderView.navigatePage(pageid, "", "", true, false);->fun navigatePage(pageid : Int, baseUrl: String, anchor: String,ismobile: Boolean , pageindex : Boolean)
{}

**
* Callback for TOB item click.
*
* @param bookMarkVO: BookMarkVO bookMarkVO : Clicked item bookmark object
*/
@Override
public void onTobitemClick(BookMarkVO bookMarkVO) {

// Navigate to specific page using bookmark object

ie:
  navigatePageByFolioId(bookMarkVO.getFolioID(), bookMarkVO.getBookmarkPageID());
}

**
* Callback for TOR item click.
*
* @param tableOfResourceVo : TableOfResourceVo tableOfResourceVo : Clicked item resource object
*/
@Override
public void onTorItemClick(TableOfResourceVo tableOfResourceVo) {

   // Take action by using TOR  object either to play resource or navigate to page

playClickedMarkUpByResourceId(); // Play resources

renderView.navigatePage(tableOfResourceVo.getPageID(), "", "", true, false);
// navigate to page

}

Customization

Kitaboo SDK supports a TOC component TocView to show the table of content of a book in the reader. You can either customize the entire TOC component or make simple changes to the TOC that comes with Kitaboo reader. If you want to replace the entire TOCView with your own then jump to [Custom TOCView] section.

1. Basic customization

Using TOCView you can customize the following:

Theme

Allow you to set the theme color as defined by KitabooTheme.

toc.setThemeColor(themeUserSettingVo);` where, themeUserSettingVo: is a theme setting pojo class as per the defined kitaboo Theme.json structure.

1.1. Width and the height

This will allow you to design the Toc layout as per the desired dimensions.

toc.setParams(params[0],params[1]);
int width = ViewGroup.LayoutParams.MATCH_PARENT;
int height = ViewGroup.LayoutParams.MATCH_PARENT;
params[0] = height;
params[1] = width;
where params is an array which holds the width and height of Tocview

1.2. Add or remove tabs

This will allow you the add tabs in TOC view. A multiple tabs can be added as user requirement , however minimal one tab must be added.

toc.setData(contentVO.getContentVOs());
where ,
contentVO.getContentVOs(): represents list of tabs in ContentVO type LinkedHashMap.
eg;
  LinkedHashMap contentVOs = new LinkedHashMap();
ContentVO contentVO = new ContentVO();
contentVOs.put("bookmark","TOc Tab text which you want to display")
contentVO.setContentVOs(contentVOs);

2. Advanced customization

Creating your own custom Toc View and utilizing the same on Reader. Here, we are going to display TOC data in a custom list( using recyclerView).

  • on click of TOC menu item,define your custom listview and initialize the same in "PlayerActivity".
public void onMenuItemClick(View menu) {
if (menu.getId() == R.id.action_toc) {

 RecyclerView  mCustomTOCList = (RecyclerView) findViewById(R.id.custom_toc);//  initialization of Recylerview. 

 // Instantiating an custom adpter and pass the "TOC data "
   CustomTOCListAdapter adapter = new CustomTOCListAdapter(PlayerActivity.this , mTocdata , this);

}}
  • Where, mTocdata : is the Toc data which you can receive from book object in the callback as below:
@Override
public void onBookLoaded(IBook book) 
{
 mTocdata = book.getTocdata();
}
  • set your customlistview adapter in "PlayerActivity".
LinearLayoutManager layoutManager
= new LinearLayoutManager(PlayerActivity.this, LinearLayoutManager.VERTICAL, false);
mCustomTOCList.setLayoutManager(layoutManager);
mCustomTOCList.setAdapter(adapter);

Now , you can perform required action on Toc item click.

  • Toc Item click event callback
/**
 * Called on  Click of Toc item list
 *
 * @param pageid :
 */
@Override
public void onTocitemClick(int pageid, String baseUrl, String anchor, boolean isMobile) {
    renderView.navigatePage(pageid, baseUrl, anchor, isMobile, false);
    if (mDialog != null) {
        mDialog.dismiss();
        mDialog = null;
        toc = null;
    }
}

Highlight

Introduction

Highlight is a feature supported by KitabooSDK which helps the user to highlight the sentence/words/characters available on the pages with specific color available in highlight dialog.

Implementation

KitabooSDK provides the flexibility to customize the highlight color which means user can add multiple highlight color icons,contextual note icons, search and delete icons to the highlight panel whereas the highlight popup orientation can be placed either Horizontal or Vertical.

KitabooSdk provides a class "HighlightActionView" which can be instantiated to show highlight Pop and can be customized in the following way.

new HighlightActionView(context,Orientation of panel);
  • Orientation
HighlightActionView.HORIZONTAL/ VERTICAL
  • Create Highlight Button
new HighlightActionItem(int actionID, Drawable icon, boolean isSticky);
actionID = item ID icon = Any Drawable type isSticky = clickable
  • Add button in Highlight Panel
actionView.addHighlightActionItem(BtnHighlightItem); // adding highlight button to highlight panel.

/**
* Create customise highlight popup with different icon , color , background
*/
private void initHighlightPopup() {

       //creating Kitaboo SDK highlight popview horizontally. The orientation of highlight popup can be vertical as well if you pass the orientenation to highlight view as vertical.

HighlightActionView actionView = new HighlightActionView(this, HighlightActionView.HORIZONTAL);

       // Creating a highlight color icon

A character which represnts text icon : PlayerUIConstants.HC_IC_TEXT

A ttf file path : com.hurix.commons.utils.Utils.getFontFilePath()

       IconDrawable yellowHighlightBtn = new IconDrawable(getApplicationContext(), PlayerUIConstants.HC_IC_TEXT, com.hurix.commons.utils.Utils.getFontFilePath());
       yellowHighlightBtn.sizeDp(36).color(PlayerUIConstants.HC_YELLOW_IC_UNSELECTED_FC);

//add the items wants to be customize highlight popup.

HighlightActionItem yellowBtnHighlightItem = new HighlightActionItem(ACTION_ID_HIGHLIGHT_YELLOW, yellowHighlightBtn, true);
yellowBtnHighlightItem.setpadding(7, 4, 7, 4);


actionView.addHighlightActionItem(yellowBtnHighlightItem); // adding highlight button.

actionView.addHighlightActionItem(NoteHighlightItem);// adding 

   //initialize and add the click listener for the customized popup.
   actionView.addOnActionItemClickListener(new HighlightActionView.OnActionItemClickListener() {

       @Override
       public void onItemClick(HighlightActionView highlightAction, int pos, int actionId, HighlightVO obj, View view) {

           handleHighlightItemClick(highlightAction, actionId, obj, view);


   });

* Set and customize Highlight Sticks
*/
actionView.addOnHighlightPopupDismissListener(new HighlightActionView.OnDismissListener() {
       @Override
       public void onDismiss() {

                  }
   });

actionView.setStartStcik(getResources().getDrawable(R.drawable.porto_start));
actionView.setEndStick(getResources().getDrawable(R.drawable.porto_end));
renderView.setHighlightActionView(actionView); // add the customized highlight popview instance to SDK renderer
}

}

Listeners

  • Callback when Highlight panel items pressed.
//Perform the task as per Highlight panel items pressed

HighlightActionView actionView = actionView.addOnActionItemClickListener(new HighlightActionView.OnActionItemClickListener() {

   @Override
   public void onItemClick(HighlightActionView highlightAction, int pos, int actionId, HighlightVO obj, View view) {

       handleHighlightItemClick(highlightAction, actionId, obj, view);

// Refer the below handleHighlightItemClick method below

   }

});

HighlightActionView actionView =actionView.addOnHighlightPopupDismissListener(new HighlightActionView.OnDismissListener() {
   @Override
   public void onDismiss() {

// User can dissmiss highlight panel
actionView.dismiss();

   }
});
  • Get the selected text for highlight feature.
@Override
public void onPageTextSelected(Rect rect, String highlightedText) {
 // Get the highlighted text when highlight button pressed
    mHighlightedText = highlightedText;}
  • Callback when existing highlighted text touched on renderer.
/**
* Callback on click of  existing highlight on renderer
*
* @param existHighlight : existing highlight object
*/
@Override
public void onHighlightTaped(HighlightVO existHighlight) {
   if (existHighlight != null && existHighlight.isImportant()) {
       actionView.setSelectedBackground(ACTION_ID_HIGHLIGHT_RED, Utils.getCircleDrawableWithStroke(PlayerUIConstants.MOB_HC_YELLOW_IC_SELECTED_BGC, PlayerUIConstants.MOB_HC_YELLOW_IC_SELECTED_BGC, 0));
       actionView.setSelectedBackground(ACTION_ID_HIGHLIGHT_YELLOW, Utils.getCircleDrawableWithStroke(PlayerUIConstants.MOB_HC_RED_IC_UNSELECTED_BGC, PlayerUIConstants.MOB_HC_RED_IC_UNSELECTED_BGC, 0));
   } else {
       actionView.setSelectedBackground(ACTION_ID_HIGHLIGHT_YELLOW, Utils.getCircleDrawableWithStroke(PlayerUIConstants.MOB_HC_YELLOW_IC_SELECTED_BGC, PlayerUIConstants.MOB_HC_YELLOW_IC_SELECTED_BGC, 0));
       actionView.setSelectedBackground(ACTION_ID_HIGHLIGHT_RED, Utils.getCircleDrawableWithStroke(PlayerUIConstants.MOB_HC_RED_IC_UNSELECTED_BGC, PlayerUIConstants.MOB_HC_RED_IC_UNSELECTED_BGC, 0));
   }
   actionView.enableHighlightItem(ACTION_ID_DELETE);
  }
  • Callback on completion of highlighted text ,returns an object which contains highlight details.
/**
 * callback on text Highlight completes
 *
 * @param highlightvo : Object contains require the details of highlight
 */
@Override
public void onHighlightDrawComplete(HighlightVO highlightvo) {

    if (highlightvo != null) {
        saveHighlight(highlightvo);
// Save Highlight object to DB.
    }
}
  • Handle the click event of Highlight panel buttons.
/**
 * @param highlightAction : highlight contextual popup
 * @param actionId        : id of clicked button
 * @param highlightObj    : Highlight object
 * @param view            : clicked item view
 */
private void handleHighlightItemClick(HighlightActionView highlightAction, int actionId, HighlightVO highlightObj, View view) {
    HighlightVO vo;
    switch (actionId) {
        case ACTION_ID_HIGHLIGHT_GREEN:
            vo = highlightAction.getHighlightObj();
            vo.setColor("#99cc00");
            vo.setTextColor("#ffffff");
            renderView.highlightText(vo);
            break;
        case ACTION_ID_NOTE:
            //show note
            highlightAction.getHighlightObj().setColor("#F4D631");          initNotePopup(highlightAction.getHighlightObj().getHighlightedText(), highlightAction.getHighlightObj());
            break;
    }
}

Customization

  • Enable/disable items of Highlight Panel
//Here pass the id of items to enable/disable as per requirement

actionView.enableHighlightItem(ACTION_ID);

actionView.disableHighlightItem(ACTION_ID);
  • Set background of highlight selection,set selection area shape,set items text color, Set stroke width
HighlightActionView actionView = actionView.setSelectedBackground(ACTION_ID_HIGHLIGHT_RED, 
Utils.getCircleDrawableWithStroke(PlayerUIConstants.MOB_HC_YELLOW_IC_SELECTED_BGC, 
PlayerUIConstants.MOB_HC_YELLOW_IC_SELECTED_BGC, 0));

Contextual Note and Sticky Note

Introduction

Note is a piece of information that user can put on page.Kitaboo Sdk facilitates Note feature,which can be used for saving page data or user comments on page.

Info

Contextual note: Note creation is done using selected text where position of note is depends upon selected text position.

Info

Sticky note: Note creation is done by tapping anywhere in Page-area,where position of note is depends selected page area (X,Y) points.

Implementation

Contextual Notes and Sticky Notes are same here , we are differentiating using highlighted text.If selected text is shown in note then it's contextual note otherwise sticky note.

After tapping on notes icon in highlight view or sticky notes icon in app bar we will get callback and now we have to open noteview as mentioned here.

For Contextual Note : When we click on Contextual Note Icon from highlight popup panel it will give callback on handleHighlightItemClick method.

/**
 * Responsible to handle the click event of customized highlight popup buttons
 *
 * @param highlightAction : highlight contextual popup
 * @param actionId        : id of clicked button
 * @param highlightObj    : Highlight object
 * @param view            : clicked item view
 */
private void handleHighlightItemClick(HighlightActionView highlightAction, int actionId, HighlightVO highlightObj, View view) {
    HighlightVO vo;
    switch (actionId) {

        case ACTION_ID_NOTE:

            // Set any color in highlighlight object for Note
            String color = "";
            if (highlightAction.getHighlightObj().isImportant()) {
                color = "#cd3a3a";
            } else {
                color = "#fcf9a3";
            }
            highlightAction.getHighlightObj().setColor(color);
// 
            initNotePopup(highlightAction.getHighlightObj().getHighlightedText(),       highlightAction.getHighlightObj());
            break;
    }
}

//Customize the of Note View with backgroundcolor , Size , Button
private void initNotePopup(String highlightedTxt, HighlightVO vo) {

  NoteView notepopup = new NoteView(this);
    if (isMobile){
        setMobileNoteDilogParams();
    }else {
           notepopup.setLayoutParams(getResources().getDimension(R.dimen.enterprise_sticky_note_popup_dialog_width), getResources().getDimension(R.dimen.enterprise_sticky_note_popup_dialog_height));
    }
    notepopup.setBackColor(Color.parseColor("#FFFFFF"));
    notepopup.setHighlightedText(highlightedTxt);
    if(vo.isImportant()) {
        notepopup.setHeaderColor(Color.parseColor("#e86161"));
    }else
    {
        notepopup.setHeaderColor(Color.parseColor("#fcf9a3"));

    }
    notepopup.setHighlightObj(vo);
    IconDrawable notImpBtn = new IconDrawable(getApplicationContext(),
            PlayerUIConstants.NOTE_IMPORTANT_IC_TEXT, getResources().getString(R.string.kitaboosdk_font_file_name));
    notImpBtn.sizeDp(25).color(PlayerUIConstants.NOTE_IMPORTANT_IC_UNSELECTED_FC);

    IconDrawable deletebtn = new IconDrawable(getApplicationContext(),
            PlayerUIConstants.NOTE_DELETE_IC_TEXT, getResources().getString(R.string.kitaboosdk_font_file_name));
    deletebtn.sizeDp(25).color(PlayerUIConstants.NOTE_IMPORTANT_IC_UNSELECTED_FC);

    notepopup.setButtonDrawable(notImpBtn, NoteView.NoteActions.IMPORTANT);
    notepopup.setButtonDrawable(deletebtn, NoteView.NoteActions.DELETE);

    // Handle the click event of buttons of customized Note popup

    notepopup.addOnActionItemClickListener(new NoteView.OnActionItemClickListener() {


        @Override
        public void onCancelClick() {
            notepopup.dismiss();
        }

        @Override
        public void onSaveClick(NoteView.NoteActions action, HighlightVO vo) {
            saveHighlight(vo);
            getHighlightFromDB(vo.getFolioID());
            renderView.drawNote(vo);
            notepopup.dismiss();
        }

        @Override
        public void onShareClick(NoteView.NoteActions action, HighlightVO vo) {
            openSticyNoteShareScreen(vo);
        }

        @Override
        public void onImportantClick(boolean isImportant, HighlightVO vo) {
            if (isImportant) {
                vo.setColor("#e86161");
                notepopup.setHeaderColor(Color.parseColor("#e86161"));
                notepopup.setHeaderText("Tap to make this note normal");
                vo.setImportant(true);
            } else {
                vo.setColor("#fcf9a3");
                notepopup.setHeaderColor(Color.parseColor("#fcf9a3"));
                notepopup.setHeaderText("Tap to make to make this note important");
                vo.setImportant(false);
            }
        }

        @Override
        public void onHeaderSingletap(boolean isImportant) {

        }

        @Override
        public void onDeleteClick(HighlightVO vo) {
            notepopup.dismiss();
            deleteHighlight(vo);
            renderView.deleteHighlight(vo);
            vo = null;
        }


    });

// Finally Show the popup Here.
    notepopup.show();

}

Sticky Note implementation : sticky note will be created on click of ActionBar item.

if (menu.getId() == R.id.action_sticky_note) {
    // exportDatabse("epubreader.db");
    openStickynoteOverlay();
} 
/**
 *  Responsible to open the sticky note overLay.
 */l
private void openStickynoteOverlay() {
    (findViewById(R.id.stickynotelayout)).setVisibility(View.VISIBLE);
    (findViewById(R.id.stickynotelayout)).setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                PointF _currentPoint = new PointF(event.getX(), event.getY());
                Point point = new Point((int) _currentPoint.x, (int) _currentPoint.y);
                HighlightVO vo = renderView.isPointValid(point);
                if (vo != null) {
                    (findViewById(R.id.stickynotelayout)).setVisibility(View.GONE);
                    initStickynote(vo);
                }
            }

            return true;

        }
    });
}

Call back on click of existing note icon on renderer

/**
 * call back on click of existing note icon on renderer
 *
 * @param highlightVo : existing highlight object
 */
@Override
public void onNoteClick(HighlightVO highlightVo) {

    if(highlightVo.getHighlightedText().isEmpty())
    {
        initStickynote(highlightVo);
    }else {
        initNotePopup(highlightVo.getHighlightedText(), highlightVo);
    }
    notepopup.setNoteData(highlightVo.getNoteData());
    notepopup.show();

}

Listeners

// Set listener to Note view

NoteView notepopup = notepopup.addOnActionItemClickListener
(new NoteView.OnActionItemClickListener() {

// Calback when cancel button get clicked of Noteview
@Override
        public void onCancelClick() {
            notepopup.dismiss();
        }

// Calback when onSave button get clicked of Noteview
@Override
        public void onSaveClick(NoteView.NoteActions action, HighlightVO vo) {
            saveHighlight(vo);
            getHighlightFromDB(vo.getFolioID());
            renderView.drawNote(vo);
            notepopup.dismiss();
        }

// Calback when onShare button get clicked of Noteview
        @Override
        public void onShareClick(NoteView.NoteActions action, HighlightVO vo) {
            openSticyNoteShareScreen(vo);
        }

// Calback when onImportant area get clicked of Noteview
        @Override
        public void onImportantClick(boolean isImportant, HighlightVO vo) {
            if (isImportant) {
                vo.setColor("#e86161");
                notepopup.setHeaderColor(Color.parseColor("#e86161"));
                notepopup.setHeaderText("Tap to make this note normal");
                vo.setImportant(true);
            } else {
                vo.setColor("#fcf9a3");
                notepopup.setHeaderColor(Color.parseColor("#fcf9a3"));
                notepopup.setHeaderText("Tap to make to make this note important");
                vo.setImportant(false);
            }
        }

// Calback when onHeader area get clicked of Noteview
        @Override
        public void onHeaderSingletap(boolean isImportant) {
//Do something
        }

// Calback when onDelete button get clicked of Noteview
        @Override
        public void onDeleteClick(HighlightVO vo) {
            notepopup.dismiss();
            deleteHighlight(vo);
            renderView.deleteHighlight(vo);
            vo = null;
        }

    });


/**
 * call back on click of existing note icon on renderer
 *
 * @param highlightVo : existing highlight object
 */
@Override
public void onNoteClick(HighlightVO highlightVo) {

    if(highlightVo.getHighlightedText().isEmpty())
    {
        initStickynote(highlightVo);
    }else {
        initNotePopup(highlightVo.getHighlightedText(), highlightVo);
    }
    notepopup.setNoteData(highlightVo.getNoteData());
    notepopup.show();

}

}

Customization

This component supports Kitaboo Sdk default customization

/**
* Here you can set the height and width of the Note as per your requirement
*/
private void setNoteDilogParams() {
   if (notepopup != null) {


           DisplayMetrics displayMetrics = new DisplayMetrics();
           getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
           int height = displayMetrics.heightPixels;
           int width = displayMetrics.widthPixels;

       // Set width/Height

           notepopup.setLayoutParams(width height );

           }

}

// Set colors in NoteView

ie: in terms of int color

Backgound Color
notepopup.setBackColor(Color.parseColor(themeUserSettingVo.getmReaderNoteBackground()));
Set Header Color to distinguish between Important/Normal
notepopup.setHeaderColor(Color.parseColor(themeUserSettingVo.getmReaderNoteImportantColor()));


//Set Drawable
/**
* Drawable drawable
*NoteView.NoteActions

*/

public enum NoteActions {
   CANCEL, POST, SHARE, IMPORTANT, DELETE, COMMENT_POST
}
eg: oteView.NoteActions.IMPORTANT

notepopup.setButtonDrawable(Drawable, NoteActions
);

BookMark

Introduction

Kitaboo Sdk exposes a component which help the user to create a list of favorite pages. Bookmark available in Toc dialog.

A bookmark is a saved shortcut that directs you to a specific page on book. It stores the title,text, and favicon of the corresponding page. Saving bookmarks allows you to easily access your favorite locations on the Book.

Implementation

  • Create/Customize BookMark.
BookMarkView bookmarkview = new BookMarkView(this);//this --> context 

//Set font file to bookmarkview
bookmarkview.setUpIconFonts("ttffilepath"); eg:com.hurix.commons.utils.Utils.getFontFilePath()

bookmarkview.setlistner(new BoomarkActionListner() {

   @Override
   public void onBookmarkTap(View v) {

   }
});

//Display bookmark on your Reader
renderView.setBookmarkView(bookmarkview, folioid);//bookmarkview ,folioid of page

/**
* Show bookmark text view
*
* @param v
*/

// Handling actions of bookmark component by BookmarkActionHandler  class

public void showDefaultBookmarkText(final BookMarkView v) {
   if (v != null && v.getData() != null) {
       BookmarkActionHandler mBookmarkActionHandler
= new BookmarkActionHandler(this, v);
       mBookmarkActionHandler.setTheme(themeUserSettingVo);
       mBookmarkActionHandler.setBookmarkData(v.getData());
       mBookmarkActionHandler.setAlertLayout(R.layout.bookmark_alert);
       mBookmarkActionHandler.getArrowUp().setVisibility(View.GONE);
       mBookmarkActionHandler.getArrowDown().setVisibility(View.GONE);
       mBookmarkActionHandler.addOnHandlerDismissListener(new BookmarkActionHandler.OnHandlerDismissListener() {
           @Override
           public void onDismiss(BookMarkVO vo) {
               //check the mode and set text and color according to it

           }
       });
   }

   mBookmarkActionHandler.locateView(v);

   mBookmarkActionHandler.showBookmark(v, calculateLocation(v));
}

Listeners

Bookmarkview On-click listner

  • Registering listener to the BookmarkView
bookmarkview.setlistner(new BoomarkActionListner() {

   @Override
   public void onBookmarkTap(View v) {

   }
});
  • Callbacks from bookmark

Here you will receive a callback of created or modified/deleted bookmark object and user can take an action accordingly.

/**
* Callback from page on bookmark created / updated
*
* @param bookmarkvo : Contains require details of Bookmark
*/

@Override
public void onBookmarkSave(BookMarkVO bookmarkvo) {

    // Save,delete and update bookmark in Database

    if (bookmarkvo.getMode() == Constants.UGC_ITEM_MODE_NEW) {
        long dbid = DatabaseManager.getInstance(this).insertBookMark(bookmarkvo, userID, bookId);
        bookmarkvo.setLocalID(dbid);
    } else if (bookmarkvo.getMode() == Constants.UGC_ITEM_MODE_MODIFIED) {
        DatabaseManager.getInstance(this).updateBookMark(bookmarkvo, userID, bookId);
    } else {
        DatabaseManager.getInstance(this).deleteBookMark(bookmarkvo, userID, bookId);
        bookmarkvo.setBookmarkPageID(0);
    }
}

Customization

BookMarkview Customization

//Set font file to bookmarkview
bookmarkview.setUpIconFonts("ttffilepath"); eg:com.hurix.commons.utils.Utils.getFontFilePath()

BookmarkActionHandler allows you to customize the layout which appears when it get clicked

mBookmarkActionHandler = new BookmarkActionHandler(this, view);// this=context ,bookmarkview

mBookmarkActionHandler.setTheme(themeUserSettingVo);// set theme
mBookmarkActionHandler.setBookmarkData(view.getData());// set bookmark data
mBookmarkActionHandler.setAlertLayout(R.layout.bookmark_alert); // set edittext layout
mBookmarkActionHandler.getArrowUp().setVisibility(View.VISIBLE); // set Visibility
mBookmarkActionHandler.getArrowDown().setVisibility(View.VISIBLE); // set arrow visibility

Thumbnail

Introduction

Kitaboo Sdk exposes a component which helps the user to see the small image representation of pages in current opened Book.Here user can navigate to the specific page by clicking on them.Thumbnail component available on Action bar Thumbnail item.

Implementation

Click on Thumbnail menu item and open thumbnail panel.

public void onMenuItemClick(View menu) {

if (menu.getId() == R.id.action_thumbnail) {
 showThumbnail(); //show thumbnail component

}
}

  /** 
Here 
thumbnailColl             -> collection of thumbnail info's.
thumbnailimagepath       -> Image path of thumbnails.
currentviewpagerindex   -> CurrentPage Index.//For one page
currentviewpagerindexleft & currentviewpagerindexright ->Left/Right page Index  
*/

private void showThumbnail() {

tabThumbnailFragment = TabThumbnailFragment.newInstance("thumbnail", thumbnailColl, thumbnailimagepath, currentviewpagerindex, currentviewpagerindexleft, currentviewpagerindexright);
tabThumbnailFragment.setThumbListener(this);

    fragmentManager = getSupportFragmentManager();
    android.support.v4.app.FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    mPageThumbnailcontainer.setVisibility(View.VISIBLE);
    fragmentTransaction.add(R.id.thumbnailview, tabThumbnailFragment, "thumbnail");
    fragmentTransaction.addToBackStack("thumbnail");
    fragmentTransaction.commit();

}

Listeners

Callback when thumbnail view created

/**
* Call back once thumbnail view created
*
* @param view : thumbnail view
*/
@Override
public void onThumbnailViewCreated(View view) {
   //Can Customize the thumbnail layout
}

Callback of Thumbnail for page navigation

/**
 * Responsible to navigate to specific pages from thumbnail panel
 *
 * @param pageid : page id of clicked page
 */
@Override
public void ThumbnailpageNavigation(long pageid) {

 renderView.navigatePage((int) pageid, "", "", false, false);

}

Customization

Customization of THUMBNAIL component[ supported by KitabooSDK]

TabThumbnailFragment tabThumbnailFragment = TabThumbnailFragment.newInstance("thumbnail", thumbnailColl, thumbnailpath, currentviewpagerindex, currentviewpagerindexleft, currentviewpagerindexRight); Instantiate TabThumbnailFragment/MobileThumbFragment Mandatory
tabThumbnailFragment.setThumbListener(this); MobileThumbFragment .setThumbListener(this); Registering the click event listener Optional
tabThumbnailFragment.setThemeColor(themeUserSettingVo); where,

themeUserSettingVo: is a theme setting pojo class as per the defined kitaboo Theme.json structure.

Allow you to set the theme color as defined by KitabooTheme. Optional
tabThumbnailFragment.showHistoryButtons(false); History features is merged with thumbnail component so the handling is done here Optional .
FragmentManager fragmentManager = getSupportFragmentManager(); \ android.support.v4.app.FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); fragmentTransaction.add(R.id.thumbnailview, tabThumbnailFragment, "thumbnail"); \ fragmentTransaction.addToBackStack("thumbnail"); \ fragmentTransaction.commit(); Finally show the thumbnail Fragment using Android fragment manager mandatory.

Page-History

Introduction

Kitaboo Sdk exposes a component which helps user to open previously traversed pages in book,as the same way they navigated earlier while reading(Applicable for Single book at a time).

Page-History helps in better reading experience,by providing previous/next button as per page traversed .This component is available on Action bar Page-History item.

SDKManager.getInstance().setHistoryNavigationRecordRequired(false);

setHistoryNavigationRecordRequired() True/false - > History Required/Not Required

  • Call back once page history button created
/**
 * Call back once pagehistory  button created
 *
 * @param mPageHistNext     Pagehistory next button
 * @param mPageHistPrevious Pagehistory Previous  button
 */
@Override
public void onPageHistoryButtonsCreated(Button mPageHistNext, Button mPageHistPrevious) {
    mPageHistNext.setEnabled(true);
    mPageHistPrevious.setEnabled(true);
    mPageHistNext.setAlpha(1f);
    mPageHistPrevious.setAlpha(1f);
    if (SDKManager.getInstance().getHistoryStack().size() < 1) {
        mPageHistNext.setAlpha(0.5f);
        mPageHistPrevious.setAlpha(0.5f);
        mPageHistNext.setEnabled(false);
        mPageHistPrevious.setEnabled(false);
    } else {

        if (SDKManager.getInstance().getHistoryStack().size() > 0 &&
                (SDKManager.getInstance().getHistoryStackPosition() - 1) == 0) {
            /*
            Make Next button Enabled
             */
            mPageHistPrevious.setAlpha(0.5f);
            mPageHistPrevious.setEnabled(false);
        }
        if (SDKManager.getInstance().getHistoryStackPosition() ==
                SDKManager.getInstance().getHistoryStack().size()) {
             /*
            Make Previous button Enabled
             */
            mPageHistNext.setAlpha(0.5f);
            mPageHistNext.setEnabled(false);
        }
    }}
  • Call back on click of Next button [PageHistory]
/**
 * Call back on click of Next button  [PageHistory]
 */
@Override
public void NavigateNextPage() {

    navigatenextpage();
}

renderView.navigatePage(NextpageID, "", "", true, true); //For paginavigation
  • Call back on click of Previous button [PageHistory]
/**
* Call back on click of Previous button  [PageHistory]
*/
@Override
public void NavigatePreviousPage() {
   navigatepreviouspage();
}

renderView.navigatePage(PrevpageID, "", "", true, true); //For page navigation

Customization

Once the buttons get created user will get a callback onPageHistoryButtonsCreated() method.This returns the Android Button, so the same button can be customize as default android button.

Pen feature

Introduction

KitabooSdk supports a feature called "pen marker" which can be utilized to draw/pen-mark,it supports multiple types of lines/shape with different color on book pages having various thickness.

Implementation

@Override
public void onMenuItemClick(View menu) {

if (menu.getId() == R.id.action_pen) {
//Notify pen is enablr on renderer
renderView.isPenMarkerActive(true);

//Replace actionBar with Penbar panel
replaceActionBarwithPenBar(true);

}

private void replaceActionBarwithPenBar(boolean removeTopActionBarItem) {

//Remove action bar item before adding penbar items
   if (removeTopActionBarItem) {
       topActionbar.removeAllActionBarItem();
   }

// Add pen bar items
   addPentBarItem();
}


private void addPentBarItem() {

// Add the multiple numbers of buttons required in pen bar.

KitabooActionItemView mPentoolColor;

// Add color button
 mPentoolColor = new KitabooActionItemView(this);
   setTopActionbar(mPentoolColor, R.id.action_pentool_color, "F", PlayerUIConstants.PT_DEFAULT_IC_TEXT, actionBarItemColor, Gravity.LEFT);

// Add pen thickness size button
   mPentoolSize = new KitabooActionItemView(this);
   setTopActionbar(mPentoolSize, R.id.action_pentool_size, "G", PlayerUIConstants.PT_THICKNESS_BIG_IC_TEXT, actionBarItemColor, Gravity.LEFT);

// Add undo button
   mPentoolUndo = new KitabooActionItemView(this);
   setTopActionbar(mPentoolUndo, R.id.action_pentool_undo, "E", PlayerUIConstants.UNDO_PENTOOL_TEXT, actionBarItemColor, Gravity.LEFT);

// Add Eraser button
   mPentoolEraser = new KitabooActionItemView(this);
   setTopActionbar(mPentoolEraser, R.id.action_pentool_eraser, "D", PlayerUIConstants.PT_ERASER_IC_TEXT, actionBarItemColor, Gravity.LEFT);

// Add ClearAll button
   mClearPentoolMark = new KitabooActionItemView(this);
   setTopActionbar(mClearPentoolMark, R.id.action_pentool_clear_all, "A", PlayerUIConstants.TB_CLEAR_FIB_TEXT, actionBarItemColor, Gravity.LEFT);

// Add Done button
   mPentoolDone = new KitabooActionItemView(this);
   setTopActionbar(mPentoolDone, R.id.action_pentool_done, "F", PlayerUIConstants.UGC_NOTE_SHARE_ACCEPT_IC_TEXT, actionBarItemColor, Gravity.LEFT);

}

// finally add to Kitaboo top action bar

topActionbar.build();

}

Once buttons gets available in Pen-bar

/**
* Call back here to perform the actions when pen items gets clicked
*/
@Override
public void onMenuItemClick(View menu) 

if (menu.getId() == R.id.action_pentool_color) {

// Create pen color list to show no's of color in penbar

int color[] = new int[5];
   String penColors[] = new String[]{"#000000", "#fcb000", "#01a7fc", "#00d0ef", "#cc82ff"};

   for (int i = 0; i < penColors.length; i++) {
       color[i] = Color.parseColor(penColors[i]);
   }

//Here PentoolHelper is a helper class to handle the penbar operations

PentoolHelper penHelper = new PentoolHelper(context, themeUserSettingVo);//Pass context and kitaboo theme class object

 FragmentManager fm = getSupportFragmentManager();
      penHelper.openColorPopup(menu, fm, PlayerActivity.this, color);

} 

//When size button gets clicked open the size pop

else if (menu.getId() == R.id.action_pentool_size) {

       FragmentManager fm = getSupportFragmentManager();
       penHelper.openSizePopupSeparatorLineVisibility(View.VISIBLE);
       penHelper.openSizePopupImagePenSizeVisibility(View.VISIBLE);
       penHelper.openSizePopupSeekbarDrawable(getResources().getDrawable(R.drawable.progress_seek));
       penHelper.openSizePopup(menu, fm, PlayerActivity.this);

} 

//When eraser button gets clicked open the size pop

else if (menu.getId() == R.id.action_pentool_eraser) {

       if (mPentoolEraserClicked) {
           mPentoolEraserClicked = false;
           toggleActionItem(mPentoolColor, true);

           toggleActionItem(mPentoolSize, true);
           mPentoolEraser.setBackgroundColor((Color.parseColor(themeUserSettingVo.get_reader_icon_color())));
           mPentoolEraser.setTextColor(getResources().getColor(R.color.default_action_bar_color));
           penHelper.setEraserMode(true, userID, currentFoliId, bookId);
       } else {
           mPentoolEraserClicked = true;
           toggleActionItem(mPentoolColor, false);
           toggleActionItem(mPentoolSize, false);

           mPentoolEraser.setBackgroundColor(getResources().getColor(R.color.transparent));
           mPentoolEraser.setTextColor((Color.parseColor(themeUserSettingVo.getmKitabooMainColor())));
           penHelper.setEraserMode(false, userID, currentFoliId, bookId);
       }
} 

//When done button gets clicked open the size pop

else if (menu.getId() == R.id.action_pentool_done) {


       mPentoolEraserClicked = true;
       renderView.isPenMarkerActive(false);
       replaceCustomBarwithActionBar();

       penHelper.setEraserMode(false, userID, currentFoliId, bookId);
       if (penHelper.isAnyPenToolSelected()) {
           penHelper.clearSelectedPenTool();
       }

       penHelper.clearDeletedPenMarkerVO();
       DatabaseManager.getInstance(this).updatePenmarks(userID, currentFoliId, bookId);

} 

//When undo button gets clicked open the size pop

else if (menu.getId() == R.id.action_pentool_undo) {

       penHelper.undoDrawedPenMark(userID, bookId, colorWithHash);
} 

//When ClearAll button gets clicked open the size pop

else if (menu.getId() == R.id.action_pentool_clear_all) {

        clearAllPenFromPage(currentFoliId);

       penHelper.setEraserMode(true, userID, currentFoliId, bookId);

}

private void clearAllPenFromPage(String folioId) {
   String fId = folioId;
   ArrayList<PentoolVO> penlistlist = DatabaseManager.getInstance(this).clearAllPenMarkByPage(userID, fId, bookId);
   if (penlistlist != null) {
       for (int i = 0; i < penlistlist.size(); i++) {
           onPenSelectedForDeletion(penlistlist.get(i));

   if (penlistlist != null) {
//Set all current pen markers
       SDKManager.getInstance().setAllPenMarkerVO(folioId, penlistlist);

//To load the pen marks on page
       renderView.loadAsset(AssetType.HighlightNote, fId);
   }
}

Listeners

When an user draw any shape using pen marker on the book page and finished their drawing, immediately an event will be triggered which will be acknowledged by an overridden method "onPenDrawCompleted(PentoolVO PentoolVO)" of an interface "OnPlayerEventsListener"

  • callback once pen draw is completed on the page
/* *  callback once pen draw is completed.
 * @param PentoolVO
 */

@Override
public void onPenDrawCompleted(PentoolVO PentoolVO) {

   if (PentoolVO != null && PentoolVO.getLocalID() == -1) {

//Handling for new pen marks on the basis of penMarkerID,when it's synced to server it will return some unique id.

       long penMarkerID = DatabaseManager.getInstance(this).addPenMarkers(PentoolVO,
               bookId,
               userID, colorWithHash);//colorWithHash : color code with #

PentoolVO.setLocalID((int) penMarkerID);


   } else {

       PentoolVO.setDateTime(Utils.getDateTime());
       PentoolVO.setSyncStatus(false);
       if (PentoolVO.getLocalID() > 0) {
           PentoolVO.setMode(EpubConstants.UGC_ITEM_MODE_MODIFIED);
       }
//Update pen markers 
       DatabaseManager.getInstance(this).updatePenMarkers(PentoolVO, userID, bookId, colorWithHash);
   }


}
When an user select any shape already drawn using  pen marker on the book page , immediately an event will be triggered which will be acknowledged by an overriden method "onPenSelectedForDeletion(PentoolVO vo)" of an interface "OnPlayerEventsListener"
  • Callback once pen has selected for deletion
/**
 * Callback once pen has selected for deletion.
 * @param vo Deleted pentool object
 */


@Override
public void onPenSelectedForDeletion(PentoolVO vo) {

PentoolVO tmpItem = vo;
tmpItem.setMode(Constants.UGC_ITEM_MODE_DELETED);
tmpItem.setSyncStatus(false);
tmpItem.setIsSubmitted(false);
tmpItem.setDateTime(Utils.getDateTime());
if (tmpItem.getUGCID() > 0) {//Update penmarks because it's synced
   DatabaseManager.getInstance(PlayerActivity.this).updatePenMarkers(tmpItem, userID, bookId, colorWithHash);
} else {
   if (DatabaseManager.getInstance(PlayerActivity.this).deletePenMarkers(tmpItem, userID)) {
       penHelper.setDeletedPenMarkerVO(tmpItem);

//Set all current pen markers
 SDKManager.getInstance().setAllPenMarkerVO(vo.getFolioID(), DatabaseManager.getInstance(PlayerActivity.this).getAllPenMarkersByPage(userID, vo.getFolioID(), bookId));
   }
}
penHelper.setEraserMode(penHelper.isInPenDeleteMode(), userID, currentFoliId, bookId);

}
  • Callback once undo action is performed
@Override
public void onPenUndoCompleted(PentoolVO vo) {

//Refresh pen assets to page
       renderView.loadAsset(AssetType.HighlightNote, vo.getFolioID());

}

Customization

For pen tool we have to manage pop-ups for pen colors , thickness etc using defined user controls..

Pen colors customization

User can customize multiple color as per the pen marker color required

String penColors[] = new String[]{"#000000","#fcb000","#01a7fc","#00d0ef","#cc82ff"};
for(int i = 0;i<penColors.length;i++){
    color[i]=Color.parseColor(penColors[i]);
}
FragmentManager fm = getSupportFragmentManager();
// Opening the Pen marker color dialog.
penHelper.openColorPopup(menu, fm, PlayerActivity.this, color);

Opening of pen size panel and select Pen size

Below piece of code will open a pen thickness dialog with seekbar and any changes done on pen thickness size will triggered through overriden method

OnSizeChanged(int size) of an interface OnSizeChangedListener

penHelper.openSizePopupSeparatorLineVisibility(View.VISIBLE);//Set visibility of line separator between size circle and size seekbar in Size-view.Please refer the design for clarity.

penHelper.openSizePopupImagePenSizeVisibility(View.VISIBLE);
//Set visibility of circle size in  Size-view.Please refer the design for clarity.


penHelper.openSizePopupSeekbarDrawable(getResources().getDrawable(R.drawable.progress_seek));// Set drawable to pen marker size seekbar

Callbacks of penbar item customization

/**
* Callback when color button when gets selected on pen bar 
* @param int color: Selected color
*/

@Override
public void onColorSelected(int color) {
   String hexColor = String.format("%06X", (0xFFFFFF & color));
   if (!String.valueOf(hexColor).contains("#")) {
//Notify renderview which pencolor is selected
       renderView.setPenColor("#" + String.valueOf(hexColor));
   } else {
//Notify renderview which pencolor is selected
       renderView.setPenColor(String.valueOf(hexColor));
   }
   changePenColor(mPentoolColor, color);//mPentoolColor :PentoolColor item of KitabooActionItemView

   changePenColor(mPentoolSize, color);//mPentoolSize :PentoolSize item KitabooActionItemView

}

/**
* Customise the top actionbar item with different icon , color
*
* @param item      : Actionbar item view
* @param itemColor : color of Actionbar item view
*/

private void changePenColor(KitabooActionItemView item, int itemColor) {
   item.setTextColor(itemColor);
}

/**
* Callback when size button when gets selected on pen bar 
* @param int size: Selected Size
*/
@Override
public void OnSizeChanged(int size) {
   //Notify renderview which pensize is selected
   renderView.setPenSize(size);
}
/**
* Callback on dismiss of pen bar item
*/
@Override
public void onDismiss() {
//Perform some actions
}

/**
* Callback once Size-view gets dismissed of pen bar 
*/
@Override
public void onSizeDismiss() {
//Perform some actions
}

MyData

Introduction

MyData is a feature supported by Kitaboo Sdk which helps to display the total number of Notes (Contextual and Sticky Note) and Highlights available for book in a listview under "MyData" panel/dialog.Here you will get information like: chapter name,page id,saved page data,data & time in sequential order(chronological order).It consists shared[Notes/highlight] data between multiple users also.

Implementation

You can invoke below mydata method on onMenuItemClick(View menu) overide method.

if (menu.getId() == R.id.action_my_data) 

    showMydataView(menu);

/**
* Responsible to open Mydata Dialog
*
* @param menu
*/
private void showMydataView(View menu) {

// Getting highlight data to display in my data list

  ArrayList<HighlightVO> datalist = DatabaseManager.getInstance(this).getHighlight(userID, bookId);

Here,
isMobile= device type[Mobile/Tab]
tagname= "mydata";

MyDataFragment mydata= MyDataFragment.newInstance("mydata", menu, isMobile);

//Set the color
mydata.setThemeColor(themeUserSettingVo);


// Set height/Width & Gravity

   DisplayMetrics displayMetrics = new DisplayMetrics();
   getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
   int height = displayMetrics.heightPixels;
   int width = displayMetrics.widthPixels;
   int[] params;
   params[0] = width;
   params[1] =height;

   mydata.setParams(params[0], params[1], Gravity.TOP | Gravity.LEFT);

mydata.setSharingSettingVisibility(VISIBLE);// Enable/Disable Sharing Setting Feature
mydata.setListener(new MyDataFragment.MydataitemClickListner() {
   @Override
   public void onMydataItemClick(HighlightVO vo) {
            //Do something

   }

   @Override
   public void onSettingbtnClick() {
      //Do something
   }

   @Override
   public void onSharebtnClick(HighlightVO vo) {
            //Do something
   }

   @Override
   public void onAcceptRejectBtnClicked(boolean accept, HighlightVO vo) {
      //Do something
});

// Set datalist to mydata dialog
mydata.setData(datalist);

// Finally show the mydata view
if (!((Activity) PlayerActivity.this).isFinishing()) {
       mydata.show(getSupportFragmentManager(), "mydata");
   }
}

Listeners

 mydata.setListener(new MyDataFragment.MydataitemClickListner() {

/**
* Callback when list item get clicked
*
* @param HighlightVO vo : Highlight Object 
*/
       @Override
       public void onMydataItemClick(HighlightVO vo) {

// Do some Actions
           mDialog.dismiss();
           renderView.mydataNavigatePage(vo);

       }

/**
* Callback when setting button gets clicked on mydata view for opening list of users whom you enable/disable sharing feature.
*/
       @Override
       public void onSettingbtnClick() {
// Do some Actions
           openSharingSettingScreen(mydata);
       }

/**
* Callback when share button gets clicked on mydata list view for sharing the items
*/
       @Override
       public void onSharebtnClick(HighlightVO vo) {
// Do some Actions
           highlightVo = vo;

//opening item sharring setting screen
           openItemSharingSettingScreen(mydata);
       }

/**
* Callback from button when any data is accepted/Rejected from mydata Accept/Reject List.
*/

       @Override
       public void onAcceptRejectBtnClicked(boolean accept, HighlightVO vo) {

           if (Utils.isOnline(PlayerActivity.this)) {
               int mStatus = Constants.SHARE_DATA_ACCEPTED;
               if (!accept) {
                   mStatus = Constants.SHARE_DATA_REJECTED;
               }

// Send service request

               mServicehandler.SendAcceptCollaborationDataRequest(vo, mStatus, KitabooSDKModel.getInstance().getUserToken(), PlayerActivity.this);


           } else {
               DialogUtils.displayToast(PlayerActivity.this,
                       getResources().getString(R.string.network_not_available_msg),
                       Toast.LENGTH_LONG, Gravity.CENTER);
           }
       }
   });

}

Customization

//Set theme color as per kitaboo theme support.
MyDataFragment mydata.setThemeColor(themeUserSettingVo);

//Set width/Height & Gravity to My data view.
mydata.setParams(width, height, Gravity.TOP | Gravity.LEFT);

//Enable/Disable sharing setting feature
mydata.setSharingSettingVisibility(VISIBLE);

Markup

Introduction

KitabooSdk facilitate an user to add different icons as a "Markup" which makes the user experience more interactive on pages .

KitabooSdk supports following type of Markups:

GLOSSARY,
INTERNAL,
WEB_ADDRESSES,
RESOURCE,
IMAGE,
VIDEO,
ACTIVITY,
ANIMATIONS,
DOCUMENTS,
HTML_WRAP,
KITABOO_WIDGET,
PDF,
MULTIPLE_LINK,
AUDIO,
AUDIO_SP,
COMMENTS,
INPUT,
BUTTON,
RADIOBUTTON,
CHECKBOX,
LINK,
QA ACTIVITY,
AUDIO_SYNC,
ACTIVITY_INJECTION,
INTERACTIVE,
SLIDESHOW,
YOUTUBE STREAMING,
KALTURA STREAMING,
EXTERNAL_IMAGE,
EXTERNAL_AUDIO,
EXTERNAL_VIDEO,
EXTERNAL_WEB_LINK,
EXTERNAL_DOCUMENTS,
EXTERNAL_HTML_WRAP,
STANDALONE_INSTRUCTION,
VIMEO_VIDEO

Implementation

Add Markup on the Page :

Once page have been loaded, we will be adding the Markup as below:

@Override
public void onPageLoadingCompleted(final IPage mpageVo) {

        pageVo=mpageVo;
        setMarksUpsList(mpageVo);// Create markup's as per type,please refer below method
        renderView.loadAsset(AssetType.HighlightNote, pageVo.getFolioID());

}


/**
 *  function responsible to add Markup based on page.
 * @param mpageVo data of specific page.
 */
private void setMarksUpsList(IPage mpageVo) {

    if (mpageVo.getMarkupsList() != null && mpageVo.getMarkupsList().size()>0) {

        initLinkView( mpageVo.getMarkupsList());
    }
}

private void initLinkView( ArrayList<LinkVO> _objVO ) {
    // Typeface  for the markup

Typeface typeface = Typefaces.get(this,getResources().getString(com.hurix.epubreader.R.string.kitaboo_font_file_name));

    if (_objVO != null) {
//Markups visibility
   int markupVisibility = View.VISIBLE;

   for (int i = 0; i < _objVO.size(); i++) {//Itreating by number of markup's exist on page

//Defining the Markup View Classes as kitaboo sdk Supports

      eg:Some of the examples shown below

       linkView = new LinkView(this, _objVO.get(0).getType());//Default View
       inlineVideoPlayer = new InlineVideoPlayer(this, false);// Inline Video Type

Here we are providing different types of view as per markup's behaviour.Please refer the details of Markup document for more Info's.  

       LinkVO linkVO = (LinkVO) _objVO.get(i);
       LinkVO.LinkType type = linkVO.getType();
       String tooltip = linkVO.getTooltip();

//Condition as per Kitaboo sdk when markup will be Invisible/Visbile

       if (linkVO.getIconUrl() != null && linkVO.getIconUrl().contains("flexibleicon.png") ||
               linkVO.isFlexible() || linkVO.getAlpha().equalsIgnoreCase("0")
               || linkVO.getTooltip().contains("Hiden") || linkVO.getTooltip().contains("hiden")) {
           markupVisibility = View.INVISIBLE;
       } else {
           markupVisibility = View.VISIBLE;
       }

//Set markup-size and markup font size
    linkVO.setMarkupsize(getResources().getInteger(R.integer.link_ic_size));
    linkVO.setFontSize(getResources().getInteger(R.integer.link_ic_font_size));

// Create View as per Markup Type

      if (type.toString().equalsIgnoreCase(LinkVO.LinkType.AUDIO.toString())) {
           if (!getResources().getBoolean(com.hurix.epubreader.R.bool.show_markup_read_allowed)
                   && SDKManager.getInstance().getGetLocalBookData().getAudioBookType().equals(Constants.AUDIO_BOOK_TYPE)) {
               linkVO.setLinkView(linkView, null, null, null, null);
               customizeLinkMarkups(linkVO, null, null, null, 0, 0, markupVisibility);

           } else {
               linkVO.setLinkView(linkView, null, null, null, null);
               customizeLinkMarkups(linkVO, typeface, getResources().getDrawable(R.drawable.markup_icon_bg), PlayerUIConstants.OS_LINK_IC_AUDIO_TEXT, PlayerUIConstants.OS_LINK_IC_VIDEO_UNSELECTED_FC, 0, markupVisibility);
           }
       } else if (type.toString().equalsIgnoreCase(LinkVO.LinkType.VIDEO.toString())) {
           if (linkVO.isInline()) {
               linkVO.setLinkView(null, null, inlineVideoPlayer, null, null);
               customizeLinkMarkups(linkVO, typeface, getResources().getDrawable(R.drawable.markup_icon_bg),
                       PlayerUIConstants.OS_LINK_IC_VIDEO_TEXT, PlayerUIConstants.OS_LINK_IC_VIDEO_UNSELECTED_FC,
                       0, markupVisibility);
           }

else if (. . . .){

// Add code for other Markup 
}

else if (. . . .){

// Add code for other Markup
}

}

/**
*
* @param _linkVO :Markup object as _linkVO pozo class
* @param typeface :Markup object typeface
* @param drawable :Markup object drawable
* @param markupText :Markup object text as per ttf
* @param markupTextColor :Markup object text color
* @param markupBackgroundColor :Markup object background Color
* @param markupVisibility :Markup object Visibility
*/

private void customizeLinkMarkups(LinkVO _linkVO, Typeface typeface, 

Drawable drawable, String markupText, int markupTextColor, int markupBackgroundColor, int markupVisibility) {
   _linkVO.setTypeface(typeface);
   _linkVO.setDrawable(drawable);
   _linkVO.setMarkupText(markupText);
   _linkVO.setMarkupTextColor(markupTextColor);
   _linkVO.setMarkupBackgroundColor(markupBackgroundColor);
   _linkVO.setMarkupVisibility(markupVisibility);
}

Listeners

Markup callback and their click event handling

If user will perform a click event on any defined markup,an click event will be triggered through an overridden method OnMarkupClick(LinkVO linkVO, View view) of a class"PlayerActivity" of KitabooSampleReader which implements an interface "OnMarkupIconClicked".

KitabooSdk exposes a interface "OnMarkupIconClicked" which help in catching a markup click event using an abstract method OnMarkupClick(LinkVO var1, View var2);

/**
 *  Call back on click of Markup resources.
 * @param linkVO Markup Object
 * @param view   view of Clicked Markup
 */
@Override
public void OnMarkupClick(LinkVO linkVO, View view) {
    linkVO.getType();
    handleClickByType(linkVO,view,0);

}

/**
 *  Responsible to play the Markup on click event.
 * @param objVO
 * @param linkView
 * @param audioType
 */
private void handleClickByType(LinkVO objVO, View linkView,int audioType) {
    LinkVO.LinkType type = objVO.getType();


    if (objVO.isExternal()) {
        String path = encryptExternalLinkUrl(objVO);

        openLocalHTMLFile(path, objVO.getX(), objVO.getY(), objVO.isOpenByDefault(), objVO);
        return;
    }
    if (type != LinkVO.LinkType.STANDALONE_INSTRUCTION) {

    }
else if (type == LinkVO.LinkType.IMAGE) {
    if (objVO.getUrl() != null && !objVO.getUrl().isEmpty()) {


            if (objVO.isGrouped()) {
                processGroupImage(objVO);
            } else {
                processImage(objVO, linkView);
            }

    } else {
//Alert when no resources found as Dialog

        DialogUtils.showOKAlert(linkView, 0, this, getResources().getString(com.hurix.epubreader.R.string.alert_error),
                getResources().getString(com.hurix.epubreader.R.string.alert_tor_no_resources_found), this);

    }
} else if (type == LinkVO.LinkType.TOC) {

    processJumpToPage(objVO);

} else if (type == LinkVO.LinkType.DOCUMENTS) {
    if (objVO.isExternal()) {

            String path = encryptExternalLinkUrl(objVO);

    } else {

            String path = "file://"
                    + getBookFolderPathCompat(bookId
                    + "", isbn)
                    + File.separator + objVO.getUrl();
            openDocument(path);

    }
} else if (type == LinkVO.LinkType.ACTIVITY_INJECTION) {
    if (!objVO.IsSubmitted()) {
        //processFIB(objVO, linkView, true);
    }
} else if (type == LinkVO.LinkType.SLIDESHOW) {

        processSlideShow(objVO);

}
}

Customization

  • Visibility of Markup
int markupVisibility = View.VISIBLE;
  • Customize Markups using [Kitaboo Sdk] where,

@param _linkVO :Markup object as _linkVO pozo class

@param typeface :Markup object typeface

@param drawable :Markup object drawable

@param markupText :Markup object text as per ttf

@param markupTextColor :Markup object text color

@param markupBackgroundColor :Markup object background Color

@param markupVisibility :Markup object Visibility

private void customizeLinkMarkups(LinkVO _linkVO, Typeface typeface, 

Drawable drawable, String markupText, int markupTextColor, int markupBackgroundColor, int markupVisibility) {
   _linkVO.setTypeface(typeface);
   _linkVO.setDrawable(drawable);
   _linkVO.setMarkupText(markupText);
   _linkVO.setMarkupTextColor(markupTextColor);
   _linkVO.setMarkupBackgroundColor(markupBackgroundColor);
   _linkVO.setMarkupVisibility(markupVisibility);
}
  • Markup Size[MarkupSize/Font Size]
linkVO.setMarkupsize(getResources().getInteger(int value));
linkVO.setFontSize(getResources().getInteger(int value));