Android Basico

de: hmvcode

Dificultad:

Principiante

Plataforma:

Android

Categoria:

Software

Favoritos:

favorite4

reportReportar

Descripción:

Aprende a usar las diferentes herramientas de Android Studio: Crea cambios de layout por botón.


Tags:

Android
Movil
Programacion
App

Paso 1:

!Hola, el día de hoy empezaremos con un pequeño proyecto para las personas que están interesadas en crear APPs, usaremos Android Studio para crear una pequeña aplicación donde podrás cambiar de actividad mediante un botón.

~ Empezaremos creando nuestro proyecto, al cual podemos poner el nombre que el programador guste:

Para esta aplicación ocuparemos la API 21: Android 5.0 (Lollipop) con un Empty Activity y después Finalizamos para crear nuestro Proyecto.

De este modo se vera nuestro proyecto de Android Studio, algunos programadores tendrán duda de como obtener el fondo obscuro de Android, al final del proyecto dejaremos unos breves pasos para obtenerlo.

En nuestro proyecto podemos observar de lado izquierdo diferentes carpetas:

App: Se encuentra todo sobre nuestra aplicacion.

Manifests: Un archivo bastante importante, en el se crean los permisos, cambian configuraciones de nuestra aplicacion.

Java: Se ubican todo los archivos java de la aplicacion, en el podemos programar las funciones de toda nuestra App.

Res: Carpeta donde se encuentra el contenido visual:

~Drawable : Carpeta de Imágenes.

~Layout : Carpeta donde se encuentran todos nuestros XML del proyecto (XML: parte visual del usuario).

~ Values : Carpeta donde encontramos los colores, dimensiones, textos y estilos de nuestra aplicacion.

Gradle Scripts: En el podemos hacer modificaciones de version de nuestra aplicacion, configuraciones y añadir dependencias de diseño, mapas y mucho mas.


Paso 2:

Ya que conocimos un poco nuestro proyecto, es momento de que diseñemos nuestro layout principal, en nuestra carpeta "res" - "layout" se encuentra una archivo XML llamado (activity_main) abriremos ese archivo y nos toparemos con los siguiente:

Si podemos observar en la parte de abajo, se muestran dos opciones "Design" y "Text", en este momento nos encontramos en la parte de texto, donde se muestra el código de la layout y sus componentes.

La parte de "Design" podemos ver toda la parte gráfica de nuestra app.

En este momento ocuparemos mas la parte de un programador, lo haremos mediante la opción de texto, donde agregaremos todo manualmente, el código que yo manejare es un simple ejemplo, recuerden usar la imaginación para darle un poco mas de vida a su proyecto.

De esta manera quedaría mi ventana, ocupando un Button y un TextView, una vez diseñada nuestra ventana, nos moveremos a crear un layout nuevo, el cual sera la segunda pantalla de nuestra app.

~ Nos vamos a dirigir a las carpetas de nuestro lado izquierdo y seleccionaremos con click derecho la carpeta "layout", después seleccionaremos la opción "new" seguido de "Layout resource file" seleccionamos el nombre de nuestro layout y finalizamos.

Procederemos a editar nuestro nuevo layout, recuerde que pueden seguir mi simple ejemplo o hacer volar su imaginación, para esta nueva actividad solo bastara con un simple texto para nosotros.

Código:

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

    <TextView
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nuestra primera ventana"
        android:layout_marginTop="154dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:onClick="onClickEntrar"
        android:text="Cambiar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>
                                    
                                
                                    
                                            <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Segunda ventana"
        android:id="@+id/textView"
        android:layout_gravity="center_vertical"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="210dp" />
</RelativeLayout>
                                    
                                

Paso 3:

Tenemos nuestras dos actividades, es momento de movernos a las "Clases de java" donde no solo basta con diseñar la parte visual de nuestra app, si no también necesitamos darle vida.

