Add Scrolling Capabilities

Tim Buchalka
A free video tutorial from Tim Buchalka
Java Python Android and C# Expert Developer - 895K+ students
4.6 instructor rating • 12 courses • 898,017 students

Learn more from the full course

Android App Development Masterclass using Kotlin

Learn Kotlin Android App Development And Become an Android Developer. Incl. Kotlin Tutorial and Android Tutorial Videos

61:50:31 of on-demand video • Updated January 2021

  • Learn the core Android app development and Kotlin skills to build real Android apps.
  • Learn how to target current and older versions of Android when writing your apps.
  • Understand how to create Android apps using Kotlin.
  • Be able to apply for Android app development roles.
English (upbeat music) (computer keys clicking) Tim: Alright, so we've still got the image to add but before doing that, let's run the programme and see how it behaves. And that'll also gives us a chance to see how the layout and the code work together. Now, what we need to do though, is make a change to the code, so expand the project pane if it's not open. We want to come down here and make sure that we're in the Java folder, 'cause if you recall, the Java folder contain the source files, which ultimately contain our code. So, we wanna open up the package, in this case, academy.learnprogramming.activity and there's this main activity. Now there's only the one class here at this time, but in more complicated apps, you'd see that there would be a lot more classes. So, I'm going to double click that now to open it. And in main activity, the layout is used by this setContentView statement on line 10 and that tells the app which layout to use when it runs. Now, I guess that's a slight oversimplification, but with only one class it's totally accurate. So, instead of using R.layout.activity_main, we need to change that to R.layout.note_layout to use the layout that we've been working on and just created in the previous video. So I'm going to delete that, and I'll just press the period or dot and notice when I've done that, we've automatically got an option here. Android Studio knows which layouts are available in your project and it's suggesting the note layout, literally as soon as I'd entered that period, or typed that period. And sometimes it doesn't do it that quickly. If you type the first few letters of the layout you're looking for, it'll find it in the drop down. And obviously, using a drop down is more convenient because it saves typing but also helps you to guard against typing errors. So, instead of typing it all out, I'm just gonna press enter there. Alright, so that's really the only change we need to make at this time to the code. So, we've told the app now which layout to use when it runs. I'm gonna close down the Kotlin class, and I'm gonna close the project pane again, and I'm gonna make sure that note_layout is selected again, which it is. And let's just run that, (computer keys clicking) to see what it looks like. (computer keys clicking) Alright, so there is the app running. Now, it doesn't look too bad at all, although I still need to change the text in the text view in the top right hand corner. But, there is a problem though, and it'll become apparent as soon as I start trying to type something into the edit text. But first thing, when I click in the edit text, you can see the on-screen keyboard appears and things go a bit wrong. Now, the keyboard is partially obscuring the edit text, so I can't actually get to the end. I can try scrolling, so I'm trying to scroll, simulating like a scroll, but I can't actually get to the end of the text. You can see it's sort of just jumping around, and just generally not quite working correctly, not really allowing us to get to the end. Now, this might appear to be two problems but the cause is the same. So, I can't scroll the text right to the end and I also can't add any more text to the end for that reason. So I can't get down there to do that, but as it happens, fixing that issue also prevents the keyboard from obscuring the edit text widget and that's really the real cause here. Now, one thing I want to point out though, is that I can't give you all the answers. I can show you a good variety of layouts in this course but I can't predict every layout that you want to create in your own apps, nor how they'll have to interact with things like the keyboard. What I will do is try and show you as many potential problems as I can, such as this one here, and we'll also look at different ways to get the same effect by changing the constraints we use. But it's important that you really get the hang of the layout designer yourself and also important, well it is important, to think about your layouts not as fixed things but more as fluid designs that move around as the user does things on the phone or tablet. Now, this layout is a great example of one that looks good in theory but falls over slightly in practice. So, let's actually see what we can do about it. So, I'm just gonna go back into Android Studio now. Now, I've clicked on editText, or it was already selected anyway. One thing to notice here is that it's set to be centred vertically in the available space. Now, that doesn't really make sense here. It should really always be positioned at the top, just below the title and then grade downwards as it needs to. So, I need to set the vertical bias to zero and the same's true for the horizontal bias. Now, it's visually obvious which way you need to go, so I'm gonna drag the vertical bias to the top, as I mentioned, and set that to zero and also, I'm going to drag the horizontal slider to the left as well, to make that zero. So, now we've got both the vertical and horizontal biases set to zero. Now, we do get questions about what difference this makes and often it doesn't make any difference. With less text and the layout_height or layout _width set to wrap_content, it will, however, make a difference. But that's actually got nothing to do with our problems though. What we need to do, is to make the edit text scrollable, vertically. Now, the edit text could already be scrolled, but without the scroll bars attribute being set, the layout doesn't collapse it out of the way of the keyboard. So, to turn on the vertical scroll bar, what we need to do is expand the full set of properties and we do this by clicking on these two little arrows up here in the Inspector, and then we're gonna search through the largely alphabetical list until we find the scroll bar setting. Now, remember that you might need to use this cog over here to select all attributes. So, if I click on that, and you might be in that mode there. So, if you see a mode that looks similar to that just come back here and click on All attributes table and you'll get the right view. Alright, so let's scroll down now so we can see this scrollable attribute. And there's scroll bars. Now, expand that so you can see. And we want to set that to vertical, so I wanna click on vertical and you can see it updates over here now. Now, we're also going to set the scroll indicators, that's these a little bit further up, which I'll expand. Now, we're doing that to provide a visual cue that the contents are scrollable. Now, we wanna click over here or come over here and click on right. Select that and also end. And you can see that we've got both selected now. Now, start and end properties were introduced in API17. And they're designed to provide the expected behaviour with languages that are written from right to left, Arabic and Persian for example. So, by using start instead of left and end instead of right, you're allowing your app to cope with right to left languages. Now, if you're targeting Android versions prior to API17, as we are, then you should also set left or right as well, so that those earlier versions also work. Now, the scroll indicators provide a visual indication that a widget can be scrolled and also indicate how far through the contents you've already scrolled. Now, note that they were introduced in API23, so this setting won't have any effect on earlier versions of Android. Alright, so now that we've enabled scrolling, the edit text widget should be scrollable, so let's run the app again to test that. But first I'm gonna change the text in the text view to constraint layout, so, I'm just gonna click over here and I'm gonna close down this mode and go back to our normal mode. And let's change the text there and we'll call it Constraint Layout. (computer keys clicking) Now, notice how the width of the edit text changes and that's because it's constrained to the right-hand edge of the text view. And keep in mind also that sometimes it takes a little while for the blue print to update after a change like this. So, that causes the edit text to become narrower because it's constrained to the right-hand edge of the text view. Alright, so let's try running the programme again. (computer keys clicking) So, now that I've run it again, Android Studio's instant run will install the changes and restart the application. And that's actually quite a nice feature that first appeared in Android Studio 1.5. Now, it could cause a few problems with apps not restarting, but the bugs seem to have been ironed out now and it makes the whole process of testing changes a lot faster than it use to be. So, you can see here now, we've got a different layout now. Well, it looks different now because we've added the scrolling capability and you can see that the app is now functioning differently to what it was before. Firstly, we're now automatically at the bottom. We can see the bottom of the edit text and also the keyboard is now not obscuring the text and I should be able to scroll up and down now. And you can also see over here, if you look carefully, the visual representation of us scrolling up and also where we are in the text. So, that's all working nicely now. And again, as you saw, I can get right down to the bottom as well. Now, keep in mind as I mentioned, it's scrollable and you saw that it was scrollable and the scroll indicators are appearing on the right, but those scrolling indicators only will appear on devices running Android Marshmallow or later. Now, it still can be scrolled in all versions but it's only the indicators that don't appear. And again scrolling the text, the edit text, also fixed the other problem we had and you can see now that we can scroll right to the end of the text and I can actually add more, Tim was here, (computer keys clicking) if I so desire. Alight, so there's just the image to add now. So, what we want to do is go back to Android Studio and we wanna drag an image view on to the left of the design, just below the title. So, we come over here and click on Images, ImageView, and we're gonna put that just below the title. I'll put it about there. And what we wanna do is, 'cause that's come up automatically, is you wanna select the ball_100x100. (computer keys clicking) Select that. Okay. Now, we wanna constrain the top of the image view to the bottom of the text view, so let's do that first. Now, the left edge of the image view should be constrained to the left edge of the screen and the right edge of the image view should be constrained to the left edge of the edit text widget. So, let's go ahead and do that. We can see that in this case, the left constraint has already been added. So, if yours hasn't been added, then do that. But we also want to constrain, as I mentioned, the right edge of the image view to the left edge of the edit text. So, we can go ahead and do that. Now, the other thing to do is also make sure that the layout_width is set to match_constraint, otherwise the image may run off the left edge of the screen. And you can see, at the moment, I've got that set to wrap_content, so, I'm gonna change layout_width to set to match_constraint. Alright, so let's actually run the app again and see how it behaves. (computer keys clicking) And you can see that... I'm just gonna move it over a little bit, that looks pretty good, and you can see that we've got our text there. We can still scroll that up and down. I can hide the keyboard and see more of the edit text now, and that's still looking good. So let's just move it over to landscape and have a look. (computer keys clicking) So we're in the landscape. And by the way, you should always test your layouts in both portrait and landscape, as well as on a range of different devices, such as a phone and a tablet. So, you can see that it looks pretty good in portrait and landscape. Now, the two buttons on the side of the emulator, by the way, let you rotate the device, as you saw me click. So, I can go back and click it the other way and go back to portrait again. And it really makes a great way to easily test layouts without having to run it on a physical Android device. Alright, so that's the end of our introduction to the layout designer that google had produced for Android Studio. Now, we've actually covered quite a lot, including some of the widgets available and how to place them on the design. Now, we also saw how to use constraints to make sure that the widgets appear where we want them, even when screen size and orientation change. Now, we've covered the different types of constraint and how they affect the behaviour of widgets that are constrained to each other. Now, the Inspector is very useful and we've seen how to use that to change the sizing of widgets, as well as their position within the constraints. The margins on the vertical and horizontal sliders can also be used to set the bias from the Inspector. Google's aim with this new layout designer was to make it possible to do everything you need to do without having to edit xml. And I'd say, they've largely succeeded. There is one time when you definitely need to view the xml though. Now, you've noticed that... I'll just put this back on the screen, neither the blueprint nor the design make it easy to check all the constraints at once, and there's no way to display all the properties on the screen at once, not unless you've got a three metre high screen. So, if you have problems with a layout and you wanna post a question about it, a screen shot alone will probably not help us to work out what's going on. In that case, if you do want help with a layout that's not doing what you want, please select all the xml and paste it into your question. That way we can see everything that's set in it and we're gonna be coming back to that later and give you some tips to make it easier to compare your xml with mine. Alright, so that's the end of this video. In the next one, what we're gonna do is create an app that does more than just display things on the screen. We'll get it so that clicking a button actually does something. I'm gonna start that app with a challenge though. Just to warn you, the next video will start with a challenge to design the layout that we're gonna be using in the app. So, I'll see you in that next video.