Skip to content

CCP Theme Customization

Harsh B. Bhakta edited this page Mar 18, 2019 · 4 revisions

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.

Custom arrow color

  • If you want to set arrow color other than content color, set specific arrow color using this property.

Using XML

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

Programmatically

  • To set arrowColor programmatically, use setArrowColor() method.
Clone this wiki locally