Android: crea un gráfico de barras con Kotlin

El gráfico de barras es un componente de la interfaz de usuario que se ve en la mayoría de las aplicaciones FinTech. Estos gráficos de barras se utilizan para mostrar grandes cantidades de datos en una forma fácil de leer. En este artículo, crearemos un gráfico de barras simple dentro de nuestra aplicación de Android usando Kotlin. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo.

 

Nota : si está buscando implementar Bar Chart en su aplicación de Android usando Java. Cómo crear un gráfico de barras en Android usando Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Cómo crear/iniciar un nuevo proyecto en Android Studio

Paso 2: agregue la dependencia y el repositorio de JitPack

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

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

Agregue el repositorio de JitPack a su archivo de compilación. Agréguelo a su root build.gradle al final de los repositorios dentro de la sección allprojects{ }.

allprojects {
 repositories {
   maven { url “https://jitpack.io” }
     }
}

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"?>
<!--on below line we are creating a swipe to refresh layout-->
<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"
    android:fillViewport="true"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <TextView
        android:id="@+id/idTVHead"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:gravity="center"
        android:padding="4dp"
        android:text="Bar Chart"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--Ui component for our bar chart-->
    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/idBarChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/idTVHead" />
  
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.kt

Vaya a aplicación>java>nombre del paquete de su aplicación>archivo MainActivity.kt y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
  
import android.graphics.Color
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.github.mikephil.charting.charts.BarChart
import com.github.mikephil.charting.data.BarData
import com.github.mikephil.charting.data.BarDataSet
import com.github.mikephil.charting.data.BarEntry
  
class MainActivity : AppCompatActivity() {
  
    // on below line we are creating
    // variables for our bar chart
    lateinit var barChart: BarChart
  
    // on below line we are creating
    // a variable for bar data
    lateinit var barData: BarData
  
    // on below line we are creating a 
    // variable for bar data set
    lateinit var barDataSet: BarDataSet
  
    // on below line we are creating array list for bar data
    lateinit var barEntriesList: ArrayList<BarEntry>
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // on below line we are initializing 
        // our variable with their ids.
        barChart = findViewById(R.id.idBarChart)
  
        // on below line we are calling get bar
        // chart data to add data to our array list
        getBarChartData()
  
        // on below line we are initializing our bar data set
        barDataSet = BarDataSet(barEntriesList, "Bar Chart Data")
  
        // on below line we are initializing our bar data
        barData = BarData(barDataSet)
  
        // on below line we are setting data to our bar chart
        barChart.data = barData
  
        // on below line we are setting colors for our bar chart text
        barDataSet.valueTextColor = Color.BLACK
  
        // on below line we are setting color for our bar data set
        barDataSet.setColor(resources.getColor(R.color.purple_200))
  
        // on below line we are setting text size
        barDataSet.valueTextSize = 16f
  
        // on below line we are enabling description as false
        barChart.description.isEnabled = false
  
    }
  
    private fun getBarChartData() {
        barEntriesList = ArrayList()
          
        // on below line we are adding data 
        // to our bar entries list
        barEntriesList.add(BarEntry(1f, 1f))
        barEntriesList.add(BarEntry(2f, 2f))
        barEntriesList.add(BarEntry(3f, 3f))
        barEntriesList.add(BarEntry(4f, 4f))
        barEntriesList.add(BarEntry(5f, 5f))
  
    }
  
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: