Android scrollview example

hey welcome to coding demos in this tutorial we will learn how to scroll view inside our app so what is the scroll view a scroll view is a layout container that it holds views and it you will be able to scroll through them easily so for example you have like a layout that has so many views and then they may not fully fit inside the whole screen right so you can use scroll view so that allows you to scroll through them from the top to the bottom so let me show you an expenditure the app that we will build in this tutorial I'll open up the emulator and as you can see here I have the beautiful page of Hawaii and then a title and description so when you scroll through the description at first it looks like it's a stone Felician rights like it's a big cut off at the bottom so when you try to scroll them scroll through the description you can I can view the full text without a molecular without actually scrolling the whole screen right you can actually scroll make the whole screen scrollable or you can just use a scroll view in a certain part in the NBA screen so without further ado let's open up the android studio and create a new project so here we have let's give this an example of a scroll view example then click on next click next next and then click on finish okay bill is complete let me close this so and here we won't be working all won't be writing any Java code we all we will be working only in the activity and the school made an XML file so for this reason that I close this close the Java file and then we'll work only the activity on this coming up in so we'll delete the default hello world text view and then we'll add an image view so hit the image review just drag it place at the top that make it center so we have the image and then we'll add the description so that is sorry the first thing the image data title so the title I'll be using a large text okay and then for the full description I'll just use a medium text okay now for the image view right let me have actually an image right here the high pitch so what I'm what I'm going to do here is I'm going to drag the image and they bring inside the V project file so let me just open up the desktop okay so here in the in the project file folder I'll open up the app and then SRC main resource and then drawable and then I'm just going to copy this then just paste it right here okay so let's open the project and then go to the source just to make sure that the image there click on drawable folder and then we have the image okay so go to the design let me close this and then for the image view here we will do an android SRC and then give give me the Hawaiian suit Strobel that's where the image is stored and then say why that's the title of the image go back to design and here we have the image now we need to change the the scale type of the image so it's Android scale type and then we'll make it fit XY okay now it looks a bit large right no problem now we'll just reduce the height of the image so you can see here in the Android layer height so instead of wrap content well just give it a 200 EP which that looks fine 200 EP if it looks ugly that we can change that later so go back to the design now okay what looks good so here we have the image and then I'll give a space between the title and the image by adding the Android margin top for the text field to the title so it's Android and layer margin top the buddy design yeah it looks fine do the same thing between the title and the description copy this as well then paste it here robotic design okay looks fine now we need to change the title instead of large text and change the text here so we'll make this why and then we need to give it a style so it's Android textile we want to make it bold so it's bold here and then we need to extract the string resource as usual click on the yellow bulb extra string resource click ok then let's go to design okay it looks that looks good and let me just increase the text size a bit so it's Android text size let me give it 20 20 Espio let's say 25 SP Dougherty design okay and then for the medium text so the medium text is the one that holds the full description about Hawaii now basically to get the description you can just go to the Wikipedia I will open over here and then I'll just come be from here towards the end here this is fairly long text just to give you guys an idea of how this whole view is working so I'm copy this and then go back to the Android studio then for now let me just extract the string resource for this and then I'll edit the value of the text inside the string store semi-soft wait me I'm going to give it a description description text okay now let's go to the string dot XML okay and then just paste it here I know it looks really long text but for this demo it's worth it okay another thing is you can see the commas right here right sorry not the yeah the apostrophe not there I'm sorry the apostrophe we need to skip that so we'll just use the slash because if we don't do it then we'll have an error when you try to build the app so I'll just do it for the rest of the text okay so works good let's go to activity index command put it design and see how it looks like alright now we have we have a description we have the title and we have the image let me just run the app and show you before using scroll view and after using the scroll view so I have the emulator here running so I'll just run the app okay and we'll wait for it to build up okay so here we have in the emulator now if we there is no scrolling as usual code because we haven't added the scroll view via crack and we have it as a scroll view yet but you can see the text is a cut off at the bottom right so that's basically how it looks like now we'll add the scroll view will add the scroll view to the whole layout to make the image and the description all of them scroll and then we'll we'll add will net later and will later will make the description scroll only and we live image as it is so let's tackle the first choice which is making the whole layout scrollable so how do we do it really easy let's go to the containers lady this is the section the continuous we have the ListView and we just look for the scroll view there we have the scroll view just drag anywhere okay and then go back text dead scroll view we'll just take this and then put it on top there okay and then let me just remove this piece attributes because it's no longer on top and then let me open up the scroll view tag then close it down here at the bottom before the linear layout add the related layout say this one yep delete this as well and then we don't need these attributes anymore because the views right now are under scroll view then these are no more useful for us so we'll just delete them I'll do the same thing here okay nobody design doesn't take it doesn't look anything changed around here okay exception now you look at this exception race during rendering now why it's because scroll view can only hold one child if you look at what we have right now we have a scroll view that's correct but instead of one child we have three one image view and two text views this will not work we have to have only a scroll that we have to have a scroll view and then lay out and and that layout will hold whatever views that you wanted to be added in side screen so for that for that reason that the reason why the exception is shown so the gate is fixed one will do is we will add the image view and these two text views and the one layout which is a linear layout with vertical orientation so yeah we know the rendering will look a look for the layout section here and then we'll choose linear layout with vertical orientation drag it anywhere that's fine okay IDE okay let me drag it again thanks they're ready oh we have actually two I'm sorry about that let's delete the window we don't need okay really this and then copy I cut this and then we'll add it inside the scroll view so here we have the scroll view tag so inside a scrollview we'll have the linear layout so take the closing tag of the linear layout let me just cut this and then scroll all the way down before the scroll view closing tag we add the linear layout closing tag let me format the code looks clean and then the layout tight oops we need to change the shader to wrap content as well because we have this cover here wrap content so I see Android the main aisle should be it should use wrap content as they hide okay gothic design so you can see that in the title of the hawaii changed its position from instead of center change to the left so we can actually change that easily so here we have the text i'll hold the white at the hawai title so we'll just do android and layout okay what's going on and just undo okay accidentally deleted the decodes no worries Android Android layout gravity and then we make it Center go back to design alright we have it in the center now we have we have added the scroll view so you can see the component three here we have the relative layout which is the real layout of the screen we have a scroll view that's right and the inside a scrollview we have the linear layout and that linear layout will hold the image view and the and the title and description so let's give it a run let's stop this right again okay okay so it's it's deployed to in the emulator now let's try to scroll yes you can see it's fully scrollable which we can easily see the full description and the image as well now you can make this you can make the whole layout scrollable or you can actually leave the image as it is and then just make the description scrollable so that's really easy well instead of having the image view as part of the scroll view we can actually take that out and then just leave the the two text views under this Cove you that way you want that with the image view won't be scrollable when you try to scroll through them so let's do that open up the text then here we have the image view just take this out so we don't put it outside the linear layout we actually put it outside the scope view so here we have the layout billion layout and then here we have the scroll view so here just paste it right here and then we'll take these attributes because this quality will no longer be on top instead the imagery will be on top so we'll just paste it here okay now let's go back to design okay the reason why is it's like that because we need to explicitly tell rings expecially say and define that the scrollview should be below the imageview so let's do that so here we have the scroll view so we do android they lay out below and then we'll just give it the idea of the image view that way we're saying hey scroll view and you to be look at position under the image view so the what we design all right now let's run the app again okay so now we try to scroll ok the description we can only scroll through the description the images it's fixed and it's not scroll all right but you can see here that the text the text description is too close to the image so how do we fix it it's really easy just go to the text again and then put the scroll view right we need to give a space between the scroll view and image view so here in this curve view we can do like this Android and then margin-top and they would say for this I'm going to go with 20 DB robotic design ok we have known extra space let's run the app again and see how it looks like on the emulator click OK ok now when you now when we scroll ok you can see that the text is not really that close to the image which looks really nice so you can scroll on the top to the bottom easily with scroll view all right cool that's it guys for this tutorial if you really enjoyed it please give it a thumbs up if you really want to see more of these awesome tutorials please hit the subscribe button thanks again for watching and happy coding

Channel: Coding Demos

Views: 112,647

Keywords: Android scrollview example, Android scrollview tutorial, android development, develop android, android app development tutorial, scrollview android tutorial, scrollview tutorial android, scrollview android, android scrollview, scrollview in android, android scroll, android textview scroll, android scroll view, android scrollable textview, android developer scrollview, android scrollable layout, android textview scrollable, how to use scrollview in android

Id: Wx1wnv4fzyQ

Length: 17min 31sec (1051 seconds)

Published: Sun Sep 18 2016