Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

Como crear un TextView en Android

Android TextView Example


Hola compañeros seguiremos con este pequeño curso de desarrollo en Android Studio.

Ahora iniciaremos con pequeños ejemplos de los widgets y un poco de programación así que es recomendable tener principios básicos de la programación en Java para poder continuar.
Comenzaremos utilizando el widget de TextView que es un control que servirá para mostrar etiquetas o contenidos en nuestra actividad para este ejemplo utilizaremos varios elementos incluidos Layouts.
Android Studio - TextView

Iniciamos creando un nuevo proyecto en Android Studio. ( Crear Proyecto )

Crear Proyecto Android TextView Example

Nos aparecerá la ventana donde colocaremos el nombre de nuestra aplicación y como opción podemos seleccionar la ruta donde se guardara nuestro proyecto.
Teniendo listo esto escribiremos un nombre ejemplos: EjTextView, PracticaTextView, etc.
Android Studio - TextView


Ahora presionaremos continuar, (Next).
Nos mostrara una ventana donde podremos seleccionar el tipo de plataformas donde se ejecutara nuestra aplicación.
Android Studio - TextView

Teniendo lista nuestra selección podremos darle continuar, (Next).
En la siguiente ventana veremos los tipos de actividades que tenemos disponibles para seleccionar en este caso seleccionaremos una actividad en blanco (Blank Activity) para nuestro ejemplo.
Android Studio - TextView
Le daremos en continuar, (Next).
Y la ultima ventana nos mostrara varias opciones en las cuales podemos cambiar el nombre con el que aparecerá nuestra actividad principal. O simplemente podemos darle finalizar (Finish).
Android Studio - TextView
Ahora esperaremos a que nuestro proyecto se genere.
Si podemos notar nos aparecerán un RelativeLayout el cual podemos cambiarlo por cualquiera de los otros Layouts que tiene nuestra paleta de herramientas. También observamos un TextView que vienen por default al iniciar nuestro proyecto con la famosa frase "Hello World!".
Android Studio - TextView
Ahora comenzaremos con la explicación de nuestra herramienta teniendo claro todo lo anterior a medida que avancemos resumiremos estos pasos. Podemos encontrar los TextView.
Android Studio - TextView
Lo que haremos ahora sera arrastrar un control de cada uno a la pantalla de nuestra actividad. Cada uno de los TextView que estan habilitados. Plain TextView, Large TextView, Medium TextView ySmall TextView.
Android Studio - TextView

TextView Layout Example


<?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" android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="New Text"
 android:id="@+id/textView"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="53dp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:text="Large Text"
 android:id="@+id/textView2"
 android:layout_below="@+id/textView"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="47dp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textAppearance="?android:attr/textAppearanceMedium"
 android:text="Medium Text"
 android:id="@+id/textView3"
 android:layout_below="@+id/textView2"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="42dp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textAppearance="?android:attr/textAppearanceSmall"
 android:text="Small Text"
 android:id="@+id/textView4"
 android:layout_below="@+id/textView3"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="61dp" />
</RelativeLayout>
De esta forma quedan ordenados o como a ustedes les parezca bien.
Ahora teniendo cada uno de los TextView en pantalla vamos a programar en la clase principal.
La cual la encontraremos en la sección Project donde están las clases y las actividades.


Aquí se mostrara la clase en dado caso que hayamos cambiado el nombre al inicio en la creación de nuestro proyecto aparecerá con ese nombre, dándole doble click nos abrirá la clase y nos mostrara el código que esta tiene por default. Oh simplemente podemos darle click a la pestaña ya que esta se abre al iniciar el proyecto junto con la actividad. 

El código es el siguiente. 

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement if (id == R.id.action_settings) {
 return true; }
 return super.onOptionsItemSelected(item); }
}

Para iniciar con la programación tenemos que saber los ID de nuestros controles TextView para ello los buscaremos en la ventana 
Android Studio - TextView
Teniendo esto comenzamos a programar.
Primero vamos a importar la librería del control que vamos a utilizar. Podemos evitar este paso saltando al siguiente paso y cuando los controles se marquen en rojo presionar Alt + Enter y se importara automáticamente la librería.

import android.widget.TextView;

Como siguiente paso tenemos que declarar las variables objetos de nuestros controles esto se hará dependiendo del tipo de control que estemos usando en este caso es un TextView.

TextView txtNormal = (TextView) findViewById(R.id.textView);
TextView txtLarge = (TextView) findViewById(R.id.textView3);
TextView txtMedium = (TextView) findViewById(R.id.textView4);
TextView txtSmall = (TextView) findViewById(R.id.textView5);

Habiendo declarado las variables vamos a asignarles una pequeña etiqueta.

txtNormal.setText("Hola mundo! En tamaño normal");
txtLarge.setText("Hola mundo! En tamaño grande");
txtMedium.setText("Hola mundo! En tamaño mediano");
txtSmall.setText("Hola mundo! En tamaño pequeño");

Utilizamos la propiedad setText para asignarle el nombre pero podemos hacerlo en las propiedades del control de forma visual. Solo debemos seleccionar el control al que queremos cambiarle la etiqueta y nos aparecerán las propiedades.
Android Studio - TextView

Escribimos lo que deseamos que aparezca. Hay otra forma de hacerlo simplemente dándole doble click al control nos aparecerá una pequeña ventana donde podremos cambiar el ID y el TEXT del control.
Android Studio - TextView
Pero si lo hacemos con el código nos quedara de esta forma.

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    TextView txtNormal = (TextView) findViewById(R.id.textView);
    TextView txtLarge = (TextView) findViewById(R.id.textView3);
    TextView txtMedium = (TextView) findViewById(R.id.textView4);
    TextView txtSmall = (TextView) findViewById(R.id.textView5);

    txtNormal.setText("Hola mundo! En tamaño normal");
    txtLarge.setText("Hola mundo! En tamaño grande");
    txtMedium.setText("Hola mundo! En tamaño mediano");
    txtSmall.setText("Hola mundo! En tamaño pequeño");

}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}


Crear Emulador AVD


Bueno teniendo esto escrito en nuestra clase solo habrá que ejecutar nuestra aplicación. Y veremos el resultado en el emulador. ( Crear Emulador )
Tendremos listo nuestro primer proyecto utilizando Widgets TextView.

Bueno eso ha sido todo espero el contenido haya sido de su agrado y este claro, sigue mi blog para estar al tanto del contenido que voy subiendo y compártelo con tus amigos para promover el conocimiento me ayudara a seguir creciendo y continuar publicando mas información. Gracias por tu tiempo. Si tienes alguna duda házmelo saber en los comentarios.

Android Studio - Curso Español

Android Studio - Curso Español

No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner