Multiplication Tables Android App

In this post, we will be demonstrating how to create a simple multiplication tables app using Android Studio in Java.

We will be using a ListView to display the multiplication table of a number entered by the user.

ListView -  ListView in Android is a view which contains the group of items and display them in a scrollable list. ListView is a default scrollable which does not user other scroll view.

Now that we know what a ListView is, lets begin making the app.

For this, we will require an EditText where in the user can input a number, a Button and a ListView which will display the multiplication table of the number entered by the user.

In the activity_main.xml file , write the code as follows:

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.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"
	tools:context=".MainActivity">
	<TextView
	android:id="@+id/title"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginStart="36dp"
	android:layout_marginTop="36dp"
	android:text="Table of :"
	android:textAllCaps="true"
	android:textSize="22sp"
	android:textStyle="bold"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />
	<EditText
	android:id="@+id/input"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginStart="15dp"
	android:ems="10"
	android:hint="Enter number"
	android:inputType="number"
	android:textAlignment="center"
	android:textSize="20sp"
	android:textStyle="bold"
	app:layout_constraintBottom_toBottomOf="@+id/title"
	app:layout_constraintStart_toEndOf="@+id/title"
	app:layout_constraintTop_toTopOf="@+id/title" />
	<ListView
	android:id="@+id/tableList"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginStart="3dp"
	android:layout_marginEnd="3dp"
	android:layout_marginBottom="5dp"
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/go" />
	<Button
	android:id="@+id/go"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="40dp"
	android:text="GO"
	android:textSize="20sp"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintHorizontal_bias="0.504"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/title" />
	</androidx.constraintlayout.widget.ConstraintLayout>

view raw xml hosted with ❤ by GitHub

Now in the MainActivity,java file , when the user clicks the button, we will call the fillList() methodt that will populate our ListView with the multiplication table. Write the code as follows:

	import androidx.appcompat.app.AppCompatActivity;
	import android.os.Bundle;
	import android.text.Editable;
	import android.text.TextWatcher;
	import android.view.View;
	import android.widget.ArrayAdapter;
	import android.widget.Button;
	import android.widget.EditText;
	import android.widget.ListView;
	import android.widget.Toast;
	import java.util.ArrayList;
	public class MainActivity extends AppCompatActivity {
	private EditText input;
	private ListView list;
	private Button goBtn;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	input = findViewById(R.id.input);
	list = findViewById(R.id.tableList);
	goBtn = findViewById(R.id.go);
	goBtn.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {
	fillList();
	}
	});
	}
	private void fillList() {
	int getInput = Integer.parseInt(input.getText().toString());
	if(getInput<0){
	Toast.makeText(this, "Please enter valid positive number", Toast.LENGTH_SHORT).show();
	}else {
	ArrayList<String> mulTables = new ArrayList<>();
	for (int i = 1; i <= 10; i++) {
	mulTables.add(getInput + " X " + i + " = " + getInput * i);
	}
	ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.row, mulTables);
	list.setAdapter(adapter);
	}
	}
	}

view raw java hosted with ❤ by GitHub

We will need to create an an xml file that will define the structure of how the elements in the ListView will appear. So create a new layout resource file (in our case it is row.xml). Now add the following code to this file.

	<?xml version="1.0" encoding="utf-8"?>
	<TextView xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginStart="28dp"
	android:layout_marginTop="4dp"
	android:fontFamily="monospace"
	android:padding="4dp"
	android:text="2X2=4"
	android:textColor="#000000"
	android:textSize="28sp"
	android:textStyle="bold" />

view raw xml hosted with ❤ by GitHub

And that's it .Now run and test your app.

Output: 

(Incase,  the ListView gets displaced when the keyboard pops up, just add

 <activity

   android:name=".activities.MainActivity"
   android:windowSoftInputMode="adjustPan">  

</activity> in the activity tag in AndroidManifest file. )