How to Build A Periodic Table Android App - Hive Programmers

Greetings to my favorite Science community online, StemSocial.

It's @skyehi and I believe today's blog would be the most special one I'v done on StemSocial so far because it's what you get when you blend programming with science.

I'm going to be continuing my series on Android App Development Tutorials for beginners. In today's App development tutorial, we're going to be building a Periodic Table App.

The Periodic Table is a table of all the known elements in the world or the universe with their corresponding data or information. The entire field of Chemistry is built around these elements.

It's truly an honor to build an App that would hopefully contribute to science. Now of course guys, since this is still the basics and it's a tutorial for beginners, we wouldn't build too complex an App.

It would be a great App but would be easy enough for people still learning the Basics of programming to be able to build.

Let's get started with our Periodic Table Android App shall we

Original Image Source by fancycrave1 from Pixabay

Prerequisites

To begin building the App, you would need to make sure that the following softwares are properly installed on your computer.

• Android Studio IDe which is the platform we'll be using to build the App

• Java Development Kit, JDK which is going to be our programming language to write the logic code of our App

If you have any issues downloading or installing these softwares on your computer, please let me know and I'll try to be of help guys.

Project Setup

Now that you're all set with the required softwares or setups, we can start building our App.

Start by opening Android Studio and click on "Create a new project" button. Choose the name of your App and the package name as well. I'll be naming my App StemSocial Periodic Table to pay homage to this community. Of course you can name your App anyhow you want to guys.

Please ensure that Java is the selected programming language since that's what we'll be using. Just like I keep saying in each blog, we'll start using Kotlin after we're through with the basics of this series.

Also, as usual choose an empty activity template to make developing the App a bit simplified.

Designing the UI

Since we're through with creating the App Project on Android Studio, it's time to work on the User Interface or Frontend of our App.

We're be working on the User Interface inside the activity_main.xml file. We'll create a very simple grid layout for the periodic table. But of course guys you can choose to use a GridLayout or RecyclerView for this purpose. Either ways, you'll come out with a great looking UI.

Here's how the code should look like.

(html comment removed:  activity_main.xml )
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="18"
    android:rowCount="9"
    android:layout_margin="8dp"
    android:layout_gravity="center">
    (html comment removed:  Add buttons or cells for each element in the periodic table )
</GridLayout>

Creating the Element Class

Now before we can create the backend or the main logic of our App, we need to create a class to represent each element in the periodic table.

This class should include properties like the element's name, symbol, and atomic number. So if it's Hydrogen, the user will have the name, the "H" symbol and the Atomic Number "1"

Create a Java class and name it Element.java

Here's how the Element class would look like

// Element.java
public class Element {
    private String name;
    private String symbol;
    private int atomicNumber;

    public Element(String name, String symbol, int atomicNumber) {
        this.name = name;
        this.symbol = symbol;
        this.atomicNumber = atomicNumber;
    }

    // Add getters for the properties
}

Populating the Grid

It's now time for us to write all the data of each element in the Periodic Table. Like I mentioned earlier, each element will have its name, symbol and atomic number.

In more advanced tutorials of the future, we'll be creating this App again and will be adding a lot more data and a lot more features. This is merely the basics.

Populating the grid layout with data of the elements will be done inside the MainActivity.java file. We'll create a list of elements and populate the grid with buttons or cells representing each element.

In my example, I only added Hydrogen and Helium to avoid making the code too plenty and the blog too long but you can add all the other elements.

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List<Element> elements = Arrays.asList(
            new Element("Hydrogen", "H", 1),
            new Element("Helium", "He", 2),
            // Add more elements, you can add as many as you want to or even all the known elements to have a full periodic table App
        );

        GridLayout gridLayout = findViewById(R.id.gridLayout);

        for (Element element : elements) {
            Button button = new Button(this);
            button.setText(element.getSymbol());
            // Add click listener to handle interactions
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    // Handle element click, e.g., show element details
                    showToast("Clicked on " + element.getName());
                }
            });
            gridLayout.addView(button);
        }
    }

    private void showToast(String message) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }
}

Running Our Finished App

Congratulations guys, we have completed our basic Periodic Table Android App. I hope you're proud of the work. It's now time to see the results by running the App.

You can build and run your App in an emulator or on a physical device which is what I would usually prefer and recommend because you get to see exactly how your app would look like if it was running on your phone.

When the App opens, you should see a basic periodic table with clickable elements.

In more advanced tutorials, we'll be adding more features like search functionalities and more properties of the elements including the number of protons, electrons and neutrons in each atom of each element.

---

Thank you so much for taking the time to read today's blog. I hope you enjoyed it guys. As always, if you're having any trouble writing the code, installing the required softwares or even running the App, please let me know in the comments section below.

Have a lovely day and catch you next time on StemSocial. Goodbye 👨‍💻

You Can Follow Me @skyehi For More Like This And Others