Placeholder Image

字幕表 動画を再生する

  • What's up, Programmers in Scriptures, this is right here, and in this course you are going to learn how to build a native android application using Cortland jetpack libraries and a little bit of help from fire base.

  • Now, before we jump into the android stuff, please be aware that the audio quality does improve.

  • After the first section of this course.

  • Be sure to check out the time stamps in the Description box and also check out the pin comment down below for links to more awesome educational content.

  • So that's it.

  • Hopefully you enjoy the tutorial.

  • What's up, everybody?

  • This is right here and you're watching my jetpack notes and E v M Android Scotland tutorial.

  • So in this video, what I'm going to do is I'm going to demonstrate the application that will be building throughout this tutorial, Siri's or building in increments.

  • And then we also have a look at basically a huge list of topics that will be covering so that you know what to expect in this tutorial.

  • Siri's.

  • So before we get to those finer details, let's do a quick demo of the application.

  • Jetpack notes has three features or primary user interface screens.

  • We're looking at the note list feature currently, and as you can see, we don't have any notes.

  • So it's kind of in a non Idol ST.

  • So notice display displays all of the notes, which are currently stored either in the local room database or the remote fire store database.

  • And the decision of where to save or retrieve notes is based on what they're the user is logged in or not.

  • And that's actually a concern, which is handled in the back end of the application.

  • So from this screen, we can also create a new note.

  • So I'm just gonna hit the plus button and we'll just create new groups.

  • Can't type new note like so and then I'll hit the checkmark button.

  • This is also where you can delete notes, and as you can see, we have the new note here.

  • Next thing I'm gonna do is I'm going to hit the key Ike icon, which will open the log in feature.

  • And as you can see, we are currently signed in.

  • So what I'm going to do is I'm going to sign out, okay?

  • And then I'm gonna head back to the note list feature by heading the backbone.

  • And as you can see, we have totally different note currently present for because that is, uh, what's coming from the local room database.

  • So I'm just gonna hit that hit the delete button, and as it can see, that's cleared that out and then we'll just log back in again.

  • Sometimes it takes a moment.

  • Here we go.

  • Area hand boom, you know.

  • So that's a quick demo of the application, and this is what we will be building in this tutorial.

  • So in order to fall along with the editorial, you're going to need to visit the depository link down in the description box below, and you'll need to either clone or download the code so that you can follow along properly.

  • What'll you is in each lesson, all sort of go through with you.

  • I'll give you specific instructions on how to create a starting point, so we're all on the same page, and then we'll carry on from there.

  • This tutorial will cover both front end, middle and back in topics for Android development.

  • For front end will look at constraint Leo Simple Android animations using animation lists using vector graphics which will basically allow you to have cool graphics and animations, which will scale with whatever resolution or screen size we're working with.

  • I'll show you how to build a recycler view, which happens to be the first thing I ever taught people do on YouTube on.

  • Then we will look at implementing the navigation library from Jet Pack View models from injured architecture components fragments.

  • And I'll do in the next video a big talk about model, view, view, model, front end architecture pattern for back in topics I'll teach you about using fire Base Off and Google Sign and provider for a quick and easy user management.

  • Look at using room and fire store for local and remote data storage, respectively.

  • I'll teach you how to hide these things behind a repositories so that the front end doesn't know or care where the notes come from, and also learn about simple dependency injection using android view, model and view model providers to get everything nice and wired together.

  • And finally, we'll talk about how to wire the end to end application together using Katelyn co.

  • Routines.

  • And let me tell you, I think you're really gonna enjoy that part, and in this video, I'm going to be giving you on overview and kind of an examination of the pros and cons of using the model view, view model architecture ER, which is the architecture that will be using in this particular tutorial.

  • Siris.

  • We'll also have a quick look at the packages and files for the demo application.

  • Just so you understand what's going on there now, Before we look at this pattern in detail, I'd like to address what I consider to be a few misconceptions about not just model Viv you model but software architecture front end geoeye patterns in general.

  • So I'm going to assume that most of you have heard about all kinds of different three layer architectures.

  • There's model view, controlar la TV presenter, Model View view model, which Google seems to be putting all of their weight behind or sorry, the answer came rather.

  • And then we have other options, like Viper or there's motive, You intent by Highness Dorfman, And I'm sure what most of you are wondering is, would someone please just tell me which one of these is the best architecture?

  • Well, I'm going to try and burst your bubble right now, because in my personal opinion, the answer and this is opinion is fairly widely shared among senior developers is that the project requirements at hand will dictate the best architecture for you.

  • So one of the things that I've noticed over the years of trying several different approaches, different patterns is that they work good in some situations, and they can be counterproductive in others.

  • Now it's better to follow on architecture, which doesn't really work super well for your problem requirements than no architecture at all.

  • But what I'm trying to say here is that over time when you know things about all these different patterns, just start to see Okay, well, this particular feature of this pattern is useful in situation A.

  • But it's kind of a problem in situation.

  • Be so what I would like to do is basically explain in this video that motive you view model is not an exception to that rule.

  • It is not necessarily the best architecture for all situations, even on the invert platform, but it does have some benefits and some deficits.

  • So what I would like to do is basically give you an idea what those benefits and deficits are.

  • And, uh, yeah, we'll get into that in a moment.

  • But before we talk about that, I'm going to try to give you, like, a general overview of the architecture used by port example.

  • Okay, so what we're gonna do now is we're gonna talk a little about the model view, view, model, front end graphical user interface pattern before I jump into this.

  • One thing to note is that unfortunately, developers do not always consistently build these things the same way.

  • So what I'm going to explain to you is a generalization.

  • This is my interpretation of the model view, view, model architecture.

  • But like I say, you're going to find different variations of this.

  • And the most important thing for you to know is that different variations will work better in different situations.

  • So what exactly happens, how does it work?

  • So the first and most important thing that the defining characteristic of model, view, view model, in my opinion is that essentially we have this thing called a view model in the middle, which encapsulates the both the behavior and the state of the front end of the view.

  • Both the behavior in the state.

  • So state being the data and the behavior being, what do we do when some event happens?

  • Kind of deal.

  • So the thing that's unique about model Viv, you model Is that the this thing in the middle of the view model?

  • You're not allowed to have this view model actually directly tell the view what to dio.

  • I'm not allowed to draw a line from here to here, which would be a dependency.

  • So if you're doing motive, you presenter, you are allowed to do that in model Viv.

  • You model.

  • You know these from interpretation Instead, what happens is we basically have to have two dependencies, two different channels from the view to the view model.

  • This is typically how we like to seven up, So one channel is just synchronous.

  • And this would be the kind of thing where let's say, for example, if we're coating for android or whatever, the user hits a button and then the view congee just if you know, just do a synchronous call, just a function called to the view model.

  • Hey, this button was clicked, so that's one of the ways it can communicate with the view model the other way.

  • And this is how it actually gets the data out of the view model.

  • And this is confusing for some people.

  • Is that you see this eyeball thing here?

  • This is my representation of what's known as the observer pattern s so you could use data mining.

  • What I like to do is I like to use basically, ah, a producer, consumer consumer relationship or the observer pattern.

  • It's called between the view model between the view and the view model.

  • So basically, what I'm saying here is at the start, At some point, the view model will ask for observable Sze.

  • So it's going to ask for something from the view and this thing that it it gets started.

  • It's gonna ask for something in the out of the view model.

  • And when it gets that object that observable object, I want you to think of that observable object as like a pipe that data pops out of at on indeterminate time whenever the data pops out of the pipe.

  • Whenever the V model asked the model the back end for some data, it's going too.

  • Then published that data.

  • And if the view is listening than the View's gonna grab that data that pops out of the the observable pipe, and then it's gonna render that on the screen.

  • So that's basically how model view of you model.

  • Generally speaking, works.

  • So one of the things to keep in mind about this is that the benefit of model Viv you model is can also be the deficit.

  • So one of the main benefits of it is we can have a many to one ratio of use to view models, and that's because the view model does not depend on any view.

  • Specifically, the cost of that is that you lose fine grained control over what the view does.

  • So naturally, in many cases, you're going to have to actually have more logic in your view, because the view is going to have to be able to interpret what's coming in from the observable streams.

  • So there's different ways to solve that, Um, and the logic isn't necessarily gonna be super complicated, but this is one of the things you want to think about when you're working with model view via model in particular.

  • So now that I've given you like a general overview of the pattern.

  • I just wanted to get a little bit more specific about the things I am fond of and not so fond of in this particular architecture, with the hopes that it can help you inform your decision about whether you think it's a good idea to use it or not.

  • So the most important thing just to start with the cons here in this particular architecture, er, is that the synchronization between the View and the View model presents a problem of separation of concerns.

  • If you're not sure what separation of concerns is, I've written an article and a link it down in the description box below, and it'll basically explain my perspective on separation of concerns.

  • But I actually do consider it to be probably the most important principle to observe in software architecture.

  • And it was the reason why the synchronization logic can be awkward and there are ways around.

  • It is because we don't have that fine range control over the view.

  • So this means we have basically two options and these air kind of what I would consider to be subsets of model, view, view model.

  • So option number one is to basically fill the view with all bunch of logic to interpret the data, which the view model publishes to it.

  • So this approach will allow you to have very reusable view models, but it's going to basically make it so that you feel your fragments or whatever view class you're using with a whole bunch of logic.

  • When you feel something with a whole bunch of logic, that's really the time when you really need to be careful about testing now.

  • I personally don't like to test you.

  • I classes.

  • Instead.

  • I use humble object or passive you, which basically makes those classes generally speaking one liners.

  • And it makes them simple enough that they don't even directly need to be tested.

  • If you don't take that approach and you want to fill your fragments or reviews with lots of logic, you will need to probably use espresso or Roble electric to make sure that you're testing everything adequately.

  • So one of the ways around this, and this is the key problem is the presentation.

  • Logic is awkwardly distributed between the view and the View model.

  • One of the ways around this is to actually make it so that your view model knows a fair amount about the particular view that it's working with.

  • So what I mean by that is it's not that it has a direct dependency, but you can fill your view model with all kinds of in this tutorial would be like live data observable Sze uh, You can fill it with a whole bunch of these observable fields, which will dictate, for example, should this text box be highlighted, or this that and the other basically details about the view without actually having indirect dependency.

  • So this will allow you to basically pull a lot of logic out of back out of the view and into the view model, and that's gonna make for a much easier to test view.

  • The caveat to doing this is that if you have all kinds of details about a specific view interview model, even if there's no direct dependency, you are still tightly coupling that view model to that particular view.

  • So you lose the reusability of the view model if you take that approach in exchange for not having to have a whole bunch of logic in your fragments.

  • So with those considerations in mind, which aren't necessarily application breaking.

  • But as you can see, there's not actually a truly specific motive you view model pattern here.

  • There's actually some variations in it, and this is something that I've even heard the Android team admit when they were looking into this particular pattern.

  • So, as you can see, we've kind of got these different approaches to it, and they're gonna have different benefits.

  • So if your user interfaces air like super simple, then you're probably gonna be able to get away with having fairly decoupled on specific view models.

  • And that's kind of one of the main benefits of this particular approach is that if you don't tightly couple your view models to predict particular views, great English, er, then you can promote the reusability of those real models.

  • Ah, side benefits is, of course, you are applying some kind of separation of concerns by separating the these things out.

  • So you're gonna get some benefits to testing and modularity as well.

  • And one important feature which this is something that specific toe Oh, and for its particular tools or inferred architecture, components and jet pack in that.

  • But one of the biggest benefits for this particular approach on the under platform is that concurrency and life cycle really is a breeze.

  • When you apply this particular architecture, er and you use their components.

  • So the final, more detailed point I'd like to make on this particular architecture, er, is that if you confine yourself to just having model view view model, then you are definitely while I won't say definitely, but probably going to run into problems where you have this awkward separation between the synchronization logic of the view model and the view.

  • And you have to kind of pick one path or the other reusability or not filling your views full of logic.

  • There's actually another solution which you can apply, which is actually what I apply in my production code.

  • I don't confine myself to just using model, view, view model.

  • In fact, most of my architectures when you look at them, you'll usually see something, which is something along the lines of like model, view, presenter, view model, and the View model has a different role.

  • It it's not so much a logic class is just a front end session data container.

  • So anyways, the point of that is just to stay here for the people listening.

  • This certainly do motive.

  • You view model and carry it as far as you would like.

  • But if you get into a situation where you have this ugly, awkward division of presentation logic between this the view and the view model, another option is to actually create 1/4 class like a presenter.

  • Call whatever the hell you want.

  • I just call it a logic class, and then you can actually pull out that logic again, decouple it from the view model, and then you can have this sort of fourth object handle things like click events.

  • It's gonna simplify your view models.

  • And I would kind of suggest that as you start to build more and more complicated applications, if you're building simple applications, though, usually you can get away just flying with just having the view view model in the model.

  • So the last thing I'll be doing in this video is giving you on overview of the package structure of this particular application.

  • So the repositories that jetpack notes and BBM Courtland under Bracket Cove, Lincoln Description box down below, and what we'll do is we'll just open up the APP module here.

  • I'll just zoom in a little, and I just wanted to talk about what's within the main package here.

  • So we've got four primary packages or directories so within common you're going to find classes which are shared across different parts of the application.

  • So that's why we have this common model here.

  • So this is where I like to put things like, for example, based classes.

  • So we have a base view model, which is like an abstract class, which shares some code across ah, set of different view models.

  • Constance and a lot of extensions.

  • So there's a lot of ugly kind of data mapping stuff, and this is something that basically converts from a fire based task into our extreme for StoryCorps routines, not Rx Jabba, uh, force of habit.

  • And, yeah, just all kinds of mappers and stuff like that.

  • So we'll be going into more detail.

  • But I just wanted to give you a quick glimpse there, so that's, uh, common.

  • We have the basically two primary features of the applications.

  • We have the log in feature and the note feature within law again, you'll, of course, find the logging activity log in event log in view and user view model.

  • And then in each of these feature packages, you're going to find a subdirectory called Build Logic, which will basically contain the dependency injection and user view model fact factory stuff to create the Vue models.

  • No dagger to required, so everyone can chill.

  • Chill out about that.

  • Um, so, anyways, one important point here is that I did actually try to do a single activity approach in this particular application as per what they suggest in navigation.

  • I was not able to do too tight coupling to on activity results, which, as of making this tutorial, is not supported by the navigation library.

  • If you're watching this in the future, it may be now.

  • And that is probably my biggest criticism of the navigation library at this point is that it did not support on activity result, which is problematic.

  • Anyways, I will be demo ing the navigation library in this tutorial.

  • But I even though I tried to do single activity, I literally couldn't.

  • So there's two activities and three features.

  • Next we have the model package, so this is basically going to contain everything which is related to storage and access to data.

  • So we're thinking repositories, implementations, firebase stuff, room stuff, data, models, that kind of stuff.

  • Like I say, we'll go into more detail later.

  • So then we have the note directory, which contains all of the different files necessary for the note detail and the note list features.

  • So, as you can see here, it's pretty much what we like to call Package by feature approach.

  • But it's something which isn't doesn't necessarily fit into a particular feature.

  • I will put that in a common directory.

  • So within the note package, you see, we have the no detail and note list subdirectories and these.

  • This will contain the views and view events and build logic for this particular you I screen and I just to group them together because they both work on the same conceptual conceptual note object.

  • And then we, of course, have the Vue models and factories and stuff like that for these different views.

  • So that's it for this particular video.

  • Hopefully, you learn not just about model Viv you model, but a little bit about software architecture in general.

  • And Michael here isn't to a crap on model, view, view model or to say that you shouldn't use that approach.

  • I think you can build beautiful applications with this particular pattern.

  • What I wanted to do, though, is kind of explained a lot of the beginners out there who are confused about this particular point.

  • Ah, that the big kind of consideration with this architecture, er, is that synchronization between the view and the View model can be a little bit awkward.

  • There's ways to solve it, though, and we'll talk about that as we progress through the editorial.

  • So, for starters, I'm going to show you how to find free open license images like the one this animation is based off of.

  • I'm gonna show you how to create scalable vector graphics out of these P and G's or a raster graphics using some free tools.

  • I'm gonna show you how to import those vector graphics in Andrew's studios that we can actually use them in our applications.

  • And finally, also, you have to create some simple but effective animations which scale, and it won't require you learning 15 different animation AP eyes because we all know there's quite a few different animation hippie eyes on the android platform.

  • So if all of that sounds interesting to you.

  • Please do consider hitting the light.

  • But, like button down below, consider subscribing.

  • And with that, let's jump into some discussion on Victor Drop bubbles and graphics.

  • First is raster troubles and graphics.

  • Now you may be wondering what exactly is a vector trouble?

  • And how is it different from, say, like a bit map, PNG J Peg or all those other formats that you're used to working with?

  • Well, the key difference is that bit maps, or P and G's or J pigs.

  • All those sorts of things, which are known as raster graphics, are, in essence, a collection of bits bit map hence which ultimately represent pixels drawn on the screen.

  • So, for example, if we wanted to interest a graphic type format, render a triangle, then ultimately you're gonna end up with something that looks about like this.

  • If you zoom in close enough, so we want to think of like each sort of segment of some screen or device has a finite number of pixels.

  • Then we basically say these were the pixels that we want to draw.

  • This is the color, and you end up with something like that.

  • So the problem with these particular formats, which are, as I said, no Nas raster graphics is that they don't scale well across a variety of different displays or resolutions.

  • One solution to this is to provide many different versions of the same images, the same image which have different resolutions.

  • So on a really high quality device, you're going to provide a much higher resolution, icon or image or something like that.

  • While this kind of works, the problem with it is that you can end up with a situation where your bloating, your packaged applications or taking up a whole bunch of your users data by downloading a whole bunch of really large image files.

  • So if possible, we kind of try to advise against having just a huge number of image files in your a p.

  • K.

  • So as opposed to having say, a fine ain't number of pixels represented in some kind of collection format, Victor troubles take a different approach.

  • So essentially what we're doing is we're supplying a series of coordinates, and you can add much more detail than just coordinates.

  • But say, for example, if we wanted to render a triangle, we would for example, give in this file.

  • We would write down a series of points.

  • So, for example, X one.

  • Why one x to y two x three x three.

  • Why three and then what you do is you would instruct the computer to draw, say, lines of a particular color between these points.

  • And as you can see the benefit of doing this, is that the actual work of figuring out the scaling and resolution and how to render it on a particular device screen?

  • Uh, it's done on the fly, and it's independent of finance set of pixels.

  • So that's a big fancy way of saying it makes it scalable.

  • It's basically like saying, Hey, here's what I want you to draw And then the computer basically figures out the mathematics of doing all the scaling and stuff like that.

  • The end result is that you get images one image file, which can be rendered for basically almost any kind of screen size or zoom level or things like that.

  • The vector graphic will be creating today forms the basis of the rocket ship animation in my jetpack notes and road architecture components application.

  • So just unimportant thing to point out.

  • Notice how this animation scales really quickly and easily to a variety of different screen sizes, as you can see here.

  • And so what I'll do is I'll show you where I got the basis of this particular image from please visit the repositories link down in description box below, clone the application.

  • And in this application, you're going to find a PNG image file, which is, of course, a raster graphic type file.

  • And what I'd like you to do is go ahead and download that repositories.

  • And this is the file that will be basically turning into a vector driveable, so you don't have to download it from, say, open Clipper.

  • So if you happen to have more all encompassing video editing software tool like photo shop or something like that, chances are it does have the option to export from, say, a bit map or PNG to an spg file, Uh, or some other kind of vector trouble.

  • Um, if you have that option, do export to SPG and you can basically skip this part of the tutorial.

  • I'm gonna be using escape, and the reason for that is gimp does not actually allow you to export to SPG Escape is a free, open source software, so that's why I chose it in particular.

  • But you can use whatever you prefer to create your vector trouble.

  • So what you want to do is go ahead and open up the particular PNG file rocket underscore one dot p and G from the repository, and you're going to need to select it, so click on it and had control a and then go to path trace bit map.

  • Now there's a couple different options you can select here.

  • You're going to, of course, want toe pick the option, which renders your image as you prefer.

  • I'm going to select colors like so, And as you can see here, that looks about right.

  • I'm just gonna click, remove background and then we'll hit okay to actually execute the trace and looks like it has worked.

  • And now we have our traced O S V g file going on here.

  • Our collection of paths and the last thing we need to do is go to file save as, and you can just save it right into the same draw Bill folder that you grabbed the PNG file from.

  • I'm going to name it the same thing.

  • Just make sure that for the save as type thing you have selected here, you're gonna wanna pick, escape, spg.

  • All right, so we've created our SPG file through in Skate Inc Escape.

  • But as you can see here, it has a whole bunch of metadata and crap in here that we don't actually really want to include in the thing that will be using in our project.

  • So what we're gonna do is you can just go Ray, click on resources or drop A ll select new Vector asset like So.

  • So just a quick little tip here if you in the asset type field here.

  • If you select clip art and then you condone and then click on this clip art icon here, you can actually select from a whole bunch of pre made icons and then create vector assets in Andrew's studio out of those as well.

  • So just a quick little tip.

  • You don't have to go to the Web site and download these assets.

  • You can do it right here, and this is far more efficient.

  • It was.

  • We're gonna go to a local file and so go ahead.

  • and give the thing an appropriate name.

  • So I'm gonna call this, uh, we'll call it.

  • I am for image, and we'll call it.

  • What was it called?

  • Let's say Rockets one, for example.

  • And then we need to, of course, select it, find it in the path variable here.

  • So we're gonna select Rocket one spg like so this particular size variable can be easily changed.

  • It's not actually that important.

  • I do like to leave the opacity on 86% especially in, like, a dark themed application like this one.

  • So I'm gonna leave that, uh, where it is and weaken, Basically, Just leave all of these different defaults here.

  • Once that is selected, we're just gonna hit next hole this interview and it's gonna tell us that the output directory is going straight into trouble.

  • That's totally fine.

  • Rez.

  • Maine is fine.

  • And go ahead and hit.

  • Finish.

  • So what that has done is, as you can see down here, that's created Ah, new drop.

  • All this one's called.

  • I see Rocket One.

  • I thought I typed I am rocket one, but I'm I'm totally confused now.

  • Anyways, eso What you could do is go ahead and open up this thing and just notice that it's also an XML Victor drop ball file.

  • But it's just a little more purpose built for Android.

  • We have our android variables in here, and that's basically all we need to do to import our SPG draw ble into Andrew's studio.

  • And then now what we can do is we can just refer to this particular XML file like any other kind of trouble, and it should show up appropriately.

  • So one of the easiest ways of thinking of and designing animations is just to suppose that we have a Siri's of still images being looped through over time, kind of like a projector with film reel if you ever go to the movies.

  • So what we're gonna do is we're gonna create an animation list XML file.

  • It's gonna be super easy, and in this list will supplying a series of different dribbles to animate through, and that's gonna help well, actually create the animation effect.

  • So in Andrew's video, what I'd like you to do is you're going to right click on the Drop a folder, but a new trouble resource file and what we're gonna do is we're gonna call this thing rocket Loop to.

  • We're gonna call it that because there's already a file called Rocket Loop and you can leave the qualifiers in that as defaults.

  • So the first thing I'm gonna do is I'm going to change this to an animation list, as you can see here and then in this animation list is where we will supply the different troubles that we want to loop through.

  • So we're gonna create items and we're gonna say item, android, draw ble.

  • And so what we're gonna do is I'm not gonna show you the whole process of creating all three different troubles.

  • But what we want to do is we want to supply our scalable vector graphics here.

  • So the thing we had was I am actually got turned into I c rocket, um one, uh, and what we'll do?

  • So that's the one we created in this tutorial.

  • I'm actually just gonna change us back to the default.

  • So this is I am rocket one, and you can do this too.

  • If you downloaded the depository or you can use the icy Rocket one I don't really care on.

  • Then what we're gonna do So we've supplied a particular Drabble.

  • Then we want to supply a duration in this case.

  • So I'm gonna take 200 which is about 1/5 of a second.

  • So this is gonna be a pretty quick animation, and then we can go ahead and close off that particular XML Tech there.

  • I'm gonna click at the end here and hit control D twice, and that's just gonna copy to the next line.

  • And then, of course, we're going to add I am Rocket, too.

  • And then I am Rocket three, like so And that is it for our animation list.

  • So go ahead and create that.

  • And then finally, we'll look at how to actually access this thing in the coat.

  • All right, so I've opened up fragment no detail, XML, which is the thing I de mode earlier.

  • And so what you can do here is ah, using either on image button or in this case, an image.

  • You you're going to want to specify the source of this particular view as being the animation Not, of course, the draw Bull's.

  • So go ahead and do that.

  • And then what I'll do next is will show you how to actually get hold of this thing and start the animation in the Java or Katelyn code.

  • All right, so I've opened up no detailed view, which is in the repositories, and what we'll do now is will see how to actually start our animation list going.

  • So I just a quick note here.

  • If you're wondering why there isn't any fine view by a D or anything like that going on in this particular file, it's because I'm using Scotland synthetic properties for the user interface.

  • Ah, but in any case, however, you prefer to get a hold of the particular views.

  • And XML, you're going to want to do that.

  • If you have to use fine view piety, that's fine.

  • So what I'm gonna do is I'm going to scroll down to the function where we actually start this animation trouble.

  • I'm just gonna give us some more ring here.

  • So the way that we actually start these droppings going is you're going to want to get a hold of the actual view.

  • Ah, which possesses the animation.

  • And then you're gonna get a hold of the draw bill so you could say it say, in Java I am.

  • I am.

  • Be no detailed satellite dot get draw bull or something like that.

  • You're going to want to cast it to an animation trouble.

  • This is how we do casting in Kahlan.

  • And then the function we want to call is Start.

  • So what that's going to do is in this particular case, that's going to start our ah animation here going now In this particular feature of the application, Theano Nation just runs permanently just as a little visually y effect.

  • So I'll show you a few other little options for these particular animation lis troubles.

  • Okay, so what I've done is I've opened up note list view, which has a few more things going on with these particular animation list drop balls or animation troubles.

  • Rather So, first off, I've showed you how to start just a plain animation.

  • There are other animations in this particular application, so there's actually a background space animation which is always looping, and one thing in particular do with that.

  • And I've actually just added this into an extension function and Katelyn, so I'll show you what it does.

  • So basically, if you want to specify, say, a fade animation, then you're gonna want to set the inter fade duration said exit figuration, and then that'll allow you to fade between the particular drop balls.

  • We don't need to do that with the rocket ship animation, but it works nicely with our space loop animation.

  • And then, of course, we call start to actually get animating.

  • Now, in this particular feature, depending on what goes on, we do need to actually stop the animation.

  • So when you want to do that again, you're gonna want to cast the draw ble of the view that possesses the animation.

  • And then you just want to call stop, as we see here, so that's basically it.

  • So what we're gonna do is we're going to build the log in form of the space notes application.

  • Quite specifically, we're going to be building this layout and ah, the purpose here is to teach you some of the basics of applying some principles of material design and also the basics of using the constraint layout effectively because one of the things with the constraint layout is that there's a way you can work with the tool in the design editor where you're clicking, dragging like 50 different constraints and attaching all these things together.

  • And then, more recently they've added some features where we can streamline all of it.

  • A lot of that process, so that will be the main focus of today's video.

  • Also talk a little bit about styles and a couple different things like that.

  • But, yeah, let's get started.

  • So before we build a layout itself, I wanted to talk about some styles and resources that will be using.

  • So we will be using animation troubles for the animated background, the space animation and also for the antenna animation.

  • And we'll also be using some vector troubles for our icons and also the antenna animation.

  • So if you're not familiar with those topics, what I'm going to see just you do is head over to the previous video in this Siri's number three.

  • Because in that video, I cover howto create vector troubles and animation lists and how to do that with totally free tools.

  • And if you're curious about what a vector trouble is, just go watch that video.

  • But understand, it's ah, you don't necessarily want to use them everywhere, But the benefit of using them is that you can have one file which scales to multiple different revel resolutions as opposed to having to supply images for each particular resolution.

  • So definitely consider checking that out.

  • But what I am going to ask you to do now is in the description box below.

  • There is a depository linked to the repositories that'll be which contains the code that will be working with.

  • So hopefully you've already done this before.

  • But if you haven't and you're just jumping into this tutorial series, go ahead and clone or download that code because that will be the basis from which we work from.

  • Will also be using some styles which are located in the view styles XML file.

  • So the purpose there is just to remove some redundant XML attributes and tryto get it so that if I need to change something, I'm only changing it in one place.

  • I won't be going into detail about that in this particular tutorial, but do consider checking that out because, as you'll see, we'll be adding some styles.

  • Sure, Leo files for that purpose.

  • All right, so the file that we're going to be rebuilding specifically is fragment log in.

  • So hopefully At this point, you have downloaded or cloned the repositories.

  • If not, you can of course, still follow along with what I'm doing here.

  • So Ah, yeah, As I say, we're gonna be rebuilding Fragment log in.

  • And in order to have the code easy for you to reference, just go ahead and right click on the layout folder, go to new layout resource file and we're gonna create a new one called Fragment Underscore Log in underscore demo like so and go ahead and set the route element as a constraint layout.

  • There's a couple different options here is to just make sure you select the constraint loud.

  • But if you have to change it later, that's fine, too.

  • Here we are and we are ready to get started.

  • So first thing, let's go ahead and give it an I d.

  • Here.

  • So I'm gonna type I d at plus I d.

  • And this one's gonna be called root fragment log in.

  • Just be where there's gonna be some over rates here because we have thesame layout in a different file.

  • But that should make things a little bit easier in terms of auto complete.

  • See how we've added an I d to that layout.

  • And then the next thing we're gonna want to do is set the background like so So the specific background we're gonna be using is called Space Loop.

  • Like I said before, if you want a detailed explanation of how to set these things up, you gonna you're gonna want to watch the previous video.

  • But let me just open up space loop really quickly here.

  • So that was just control shift end.

  • Open a file.

  • And this is basically what it looks like here.

  • So, as you can see, we've got a couple different travels.

  • Ah, the route tags animation list.

  • And the duration is basically it's going to loop through these animations kind of.

  • Gradually, this will be a like a two second delay and these droplets, just so you're aware these ones are going to be PNG files, whereas we'll see, with the icon act animation there actually vector troubles.

  • So anyways, so what I'll do next is I'm gonna click on this image button and just click and drag it into the top left corner of the screen.

  • Like so.

  • This is gonna open up a dialogue to select some kind of resource so you can select some kind of pre made resources that they provide for you for different.

  • Ah, just like kind of place holders and icons and all kinds of different things.

  • In this particular case, we also have these really horrendously we're looking advertised.

  • Ah, I have a specific file in mind which I've added ahead of time.

  • So the trouble will be using in this case is in the project tab and we're just going to navigate to let's see here.

  • This is gonna be Ah, I see arrow back black like so I'm just gonna click on That's not actually black, as you can see here.

  • But that's fine.

  • So I'm just gonna click on that and hit the okay button, and that has added in this particular image button trouble.

  • So what we're gonna do first is I'm going to show you one of the ways to kind of manually set the constraints for constraint layout and then for the rest of this particular layer, will see a way to do it way quicker that works in certain situations.

  • So the first thing I'm gonna want to do is now that I've dragged this thing into a particular every area of the screen.

  • I'm gonna wanna basically constrain the top of this view to the parent top.

  • So I'm just gonna click and drag and then kind of bring it to the top of the screen here.

  • Can't really see what's going on in this editor.

  • So let me switch to the blueprint editor here that I'm gonna click and drag to the left side of the screen.

  • And as you can see that as constrained our back button like so And what I'm gonna want to do is I'm just going on to play with the margins a little bit.

  • I think I'm going to do 16 by 16 for the margins.

  • Sorry for the very crowded screen.

  • So, um, we're almost done with the image button, and this is gonna be like our back button here.

  • Well, one thing I wanted to do is I want to make it so that it it's actually styled like a toolbar button.

  • Since we're kind of doing a custom tool mark.

  • So one of the hacky but totally legitimate ways I do that is I type style.

  • So this isn't actually a style which I created.

  • I'm just gonna take at style slash widget dot apcom pat, and then we're gonna select Action Button.

  • So that's going to do a couple of things.

  • It's gonna remove that ugly sort of dark gray background.

  • It's also going to add things like, uh ah, an animation when the images clicked and things like that.

  • So it's just gonna add a bunch of styling information.

  • And I do recommend that you do that now in the text editor.

  • We're also going to want to rename this view.

  • So I'm gonna call this thing.

  • I am be toolbar back like so.

  • And that's basically all we need to do here.

  • So one quick point, you'll notice that here, uh, Andrew's studio is automatically added this source comm pat Ah, a tribute here.

  • So this is because we're dealing with Victor drop balls.

  • So just one quick thing to point out here, If you're basically targeting at applications on a P I lower than 21 then this thing isn't actually going to work properly with all of youse.

  • And I'm not sure if it actually is back ported to everything.

  • But if you're using the vector troubles, you're going to want to go to your app level build.

  • Great.

  • I'll file your module level, build Grable file, whatever you've called it.

  • You know, one ad in this vector troubles equals vector.

  • Trouble starts you support library thing into your build.

  • Great.

  • I'll file now in this case because we're only targeting a P I 21 above.

  • I don't think that's actually necessary, but just for backwards compatibility.

  • I wanted to mention that.

  • Okay, so what we're gonna do next is we're going to add a whole bunch of different views to the layout.

  • Ah, and we're not actually gonna manually set the constraints because that could be quite tedious.

  • And instead, we're going to use one of the helpers in order to do that for us.

  • But before I worry about the constraints, we're just gonna add the views into the layout.

  • Set the idea?

  • Yes, at a little bit of design time attributes.

  • So we can get a rough idea of what it will look like.

  • And then we'll figure out how to do the constraints.

  • So I'm gonna open up the palate, and so we'll start with a couple different things here.

  • So first and foremost, I'm gonna want, uh, text for you.

  • And so our goal here basically, when we click and drag these into the design time editor here, they're not constrained, but they're going to set, like, an absolute value of where they're positioned.

  • So I just want to kind of roughly position them where I think I want them to go.

  • And that should be adequate.

  • So we have our first sort of log in status trouble.

  • Then we're gonna add in.

  • This is gonna be an image view, so we'll go to common, and it's of course, gonna take us through the dialogue here.

  • So what we're gonna do for this particular image view is it's going to be antenna loop is the draw bubble that we're looking for.

  • So again, this is actually a kn animation ah, animation list and resources and ah, so I don't really want it there.

  • It's just gonna position it right there, and we'll have to fiddle around a little bit with some of the attributes in a minute.

  • So I got that thing positioned there, and then we have another text view below that.

  • So I'm just gonna click and drag.

  • I know this isn't super visible.

  • It's okay.

  • We'll figure that out in a minute.

  • All right, so we've got that text for you, and then finally there's a button.

  • So we're just gonna click and drag that down to the bottom, and there we go.

  • So as you can see, we have a basic set up, but everything is really ugly.

  • So the next thing we'll do is we're gonna hop into the text editor and then just set a couple of things very often.

  • What I'll do is I'll spend most of my time in the text editor.

  • Well, when it comes to like setting up the actual constraints than oftentimes, I find it easier to do it in the design editor.

  • So the first thing I'm gonna do is I'm just gonna fix all of the different generated i d s so using whatever convention you like.

  • As you can see, I have some habits of mine from other platforms.

  • But we're gonna tape lbl Yeah, this one's going to be called log in Status Header.

  • Then we have our image.

  • You so I don't want this thing to be wrapped content wrapped content.

  • This thing is actually gonna be 100 and 28 dip anyways, We could fiddle with that in a minute for its I.

  • D.

  • That's going to be I am the antenna animation like So?

  • So I'm trying to find an adequate zoom level here that's not too obnoxious and ah, yeah, Then we've got our text view.

  • So this one is going to be called mobile log in groups log in status display, and then we have our button at the bottom.

  • So this one is going to be called BTM off attempt.

  • So you don't have to use my particular convention for naming these ideas.

  • But I do suggest you use a convention.

  • I'll probably end up switching to Camel case for these because using Scotland synthetic properties end up having to have this ugly underscore case in my cot Lin Jing code.

  • So just something to consider.

  • All right, So I wanted to set the I.

  • D.

  • S in particular before we go messing around here with the constraint layout editor because, ah, once the constraints are set, you need to mess around with the I.

  • D.

  • S afterwards if you change them.

  • So now that we've got that set let's happen back into the design time editor.

  • And so in this case, ah, I see that the image view has gotten position a little bit weirdly so I'm just gonna again kind of manually position these things where I think I want, Hm.

  • Something about like that.

  • And then what I'm gonna do is I'm going to switch to the blueprint editor here so we can have a pretty clear view of what's going on.

  • And then what we'll do is so I'm going to click on each of these views and holding shift.

  • I'm going to select all of them.

  • All right, Once we have everything selected, just right, click on one of the views and go to chains and then we're gonna create a vertical chain.

  • So what that's done for us is it's basically constrained all of these views to each other and the parent, as you couldn't see in this sort of chain.

  • So let's just hop back into the design editor for a minute.

  • So, as you can see, we have everything kind of align horizontally the way we want.

  • But the actual spacing here is pretty ridiculous.

  • So what we're gonna do is we're just gonna click on this little chain icon here, and this is going to change the type of chain.

  • So there's a couple different options there is.

  • Let me just grab my notes so there's gonna be spread inside, spread and packed.

  • In this particular case, we're probably going to want packed.

  • I think that's not it.

  • There we go.

  • Something like that.

  • Okay, so we've got these views roughly where we want them.

  • What I'll do next is I'm just gonna select each of them, and then we're going to constrain them horizontally.

  • So again, just click and you holding shift, select all of them.

  • This could be a little bit tricky with these buttons popping up.

What's up, Programmers in Scriptures, this is right here, and in this course you are going to learn how to build a native android application using Cortland jetpack libraries and a little bit of help from fire base.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

Android開発コース - Kotlinチュートリアルでネイティブアプリを構築する (Android Development Course - Build Native Apps with Kotlin Tutorial)

  • 1 1
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語