CCP Theme Customization

Custom Content Color

The color of CCP content can be changed according to the different UI colors.

Using XML

• Add app:ccp_contentColor property to xml layout

      <com.hbb20.CountryCodePicker
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:ccp_contentColor="@color/custom_color"/>                        

  • 

  Programmatically

  • To set color programmatically, use setContentColor() method.
  • 

Custom TextSize

• Text size of CCP content can be changed in order to match rest of the view of form.
• Everytime when textSize is updated, arrowsize will be updated itself.
• 

Using XML

• Add app:ccp_textSize property to xml layout

    <com.hbb20.CountryCodePicker
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     app:ccp_textSize="26sp"/>                        

Programmatically

 To set textSize programmatically, use ```setTextSize()``` method.

Flag Border Color

• For some UI designs, more clear visibility of flags can be achieved by adding border color. This is helpful for flags which has background matching color.

  Using XML

  • Add app:ccp_flagBorderColor property to xml layout

        <com.hbb20.CountryCodePicker
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:ccp_flagBorderColor="@color/border_color"/>                        

  Programmatically

  • To set it programmatically, use setFlagBorderColor() method.

Custom arrow size

• Size if Down arrow of CCP view can be modified in order to match rest of the view of form.

  Using XML

  • Add app:ccp_contentColor property to xml layout

        <com.hbb20.CountryCodePicker
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:ccp_arrowSize="26sp"/>                        

  Programmatically

  • To set textSize programmatically, use setArrowSize() method.