DrawableView en Android

En este artículo, vamos a mostrar la implementación de DrawableView. Vamos a implementar paint como lo tenemos en nuestra laptop. Veamos la implementación de esta función. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Característica disponible 

• Aumentar el ancho del trazo
• Disminuir el ancho del trazo
• Cambiar el color del trazo
• Deshacer la pintura

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

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

compilar ‘me.panavtec: vista dibujable: 0.6.0’

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"?>
<LinearLayout
    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:orientation="vertical"
    tools:context=".MainActivity">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
  
        <Button
            android:id="@+id/increase"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+" />
  
        <Button
            android:id="@+id/decrease"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-" />
  
        <Button
            android:id="@+id/color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Color" />
  
        <Button
            android:id="@+id/undo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Undo" />
          
    </LinearLayout>
  
    <me.panavtec.drawableview.DrawableView
        android:id="@+id/paintView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
  
</LinearLayout>

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.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
  
import androidx.appcompat.app.AppCompatActivity;
  
import java.util.Random;
  
import me.panavtec.drawableview.DrawableView;
import me.panavtec.drawableview.DrawableViewConfig;
  
public class MainActivity extends AppCompatActivity {
  
    DrawableView drawableView;
    DrawableViewConfig config;
    Button increase, decrease, color, undo;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initialise the value
        initiaselayout();
    }
  
    private void initiaselayout() {
          
        // initialise the layout
        drawableView = findViewById(R.id.paintView);
        increase = findViewById(R.id.increase);
        decrease = findViewById(R.id.decrease);
        color = findViewById(R.id.color);
        undo = findViewById(R.id.undo);
        config = new DrawableViewConfig();
          
        // set stroke color as black initially
        config.setStrokeColor(getResources().getColor(android.R.color.black));
  
        // If the view is bigger than canvas, 
        // with this the user will see the bounds (Recommended)
        config.setShowCanvasBounds(true);
  
        // set width as 20
        config.setStrokeWidth(20.0f);
        config.setMinZoom(1.0f);
        config.setMaxZoom(3.0f);
  
        // set canvas height
        config.setCanvasHeight(1080);
  
        // set canvas width
        config.setCanvasWidth(1920);
        drawableView.setConfig(config);
        increase.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // increase the stroke width by 10
                config.setStrokeWidth(config.getStrokeWidth() + 10);
            }
        });
        decrease.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // decrease stroke width by 10
                config.setStrokeWidth(config.getStrokeWidth() - 10);
            }
        });
        color.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // initialise Random
                Random random = new Random();
                // set the color using random
                config.setStrokeColor(Color.rgb(255, random.nextInt(256), random.nextInt(256)));
            }
        });
        undo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // undo the most recent changes
                drawableView.undo();
            }
        });
    }
}

Producción: