Maquetando nuestros Activities

Clase 24 de 96 • Curso Definitivo de Android 2016

Clase anteriorSiguiente clase

Resumen

Vamos a maquetar nuestra primera actividad, la pantalla de login

Recuerda:

Para soportar las diferentes densidades de pantalla nuestras imagenes deberían estar densificadas. puedes utilizar un plugin llamado Android Drawable Importer para generar estas diferentes versiones

Siempre que quieras acceder a un recurso en XML debes usar @nombre_del_recurso

Todos los textos deberían estar en values/strings.xml y ser llamados a través de su referencia

Danny Alfonzo Viana Perez

student•

Aquí falto decir que la imagen a importar debería se mayor (en resolucion) al tamano maximo que me generara android studio, para evitar que pixele la imagen, por ejemplo alli la imagen original es de 308x72 y las imagenes que se generaran para xhdpi, xxhdpi y xxxhdpi serán de 410x96, 616x144x y 821x192 respectivamente, osea que abra una perdida en la calidad (esto lo aprendí en el cuso de photoshop de platzi) la imagen original debería ser mayor a 821x192 para que todo vaya bien. Estoy en la correcto?

Uriel Ramírez

student•

Sin duda Danny. Haz aprendido bien. Aunque tambien si no tenemos otra opción. Ya sabamos cómo escalar más imágenes

Julian Franco

student•

Hasta este punto ya he visto que necesito el curso de photoshop y como cinco más. Ya tengo en lista el curso completo de java, creo que sí es necesario. De todos modos, con el básico vamos agarrados de la mano de Anahí. Gracias por tu excelente labor

Uriel Ramírez

student•

Aquí les dejo el logo de manera directa :)

Jhan Conde Conde

student•

Hola! Disculpa quisiera hacer mi propio logo tal cual como el de "Platzigram" porque me gusto mucho, no se si puedas ayudarme diciéndome que tipo de fuente y en que programa lo hiciste, soy novato en diseño y quisiera aprender de ello también y empezar por esto, espero puedas ayudarme Gracias de antemano, saludos. :)

Uriel Ramírez

student•

Mira, este curso es perfecto para hacer tu logo: https://platzi.com/clases/marca-visual/

Prácticamente es Illustrator/Photoshop

javier alarcon

student•

Eres la mejor maestra que he visto :)

Ricardo Arellano Morales

student•

Control + Tab cambiar entre archivos y herramientas.

Carlos Jesús Fernández Salazar

student•

Me gustó este aporte, ¡Gracias!

Marco Mesén Campos

student•

@anncode me gusta mucho el curso, pero quisiera saber si han pensando en actualizarlo?

Gabriel Glusgold

student•

si, porque ya que comenzamos, estaría bueno algo para Android Studio 4, donde por ejemplo he visto que ya han cambiado varios conceptos como los de compatibilidad ahora dentro de Jetpack androidx. Tambien otras cosas que me estoy enterando es el reemplazo de findViewById por view binding. Me gustaría saber si en caso de seguir este curso, y actualizo a AS 4, puedo luego actualizarlo facilmente

Horacio Torres Torres

student•

Duda sobre el layout_weight, tenemos 2 layouts uno con 0.6 y otro con 0.4, por qué el de 0.6 es el pequeño y el de 0.4 es el grande, mi lógica me dice que deberia funcionar al reves, esto es, el que tiene 0.6 el grande y el que tiene 0.4 el pequeño, agradeceré si pudieran aclarar esto.

Uriel Ramírez

student•

Estuve leyendo más al respecto y la respuesta es por el layout_width.

Si layout_width lo dejamos con match_parent, quiere decir que va a ocupar todo el espacio que pueda. Entonces por tener un peso de 0.4 va a ocupar el espacio restante, quiere decir 0.6. Esto tiene una gran ventaja ya que nunca se va a cortar tu contenido, es por eso que lo usamos, ya que aseguramos que ningún widget se va a cortar.

Para que tenga el comportamiento lógico que dices (que es muy correcto), solo falta dejar el layout_width = "0"dp y efectivamente 0.6 ocupará mas espacio, pero puede que alguno de los 2 widgets se corte.

Resumiendo: En este caso, primero estamos verificando que el widget ocupe todo lo que necesite (sin contar el contenido) para dejar el espacio restante para el otro elemento ( y viceversa).

¿Donde usar uno u otro?, ambos son correctos. A mi me ha resultado usar

android:layout_width="0dp" Cuando el texto es muy pequeño, por ejemplo

    <LinearLayout

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:weightSum="">

    <Button

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="0.2"

        android:text="1" />

    <Button

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="0.6"

        android:text="2" />

    <Button

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="0.2"

        android:text="3" />

    </LinearLayout>

Aquí el Button con el texto 2 efectivamente es el mas grande (ocupa 0.6) y los otros 2 ocupan un 0.2 cada uno.

