Using Android nested Horizontal scrollview in vertical scrollview

okay so today we are going to learn about how to implement vertical scroll view so you can see the vertical scroll view the second one how to implement horizontal scroll views you can see all the horizontal scroll view over here and then finally how to how to implement scroll views within another scroll view so here you can see that the horizontal scroll views right so they are inside the vertical scroll view okay next we are going to analyze the overall architecture of this layout so here you can see that we have the default constrain layout so that is for this entire app so there's a default constrain layout next we have the scroll view so this is the vertical scroll views you can see this big red box here so this is the vertical scroll view and then we also have the first horizontal scroll view so this is the horizontal scroll view scroll view okay and then the text is over here right so you can see that this whole is on the scroll view and this text field is inside they are children of the vertical scroll view right and then the vertical scroll view has a layout constantly up alright and these two elements okay they are basically repeated for the next horizontal scroll view and for the next text view and then another set another set right as you can see here so this is the hoist of the toys on the scroll view number one horizontal scroll view number two horizontal scroll to number three and then there's one more people okay the next thing is we need to understand some terminologies data is used and tries to do so the top part of any UI right in this case this is a image button so the tapa is known as top and then the bottom is known as bottom right and then the left side is known as stats and the rest is known as M okay and if this particular image button is inside a constraint layout right and then the controller is known as the parent to this particular image button right so assuming the ID for this particular image button is s 1 0 0 1 okay so if we constrain the top to the top of the parent and stat of the image button to the start of the parent this is what we will get in the layout XML so you can see here layer underscore constrain stat which is referring to the image pattern to start off okay it's been constrained to the start of the parent right so start is always the left hand side then the second constraint that we have is this particular arrow here so layout underscore constrain top-right referring to the top of the image pattern is constrained to the top of Heron okay okay let's look at the other example so over here we have the second image button which is s100 too so you can see that the top is constrained to the bottom of the first image button and the left is constrained to the left okay so how is it been expressed in the layout SML right so let's take a look at the first one so layout underscore constraint stack which is referring to the stack of the eleven side of the image button is constrained to again start off okay so here is the target which is s101 so it's referring to this particular image button alright okay the second constraint is top okay the top of this image button is constrained to bottom of which one was project s101 okay to the bottom of this particular image button okay so now we understand working on the project so I'm going to copy other images so over here you can see that this is not so basically when you when you have v.24 it means that certain emulator certain phone the Isetta density the Saturday city they will be using images from this right so if you want images to be common order various then you should not be choosing so you stay off us create vertical scroll view get my strategy used to create the horizontal scroll for you create one set and then duplicate the one set the second sets right so we are going to create a text view and also the horizontal spool to you as well as other images inside right subway to select the text view [Music] [Music] okay on the left of the which button constrain to the top of the constraint to change the tip of the ID okay take a look at the example right so this is the image pattern so here we can see that it is constrain the start the start of the image button on the left hand side of the switch button is constrained to the start of the parent which is constrained to the left if we who is the parent of the each button it is actually this constraint so this one is right so the same for the top is constraint so to speak things up okay I'm going to paste all right as you know we cannot have duplicate IP services forbidden dry so we can change this movie okay next let's look at this stream alright so now we want to if you look at this diagram so imagine this is the first image second pitch so Bobby one is not the country left inside of this alright so rather constraint the left hand side of the fish probably one piece and press one for space will show you all the available ID or you might be smokin straight to the right to the end and at the top we wanted to do the same as change here and now for the images to [Music] okay so I think the cap so we can change it here right XML so basically you can see this is the matching right so if there's no gap [Music] and it's l5 okay so we think we can quickly duplicate five images okay so we can copy this whole thing okay pace right so this will be V 3 right the left-hand side of fourth button okay so thanks before the left before before right so this is on the Schofield so therefore I am able to script [Music] so there's a shortcut for you to generate so recompile and restart so therefore you are doing [Music] okay the next thing to be done is of course to duplicate this text video and also to scroll for you so I'm going to duplicate this textview with a scroll view so second set so I think I forgot that if I stop ID little trolley is horizontal okay so I'm going to cook a cake for the textview first upgrade to the XML one I'm going to collect change the ID okay so now basically I'm working on this particular text view okay so I want to set the left which is the span of this text view okay so over here the start off which is the left of this text view I want to set to be the start of this text view all right so I need to change the target here I can press control space and if you recall taste that's why another reason to dip them meaningfully so they became is if we find the UI we are looking for so in this case now I want the top top of this text view right the top of this at the end okay which is the right side also to parent aside about why of the change is the top the top of this groove you should not be constrained because the last one was over five six okay [Music] right so next is to put the cake two more sets category TSD tree is not the tree okay so I'm going to the textview right so you'll be easier if you just collapse everything so I'm going to select this tool right click page so let's go on textview so you will be DST tree okay and then and the wedding it would be coming soon and here it would be to start off do one is fine as well is Greece about the left-hand side and then the top take to the bottom of horizontal - okay and for the scroll view you will be poised on the tree and you will be to the water right so we're talking about it that the second we get the really se tree can cast a spell on images so we end up with 10 so this 11 this will be child and therefore this will be 11 this will be 13 and then this will be chopped the tip this will be imported that deep cut in and then 40 okay the last one 15 this will be cost 40 40 50 correct so let's take a design right so you can see the last sets coming up okay and then let's continue to work out the the fourth set so we have one and one set to set and reset so let's copy this page in for the first time so last one of the TST for this will be tree this would be tree and spending on the horizontal view this would be four and then this will be four for all images the last one was 15 so this must be 16 and 16 so this will be 17 7 this will be 60 60 this will be a tip 1778 did this I did and then this will be 20 piece of me I did right so for the text okay so let's go to design mode right we can't see them because right okay so now that we have completed the four sets right so the last part we will be creating the vertical scroll view okay so that we can pull all the four sets into the vertical scroll view this up into just collects rack so we have four here to make things easier for all of us to visualize right so I'm going to color or this color LED and you can just place them onto a notepad for the tablet take a space or this year I go to a design mode right formatting here so now I'm going to look for the scroll view which is this one okay horizontal scroll view so I'm going to just drop it in okay and then I'm going to constrain to the car okay constrain to the left so they often screen and then again it comes with the linear layout vertical so I don't want it so I'm going to delete away and I'm going to throw in constraint layer so drop it into the school so I got a constraint ya know so I go to the textbook right so this just grow to you and this is the Trillium so I go back to my no-pet control is let off on trophy and I'm a patient into the Australian side so let's take a look Hey so I have it's running now right so this is a horizontal scroll view and now we have two working vertical scroll view you see that coming up okay the last part is of course to change the color change the the labor here link so for that to change the labor we can't go to the values right over here double click on the streets dot XML and slow the app is referencing this particular variable how I am run so you see the labor change [Music] okay my movies as for the color for the status bar as well as the action bar so you can go to the colors right so you can see here over here you can start to define different variable for the colors okay so you can see that this color is actually this color so we can keep this one and maybe we can choose a shade of blue so there's my and therefore this one is the status bar so we can click on here okay yeah so he's finally done click of course you will not just want to show the clothes right so when you click you can have the action to navigate thank you so thank you very much

Channel: The Interactive Studio

Views: 13,223

Keywords:

Id: ocvtvpU5AOI

Length: 35min 6sec (2106 seconds)

Published: Wed Jun 17 2020