How to create Speedometer in Android Studio using Java

byMY SOTWERE IT - 0
Creating a Custom Speedometer in Android Studio

Creating a Custom Speedometer in Android Studio

In this tutorial, we'll create a custom speedometer view in Android using Java without relying on any third-party libraries. We'll walk through setting up the project, creating the custom view, and integrating it into an activity.

Prerequisites

  • Basic knowledge of Java and Android development
  • Android Studio installed

Step 1: Set Up Your Project

Open Android Studio and create a new project. Select "Empty Activity" and name your project SpeedometerApp.

Step 2: Create the Custom View

We'll create a custom view class called SpeedometerView that extends View.

SpeedometerView.java

Create a new Java class in your package:

package com.example.speedometerapp;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class SpeedometerView extends View {
    private Paint paint;
    private Paint needlePaint;
    private int speed;

    public SpeedometerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);

        needlePaint = new Paint();
        needlePaint.setColor(Color.BLUE);
        needlePaint.setStrokeWidth(8);
        needlePaint.setStyle(Paint.Style.FILL_AND_STROKE);

        speed = 0;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int width = getWidth();
        int height = getHeight();
        int radius = Math.min(width, height) / 2 - 20;
        int centerX = width / 2;
        int centerY = height / 2;

        // Draw the arc
        paint.setColor(Color.GREEN);
        canvas.drawArc(centerX - radius, centerY - radius, centerX + radius, centerY + radius, 180, 90, false, paint);
        paint.setColor(Color.YELLOW);
        canvas.drawArc(centerX - radius, centerY - radius, centerX + radius, centerY + radius, 90, 90, false, paint);
        paint.setColor(Color.RED);
        canvas.drawArc(centerX - radius, centerY - radius, centerX + radius, centerY + radius, 0, 90, false, paint);

        // Draw the needle
        float angle = (float) (speed * 1.8);
        float needleX = (float) (centerX + radius * Math.cos(Math.toRadians(angle - 90)));
        float needleY = (float) (centerY + radius * Math.sin(Math.toRadians(angle - 90)));
        canvas.drawLine(centerX, centerY, needleX, needleY, needlePaint);
    }

    public void setSpeed(int speed) {
        this.speed = speed;
        invalidate();
    }
}

Step 3: Define the Layout

Next, we'll add the custom view to our activity layout.

activity_speed.xml

Create an XML layout file for the activity:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".speed.SpeedActivity">

    <com.example.speedometerapp.SpeedometerView
        android:id="@+id/speedometerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/speedText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/speedometerView"
        android:layout_centerHorizontal="true"
        android:text="0 Km/h"
        android:textSize="24sp"
        android:layout_marginTop="16dp"/>
</RelativeLayout>

Step 4: Implement the Activity

Finally, we'll implement the activity to update the speed dynamically.

SpeedActivity.java

Create an activity class to control the speedometer:

package com.example.speedometerapp;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Handler;
import android.widget.TextView;

public class SpeedActivity extends AppCompatActivity {

    private SpeedometerView speedometerView;
    private TextView speedText;
    private Handler handler;
    private Runnable runnable;
    private int speed = 0;

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

        speedometerView = findViewById(R.id.speedometerView);
        speedText = findViewById(R.id.speedText);
        handler = new Handler();

        // Simulate speed change
        runnable = new Runnable() {
            @Override
            public void run() {
                speed += 5;
                if (speed > 100) {
                    speed = 0;
                }

                speedometerView.setSpeed(speed);
                speedText.setText(speed + " Km/h");
                handler.postDelayed(this, 1000); // Update speed every second
            }
        };
        handler.post(runnable);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        handler.removeCallbacks(runnable);
    }
}

Summary

Congratulations! You've created a custom speedometer view in Android from scratch. This tutorial covered the basics of creating a custom view, integrating it into a layout, and updating it dynamically in an activity.

Full Code for SpeedometerView.java

package com.example.speedometerapp;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class SpeedometerView extends View {
    private Paint paint;
    private Paint needlePaint;
    private int speed;

    public SpeedometerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);

        needlePaint = new Paint();
        needlePaint.setColor(Color.BLUE);
        needlePaint.setStrokeWidth(8);
        needlePaint.setStyle(Paint.Style.FILL_AND_STROKE);

        speed = 0;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int width = getWidth();
        int height = getHeight();
        int radius = Math.min(width, height) / 2 - 20;
        int centerX = width / 2;
        int centerY = height / 2;

        // Draw the arc
        paint.setColor(Color.GREEN);
        canvas.drawArc(centerX - radius, centerY - radius, centerX + radius, centerY + radius, 180, 90, false, paint);
        paint.setColor(Color.YELLOW);
        canvas.drawArc(centerX - radius, centerY - radius, centerX + radius, centerY + radius, 90, 90, false, paint);
        paint.setColor(Color.RED);
        canvas.drawArc(centerX - radius, centerY - radius, centerX + radius, centerY + radius, 0, 90, false, paint);

        // Draw the needle
        float angle = (float) (speed * 1.8);
        float needleX = (float) (centerX + radius * Math.cos(Math.toRadians(angle - 90)));
        float needleY = (float) (centerY + radius * Math.sin(Math.toRadians(angle - 90)));
        canvas.drawLine(centerX, centerY, needleX, needleY, needlePaint);
    }

    public void setSpeed(int speed) {
        this.speed = speed;
        invalidate();
    }
}

Full Code for activity_speed.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".speed.SpeedActivity">

    <com.example.speedometerapp.SpeedometerView
        android:id="@+id/speedometerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/speedText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/speedometerView"
        android:layout_centerHorizontal="true"
        android:text="0 Km/h"
        android:textSize="24sp"
        android:layout_marginTop="16dp"/>
</RelativeLayout>

Full Code for SpeedActivity.java

package com.example.speedometerapp;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Handler;
import android.widget.TextView;

public class SpeedActivity extends AppCompatActivity {

    private SpeedometerView speedometerView;
    private TextView speedText;
    private Handler handler;
    private Runnable runnable;
    private int speed = 0;

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

        speedometerView = findViewById(R.id.speedometerView);
        speedText = findViewById(R.id.speedText);
        handler = new Handler();

        // Simulate speed change
        runnable = new Runnable() {
            @Override
            public void run() {
                speed += 5;
                if (speed > 100) {
                    speed = 0;
                }

                speedometerView.setSpeed(speed);
                speedText.setText(speed + " Km/h");
                handler.postDelayed(this, 1000); // Update speed every second
            }
        };
        handler.post(runnable);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        handler.removeCallbacks(runnable);
    }
}

Conclusion

By following these steps, you can create a custom speedometer in Android Studio from scratch. This example provides a basic implementation that you can further customize to meet your specific needs. Happy coding!

Tags:

Post a Comment

Post a Comment (0)

Previous Post Next Post