Build and Develop Alphabet ABC Learning Android app For Kids

We will see here how to create a alphabet ABC learning app for kids. Basically I have targeted use of this alphabet app for 2, 3 or 4  year old babies. Kids like to learn with pictures, animations and sound effect. I will explain all necessary ideas, concepts to build this babies learning app.

The most important thing  is that it is basic app and we will learn how to use Navigation Drawer Activity, AlertDialog, LayoutInflater, ImageView, MediaPlayer and you can add your own features, future development in code.

MainActivity.java:

Select Navigation Drawer Activity while creating project. See the image :

Navigation Drawer Activity
Navigation Drawer Activity

comment on default code from line no. 84 to 96 and create your own class like Alphabet.class(we will discuss later). Intent used here to open or start Activity. The method startActivity(i) is used here to launch a activity(Alphabet.class).

Open activity_main_drawer.xml and edit the code like :

You will get this file in res\menu\ directory.

Put your all images of alphabet in drawable folder. Create new folder with name raw inside res directory . Put your all .mp3 format sounds of alphabet inside raw folder. You can find all pronunciation like ‘A for Apple’  including images and .mp3 on internet. If you don’t have then I will provide you after end of this post.

Alphabet.java:

Whne user click on ‘Alphabet Indroduction’ from Navigation Drawer thin this activity will open.

Here MediaPlayer class can be used to control playback of audio/video files and streams. Here start() method used to start the audio/video file. You will get detail information here.

AlertDialog.Builder Creates a builder for an alert dialog that uses the default alert dialog theme. There are some methods like setTitle(), show() to create and design Alert Dialog.(Here the official doc).

LayoutInflater class instantiates a layout XML file into its corresponding View objects.(See Here).

alphabet_main.xml:

alphabet_main.xml
alphabet_main.xml

When user click on button of alphabet then AlertDialog will open with image and sound. The output you can see like this:

play sound and show image onclick on alphabet letter
play sound and show image onclick on alphabet letter

In this way you can create a simple app for your kids and babies. You can download the code and resources from Here. If you have any question regarding this post then you can comment below.

One comment

  1. thank for your tutorial about this. I’m use alphabet learning theme for my college assignment.
    i’m still don’t understand about your :
    view = factory.inflate(R.layout.a, null);
    image= (ImageView) view.findViewById(R.id.ai);

    where is R.id.ai location?
    and R.layout.a ?

Leave a Reply