LinearLayout: Organizacion lineal

Para los que quieran los colores:

    <color name="colorPrimary">#8BC34A</color>
    <color name="colorPrimaryDark">#689F38</color>
    <color name="colorAccent">#085494</color>

    <color name="primary_light">#DCEDC8</color>
    <color name="primary_text">#212121</color>
    <color name="secondary_text">#757575</color>
    <color name="icons">#212121</color>
    <color name="divider">#BDBDBD</color>

en las nuevas versiones de android para cambiar el color de un boton hay que ponerlo así

"boton"
android:backgroundTint="@color/colorPrimary"

"vector"
android:drawableTint="@color/lock"

el color del candado lo cree en colors.xml

LinearLayout
Alinea los elementos de manera secuencial según su orientación, no se recomienda utilizar este tipo de layout si se va a trabajar con elementos muy grandes; también añadir que dentro de un LinearLayout pueden convivir otros LinearLayout añadidos. Existen 2 posibles orientaciones:
OrientationVertical: Los elementos se alinean de arriba hacia abajo.
OrientationHorizontal: Los elementos se alinean de derecha a izquierda

Drawable-mdpi: Recursos para pantallas de densidad media (mdpi) (~ 160dpi). 48x48 (línea base 1.0x) para densidad media (mdpi)
Drawable-hdpi: Recursos para pantallas de alta densidad (hdpi) (~ 240 ppp). 72x72 (1.5x) para alta densidad (hdpi)
Drawable-xhdpi: Recursos para pantallas de densidad extra alta (xhdpi) (~ 320dpi). 96x96 (2.0x) para densidad extra alta (xhdpi)
Drawable-xxhdpi: Recursos para pantallas de extra-extra-alta-densidad (xxhdpi) (~ 480dpi). 144x144 (3.0x) for extra-extra-high-density (xxhdpi)
Drawable-xxxhdpi: Recursos para usos extra-extra-extra-alta-densidad (xxxhdpi) (~ 640dpi). 192x192 (4.0x) para densidad extra-extra-alta-alta (xxxhdpi)

File->New->VectorAset: En esta ruta encontraremos iconos, formas y figuras propias de Android para el diseño de interfaces. Los íconos se definen como archivos xml que a través de vactores dibujan imágenes. Es importante cambiarles el nombre, y si accedemos a ellos podemos cambiar ciertas características de la figura, como el color y tamaño. Siempre se guardan dentro del directorio drawable.
android:fillColor="@color/icon_color"

<ImageView/>
Con esta etiqueta declaramos imágenes dentro del código xml. Eventualmente para declarar la ruta en la que se encuentra la imagen nos apoyamos de Android:src=”ruta del archivo”.
Dentro de esta etiqueta también debemos de especificar el layout_width y el layout_height de la imagen.

<ImageView
    android:layout_gravity="center"
    android:layout_width="160dp"
    android:layout_height="120dp"
    android:src="@drawable/platzi" />

Density Point: Densidad de puntos(dp), esta es la unidad de medida para el tamaño de las imágenes. Android lo trabaja de una manera porcentual, de forma que es la máquina virtual de Android la que decide el tamaño de dicha imagen según los tamaños de pantalla de cada dispositivo.

Layout_gravity
Este elemento afecta solamente a los elementos en el que se declara. Se utiliza para dar una posición a los elementos dentro de la pantalla.
android:layout_gravity=“center”

layout_margin
Se utiliza para dar un contorno al elemento en el que se declara, por ejemplo se pueden declarar dentro de 2 EditText para separarlos uno del otro.
android:layout_margin=“12dp”

drawablePadding
Se utiliza para separar íconos y texto que yacen dentro de un mismo view. Por ejemplo separar un ícono y el texto dentro de un EditText. Su unidad de medida es dp.
android:drawablePadding="12dp"

drawableStart
Esta línea de código funciona para declarar íconos dentro de un EditText. Recordar que para que esto sea posible, el ícono ya debe de estar dentro del directorio drawable.
android:drawableStart="@drawable/vector_person"

