Curso Android. Otros Layouts Haciendo Scroll. Vídeo 22
Summary
TLDRThis video script is a tutorial on creating Android applications, focusing on implementing vertical and horizontal scrolling layouts. The instructor guides viewers on using ScrollView and HorizontalScrollView in Android Studio, demonstrating how to add multiple buttons and other UI elements that exceed the screen's visible area. The tutorial covers the process of setting up these containers within a relative layout, ensuring a seamless user experience with scrollable content.
Takeaways
- 📚 The video is a tutorial on Android application development, focusing on different layouts for user interfaces.
- 🔍 It introduces two types of scrollable layouts found within the 'containers' section of Android Studio: ScrollView for vertical scrolling and HorizontalScrollView for horizontal scrolling.
- 📉 The purpose of scrolling is to manage interfaces with many elements that do not fit horizontally or vertically on the screen, allowing users to scroll through them.
- 👆 Demonstrates how to implement vertical scrolling by adding buttons to a Relative Layout and then wrapping them with a ScrollView.
- 👎 Points out that ScrollView only accepts one child layout, which should be set up to hold multiple UI elements for scrolling purposes.
- 📐 Explains the process of adding a LinearLayout (vertical) inside the ScrollView to organize multiple buttons or other UI elements in a vertical list.
- 🤔 Highlights the importance of correctly placing the LinearLayout inside the ScrollView to enable the scrolling feature.
- 📱 Discusses the limitations of the emulator's view compared to a real device, where physical gestures like swiping would be used for scrolling.
- 🔄 Provides a step-by-step guide to creating a horizontal scroll by using HorizontalScrollView and placing a LinearLayout (horizontal) inside it.
- 🛠️ Mentions the use of Android Studio's design components and layout hierarchy to build the scrolling interfaces.
- ⚠️ Notes the appearance of warnings in Android Studio, but reassures viewers that these are not errors and can be safely ignored in this context.
- 🔚 Concludes by encouraging viewers to stay tuned for the next part of the series and wishes them well.
Q & A
What is the main topic of the video script?
-The main topic of the video script is teaching how to implement scrolling layouts in Android applications using ScrollView and HorizontalScrollView.
What are the two types of scroll views discussed in the script?
-The two types of scroll views discussed are ScrollView for vertical scrolling and HorizontalScrollView for horizontal scrolling.
Why might one need to implement scrolling in an Android interface?
-One might need to implement scrolling in an Android interface when there are too many views, buttons, texts, menus, or images that do not fit horizontally or vertically on the screen.
What is the default layout in Android Studio when creating a new application?
-The default layout in Android Studio when creating a new application is a RelativeLayout.
How does the script suggest to start working with ScrollView?
-The script suggests starting to work with ScrollView by replacing the current layout with a RelativeLayout, if not already in use, and then adding ScrollView from the 'Containers' section in Android Studio.
What is a limitation of ScrollView when adding components?
-ScrollView only allows one direct child component, which means you cannot add multiple components directly inside ScrollView without nesting them within another layout.
What type of layout should be added inside ScrollView to hold multiple components?
-A LinearLayout, either vertical or horizontal depending on the desired scroll direction, should be added inside ScrollView to hold multiple components.
How does the script demonstrate adding components to a vertical scroll layout?
-The script demonstrates adding components by inserting a LinearLayout inside ScrollView and then adding multiple buttons to the LinearLayout.
What does the script suggest to do when the visible area of the layout is filled with components?
-The script suggests continuing to add components beyond the visible area, which will then allow the user to scroll to see the additional components.
How can you tell if a component is correctly nested inside ScrollView?
-You can tell if a component is correctly nested inside ScrollView by checking the component hierarchy in the 'Component 3' panel, where the component should be indented and show as a child of ScrollView.
What does the script mention about the yellow triangles (warnings) in Android Studio?
-The script mentions that the yellow triangles (warnings) in Android Studio are not errors and do not prevent the application from running, but they are worth reading occasionally for additional information.
Outlines
📚 Introduction to Android Layouts and ScrollView
This paragraph introduces the topic of the video, which is about exploring different layouts in Android application development, specifically focusing on ScrollView and HorizontalScrollView. The instructor explains that these are not typical layouts but container views found in Android Studio, used for vertical and horizontal scrolling respectively. The purpose of scrolling is to accommodate more UI elements when they do not fit horizontally or vertically on the screen. The instructor begins by setting up a project, removing the existing button, and switching from a LinearLayout to a RelativeLayout to start fresh. The paragraph also touches on the issue of not being able to see all elements when too many are added to the layout.
🔄 Implementing Vertical Scrolling with ScrollView
The second paragraph delves into the process of implementing vertical scrolling in an Android application. The instructor guides through the steps of adding a ScrollView container from the 'containers' section in Android Studio. It is emphasized that ScrollView only allows one child component, and the correct way to use it is by nesting a LinearLayout (or another suitable layout) within the ScrollView. The instructor demonstrates adding multiple buttons to the LinearLayout inside the ScrollView, explaining how this setup allows for vertical scrolling when the content exceeds the visible area of the screen. The paragraph concludes with a demonstration of the scrolling functionality in the emulator.
🔄 Implementing Horizontal Scrolling with HorizontalScrollView
The final paragraph of the script discusses implementing horizontal scrolling using HorizontalScrollView. Similar to the ScrollView, the instructor explains that HorizontalScrollView is added to the RelativeLayout and requires a suitable layout, such as a Horizontal LinearLayout, to be nested within it. The process involves adding multiple buttons to the Horizontal LinearLayout to demonstrate how content can be scrolled horizontally when it extends beyond the visible screen width. The instructor also addresses common warnings that appear in Android Studio during this process, reassuring viewers that these are not errors but notifications that can be safely ignored. The paragraph ends with a live demonstration of horizontal scrolling in the emulator and an invitation to stay tuned for the next part of the course.
Mindmap
Keywords
💡Android Studio
💡Layouts
💡ScrollView
💡Horizontal Scroll View
💡Scrolling
💡Relative Layout
💡Linear Layout
💡UI Elements
💡Component Panel
💡Emulator
💡Visual Interface
Highlights
Introduction to Android application development course focusing on different layouts.
Exploring ScrollView and HorizontalScrollView for vertical and horizontal scrolling respectively.
Explanation of when to use scrolling features in Android interfaces with too many elements.
Demonstration of adding buttons to a project using Android Studio's layout editor.
Switching from LinearLayout to RelativeLayout for better organization.
Adding multiple buttons to test the limits of the visible layout area.
Observation of elements exceeding the visible area and the need for scrolling.
Instructions on how to implement ScrollView for vertical scrolling.
Limitation of ScrollView to only one child component and how to work around it.
Inserting a LinearLayout inside ScrollView to add multiple vertical buttons.
Visual representation of ScrollView in action with multiple buttons.
Addressing Android Studio's yellow warning triangles and their meaning.
Transition to implementing HorizontalScrollView for horizontal scrolling.
Steps to add HorizontalScrollView and a LinearLayout for horizontal elements.
Example of adding buttons to HorizontalScrollView and observing the scrolling effect.
Final demonstration of horizontal scrolling in the Android emulator.
Invitation to stay tuned for the next part of the Android development course.
Transcripts
Hola qué tal Bienvenidos a todos a otra
entrega de este curso de programación de
aplicaciones Android en el que vamos a
ver otros layouts diferentes otras
distribuciones diferentes a las que
hemos visto hasta ahora y que vamos a
utilizar en el futuro estos layout que
vamos a ver en este vídeo no son layouts
como tales sino que los vamos a
encontrar dentro de la sección de
contenedores de Android Studio
concretamente los dos que vamos a ver en
este vídeo es el scroll view y el
horizontal scroll viw como su nombre
indica Pues el primero sirve para hacer
un scroll en vertical y el segundo sirve
para hacer un scroll en horizontal y qué
es esto de hacer un scroll Bueno pues
cuando tú tienes una interfaz Android
muchas veces incluyes tantas vistas
botones textos menús desplegables
imágenes en un futuro cuando las
incluyamos en fin diferentes elementos
que o bien no caben en horizontal o bien
no caben en vertical en ese caso pues lo
que nos nos viene muy bien Es poder
hacer un scroll en horizontal es decir
arrastrar con el dedo por encima de la
interfaz los elementos para que esto se
desplacen horizontalmente y poder verlos
todos o bien hacer un scroll en vertical
que sería lo mismo pero para poder ver
los elementos que sobresalgan por arriba
o por abajo bien pues vamos a ver cómo
realizar estos dos tipos de layouts con
eh nuestro proyecto primera
aplicación yo de momento pues estoy
trabajando con dos proyectos el de la
aplicación contador que hemos visto en
vídeos anteriores Y uno que estoy
utilizando a modo de pruebas al cual
llamé primera aplicación primera app
Bueno pues voy a trabajar como digo con
primera app bueno Pues abrimos bajo la
Api para que no me dé el problema de
renderizado y aquí lo tenemos no Y bueno
pues lo único que tengo en este proyecto
de momento es un botón que ahora mismo
Pues voy a eliminar para poder trabajar
desde cero también me estoy dando cuenta
de que estoy trabajando con un linear
lay layout Eh bueno pues Este no es el
layout por defecto que nos Abre Android
Studio cuando creamos una aplicación el
layout por defecto es un relative layout
Lu Entonces esto da igual No pero
simplemente para trabajar bien desde el
principio vamos a cambiar pues como
hemos visto ya en vídeos anteriores el
linear layout por un relative layout y
una vez hecho esto Pues si nos vamos a
content Main vista diseño pues ya lo
hemos cambiado vamos entonces a ir
incluyendo dentro de nuestro layout pues
botones da igual donde queden
horizontalmente alineados me da igual
que queden en el centro a la izquierda a
la derecha porque vamos a ver en este
caso Cómo hacer un scroll en vertical
Entonces se trata de ir agregando
botones uno debajo de otro comprobar en
el panel component 3 que efectivamente
pues estos botones que estamos agregando
están dentro del relative layout esto se
ve muy fácil viendo la la sangría de los
elementos respecto al relative layout no
entonces Bueno pues vamos incluyendo
botones de todas formas como solamente
tenemos un layout ahora mismo un
elemento van a quedar todos dentro del
relative layout de una forma muy
sencilla Bueno pues vamos incluyendo
botones como digo uno debajo de otro van
a caber aproximadamente pues unos 10 o
así hasta que ya pues no veamos más no
es decir aquí este sería el noveno y
este sería el décimo elemento Entonces
hasta aquí no hay mucho problema cuando
tú incluyes dentro de la de la interfaz
del layout pues 10 elementos como pueden
ser en este caso 10 botones de momento
se ven no pero qué ocurre si nosotros
necesitamos en algún momento agregar más
elementos en vertical Bueno pues yo
puedo seguir agregando elementos o bien
haciéndolo directamente en la vista
previa fijaos como este botón pues ya no
se ve parcialmente y cuando me resulta
incómodo ya incluirlos en lo que sería
la vista previa pues podemos también
trabajar con el panel component 3 y
podemos seguir insertando botones uno
tras otro ya llevo 13 Ya llevo 14 no
Bueno pues aquí como podéis observar en
lo lo que es la interfaz gráfica
solamente veo 10 pero hay ya tres
botones o cuatro que no puedo ver Porque
estarían por debajo se habrían salido no
como aquí no tenemos ningún tipo de
scroll si esto lo dejamos así y
ejecutamos la aplicación en el emulador
Bueno pues vamos a ver cómo esos botones
realmente no podemos acceder a ellos
no vemos como cuando se abre el emulador
pues estoy viendo aquí por ejemplo
parcialmente eh uno de los botones como
podéis observar Entonces por mucho que
int
hacer un scroll en este caso con el
ratón porque estamos en el emulador pero
si fuera un dispositivo real estaríamos
con el dedo arrastrando hacia arriba
hacia abajo Esto no se mueve no se trata
de que al arrastrar hacia arriba En este
caso pues podamos ver los elementos que
se encuentran en la zona inferior haga
un scroll no luego entonces detengo la
aplicación vamos a ver cómo haríamos un
scroll muy sencillo primero lo que voy a
hacer va a ser tampoco haría falta hacer
esto pero para que lo veamos bien desde
el principio voy a eliminar todos los
botones que he insertado para quedarme
nuevamente con el relative
layout y ahora pues nos vamos a la
paleta de Android Studio y nos vamos
concretamente a lo que sería la sección
o familia de contenedores aquí los
tenemos no los containers Bueno pues
dentro de containers Tenemos aquí el
scroll view y este es el que debemos
utilizar para poder hacer un scroll en
vertical no Cómo se hace Bueno pues
debes de tener un layout en nuestro caso
tenemos un relative layout pero bueno
también valdría perfectamente con un
linear layout o con cualquier otro tipo
no El caso es que lo que hacemos es
un contenedor de tipo scroll View
e insertarlo dentro del relative
layout y una vez que hemos insertado
pues este contenedor no podemos empezar
a agregar botones directamente porque
una de las características que tiene
tanto el scroll vertical como el scroll
horizontal Es que solo admite un tipo de
componente hijo de hecho para para que
lo veáis para que sepáis exactamente a
qué me refiero yo cojo ahora el primer
botón y desde el component 3 lo meto
dentro de scroll viw Por cierto no sé si
os habéis dado cuenta del detalle que
cuando he agregado por primera vez el
botón pues parece que lo he agregado a
scroll viw Pero no es así este botón no
está dentro ahora mismo de scroll View
sino que está dentro del relative layout
eh para que esté dentro hay que
posicionarlo justo encima fíjate como
ahora hace una sangría y efectivamente
me está indicando que Ese botón está
dentro no pero una vez que hemos
agregado el primer botón por mucho que
yo intente agregar un segundo botón
Dentro de este scroll View vemos que no
nos va a dejar fíjate que yo lo he
dejado justo encima de scroll View y por
mucho que lo intente me lo deja dentro
del relative layout para poder ver
correctamente esto si plegamos el scroll
view vemos que solamente pliega el único
elemento que hay en su interior que es
el primer botón dejándome el segundo
botón dentro del relative layout
entonces aquí veis como solamente admite
un tipo de elemento hijo dicho de otra
forma solamente admite un botón la forma
de trabajar no es esta la forma de
trabajar es una vez que has agregado el
scroll view Dentro de este scroll View
Ahora tienes que agregar otro layout o
bien
horizontal o bien bueno vertical en este
caso o bien un tipo de grid layout en
fin el que quieras no en nuestro caso
como los elementos van a estar uno
debajo de otro Pues lo suyo es agregar
un linear layout vertical dentro del
scroll View y lo que tienes que hacer es
asegurarte de que este layout está
dentro del scrol View igual que hemos
mencionado ahora mismo con el botón no
no lo dejes dentro del relative layout
porque entonces no estamos haciendo nada
ahora mismo este layout el linear layout
está dentro del relative layout pero no
dentro del scroll viw hay que dejarlo
dentro y una vez que ya tienes el linear
layout vertical Pues ahora ya Sí Dentro
de este linear layout puedes empezar a
agregar los botones no Entonces vamos
agregando
botones de la misma forma que lo
hacíamos anteriormente este como ya es
una alineación vertical Bueno lo podemos
eh dejar de una forma sencilla dentro de
línea lado si trabajamos con la vista
previa es fácil que al trabajar con la
vista previa ves este botón quede fuera
de lo que sería el scroll view si yo
ahora pliego el el linear layout Pues
veis cómo queda fuera no eh ahora
concretamente está dentro del scroll
View si no estoy equivocado no está
dentro del relative layout luego
entonces en estos casos es más cómodo
trabajar siempre en el panel component
Bueno pues vamos agregando estos
botones vamos viendo como en en la vista
previa pues van apareciendo y cuando
lleguemos a 10 botones pues veremos como
efectivamente pues ya hemos cubierto
todo lo que sería el área visible no eh
A ver botón alguno se ha saltado no el 2
3 4 5 6 7 8 9 10 no pasa que aquí caben
más no haciendo Así que como lo hemos
hecho antes que había más espacios Bueno
vamos a seguir agregando botones y bueno
concretamente nos deja agregar 12
botones que se ven pero yo puedo seguir
agregando botones igual que hemos hecho
antes sigo agregando unos cuantos
botones más a este linear layout Ya
llevo 14 Ya llevo 15 Bueno pues lo voy a
dejar ahí fíjate como al agregar estos
últimos botones me está indicando en la
vista previa Pues que efectivamente el
botón está en su sitio pero claro el
usuario no lo podrá ver de primeras
abrimos el emulador vemos como
efectivamente Pues nos deja ha x botones
Pero ahora sí que podemos hacer un
scroll arrastrando hacia arriba o hacia
abajo lo estamos haciendo solamente con
botones Pero bueno evidentemente valdría
con cualquier otro tipo de vista como
dije antes no menús desplegables
imágenes que trabajaremos con ellas en
el futuro etcétera Bueno pues esta es la
forma de hacer un scroll vertical En
definitiva lo que tienes que hacer es
agregar un contenedor un container de
tipo scroll View dentro del scroll View
pues agregas el layout que mejor te
venga en este caso pues nos viene muy
bien un vertical y luego ya dentro de
ese layout Pues los componentes que
quieras agregar
no vemos como aquí al agregar elementos
Android Studio nos va haciendo una serie
de advertencias me refiero a estos
triángulos amarillos Bueno pues no os
preocupéis por estas advertencias pero
bueno si queréis pulsar por ejemplo en
el Triángulo amarillo de scroll viw pues
vemos como nos dice pues la
ación advertencia o aviso como lo
queráis Llamar viene muy bien leer esto
de vez en cuando pero que sepáis que no
corresponde a ningún tipo de error como
me decía alguno en los comentarios de
vídeos anteriores no bien pues una vez
que ya hemos visto cómo hacer un scroll
vertical para hacer un scroll horizontal
sería Exactamente igual detengo la
aplicación si elimino el scroll view
pues elimino todo lo que hay en su
interior para quedarme nuevamente con el
relative layout y para hacer el scroll
en horizontal Exactamente igual tenemos
el relative layout Pues ahora lo que
tenemos que hacer es irnos a containers
y Buscar el horizontal scroll View
meterlo dentro del relative layout y una
vez que ya tenemos el horizontal scroll
View lo que tenemos que hacer es Buscar
el layout que más se adapte a lo que
queremos hacer como en este caso lo que
vamos a hacer es un scroll en horizontal
pues el layout que más se adapta va a
ser el linear layout horizontal pues lo
metemos dentro del horizontal scroll
View y ahora pues iríamos agregando
vistas elementos Dentro de este layout
pues vamos a hacer otra vez el ejemplo
con los botones no un
botón dos botones tres
botones y aquí pues va a ser muy fácil
porque a partir del cuarto pues ya no se
ve pero voy a seguir agregando un par de
botones más o tres no entonces aquí ya
tenemos seis y siete con siete lo voy a
dejar Bueno pues me está indicando la
vista previa que aquí estaría colocado
El séptimo botón se sale de lo que es el
área de visión Pero bueno Exactamente
igual no Si ahora ejecutamos la
aplicación y y abrimos la misma en el
emulador pues veremos Cómo podemos hacer
un scroll en horizontal Bueno vamos a
esperar a que abra el emulador y ahora
pues fijaros cóm podemos hacer un scroll
en
horizontal y bien pues así de sencillo
es hacer un scroll vertical y horizontal
utilizaremos estos layouts estas
distribuciones pues para aplicaciones
que vamos a comenzar en breve Así que os
digo lo de siempre os invito a que
permanezca at a la próxima entrega hasta
entonces que os vaya bien
Browse More Related Video
All about Firebase Authentication 🔥 | Login & Signup | Jetpack Compose
Cara Membuat Tetris sederhana untuk pemula di Mit App inventor GRATIS 2024 | programmer pemula
Creating Multi-Step Forms in Power Apps | Tutorial
How make SWIPE LEVEL MENU in Unity?
[Legacy] Use Firebase for Auth in Wized
C# WPF Tutorial #5 - Grid Control for Basic Responsive Layouts
5.0 / 5 (0 votes)