¿Cómo crear una aplicación de notas adhesivas en Android Studio?

Nosotros, como humanos, tendemos a olvidar algunas cosas pequeñas pero importantes, y para resolver esto, tratamos de escribir esas cosas y pegarlas en algún lugar, a menudo tenemos los ojos puestos. Y en esta era digital, lo más probable es que veamos pantallas de computadoras portátiles, computadoras o teléfonos móviles. Para esto, todos alguna vez hemos usado Sticky Notes en Windows o Stickies en Mac, hoy en este artículo estaríamos discutiendo cómo podemos construir una aplicación de este tipo para Android. 

Acercarse

Ahora bien, si pensamos en algo que es sticky, es decir, que se pega a la pantalla, en Android, el componente que nos viene a la mente son los Widgets de la pantalla de inicio. Los widgets de la pantalla de inicio son los mejores componentes interactivos que se adhieren a la pantalla y se pueden cambiar de tamaño de cualquier manera. Estaríamos creando una aplicación que también tiene su propio widget. Primero escribiremos un texto en la aplicación principal y lo guardaremos en un archivo en la memoria. En ese mismo momento, actualizaremos el widget con el texto que el usuario acaba de guardar. Y ¡Horra! Nuestra nota adhesiva está lista.

¿Qué es un widget de pantalla de inicio?

Aquí, una cosa a tener en cuenta es que en las vistas de Android también se denominan Widgets, por lo que para evitar confusiones usamos el término Widgets de la pantalla de inicio. Estos son los receptores de transmisión que proporcionan componentes interactivos. Suelen mostrar algún tipo de información y animan al usuario a interactuar con ella. Por ejemplo, puede mostrar la hora, el clima o los correos electrónicos y, una vez que haga clic en ellos, se iniciará la aplicación principal que los aloja. Los widgets usan RemoteViews para construir su interfaz de usuario. Con los mismos permisos que la aplicación original, RemoteView se puede ejecutar con otro método. Como consecuencia, el widget se ejecuta con los permisos de la aplicación que lo creó. La interfaz de usuario de un Widget está determinada por un receptor de transmisión. Este receptor infla su diseño en un objeto RemoteView.

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: trabajar con el archivo AndroidManifest.xml

Agregue los permisos de usuario para leer y escribir el archivo desde el almacenamiento. Además, para registrar el widget, debemos crear un receptor de transmisión con un filtro de intención.  

XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.notes">
  
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Notes">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
  
        <!-- To register a widget, you create a broadcast receiver with
             an intent filter for the android.appwidget.action.APPWIDGET_UPDATE action-->
        <receiver
            android:name=".AppWidget"
            android:label="StickyNotes">
            <intent-filter>
                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
  
            </intent-filter>
            <!-- This metadata contains the configuration of your widget,
                 the resource attribute contains the layout of your widget as
                 it will be seen in the list of widgets -->
            <meta-data
                android:name="android.appwidget.provider"
                android:resource="@xml/new_app_widget_info" />
        </receiver>
  
    </application>
  
</manifest>

Paso 3: Creación de un widget  

Siga los pasos mencionados en este artículo Crear un widget básico de una aplicación de Android para agregar el widget a su proyecto. El archivo new_app_widget_info.xml contiene código que determina el aspecto de nuestro widget tal como aparecería en la lista de Widgets.

Paso 4: trabajar con la clase AppWidget

Esta clase se formará en el paso anterior. AppWidget.java AppWidget.java

Java

import android.app.PendingIntent;
import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.content.Intent;
import android.widget.RemoteViews;
  
// Implementation of App Widget functionality
public class AppWidget extends AppWidgetProvider {
  
    // Create an Intent to launch activity
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
  
        // Perform this loop procedure for each App Widget
        // that belongs to this provider
        for (int appWidgetId : appWidgetIds) {
              
            // Create an Intent to launch MainActivity
            Intent launchActivity = new Intent(context, MainActivity.class);
              
            // Attaching a Pending Intent 
            // to trigger it when
            // application is not alive
            PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, launchActivity, 0);
              
            // Get the layout for the App Widget and attach
            // an on-click listener to the button
            RemoteViews remoteViews = new RemoteViews(context.getPackageName(), R.layout.new_app_widget);
            remoteViews.setOnClickPendingIntent(R.id.appwidget_text, pendingIntent);
  
            // Tell the AppWidgetManager to perform an
            // update on the current app widget
            appWidgetManager.updateAppWidget(appWidgetId, remoteViews);
        }
    }
}

Paso 5: crear la clase StickyNote

Esta es una clase auxiliar que proporciona la funcionalidad de guardar, actualizar y recuperar el contenido desde y hacia el archivo. Nota adhesiva .java Nota adhesiva .java 

Java

import android.content.Context;
  