<Space/>
Se utiliza para separar elementos mediante “espacios”, de forma que ocupan un lugar de la pantalla pero sin ser visibles en pantalla.

<Space
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

En este ejemplo de Space, se declararon los siguientes atributos:
Layout_width=”match_parent”  Esto hace que el espacio tome todo el ancho en el espacio que se le asignó
Layout_height=”0dp”  Esto inhabilita el height/altura, para dar continuidad al atributo weight
Layout_weight=”1”  Hace que el elemento que le sigue(puede ser un botón) se vaya hasta el fondo de la pantalla, de esta forma el espacio ocupa casi todo el espacio disponible en pantalla y así separando los EditText y el botón.

<Button/>
Esta etiqueta se utiliza para crear botones, dentro del mismo se pueden declarar los siguientes atributos:

android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:background="@color/colorPrimary"
android:text="@string/button_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"

layout_marginStart=”12dp”  se utilizó para dar un espacio entre el borde izquierdo de la pantalla y el botón.
layout_marginEnd=”12dp”  se utilizó para dar un espacio entre el borde derecho de la pantalla y el botón.
Background  color de fondo, traído desde el archivo colors.xml
Text  texto dentro del botón, importado del archivo Strings.xml
Width y height  tamaño del botón

esto es bastante parecido a el html y css para los desarrolladores web 🤐

LinearLayout distribuye los objetos de manera lineal ya sea vertical (uno debajo de otro) u horizontal (uno a continuacion del otro)
Y es cierto que podemos combinar y tener un linear layout vertical que tenga otros linearlayouts horizontales con lo cual tendriamos cuadriculas. Pero esto resulta poco optimo en una app, sobrecargas el arbol ,recuerden que cuando android lee el xml genera un arbol, y mientras mas anidado, mas complejo se vuelve el arbol y mientras mas viewgroups mas pesado es, con lo cual se hace menos optimo, por lo cual es un layout que debe usarse con cuidado y evitar anidar, es importante saberlo por que con linearlayout tecnicamente puedes diseñar lo que sea y eso hace que la mayoria de los programadores cuando inician lo usen para todo sin notar lo poco optimo que estan haciendolo. de preferencia es aprender a usar los otros como relative layout, que nos permite hacer mas anidando menos y teniendo menos viewgroups, y mejor aun , aprender ConstraintLayout (el papá de los layouts XD) con el cual puedes generar interfaces mucho mas rapido y de una manera mucho mas optima, pero para empezar y solo para empezar esta bien linearlayout, pero deben ser conscientes de sus pros y CONTRAS.

https://github.com/sierisimo/Android-Interfaces-PlatziMusic/tree/01-linear-layout

Así va quedando mi clon de Spotify

