Creating Built-in Components for Android Apps

7/05/13
Share

I’ve been developing Android apps for at least three years, and have also taken part in the work of DataArt Android Competence Center.

Often, while developing Android applications, I am faced with the need to create my own components not provided by the system. It could be different handle switches, spectrum visualizers, etc. Some of them could be substituted by graphical resource replacements or by rotating the canvas by 90 degrees. But sometimes I have to build components from scratch.

For creating the following custom visual component, I gathered all my knowledge of music theory.

7 notes for Android

I’ve already tried to create a virtual piano keyboard before, when version 2.1 of the Android platform came out, and I was interested and curious about making such a feature.. The result was too bulky, slooooowly and without interactivity.

This time I was pushed into building a piano keyboard out of necessity. During development of a multimedia application the client asked for an extra built-in component. It had to be a simple instrument of four octaves with the possibility to scroll, have release of active keys by backlit, and animation of the component inside the layout.

Some of technical details:

  • The keyboard drawing was made in two phases - white first and black next - to prevent an overlap.
  • For gesture recognition GestureDetector was used.
  • Basic support with multi-touch zoom: to create this effect, I applied ScaleGestureDetector zoom component.
  • Active keys are highlighted by a standard Holo blue backlight.
  • Scrolling helps to a fast moving through all available octaves.
  • Fling through entire keyboard is also supported.
  • Overscroll produces standard fading edge effects.

The component is ready to be embedded in any multimedia application for the Android platform.

Try it yourself

The source code for of the finished project can be downloaded from my github if you want to try your hand in piano keyboard creation: goo.gl/VDeuw. Take into account, that these are pieces of a project in process. If you find code that seems to be unnecessary, just delete it. Enjoy!

Watch this video for inspiration:

Sign Up for Updates!

Subscribe now to receive industry-related articles and updates

Choose industries of interest
Thank You for Joining!

You will receive regular updates based on your interests. No spam guaranteed

Add another email address
Read more
Sign Up for Updates!
Choose industries of interest
Thank You for Joining!

You will receive regular updates based on your interests. No spam guaranteed

Add another email address
Welcome
We are glad you found us
Please explore our services and find out how we can support your business goals.
Get in Touch