Maquetando nuestros Activities

Clase 24 de 96 • Curso Definitivo de Android 2016

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"

<?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>

Maquetando nuestros Activities

Bienvenido al curso

¡Vamos a renovar este curso!

Bienvenida

Descarga el material del curso

Introducción a Android

Estado actual del desarrollo en Android

Requerimientos y Herramientas para el Desarrollo en Android

Creando nuestro entorno de desarrollo

Inicia a programar para Android: ¿Qué necesito?

Arquitectura de una aplicación en Android

Android Studio

Android SDK Manager

Hola Mundo

Creando un emulador

Básicos de Android

Repaso rápido de Java (POJOS)

Android es MVC por defecto

XML vs. Editor Gráfico

Diferencia entre LinearLayout y Relative Layout

Widgets Básicos en Android

Widgets Básicos desde Java

Material Design

Creando Platzigram

Configurando nuestro tema Material

Widgets de Material Design

Maquetando nuestras vistas del proyecto

¿Qué es un Activity?

Maquetando nuestros Activities

Internacionalización de Textos

Rised button

EditText con Material Design

Terminando el Home de nuestra aplicación

Toolbar

Intents

CardView

Analizando nuestra vistas

Maquetando nuestro CardViewd

Introducción a Fragments

Creando nuestros fragments

Fragments en nuestro BotttomBar

¿Cómo funciona un RecyclerView?

Implemententando RecyclerView

Picasso

Analizando nuestra vista

Collapsing Toolbar Layout, AppBarLayout

Onclick Listener en RecyclerView

Implementando la vista de perfil

Comportamientos dependientes en Material Design

Transiciones en Android.

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Continuando con Platzigram

Bienvenida a la segunda parte del curso

Material del curso

Arquitectura en Android

¿Por qué se debe implementar una Arquitectura en Android?

Principios SOLID en Android

¿Qué es y por qué implementar MVP en Android?

MVP en Android un ejemplo sencillo

¿Qué es la arquitectura limpia? Clean Architecture

Platzigram con Clean Architecture creando la entidad Login

Integrando un Presenter e Interactor a Platzigram

Creando un Repository en Platzigram

Accediendo al Hardware en Android

Accediendo a la cámara en Android

Creando un layout para mostrar una foto en Android

Accediendo y mostrando fotos de la cámara en Android

Configuración de Firebase en Android

¿Qué es Firebase para Android?

Creando un proyecto en la consola de Firebase

Gradle en Android

¿Qué es Android Gradle?

Archivos de configuración Gradle en Android integración con Firebase

Firebase Authentication en Android

Cómo funciona Firebase Authentication en Android

Firebase Authentication Correo y Contraseña en Platzigram