import java.io.BufferedReader;
import java.io.File;
import java.io.FileOutputStream;
import java.io.FileReader;
import java.io.IOException;
  
import static android.content.Context.MODE_PRIVATE;
  
class StickyNote {
  
    // this function will return
    // the content from the text
    // file(if any)
    String getStick(Context context) {
  
        // get the file from path
        File fileEvents = new File(context.getFilesDir().getPath() + "/gfg.txt");
          
        // create a StringBuilder to store the text from file
        StringBuilder text = new StringBuilder();
          
        try {
            // use the BufferedReader
            // to Read the file
            // efficiently
            BufferedReader br = new BufferedReader(new FileReader(fileEvents));
            String line;
              
            // read a single line at a time
            // append newline character after each line
            while ((line = br.readLine()) != null) {
                text.append(line);
                text.append('\n');
            }
              
            // close the BufferedReader
            br.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
  
        // finally return the 
        // string i.e. the retrieved data
        // from file
        return text.toString();
    }
  
    // this function saves the new 
    // content in the file if it
    // exists or will create a new one
    void setStick(String textToBeSaved, Context context) {
          
        String text = textToBeSaved;
          
        // create the FileOutputStream 
        // to efficiently write the file
        FileOutputStream fos = null;
        try {
            // get the file from storage
            fos = context.getApplicationContext().openFileOutput("gfg.txt", MODE_PRIVATE);
              
            // write to the file at once
            fos.write(text.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (fos != null) {
                try {
                    fos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

Paso 6: 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.

Java

import android.appwidget.AppWidgetManager;
import android.content.ComponentName;
import android.widget.EditText;
import android.widget.RemoteViews;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    EditText mEditText;
      
    // creating a new note
    StickyNote note = new StickyNote();
  
    @Override
    protected void
    onCreate(android.os.Bundle savedInstanceState) {
  
        setContentView(R.layout.activity_main);
        super.onCreate(savedInstanceState);
  
        // getting the reference of the EditText
        mEditText = findViewById(R.id.editText);
          
        // retrieve the text from the saved file in
        // memory(if any) and set it to the edittext
        mEditText.setText(note.getStick(this));
    }
  
    // function to update the 
    // Widget(Sticky Note) every time
    // user saves the note
    public void updateWidget() {
        // the AppWidgetManager helps
        // us to manage all the
        // widgets from this app
        AppWidgetManager appWidgetManager = AppWidgetManager.getInstance(this);
          
        // the RemoteViews class allows us to inflate a
        // layout resource file hierarchy and provides some
        // basic operations for modifying the content of the
        // inflated hierarchy
        RemoteViews remoteViews = new RemoteViews(this.getPackageName(), R.layout.new_app_widget);
          
        // by using ComponentName class we can get specific
        // application component and to identify the
        // component we pass the package name and the class
        // name inside of that package
        ComponentName thisWidget = new ComponentName(this, AppWidget.class);
  
        // update the text of the textview of the widget
        remoteViews.setTextViewText(R.id.appwidget_text, mEditText.getText().toString());
          
        // finally us the AppWidgetManager instance to
        // update all the widgets
        appWidgetManager.updateAppWidget(thisWidget, remoteViews);
    }
  
    // this function saves 
    // the current status 
    // of the EditText
    public void saveButton(android.view.View v) {
        // update the content of file stored in the memory
        note.setStick(mEditText.getText().toString(), this);
        updateWidget();
        Toast.makeText(this, "Updated Successfully!!", Toast.LENGTH_SHORT).show();
    }
}

Paso 7: archivo de diseño de nuestro Widget

Dado que solo queremos que nuestro widget contenga el texto, solo agregamos TextView en el archivo de recursos de diseño que se actualizará de vez en cuando. 

XML

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/widgetLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FDD835"
    android:orientation="horizontal"
    android:padding="8dp">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
          
        <TextView
            android:id="@+id/appwidget_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text"
            android:textColor="#ffffff"
            android:textSize="20sp"
            tools:layout_editor_absoluteX="1dp"
            tools:layout_editor_absoluteY="1dp" />
          
    </LinearLayout>
      
</FrameLayout>

Producción:

Enlace del proyecto Github

Para todos los archivos de recursos dibujables, consulte el siguiente giro de GitHub: https://github.com/raghavtilak/StickyNotes

Alcance futuro

  1. Puede agregar funciones para cambiar la apariencia del Widget, como el estilo del texto, el color de fondo, la transparencia, el ancho, etc.
  2. Puede realizar algunas mejoras en la interfaz de usuario.
  3. Puede crear varias notas adhesivas guardando los datos en la base de datos y obteniendo lo mismo.
  4. Además, puede intentar agregar algunas vistas diferentes al widget.

Publicación traducida automáticamente

Artículo escrito por raghav14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *