How to: Customize the Caller ID Overlay

Hiya's caller identify overlay is designed to quickly convey reputation and identity data as calls ring on your user's device.

Should this design not match with the intended look and feel of your app then you can override styles, some display text, or even the layout.

Override the layout

If you want to change the layout of the caller ID overlay, you can do so by providing your own layout file. The layout you provide will be included within the overlay as defined and styled by Hiya. The layout file must be in XML format and should follow these guidelines:

• The layout file is named hiya_overlay_contents.xml
• The layout contains views with these ids:
  • @id/main: The root element of the layout.
  • @id/overlayTextGroup: An instance of com.hiya.client.callerid.ui.overlay.overlayTextGroup, which will display text information about the call.
  • @id/dismissButton: A clickable element that will dismiss the overlay when tapped.
  • @id/dragToMoveIndicator: A view that tells the user they can drag the overlay to move it around the screen.

Note that the overlayImage element is not overridable and will always use Hiya's position and style.

Example layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@id/main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="8dp"
    tools:background="#FF5151"
    tools:layout_height="210dp">

    <com.hiya.client.callerid.ui.overlay.OverlayTextGroup
        android:id="@id/overlayTextGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        tools:layout_height="50dp" />

    <ImageButton
        android:id="@id/dismissButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:background="@android:color/transparent"
        android:contentDescription="@string/hiya_close_button_cd"
        android:padding="15dp"
        android:src="@drawable/ic_dismiss_16" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/overlayTextGroup"
        android:background="@drawable/overlay_bottom_bar_background">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom"
            android:orientation="horizontal"
            android:paddingLeft="16dp"
            android:paddingTop="0dp"
            android:paddingRight="16dp"
            android:paddingBottom="0dp">

            <LinearLayout
                android:id="@id/dragToMoveIndicator"
                android:layout_width="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_height="30dp"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_gravity="center"
                    android:src="@drawable/ic_drag_move" />

                <TextView
                    style="@style/Text.Tiny"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginStart="6dp"
                    android:paddingBottom="3dp"
                    android:gravity="center_vertical"
                    android:text="Drag to move"
                    android:textColor="@android:color/white"
                    android:textSize="14sp" />
            </LinearLayout>

            <TextView
                style="@style/Text.Smallish"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:gravity="center_vertical"
                android:paddingStart="12dp"
                android:paddingEnd="10dp"
                android:paddingBottom="3dp"
                android:text="ID by Hiya"
                android:textColor="@android:color/white"
                android:textSize="14sp" />
        </LinearLayout>
    </FrameLayout>
</RelativeLayout>

Override text

Hiya's SDK defines a number of user facing strings which cna be overriden as needed. By defining your own user facing strings in your strings.xml with the following keys you can align the text displayed by Hiya with the verbiage in your app:

XML identifier	Usage	SDK value
R.string.drag_to_move	Displayed on the caller id overlay to inform users that they can drag the overlay	Drag to move
R.string.hiya_flagged_by_hiya	Displayed on spam or fraud calls when no other description is available	Flagged by Hiya
R.string.hiya_saved_contact	Displayed when the incoming number is in the user's contacts	Saved Contact
R.string.hiya_private_number	Displayed when the incoming number is private	Private number
R.string.hiya_private_caller_explanation	Displayed when the incoming number is private	This caller has hidden their number
R.string.hiya_voicemail	Displayed on calls that are determined to be voicemail numbers	Voicemail
R.string.hiya_premium_warning_title	Displayed on calls that are to or from premium numbers	Premium Rate
R.string.hiya_premium_warning_text	Displayed on call that are to of from premium numbers	You could be charged for this call
R.string.hiya_identifying	Displayed while caller identity is being loaded	Identifying
R.string.hiya_overlay_verified_call	Displayed when a caller's identity is verified via STIR/SHAKEN	Verified call
R.string.hiya_type_mobile	Line type display for mobile numbers	Mobile
R.string.hiya_type_homa	Line type display for home numbers	Home
R.string.hiya_type_phone	Line type display for other phone numbers	Phone