Horacio Torres Torres

student•

Excelente, muchas gracias Uriel.

Pablo David Vallejos

student•

las dependencia a 3/1/2020 cambiaron su artifact (artefacto) lo dice la documentacion oficial de ‘com.android …’ a 'androidx.' ademas no se usa mas la palabra compile se usa implementation y la dependencia para poder serguir con la maquetacion es

implementation 'androidx.coordinatorlayout:coordinatorlayout'

a continuacion puse la maquetacion con las etiquetas 2020.

CARLOS Garcia Sandoval

student•

Es frustrante que trabajemos con la version 3.4.1 y el curso va casi 3 a;os antes, seguir el curso se hace complicado ya las librerias no son compatibles y da multiples errores ya que muchas cosas ya no se usan. por favor NO actualizar el curso, deben hacerlo de nuevo

Freddy Vega

Team Platzi•

Tienes razón Carlos. Ya entramos en proceso de renovar este curso.

Dario Steven Henao Salazar

student•

los que están en la versión de android studio 3.1 la palabra compile fue reemplazada por implementation, al importar el design se hace de la siguiente forma:
implementation ‘com.android.support:design:27.1.1’

Camilo Acevedo Escalante

student•

ya esta en la versión 28.0.0-alpha3

Saludos!

Edwin Enrique Jorge Arroyo

student•

Y ya no hace falta implementarla!

Jhonatan David Vanegas

student•

Tengo una duda @Ann Code, hay forma de crear el CoordinatorLayout, sin copiarlo de otro lado?, como escribiéndolo y lo auto complete con todas esas propiedades.

Oscar Stevens Cuartas Bejarano

student•

Por que cuando creo un nuevo proyecto como @anncode lo hace el layout que me cubre todo es un tal:
android.support.constraint.ConstraintLayout

y no el realtive que ella dice?? tengo mal mi AS?

Ann Code

teacher•

No está mal tu AS 😃

Lo que pasa es que usamos versiones diferentes, puedes cambiarlo sin problema y usar el que más te guste

Alexis Dueñas Aviña

student•

Actualización en la 2da mitad del 2018.

“console” esta obsoleto, fue sustituido por “implementation”

Alexis Dueñas Aviña

student•

Por si no soy solo yo, el CoordinatorLayout me provoca un error en el Preview en el archivo activity_login.xml lo regrese al android.support.constraint.ConstraintLayout y ya se pudo Previsualizar. Hasta en el momento no he tenido ninguno problema al utilizar LinearLayout y RelativeLayout.

Franco David Oliva

student•

Me encanta! Explica todo tan tranquila que se super entiende!

Gael Treviño Prieto

student•

Suerte!!1

Rene Del Carpio

student•

Gracias Anahí, tu clase es muy buena!!! Uno aprende de una forma fácil

DAVID PAUL PORRAS CORDOVA

student•

Para agregar dependencias de soporte en Android, para los que esten usando Windowa, bastara con presionar: CTRL+ALT+SHIFT+S y luego seleccionar segun la imagen adjunta.

Afu Tse

student•

Genio!!!

Pablo David Vallejos

student•

la maquetacion al dia 3/1/2020

<?xml version="1.0" encoding="utf-8"?>
<!--<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  -->

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity"
    android:background="@color/colorPrimary">
    <!--LinearLayout-->
    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="1">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6">
            <ImageView
                android:id="@+id/logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@drawable/logo">
            </ImageView>
        </RelativeLayout>
        <!--LinearLayout-->
        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:orientation="vertical"
            >
            <com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </com.google.android.material.textfield.TextInputLayout>
            
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_username">
            </com.google.android.material.textfield.TextInputEditText>

        </androidx.appcompat.widget.LinearLayoutCompat>
    </androidx.appcompat.widget.LinearLayoutCompat>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Carlo Rosales

student•

Hola, donde puedo obtener los archivos de esta lección (pantallas, logo y otros archivos necesarios para seguir este desarrollo)?

Diego Forero

Team Platzi•

Hola, en esta clase https://platzi.com/clases/1049-android/5097-descarga-el-material-del-curso9769/ estan los enlaces para que descargues todo lo que se usa en el curso.

Luis Alberto Bardales Mendo

student•

Solamente hay CoordinatorLayout

Gael Treviño Prieto

student•

me aparece que no puedo instalar el Android Drawable Import!! Ayuda!!!...

Uriel Ramírez

student•

¿Que error te marca?

Gael Treviño Prieto

student•

https://platzi.com/android/respuestas/me-aparece-que-no-puedo-instalar-el-android-drawable-import-ayuda/

en ese link esta la pregunta y esta una foto del error que me aparece!!
Un saludo!

Pablo Etcheverry

student•

En esta parte del código, debido fue necesario que copiara los padding del RelativeLayout para que funcionara el código:

android:paddingBottom="16dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="16dp"