Los emojis ciertamente hacen que la aplicación sea más interesante y divertida para interactuar. En este artículo, aprendamos cómo agregar emojis en nuestra propia aplicación de Android creando una aplicación simple que parece una aplicación de mensajería.
¿Por qué necesitamos emojis?
- Hace que la aplicación se vea más fácil de usar y divertida.
- Si las características de la aplicación se utilizan para generar comunicación, los emojis ciertamente ayudan a expresar los sentimientos de un usuario.
- Se puede usar para pedir comentarios sobre una aplicación al usuario.
Acercarse
Paso 1: crea un nuevo proyecto de Android Studio
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: agregue la siguiente dependencia a build.gradle(:app)
Para usar emojis en la aplicación, agregue su dependencia al archivo build.gradle(:app) . Agregue cualquiera de las tres dependencias:
implementación ‘com.vanniktech:emoji-google:0.6.0’
implementación ‘com.vanniktech:emoji-ios:0.6.0’
implementación ‘com.vanniktech:emoji-twitter:0.6.0’
Cada dependencia significa el conjunto de emoji que estamos importando. Es decir, ya sea desde ios , o Google , o Twitter .
Paso 3: trabajar con el archivo activity_main.xml
En este ejemplo, haga que la aplicación parezca una aplicación de chat. Para ello, utilice dos botones . Uno para agregar emojis y otro para enviar el mensaje. Agregue también un EditText donde el usuario escribirá el mensaje. Así es como se ve el archivo activity_main.xml :
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rootView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#43a047" android:padding="8dp" tools:context=".MainActivity"> <LinearLayout android:id="@+id/llTextViews" android:layout_width="match_parent" android:layout_height="0dp" android:orientation="vertical" app:layout_constraintBottom_toTopOf="@id/etEmoji" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"> </LinearLayout> <com.vanniktech.emoji.EmojiEditText android:id="@+id/etEmoji" android:layout_width="0dp" android:layout_height="wrap_content" android:hint="Say something to GeeksForGeeks..." app:emojiSize="30sp" android:textColor="@android:color/white" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@id/btnEmojis" app:layout_constraintStart_toStartOf="parent"/> <Button android:id="@+id/btnEmojis" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Emojis" app:layout_constraintEnd_toStartOf="@id/btnSend" app:layout_constraintTop_toTopOf="@id/etEmoji" app:layout_constraintBottom_toBottomOf="@id/etEmoji"/> <Button android:id="@+id/btnSend" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@id/etEmoji" app:layout_constraintBottom_toBottomOf="@id/etEmoji"/> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 4: Cree un archivo de diseño llamado text_view_emoji.xml
Cree un diseño para definir cómo debe verse el emoji. Su objetivo principal es definir el tamaño del emoji. También mostrará los mensajes que enviamos. Cree un nuevo diseño haciendo clic en: aplicación -> res -> diseño (clic derecho) -> Nuevo -> Archivo de recursos de diseño.
Nombre esto como text_view_emoji . Así es como se ve text_view_emoji.xml :
text_view_emoji.xml
<?xml version="1.0" encoding="utf-8"?> <com.vanniktech.emoji.EmojiTextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_marginBottom="16dp" app:emojiSize="30sp" android:textSize="30sp" android:textColor="@android:color/white"/>
Paso 5: crea una clase llamada EmojiApplication
Según el conjunto de emoji que el usuario quiera tener, configure la provisión correspondiente aquí. Al configurar EmojiManager aquí, asegúrese de que el usuario pueda usarlos en cualquier parte de la aplicación. Para crear una nueva clase, haga clic en: Archivo -> Nuevo -> Clase Java .
Nombre esto como EmojiApplication . Así es como se ve EmojiApplication.java :
EmojiApplication.java
import android.app.Application; import com.vanniktech.emoji.EmojiManager; import com.vanniktech.emoji.google.GoogleEmojiProvider; public class EmojiApplication extends Application { @Override public void onCreate() { super.onCreate(); EmojiManager.install(new GoogleEmojiProvider()); } }
Nota: No olvide agregar esta nueva clase en el archivo AndroidManifest.xml . Así es como se ve AndroidManifest.xml después de agregar:
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.emojigfg"> <application android:name=".EmojiApplication" 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/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
Paso 6: trabajar con el archivo MainActivity.java
Aquí, escriba una función para inflar EmojiTextView . El LayoutInfalter se usa para convertir una vista o un grupo de vistas escrito en XML en una vista en Java que se puede usar en el código. Además, establezca la función aquí. Después de todos estos cambios, así es como luce MainActivity.java :
MainActivity.java
import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.LinearLayout; import com.vanniktech.emoji.EmojiPopup; import com.vanniktech.emoji.EmojiTextView; public class MainActivity extends AppCompatActivity { EditText etEmoji; LinearLayout llTextViews; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); etEmoji=findViewById(R.id.etEmoji); llTextViews=findViewById(R.id.llTextViews); final EmojiPopup popup = EmojiPopup.Builder .fromRootView(findViewById(R.id.rootView)).build(etEmoji); Button btnEmojis=findViewById(R.id.btnEmojis); btnEmojis.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { popup.toggle(); } }); Button btnSend=findViewById(R.id.btnSend); btnSend.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { llTextViews.addView(getEmojiTextView()); etEmoji.getText().clear(); } }); } private EmojiTextView getEmojiTextView() { EmojiTextView tvEmoji = (EmojiTextView) LayoutInflater .from(getApplicationContext()) .inflate(R.layout.text_view_emoji, llTextViews,false); tvEmoji.setText(etEmoji.getText().toString()); return tvEmoji; } }
Salida: ejecutar en el emulador
Publicación traducida automáticamente
Artículo escrito por agarwalkeshav8399 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA