Transform your Android smartphone into an Old School Rotary Dialer

Usually, Android users use stock dial to make calls. There are also many alternatives available on the Google Play Store to replace the stock dialer. But, some users like add a dash of retro into their smartphone and seek for an old school rotary dialer.

Whereas old guys can be nostalgic of the old rotary dialer phones, young guys sometimes doesn’t know what it is. So, what is a rotary dialer ?

A rotary phone dialer is a telephone implementing a signaling technology in telecommunications known as pulse dialing. It was used when initiating a telephone call to transmit the destination telephone number to a telephone exchange.

Creating an Old School Rotary Dialer application for Android is an excellent way to add a dash of retro in your smartphone. It is also good to discover how to create a simple and fun Android application from A to Z. So, follow the guide.

Rotary Dialer Images

First, we need to create some images to represent a rotary dialer. We need the following images :

• A background image of the rotary dialer with numbers and letters. This image must be static during rotary dialer animation.

• A top image with the tick. This image must be also static during animation.

• Last image will be used to be rotated during the rotary dialer animation.

These images must be placed in the drawable directory of resources in your project.

Draw the Rotary Dialer

To draw the rotary dialer, we need to create a specific view named RotaryDialerView that must extend the class View :

<a href="https://medium.com/media/e9d5ef311465cc2dcf8e768eb7464862/href">https://medium.com/media/e9d5ef311465cc2dcf8e768eb7464862/href</a>

We load the dialer resource that is the only drawable with a dynamic behaviour. Here, we just display it.

The static images are displayed in the layout of the activity :

<a href="https://medium.com/media/dcb6e49e773c899884f35309741983f5/href">https://medium.com/media/dcb6e49e773c899884f35309741983f5/href</a>

We can know test the display and enjoy the result :

Let’s animate the Rotary Dialer

With the rotary dialer displayed, we have to animate the dialer when user makes a rotate touch on the screen. How to proceed ?

We’re going to listen touch events on RotaryDialerView. Then, we must make a litte bit of trigonometry to determinate the rotation angle. Goal is to use that angle to draw the dialer with a specific rotation of that angle.

During MotionEvent.ACTION_MOVE, we set the new angle of rotation and choose to redraw the view. Note that you must add a rotation of that angle when you draw the dialer. When MotionEvent.ACTION_UP is fired, we can get the actual position of the dialer compared to the tick and so get the number dialed. We fire that event with a specific method.

The code of the RotaryDialerView is updated like this :

<a href="https://medium.com/media/19b87a07564fef7668ad01e63f439fdf/href">https://medium.com/media/19b87a07564fef7668ad01e63f439fdf/href</a>

Here, you must note the animation launched when user ends his touch on the screen. Goal is to replace the dialer to its start position with a rotate animation. The animation is defined with the standard Android android.R.anim.decelerate_interpolator .

Add a number area

Last step is to add a number area to display digits dialed. We update the layout like this :

<a href="https://medium.com/media/04874a0b571e45611473eb5d64dbc308/href">https://medium.com/media/04874a0b571e45611473eb5d64dbc308/href</a>

Our Rotary Dialer application now looks like this :

Fire dial event

We have a number area and so we must fill it with dialed number. To make that, we must implement the fireDialListenerEvent seen previously in the class RotaryDialerView.

We define a DialListener interface with onDial(int number) method. Class interested by digits dialed should implement that class and then register to the RotaryDialerView. We add the following code to RotaryDialerView :

<a href="https://medium.com/media/fd7290bc6ee909b942bc6f731dc49b77/href">https://medium.com/media/fd7290bc6ee909b942bc6f731dc49b77/href</a>

Display number dialed

To display number dialed, we must register with our main activity as a DialListener to RotaryDialerView and display digit dialed :

<a href="https://medium.com/media/e2fc3f40c7bdbe062240d6554edbcb34/href">https://medium.com/media/e2fc3f40c7bdbe062240d6554edbcb34/href</a>

Here, we have also added the possibility to send Intent.ACTION_CALL to launch a call with the dialed number.

Conclusion

To conclude, you can see our Rotary Dialer application in action in that demo video :

You have noticed that it’s an extended version of our Rotary Dialer application created during this tutorial. A lot of features have been added but the core feature is exactly the same. You can try the application on the Google Play Store :

• Old Phone Rotary Dialer - Android Apps on Google Play
• Old Rotary Dialer Pro - Android Apps on Google Play

Now, it’s your turn to play. Don’t hesitate to create your own and add new exciting features :).

Bonus

A live coding video showing you how to create the Rotary Dialer Application is also available just here on YouTube :