¿Cómo crear texto de marquesina en Android?

En este artículo, vamos a crear Marquee Text en Android Studio . La marquesina es un fragmento de texto que se desplaza y se muestra horizontal o verticalmente. Se utiliza para mostrar algún aviso o titular importante. Hace que la interfaz de usuario de la aplicación sea mucho más atractiva. Tenga en cuenta que vamos a utilizar Java como lenguaje de programación. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo.

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 debe seleccionar Java como lenguaje de programación. 

Paso 2: 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. TextView se usa aquí para agregar el texto que queremos mostrar en la pantalla. Aquí hemos usado android:ellipsize=”marquee” para agregar una marquesina a nuestro texto y android:singleLine=”true” para que nuestro texto se muestre solo en una línea. Además, hemos usado android:marqueeRepeatLimit=”marquee_forever” para que la marquesina se repita infinitamente y un atributo más que he usado aquí es android:scrollHorizontally=”true” para que el texto se desplace horizontalmente.        

<?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">
      
    <!--
    Textview is used here to add the text which we want to display on the screen.Here important attributes are:
    i)   android:singleLine="true"... so that our text will show only in one line
    ii)  android:ellipsize="marquee"... to add marquee to our text
    iii) android:marqueeRepeatLimit="marquee_forever"...so that marquee will repeat infinitely
    iv)  android:scrollHorizontally="true"... so that text will scroll horizontally
    -->
    <TextView
        android:id="@+id/marqueeText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25sp"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:padding="10dp"
        android:scrollHorizontally="true"
        android:singleLine="true"
        android:text="Hello guys !! Welcome to GeeksforGeeks Portal !!"
        android:textSize="20sp"
        android:textStyle="bold" />
      
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity.java

Vaya a Clase MainActivity.java . Hemos llamado al método setSelected() y hemos pasado el valor booleano como verdadero para que nuestra marquesina comience. MainActivity.java

import android.os.Bundle;
import android.widget.TextView;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
      
    TextView txtMarquee;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // casting of textview
        txtMarquee = (TextView) findViewById(R.id.marqueeText);
          
        // Now we will call setSelected() method
        // and pass boolean value as true
        txtMarquee.setSelected(true);
    }
}

Paso 4: trabajar con el archivo colors.xml

Vaya a la aplicación > res > valores > colores.xml. Puede agregar tantos colores como necesite para su aplicación. Solo tienes que dar un código de color y poner el nombre del color. En esta aplicación, hemos mantenido el color de la barra de la aplicación en verde con el código de color «#0F9D58». 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="Green">#0F9D58</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

Paso 5: Trabajando con themes.xml

Vaya a la aplicación > res > valores > themes.xml y elija el tema de su elección. Hemos usado parent=”Theme.MaterialComponents.DayNight.DarkActionBar” que es el tema DayNight con ActionBar oscuro . Puede agregar parent=”Theme.AppCompat.Light.DarkActionBar” para obtener un tema claro con barra de acción oscura y parent=”Theme.AppCompat.Light.DarkActionBar” para un tema claro con barra de acción oscura.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MarqueeText"
        parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/Green</item>
        <item name="colorPrimaryVariant">@color/Green</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Paso 6: Trabajando con strings.xml

Vaya a la aplicación > res > valores > strings.xml. Aquí puede agregar un título de barra de aplicaciones . Hemos configurado “GFG | MarqueeText” como título.

<resources>
    <string name="app_name">GFG | MarqueeText</string>
</resources>

Producción: