1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Lists & Views in Android App Development

ScrollView

Contents

keyboard_tab
Lists & Views
2
4
GridView
20m 58s
5
6
WebView
7m 1s

The course is part of this learning path

Start course
Overview
Difficulty
Intermediate
Duration
1h 38m
Students
4
Description

In this course, we look at the various different ways that information can be presented to users within an Android app. We'll cover a variety of views that you can incorporate into your apps.

Intended Audience

This course is intended for anyone who wants to learn how to start building their own apps on Android.

Prerequisites

This is a beginner-level course so doesn't require any specific knowledge, but some basic knowledge of the fundamentals of Android would be beneficial.

Resources

Course GitHub repo: https://github.com/OakAcademy/android-app-development-with-kotlin/tree/main/Section%206%20-%20List%20and%20Views 

 

Transcript

Hello everyone, what do you want to talk about today?

Just playing. I want to talk about scrolling. So, there is something called ScrollView and we can use ScrollView when the components don't all fit in the screen, gave you a mini preview of it last time. But this thing called ScrollView, creates a scroll bar and it's going to enable your user to scroll the screen from top to down maybe from left, anyway, it's really easy to use. I just want to show you how to do it in android studio pretty quickly. So here, I've just created a new project and I'm calling it ScrollView and before we start, I just want to show you what it looks like when it's finished.

So, you see here there are eight different buttons in the application. Now, they all don't fit on the screen. There's the scroll bar on the right side of the screen and the users can scroll from top on down, that's it, let's figure out how to do it. So, when you go to the main activity XML file, there's a constraint layout. I'm going to delete this constraint layout and I'm going to write ScrollView instead. Alright, so now, I have a ScrollView, of course, the ScrollView does not have a scroll bar right now because when components do not fit on the screen, the scroll bar just pops up automatically.

So, I'll tell you the most important thing here is ScrollView can have just one child. So, that means you wouldn't be able to add more than one component under it, you follow. So, because of this we need to add another layout under the ScrollView. I'll add other components under this new layout, I will add a linear layout under the ScrollView and I will add some other components under this linear layout. And I'm going to add a button under the linear layout. I'm going to change the width and the height of this button to 150dp. And also, I want to change the text of the button to button 1. And I'm going to change the gravity of the linear layout to center. Now, after that on the XML side, I'm going to copy this button and paste it three times.

So now, I have four buttons and I'm just going to get in here and change the names and IDs, remember each ID will be unique. In fact, it's going to be, you know that. And here, I'm going to run my application at this stage. And what do you see here? See there's no scroll bar because four buttons actually fit on the screen. So, even if we have a ScrollView, if the components fit on the screen, the scroll bar is not going to show up. So, what I'll do is just add a couple more buttons and run it again. So, there you see the scroll bar and we can scroll from top on down, see, so that's how the vertical scroll looks but you can use it horizontally as well. To do that, I'm going to just change the orientation of the linear layout and I can write in horizontal here. Now, you see how the buttons are shown horizontally on the screen and I'm going to run the application like this and does it work when you just change the orientation of the linear layout? Okay, so it's not working,

why is that? Well, let's go back in there and find out. So, I'm going to add a horizontal ScrollView between the ScrollView and linear layout. You see this, so it is width and height, course will be wrap content and I will put this linear layout between these two XML tags. I'm going to cut this part from here and paste it under the linear layout. Let's have a look at that, run it again. All right, so now, you see it works horizontally. So, use ScrollView in your application design wherever you want. That pretty much sums it up what you can do. So, I'll see you in the next video.

 

About the Author
Students
86
Courses
23
Learning Paths
1

Mehmet graduated from the Electrical & Electronics Engineering Department of the Turkish Military Academy in 2014 and then worked in the Turkish Armed Forces for four years. Later, he decided to become an instructor to share what he knew about programming with his students. He’s currently an Android instructor, is married, and has a daughter.

Covered Topics