Using Custom Fonts

Customize fonts for Hybrid App messages and the Hybrid Web Container.

1. Create a new XML file named attrs.xml in the ...\HybridWebContainer\res\values\ folder.
2. Open the attrs.xml and add this code:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       
       <declare-styleable name="com.sybase.hwc.CustomFontTextView" >
           <attr name="customFont" format="string"/>
       </declare-styleable>
   </resources>
   

3. You cannot set the font attribute using the standard TextView control, so you must extend the TextView object by creating a new file named CustomFontTextView.java.
4. Add this code to the CustomFontTextView.java file:

   package com.sybase.hwc;
   
   import android.content.Context;
   import android.widget.TextView;
   import android.text.TextUtils;
   import android.util.AttributeSet;
   import android.content.res.TypedArray;
   import android.graphics.Typeface;
   
   public class CustomFontTextView extends TextView {
      
      public CustomFontTextView( Context oContext )
      {
         super( oContext );
      }
      
      public CustomFontTextView( Context oContext, AttributeSet oAttrs )
      {
         super( oContext, oAttrs );
         setCustomFont( oContext, oAttrs, R.styleable.com_sybase_hwc_CustomFontTextView, R.styleable.com_sybase_hwc_CustomFontTextView_customFont );
      }
   
      private void setCustomFont( Context oContext, AttributeSet oAttrs, int[] aiAttributeSet, int iFontId)
      {
         TypedArray taStyledAttributes = oContext.obtainStyledAttributes( oAttrs, aiAttributeSet );
         String sCustomFont = taStyledAttributes.getString( iFontId );
         if( !TextUtils.isEmpty( sCustomFont ) )
         {
            Typeface oTypeFace = null;
            
            try
            {
               oTypeFace = getFont( oContext, sCustomFont );
               setTypeface( oTypeFace );
            }
            catch (Exception e)
            {
               System.out.println( "Count not set font!" );
               // can't set the font
            }
         }
         else
         {
            System.out.println( "Custom font string was empty!" );
         }
      }
      
      private Typeface getFont( Context oContext, String sCustomFont )
      {
         String sFullCustomFont = "fonts/" + sCustomFont;
         Typeface oTypeFace = Typeface.createFromAsset( oContext.getAssets(), sFullCustomFont );
         return oTypeFace;
      }
   }
   

5. Create a fonts folder in ...\HybridWebContainer\assets and add the TTF font file to this new folder.
   For example, Windows fonts are usually in C:\Windows\Fonts\ if you want to use one of those.
6. Open the workflowmessages.xml file for editing and add this attribute to the RelativeLayout tag:

   xmlns:custom="http://schemas.android.com/apk/res/com.sybase.hwc"

7. Find the TextView tag with the "ID msg_from" and change the tag from a TextView tag to a "com.sybase.hwc.CustomFontTextView" tag.
8. Add this attribute to the com.sybase.hwc.CustomFontTextView tag:

   custom:customFont="<NAME_OF_YOUR_FONT_FILE.TTF>"

9. Repeat the above steps for tags with the "id msg_title" and "msg_datetime."
   If you build the Hybrid Web Container without making any more changes, you see that "msg_title" and "msg_datetime" are shown with the custom font, but "msg_from" is not. This is because the font for "msg_from" is overridden in the Java code.
10. To prevent the font from being overridden:
    1. Select Search > File from the menu.
    2. For Containing text, enter msg_from and click Search.
       The search result shows two files: workflowmessages.xml and UiHybridAppMessagesScreen.java.
    3. Open the UiHybridAppMessagesScreen.java file for editing.
    4. Search the file for "msg_from."
       You will find this line: TextView tf = (TextView) v.findViewById(R.id.msg_from);
       The TextView object tf represents msg_from.
    5. You are changing the font, so search for “tf.setTypeface.”
       The search results return two occurrences because the text is either bolded or not depending on whether the message has been read. Set bold, italic, or normal style for the text in the same way you specify the font.
    6. To ensure your custom font is used, make these modifications to the two occurrences of the method calls to setTypeface:

       tf.setTypeface( tf.getTypeface(), Typeface.BOLD );
       
       tf.setTypeface( tf.getTypeface(), Typeface.NORMAL );