Esta clase me fascino! Jamas pensé que podría diseñar una interfaz (":

El marginStart y el marginEnd lo pueden sustituir por un marginHorizontal, lo que le agregará el espacio tanto la izquierda como a la derecha

Esta clase fue magnifica, sinceramente invertí en Platzi por mi carrera como desarrollador Front-End; jamás me vi haciendo una interfaz de android. 💚

Si a alguien más le pasó que el color del vector NO cambiaba en la propiedad de colorFill, así lo solucioné yo:

<EditText
                android:layout_margin="12dp"
                android:drawablePadding="12dp"
                android:drawableStart="@drawable/vector_lock"
                android:drawableTint="@color/colorAccent"
                android:hint="@string/hint_passwod"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></EditText>

Simplemente después de haber escodigo la propiedad de drawableStart, utilicé drawableTint y ahí escoges el color de tu preferencia y listo, funciona.
Aqui la prueba:

En la ultima versión de Android Studio para cambiar el color de un boton se debe utilizar: app:backgroundTint="@color/colorPrimary" . Ya que por defecto es purpura.

El logo de Platzi Music que utiliza el profesor no está en los recursos…

el atributo android:layout_gravity no existe en mi ide . y cuando lo coloco textualmente, no realiza ningun cambio. alguno sabe como solucionarlo?

• La diferencia entre android:layout_gravity=“center” y android:gravity=“center” es que el primero solo afecta al elemento como tal y el segundo afecta a todos los elementos hijos.

AYUDA
Alguien me puede decir porque no tengo los archivos drawable como el del profesor.

Documentación y Referencia de LinearLayout

https://developer.android.com/guide/topics/ui/layout/linear

https://developer.android.com/reference/kotlin/android/widget/LinearLayout?hl=en

que bueno que aprendi CSS xD

Aquí vamos 👏
Es una delicia este curso.

Creo que en las nuevas versiones el vector asset ya no se encuentra en el mismo lugar.

En versiones mas nuevas de android Linearlayout ya no esta por defecto, el por defecto sera androidx.constraintlayout.widget.Constraint Layout, pero si quieres puedes cambiarlo en la parte de arriba del xml.Es por esto que tal vez en clases anteriores no todo te funcionaba igual

Les comparto los apuntes que tome de la Clase, por si a alguien más le son útiles:
Es el layout más común para alinear los elementos en pantalla. A este layout hay que agregarle el atributo orientation="vertical" ó orientation="horizontal"

Los elementos se posicionan uno debajo del otro ocupando el espacio que les corresponde en pantalla.

Los elementos se posicionan uno al lado del otro de izquierda a derecha, con la excepción de los países en los que se lee de derecha a izquierda pues en esos países se invierte el orden en el que se muestran los elementos.

También es posible tener LinearLayout con diferentes orientaciones anidados:

<ImageView
        android:layout_width="140dp"
        android:layout_height="wrap_content"
        android:src="@drawable/logo" />

dp: density points es una medida que se basa en la densidad de pixeles de la pantalla. Esta medida le permite a Android decidir como se va a mostrar un elemento o estirar las imágenes en base a la densidad de pixeles.

🛈 Nota: Android tiene algunos colores predefinidos para evitar tener que definir todo desde cero. Estos se acceden con la sintaxis @android:color/nombreColor. Ejemplo:

android:background="@android:color/white"

android:layout_gravity="start" → La gravedad afecta sólo al elemento que tiene este atributo y no a todo el ViewGroup como ocurre con gravity.

🛈 Nota: aparte de las imágenes Android también permite definir vectores en archivos XML. Para ello hay que hacer click en file > New > Vector Asset.

Android incluye algunos vectores ya definidos, estos se pueden ver en Clip art.

Para agregar uno de estos iconos a un elemento, por ejemplo un <EditText> se usa la siguiente sintaxis:

android:drawableStart="@drawable/vector_person"

android:layout_weight="1 → Establece la prioridad de un elemento cuando se construya el layout.

Genial uso del linear Layout

Vaya adquirí otro curso de Android en otro sitio y bueno… pues no entendí nada de los layout , de echo ha sido un impedimento para aprender dicho lenguaje , ahora con estos vídeos los estoy entendiendo y encima código a código muy buenos si.

Muy intensa esta clase.

Cuando utilizamos Linear Layout tenemos que agregar un elemento llamado Orientation es para definir si el diseño será en portrait o landscape.

Vertical: Los elementos se agregarán uno después de otro tratando de rellenar el espacio que le corresponde en pantalla

Horizontal: Le elementos se agregan de izquierda a derecha.

A través de los DP (density point) podemos definir el tamaños de imágenes.

layout_gravity solo afecta al elemento al cual se le aplica.

Agregar vectores:
File>new>vector Asset>cambiar nombre>clip Art>next >finish.

He estado haciendo algunas apps y al principio me fue dificil saber como hacer que las imágenes tuvieran todos los tamaños hasta que descubrí que dentro de Android Studio se puede instalar un plugin llamado batch drawable importer, donde puedo elegir la imagen que necesito y me la convierte a los tamaños que el profe menciono en el curso, pero aun tengo una duda, esas imágenes, al momento de ponerlas en mi app la dejan muy pesada. Ustedes saben que puedo hacer para que esto no pase. Me han dicho que toca mandarlas desde una direccion que este en internet pero aun no me queda claro donde ponerlas o que programa o plataforma sirve para guardar las imagenes y que me mande un enlace donde yo las pueda subir a la base de datos. Si alguno de ustedes sabe quedaría totalmente agradecida por la información.

otra forma de entender el wegth es con pizzas y fracciones:
si tienes dos elementos y ambos tienen un weigth de 1, entonces ambos ocuparan un espacio de 1/2

pero si uno tiene 3 otro solo tiene 1: entonces un elemento ocupara 3/4 de la columna y el otro solo 1/4 de la misma

Esta clase 9 esta super, tiene bastante contenido pero absolutamente todo es importante.

Error garrafal del curso es no actualizar con medida de que se actualice los comandos

Asi va mi login

la ruta para llegar a las carpertas drawable es:

\app\src\main\res

Esta es mi interfaz😎, espero os guste.

Pero no entiendo porque no me cambia de color el login🤔

<ImageView
    android:layout_width="140dp"
    android:layout_height="140dp"
    android:src="@drawable/logo"
    android:layout_gravity="center"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="UNIVERSIDAD MILITAR NUEVA GRANADA"
    android:layout_gravity="center"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ESPECIALIZACION EN GEOMATICA"
    android:layout_gravity="center"
    />
<Space
    android:layout_width="match_parent"
    android:layout_height="80dp"/>
<EditText
    android:drawablePadding="12dp"
    android:drawableStart="@drawable/vector_person"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:hint="@string/hint_usuario" />

<EditText
    android:drawablePadding="12dp"android
    android:drawableStart="@drawable/vector_key"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:hint="@string/hint_password"
     />

<Space
    android:layout_width="match_parent"
    android:layout_height="80dp"/>

<Button
    android:background="@color/amarillo"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/button_login" />

</LinearLayout>

Unidades

• px es un pixel.
• dip o dp son píxeles de densidad independiente (density-independent pixels).
• sp son pixels de escala independiente (scaleable pixels).

DP, los pixeles de densidad independiente
Son unidades flexibles que se escalan a dimensiones uniformes en cualquier pantalla. Cuando desarrolle aplicaciones para Android, utilice dp para mostrar los elementos uniformemente en pantallas con diferentes densidades.

Un dp es igual a un pixel en una pantalla de densidad de 160 . Para calcular dp:

dp = (ancho en píxeles * 160) / densidad de la pantalla.

SP, los píxeles de escala independient
Scale-independent-Pixels en inglés, tienen la misma función que los dp , la diferencia es que se aplican a textos, en el caso de Android para TextView o cualquier otro elemento que soporte una fuente.

El valor por defecto de un sp es el mismo que el valor por defecto de un dp . Por ejemplo:

TextView
android:id="@+id/textView"
android:text="Tamaño de texto 25sp (Scale-independent-Pixels)"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"

La diferencia principal entre un sp y un dp es que el sp preserva los ajustes del usuario respecto a la fuente . Los usuarios que tengan ajustes para agrandar el texto verán que el tamaño del texto concuerda con sus preferencias. Por ello, se recomienda el uso de esta unidad de medida para fuentes.

Uff, en este sí me demoré

No suelo decir nada, pero fue un exceente video

Crear un recurso string para el Hint Usuario

Creación de vectores definidos por Android

dp density point

layout_gravity solo afecta al elemento

En esta pagina pueden escoger colores HTML

La verdad hace tiempo veía esto como algo difícil pero ahora se ve tan simple.
.
Y una observación. Me parece que los diseños en Flutter son mejores, pero siempre es bueno saber ambos.

En google pueden buscar rgb color picker para generar sus colores facilmente.

Space es un espacio vacio

weight para darle peso y el componente lo pasa para abajo

Hay un elemento llamado space que lo único que hace es dar espacio entre otros elementos.
Algunos otros atributos:
padding: da un espacio entre partes de un elemento
margin: genera un margen dentro de la dimensión del elemento
drawbaleStart: inserta un drawable al inicio del elemento

Desconozco la razon por la cual Android Studio no me cambia el color de colorPrimary, colorPrimaryDark y colorAccent1 al ahora de invocarlo en el tag background, pero lo que hice fue nadamas definirlas igual y agregarle un 1 para que se llamaran diferentes y de esa forma si me las invoca.

Para poder utilizar el Vector Asset se debe de descargar el Puglin de drawable import

yo le puse un android:layout_marginTop creo que es mas facil que space

<Button
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimary"
        android:text="@string/button_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>```

Alguien sabe por que no puedo cambiar el color del vector person, a pesar de que hago el cambio no lo refleja al momento de insertarlo en la ventana

Cuando agrego la sentencia:

android:drawableStart="@drawable/vector_person"```

Android Studio me enseña un error y me dice que debería agregar también la sentencia:

android:drawableLeft="@drawable/vector_person" />```

Por supuesto lo agrego y se quita el error. La razón qué me indica en la descripción del error es que es por un problema de versiones. Alguien sabe que otro atributo puede reemplazar este para evitar tanta redundancia, puesto que me parece que escribir las dos sentencias para hacer lo mismo es innecesario. Igual no es muy relevante el problema pero me gustaría saber, muchas gracias si alguien me puede colaborar con la duda.

Hola, al principio no captaba los primeros temas, pero con un poco de logica en las palabras y algo de ìngles, es super facil

Colores:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#8BC34A</color>
    <color name="colorPrimaryDark">#689F38</color>
    <color name="colorAccent">#085494</color>

    <color name="primary_light">#DCEDC8</color>
    <color name="primary_text">#212121</color>
    <color name="secondary_text">#757575</color>
    <color name="icons">#212121</color>
    <color name="divider">#BDBDBD</color>
</resources>```

Link del logo

LinearLayout: Organizacion lineal
LinearLayout es el layout más común y más sencillo.

Al agregar un LinearLayout debemos agregarle la orientación para indicar como los elementos dentro de este se acomodarán, vertical u horizontalmente.

Cada elemento tratará de tomar el espacio que requiere, uno después de otro. Todos los elementos tratará también de verse por pantalla

Con esta orientación, usualmente, los elementos se irán agregando de izquierda a derecha

También es posible tener un LineaLayout dentro de otro y cada uno con diferente orientación. Por ejemplo un LinearLayout horizontal dentro de uno vertical:

Dentro de la carpeta res del proyecto existen multiples carpetas que comienzan con drawable y mipmap, cada carpeta corresponde a un tamaño de pantalla (pantallas pequeñas, medianas, grandes, etc.).

Si agregamos una imagen dentro de una de estas carpetas, la imagen estará disponible para usarla dentro de la aplicación.

Para acceder a ella:

android:src = "@drawavle/<nombre>"

Para agregar una vector ve al menú File > New > Vectos Asset.

Desplegará un menú donde podemos darle un nombre y un tamaño. Android ya tiene algunos vectores incluidos, puedes verlos dando clic al ícono al lado de Clip Art.

Una vez terminado, el ícono se agregará a la carpeta drawable con el nombre que le dimos, en un archivo XML. Dentro de este archivo están las coordenadas para que Android pueda crear la imagen, también podemos cambiar el color desde este archivo.

Para los que quieran más colores pueden ir al archivo de colors.xml en la carpeta values y agregan un tag color con el nombre que quieran y dentro ponen el código hexadecimal del color.

Para eso recomiendo páginas como https://htmlcolorcodes.com/es/ o https://html-color-codes.info/ etcétera

las imágenes están definidas por dp:density points

Por qué no me aparece el contenido de los EditText?
Los errores que me aparecen no parecen ser la solucion