Regresaremos a nuestra primera layout "activity_main" y nos ubicaremos en la parte del botón, en nuestro texto agregaremos el siguiente párrafo de código:

android:onClick="onClickEntrar

Una vez creado nuestro pequeño párrafo, nos moveremos a nuestra clase java, que se encuentra en la carpeta "java" - "nombre del paquete de nuestro proyecto" el archivo que tenemos en nuestra carpeta se llama "MainActivity" procederemos a abrirlo y nos aparecerá lo siguiente:

Cada actividad esta ligada a una clase, en este caso podemos observar que "activity_main" esta ligada a "MainActivity" ya que en nuestro código muestra el contenido de (R.layout.activity_main).

Para poder darle vida a nuestra aplicacion necesitamos crear una nueva clase en nuestra carpeta java - nombre del paquete del proyecto, haremos lo mismo que crear una nueva layout, en este caso usaremos una clase:

Si recordamos hace un momento hablamos de que toda actividad necesita una clase, nosotros tenemos dos actividades "activity_main" y "segunda_actividad" , nos falta la clase de la segunda actividad, una vez creada la siguiente clase, necesitaremos añadir un pequeño código (Cuando creamos una nueva clase, esto es necesario con cada una):


Paso 4:

Vamos con la parte final del proyecto, regresaremos a nuestra primera clase "MainActivity" afuera de nuestro onCreate, escribiremos el siguiente código para poder hacer el cambio de layout:

public void onClickEntrar(View view){
Intent intent = new Intent(this , segundaActividad.class);
startActivity(intent);
}

Así creamos un enlace limpio y rápido para nuestro cambio de layout, antes de poder ejecutar nuestra aplicacion, comentamos sobre una carpeta llamada "Manifests" donde otorgábamos permisos y configuraciones de nuestra app.

~Ingresaremos al archivo "AndroidManifest" y fuera de la etiqueta:

<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

Crearemos una nueva para nuestra segunda clase:

<activity android:name=".segundaActividad"/>

Teniendo agregada la segunda clase, podemos arrancar nuestra !aplicacion básica!. Recordar que siempre que querramos hacer una nueva clase que este ligada a una actividad, necesitamos agregarla a nuestro manifest.

!Hasta aqui el primer proyecto de android studio!

Impartido por Jonathan Vazquez Nava

¿Tienes dudas o sugerencias ? !No olvides contactarnos en nuestras redes sociales

fb/HMVcode

[email protected]

correo: [email protected]

!Pasa buen dia desarrollador!

Código:

                                    
                                            <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.acme.primerproyecto">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        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>

        <activity android:name=".segundaActividad"/>
    </application>

</manifest>
                                    
                                
                                    
                                            package com.acme.primerproyecto;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {


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

    public void onClickEntrar(View view){
        Intent intent = new Intent(this , segundaActividad.class);
        startActivity(intent);
    }

}
                                    
                                
                                    
                                            package com.acme.primerproyecto;


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

/**
 * Created by jonat on 08/07/2016.
 */
public class segundaActividad extends AppCompatActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.segunda_actividad);
    }
}
                                    
                                

Paso 5:

Para poder cambiar el color de nuestro "Android Studio" solo necesitamos situarnos en el icono de : SDK Manager

En seguida se nos abrirá una nueva ventana con diferentes opciones de lado izquierdo, seleccionaremos el apartado de "Appearance & Behavior" seguido de "Appearance" , como primera opción tendremos el cambio de tema, seleccionaremos el tema "Darcula" el cual nos dará una visión mas fría de nuestro "Android Studio"


Comentarios:

  • Mrhofflich Mrhofflich

    Está súper, felicidades

    08/07/2016

  • Mrhofflich Mrhofflich

    ¿Tendrán algún video con el resultado funcionando?

    08/07/2016

  • hmvcode hmvcode

    Por el momento no tenemos el vídeo, en el próximo proyecto ya subiremos todos los resultados.

    09/07/2016

mode_edit