Vista de gráfico de líneas en Android con ejemplo

Si está buscando una vista para representar algunos datos estadísticos o una interfaz de usuario para mostrar un gráfico en su aplicación, en este artículo veremos cómo crear una vista de gráfico de líneas en nuestra aplicación de Android . 

¿Qué vamos a construir en este artículo? 

Construiremos una vista de gráfico de líneas simple en nuestra aplicación de Android y mostraremos algunos datos de muestra en nuestra aplicación. qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Agregar dependencia al archivo build.gradle(Module:app)

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘com.jjoe64:graphview:4.2.2’    

Después de agregar esta dependencia, sincronice su proyecto y ahora avanzaremos hacia su implementación.  

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?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">
  
    <!--line graph view where we will 
        be displaying our data-->
    <com.jjoe64.graphview.GraphView
        android:id="@+id/idGraphView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" />
  
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.jjoe64.graphview.GraphView;
import com.jjoe64.graphview.series.DataPoint;
import com.jjoe64.graphview.series.LineGraphSeries;
  
public class MainActivity extends AppCompatActivity {
  
    // creating a variable 
    // for our graph view.
    GraphView graphView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
          
        // on below line we are initializing our graph view.
        graphView = findViewById(R.id.idGraphView);
          
        // on below line we are adding data to our graph view.
        LineGraphSeries<DataPoint> series = new LineGraphSeries<DataPoint>(new DataPoint[]{
                // on below line we are adding 
                // each point on our x and y axis.
                new DataPoint(0, 1),
                new DataPoint(1, 3),
                new DataPoint(2, 4),
                new DataPoint(3, 9),
                new DataPoint(4, 6),
                new DataPoint(5, 3),
                new DataPoint(6, 6),
                new DataPoint(7, 1),
                new DataPoint(8, 2)
        });
          
        // after adding data to our line graph series.
        // on below line we are setting 
        // title for our graph view.
        graphView.setTitle("My Graph View");
          
        // on below line we are setting 
        // text color to our graph view.
        graphView.setTitleColor(R.color.purple_200);
          
        // on below line we are setting
        // our title text size.
        graphView.setTitleTextSize(18);
          
        // on below line we are adding 
        // data series to our graph view.
        graphView.addSeries(series);
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: