In this tutorial we will look at some of the best Android Dialer libraries and how to use them.

1. dialogs/android-dialer

A reusable dialer implementation extracted from AOSP.

Here is the demo screenshot:

Android Dialoer

Step 1: Install it

repositories {
    jcenter()
}
implementation 'im.dlg:android-dialer:1.2.5'

Step 2: Usage

Within fragment

Just add the DialpadFragment into your activity and make sure the activity implements
DialpadFragment.Callback:

interface Callback {
    void ok(String formatted, String raw);
}

The formatted string contains the input as it displayed to user (+1 555-546-0001) and the raw
string contains characters only (+15555460001).

Or Via startActivityForResult

Intent intent = new Intent(context, DialpadActivity.class);
startActivityForResult(intent, 100); // any result request code is ok

And then in your onActivityResult:

@Override
override void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (resultCode == Activity.RESULT_OK) {
        String formatted = data.getStringExtra(DialpadActivity.EXTRA_RESULT_FORMATTED);
        String raw = data.getStringExtra(DialpadActivity.EXTRA_RESULT_RAW);
        ...
    }
}

Configuration

Whether you're using a fragment or an activity, you can provide configuration via extras.
For a fragment use setArguments, and for activity use intent extras.

Arguments are:

1) EXTRA_REGION_CODE (string): Region code for the phone formatter. Default is US.
2) EXTRA_FORMAT_AS_YOU_TYPE (boolean): Enable phone formatting. If disabled, both formatted and
raw results will be the same. Default is true.
3) EXTRA_ENABLE_STAR (boolean): Will show the 'star' symbol. Default is true.
4) EXTRA_ENABLE_POUND (boolean): Will show the 'pound' symbol. Default is true.
5) EXTRA_ENABLE_PLUS (boolean): Will show the 'plus' symbol. Default is true.
6) EXTRA_CURSOR_VISIBLE (boolean): Will show the cursor in the digits EditText. Default is false.

Styles

The dialer is styled using android theme colors; the button color is colorAccent and digits color is colorPrimary.

Reference

Read more here.

Or:

Read Individually.

2. moldedbits/android-dial-picker

A custom circular rotating dial like picker for android.

Android Dial Picker, a circular custom view that works just like a rotating dial. DialView is highly customizable
via xml or code. You can set direction(left,top,right,bottom), max/min ranges, interval values and colours.

These custom attributes can be added and styled via XML as well as programatically.
As the dial rotates, the current value gets updated and is displayed on the screen.

Here is the demo screenshot:

Android Rotating DialPicker

Step 1: Install it

    implementation 'com.moldedbits.dialpicker:android-dial-picker:1.0'

Step 2: Add to Layout

In XML layout:

<com.moldedbits.dialpicker.DialView
        android:id="@+id/dial_left"
        android:layout_width="90dp"
        android:layout_height="200dp"
        android:layout_alignParentStart="true"
        android:layout_centerInParent="true"
        android:layout_marginTop="@dimen/margin_normal"
        android:padding="5dp"
        custom:centerPadding="50"
        custom:dialDirection="LEFT"
        custom:endColor="#FF8A80"
        custom:intervalValueOnLine="true"
        custom:leastCount="1"
        custom:lineInterval="2"
        custom:maxValue="24"
        custom:minValue="0"
        custom:paintArcColor="@color/smoke_red"
        custom:paintLineColor="@color/smoke_red"
        custom:paintTextColor="@color/smoke_red"
        custom:startColor="#FF8A80"
        custom:textSize="14"
        custom:tickGapAngle="12" />

Here are all customizable attributes: In attrs.xml:

<declare-styleable name="DialView">
        <attr name="lineInterval" format="integer" />
        <attr name="maxValue" format="integer" />
        <attr name="minValue" format="integer" />
        <attr name="centerPadding" format="integer" />
        <attr name="leastCount" format="integer" />
        <attr name="tickGapAngle" format="integer" />
        <attr name="textSize" format="integer" />
        <attr name="intervalValueOnLine" format="boolean" />

        <attr name="dialDirection" format="enum">
            <enum name="LEFT" value="1" />
            <enum name="TOP" value="2" />
            <enum name="RIGHT" value="3" />
            <enum name="BOTTOM" value="4" />
        </attr>
        <attr name="startColor" format="color"/>
        <attr name="endColor" format="color"/>
        <attr name="paintLineColor" format="color"/>
        <attr name="paintTextColor" format="color"/>
        <attr name="paintArcColor" format="color"/>
    </declare-styleable>

Step 3: Write Code

Dial Value Change Listener:

    dialViewLeft.setOnDialValueChangeListener(new DialView.OnDialValueChangeListener() {
            @Override
            public void onDialValueChanged(String value, int maxValue) {
                textViewLeft.setText(value+ "  : ");
            }
        });

Reference

Read more here.

Or:

Read Individually.