How To Build A Touch Light Android App - Hive Programmers

in StemSocial11 days ago

Greetings to my favorite science community online, StemSocial.

It's your programmer and science enthusiasts @skyehi and I'm always thrilled to be back to continue my series on Android programming tutorial for beginners.

For a couple of days we've been building some pretty good apps guys and I hope your skills are improving by following the concepts and tips I've been giving you.

As I always say, the best way to become a programming professional is to practice with building different apps and projects.

Our main aim has been to improve our app development skills on Android.

In yesterday's blog we learned how to build a Basic app that can display any website of your choice. I chose to show the Hive blockchain's main webpage and everything run smoothly. - The idea of that tutorial was for me to teach how to build the basic foundation of a full Android browser like Chrome.

Polish_20231117_135925502.pngOriginal Image Source by Boskampi from Pixabay

For today's tutorial blog, I'm going to send you through building a very simple and basic app. This app is a lot easier to build than yesterday's app.

We're going learn how to build a touch light app on Android phones using the Android Studio IDE. Trust me guys it's going to be a lot of fun as usual.

Let's get into the code now shall we.


Now this app is a really basic one that will utilize the device's screen to mimic a flashlight and the feature will be triggered by a touch event. So we'll definitely need to create a button for that.

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Things You'll Need To Build The APP

If you want to successfully follow this simple tutorial to build your very own touch light app, you would need to make sure the following are already installed and setup well.

  • Android Studio (latest version)
  • Java Development Kit (JDK)

The Android Studio App is the platform we'll be writing our codes in and the Java Development Kit needs to be installed on your computer for you to be able to execute the Java codes and have the Android Studio App work smoothly without any issues.

If you're having trouble installing Android Studio or setting up your JDK, please let me know in the comments section below and I'll be happy to help out.

At this point I'll assume my readers have successfully installed Android Studio and everything is working just first. Let me send you through the steps to building this simple but effective touch light Android app.

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Step 1: Setting Up a New Project

The first thing is obviously to open Android Studio, create a new Android Studio project, and follow the prompts given to set up the project details, including the project name, the package name, and location.

I would still recommend just like we did in the previous app we built that you choose "Empty Activity" as the template for developing your app.


Step 2: Designing Our User Interface

The first thing we want to do is to build our user interface. This is going to be a rather simple one because we wouldn't need too much. In future tutorials, I'll be guiding you through more complex designs.

To work on our User interface, open res/layout/activity_main.xml and create a straightforward interface using a RelativeLayout containing a single Button.

This Button will function as the trigger for our touch light.

I have put together a code snippet to help you write the code.

Here's how your code should look like guys

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/touchButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Touch to Light"/>

</RelativeLayout>

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Step 3: Implementing the Touch Event

Now that we're done with the simple user interface, it's time for us to write the code for the logic of the app.

This would be done in MainActivity.java page. We're going to implement the touch event on the Button. When the user touches the Button, the app will change the background color to simulate the flashlight effect.

Our background would become a bright white background stimulating the flashlight effect.

In future updates of this app, we'll include a code that would trigger the flashlight of your phone itself.

Here's how your code should look like in MainActivity.java

import android.graphics.Color;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        Button touchButton = findViewById(R.id.touchButton);

        touchButton.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                switch (motionEvent.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        // Set background color to simulate flashlight ON
                        view.setBackgroundColor(Color.WHITE);
                        break;
                    case MotionEvent.ACTION_UP:
                        // Set background color to simulate flashlight OFF
                        view.setBackgroundColor(Color.TRANSPARENT);
                        break;
                }
                return true;
            }
        });
    }
}

2dk2RRM2dZ8gKjXsrozapsD83FxL3Xbyyi5LFttAhrXxr16mCe4arfLHNDdHCBmaJroMz2VbLrf6Rxy9uPQm7Ts7EnXL4nPiXSE5vJWSfR53VcqDUrQD87CZSpt2RKZcmrYrze8KanjkfyS8XmMCcz4p33NZmfHE4S9oRo3wU2.png

Step 4: Running Your App

Now it's time to run our app guys. You could either use your phone by making sure that USB debugging is already on or you can use the built-in Android emulator.

The app should open and run just fine When you touch the button, you should observe the flashlight effect.

Congratulations guys, you've successfully built your first Touch Light Android app using Android Studio.

Using the experience you've gained in the previous blogs, feel free to add extra features and designs. You can even add a toast message that says "Light On" and "Light Off". By experimenting on more things, you'll learn more and improve your programming skills.

Thank you so much for taking the time to read today's blog. I hope you enjoyed it guys and I hope it helps improve your coding and app development skills.

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


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

Sort:  

So i was doing this course on Coursera and i had to learn the language R and that was when i really started appreciating programmers, you guys are doing absolutely amazing and i salute you

Wow thank you so much dear friend. Indeed it's not easy but as long as it's something we love, it gets fun and you'll start to love it when you realize the amazing products, apps and services you make with programming. Thanks for complimenting my Work, I really appreciate it.

And well although I haven't really paid much attention to R programming language, I can bet it would be very useful to add to my programming skills🥰

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

Thanks for including @stemsocial as a beneficiary, which gives you stronger support.