Cách tạo Digital Speed Dashboard trong Android

Giới thiệu

Ví dụ này minh họa cách tích hợp thư viện DigitalSpeedDashboard (từ JitPack) để tạo giao diện đồng hồ tốc độ số trong Android.

Bước 1: Tạo dự án mới

Android Studio → File → New Project.

Bước 2: Cấu hình Gradle

Project-level build.gradle:

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' } // Thêm JitPack
    }
}

App-level build.gradle:

dependencies {
    implementation 'com.github.ngallazzi:DigitalSpeedDashboard:master-SNAPSHOT'
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    // ... các dependency khác
}

Bước 3: Giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.ngallazzi.speedandrpmdashboard.DigitalSpeedDashboard
        android:id="@+id/srDashboard"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:background="#000000"
        app:idleColor="#35ABABAB"
        app:speedColor="#FFFFFF"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Khởi động Dashboard"
        android:textSize="25sp" />

</LinearLayout>

Bước 4: Logic (src/MainActivity.java)

package com.example.andy.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;
import com.ngallazzi.speedandrpmdashboard.DigitalSpeedDashboard;

public class MainActivity extends AppCompatActivity {
    TextView text;
    int speed = 0;
    boolean running = true;
    DigitalSpeedDashboard digitalSpeedDashboard;

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

        text = findViewById(R.id.text);
        digitalSpeedDashboard = findViewById(R.id.srDashboard);
        digitalSpeedDashboard.setMaxSpeed(200);

        text.setOnClickListener(v -> {
            new Thread(() -> {
                running = true;
                speed = 0;
                while (running) {
                    speed++;
                    runOnUiThread(() -> digitalSpeedDashboard.setSpeed(speed));
                    try { Thread.sleep(10); } catch (InterruptedException e) { e.printStackTrace(); }
                    if (speed >= 200) {
                        running = false;
                        speed = 0;
                    }
                }
            }).start();
        });
    }
}

Giải thích

• DigitalSpeedDashboard: Custom View từ thư viện
• setMaxSpeed(200): Tốc độ tối đa hiển thị
• setSpeed(speed): Cập nhật tốc độ hiện tại (gọi trên UI thread)
• Thread nền tăng speed từ 0→200, mỗi bước 10ms

Chạy ứng dụng

Chạy app → Nhấn "Khởi động Dashboard" → Đồng hồ số chạy từ 0 lên 200 rồi dừng.

Lưu ý

• Thư viện này có thể cũ, kiểm tra phiên bản mới nhất trên JitPack
• Android hiện đại: cân nhắc tự custom View hoặc dùng Jetpack Compose Canvas