Easy Android Tutorial Easy Tutorial step by step with free source code: how to create a children’s application with 6 colored buttons, placed on two columns and 3 lines, which are extending depending on the size of the screen. Each button has a sound, depending on its color, which is heard when it is pressed.
You’ll see here how to set height and width in percentage format in Constraint layout in Android Studio version 3.1.2.

Create new project with Application name: Colors for kids; Minimum SDK: API 27Android 8.1 (Oreo).

In app->res->layout->activity_main.xml write the code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_marginEnd="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="2dp"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:background="@android:color/holo_red_light"
app:layout_constraintBottom_toTopOf="@+id/button3"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:background="@android:color/holo_orange_dark"
app:layout_constraintBottom_toTopOf="@+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:background="@android:color/holo_orange_light"
app:layout_constraintBottom_toTopOf="@+id/button5"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button1" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:background="@android:color/holo_green_light"
app:layout_constraintBottom_toTopOf="@+id/button6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button3"
app:layout_constraintTop_toBottomOf="@+id/button2" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button3" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:background="@android:color/holo_purple"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintTop_toBottomOf="@+id/button4" />
</android.support.constraint.ConstraintLayout>

In app->java->MainActivity.java write the code:

package com.app.toyo.myapplication;
import android.media.MediaPlayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button click1=(Button)findViewById(R.id.button1);
Button click2=(Button)findViewById(R.id.button2);
Button click3=(Button)findViewById(R.id.button3);
Button click4=(Button)findViewById(R.id.button4);
Button click5=(Button)findViewById(R.id.button5);
Button click6=(Button)findViewById(R.id.button6);
final MediaPlayer mp1=MediaPlayer.create(getApplicationContext(), R.raw.sound1);
final MediaPlayer mp2=MediaPlayer.create(getApplicationContext(), R.raw.sound2);
final MediaPlayer mp3=MediaPlayer.create(getApplicationContext(), R.raw.sound3);
final MediaPlayer mp4=MediaPlayer.create(getApplicationContext(), R.raw.sound4);
final MediaPlayer mp5=MediaPlayer.create(getApplicationContext(), R.raw.sound5);
final MediaPlayer mp6=MediaPlayer.create(getApplicationContext(), R.raw.sound6);
View.OnClickListener elem = new View.OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button1:
mp1.start();
break;
case R.id.button2:
mp2.start();
break;
case R.id.button3:
mp3.start();
break;
case R.id.button4:
mp4.start();
break;
case R.id.button5:
mp5.start();
break;
case R.id.button6:
mp6.start();
break;
}
}
};
click1.setOnClickListener(elem);
click2.setOnClickListener(elem);
click3.setOnClickListener(elem);
click4.setOnClickListener(elem);
click5.setOnClickListener(elem);
click6.setOnClickListener(elem);
}
}

In app->res->layout-> create New Directory: raw and copy-paste 6 sounds from your computer, with names: sound1.mp3, sound2.mp3, … sound6.mp3.

Run app in mobile device or Emulator (API 27 Android 8.1) and watch the app for kids in format portrait or landscape, auto sizing to any dimension.

Export app and sell it on Google Play.

Follow YouTube video: How to create an Educational App for Kids and sell it on Google Play – Easy Android Tutorial

Please subscribe here to our YouTube channel. Thank you!

Download free ColorsForKids application and install it on your mobile device to see how it works:
http://android-coffee.com/wp-content/uploads/projecs/ColorsForKids.apk

Download project with Source Code from here:
http://android-coffee.com/wp-content/uploads/projecs/KidsAppAndroidTutorial.7z

Check next tutorials to learn all about Android.
For further questions leave a message.

Leave a Reply

Your email address will not be published. Required fields are marked *

Blue Captcha Image Refresh

*