Android App Development for Beginners | Maid Rondić | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Android App Development for Beginners

teacher avatar Maid Rondić, Professional Android developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

22 Lessons (2h 52m)
    • 1. Introduction to the Course

      0:42
    • 2. Installing necessary softwares

      2:33
    • 3. Installing Android Studio on Windows

      3:10
    • 4. Creating new Android Studio project

      4:18
    • 5. Creating virtual device and running your first App!

      4:51
    • 6. Customising appearance and running app on Real phone device

      3:53
    • 7. Handling Button click events

      7:12
    • 8. Handling users inputs and building Convertor App

      8:01
    • 9. Preventing app crashing and Toast message

      3:45
    • 10. Animations in android and delaying code execution

      18:50
    • 11. Creating new pages(Activities) Intents in android

      14:55
    • 12. Prettifying UI components - Using shapes in android

      6:12
    • 13. Learn how to generate APK file in order to upload app on google play store or send app to someone

      7:50
    • 14. Menu in Android

      10:01
    • 15. Themes in Android

      16:15
    • 16. WebView in Android

      4:14
    • 17. Animals App Preview

      1:17
    • 18. Creating row for the Image and Text

      11:57
    • 19. RecyclerView and RecyclerAdapter in Android

      14:13
    • 20. Adding Animal data and inflating rows

      7:57
    • 21. Handling clicks on RecyclerView items

      5:41
    • 22. Creating AnimalInfo activity and recapitulating project

      13:49
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

355

Students

--

Projects

About This Class

Learn the basics of Android App Development with java.

I will teach you how to build android application by using android studio and java programming language from scratch.

You will learn how to upload your app to the google play store and how to share your app to friends even though app is not uploaded to the play store.

If you ever wanted to build applications for mobile or tablet devices but you didn't know where to start, this is the real place. 

Course is designed for the students new in programming  as well as for people that want to learn how android apps are built from scratch.

With more than 2.5 billion active android devices, android is one of the most popular operating system in the world. With that said, there is a huge demand for android applications and android developers!

b54eec44

I assume that you have no prior programming experience so we go from installing required softwares to building and running our own application on virtual as well as on real device.

If you have any questions or doubts i am here to answer it in no time!

Meet Your Teacher

Teacher Profile Image

Maid Rondić

Professional Android developer

Teacher

Hello, I'm Maid.

I am mobile and backend developer with Chemistry R&D background. Coding and puzzle solving geek. Passionate about learning and sharing knowledge in the best possible fashion!

I have experience in many different technologies, platforms and programming languages including java, kotlin, php, python and more.

i tend to create "straight to the point" courses and keep them boring as little as possible.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction to the Course: hello and welcome. In this course, we're going to explore process behind building android apps from scratch. I will introduce you to the android world with an assumption that you have no prior programming experience at all. We will first start downloading all the necessary software required for building our own applications. Then I will show you how to create your first android project and how to run your application on virtual device as well as on your riel device. After that, we're gonna tackle text views, button clicks, user inputs and much, much more. Well, I personally hate long introductions, so let's simply jump in and start creating APS straight away. 2. Installing necessary softwares: Before we start making our own applications, we first need to make sure that we have all required tools for our development journey. Those tools are Jerry K, which stands for Java Development Kit and I D E, which stands for integrated development environment. In our case, idea will be enjoyed. Studio. So first, let's start by checking whether our computer has Jerry Cain stole or not on Mac, we can see Pope in the terminal, and you simply write Java sea space dash version. If the message that you have got from terminal say's something like Commander not recognized or similar, that means that you don't have installed Jerrick A. In that case, we need to download J. K. So open your Web browser on a search for GED K 12. Don't look. Then open the first link that comes out and then scroll down and click first on except license agreements and then choose download for your system. For example, if you use MacOS, I suggest you this one DMG file. It's very much easier to install it later. And if your Windows user you can download this one here now, if you want to check on Windows whether you have installed J. D. K or not, you need to open command prompt. So first you click on the START menu and then you type command prompt, and you also type the same command, which I used in my terminal Java sea space dash version. So now let's go in stole hundreds Studio I. D. So in the search field we will type 100 studio downward, and we click on First Link and you simply Donald Latest one. Here. It's a zits form actors, because I'm using Mike. And if you're using Windows, it will probably say for Windows. So you click on Download Android Studio. Here you accept all the terms and conditions on you. Click download Injury studio for Mac. In my case, it say's for Mac. But if you're using windows, I'm sure that they will give you version that's appropriate to a Windows user. So download and it will start downloading. After it's done, you simply install it and we can start creating our own APS 3. Installing Android Studio on Windows: So before we get our hands dirty with the code, we firstly need to get software where we will be writing that code program where code gets written is called Idee. In general, that I d means integrated development environment, and in our case it will be Android Studio. So open your Web browser and search for Android studio and press the enter key on your keyboard. We will now open first link that comes up and we will get most recent version off Android Studio at the moment off. Recording this video, it's 4.0 you. The number that you are seeing is not 4.0. Don't worry, it will work mostly the same as this one, so you will be able tow. Follow the course without any problems. So let's go in a click on download. Interest to deal. Now we need to accept terms and conditions and let's start downloading. I have escaped downloading park, so now is the time to install Android Studio. So let's go and click on installation file here, click on next. Now you can see that android virtual device is checked here. That device is emulator or the mobile phone that we will be using for running application that we're going to build later on. You'll see also how to run the app on your riel device and how to download other virtual devices with different screen sizes and other configurations in order to test the app on multiple devices. So now we will leave this check box checked here on. That means that entered visual device will come installed with enjoyed studio so that we don't need to install it manually. Now go and click on next. No, you can truth destination folder. I will stick with this one on click on the stall Installation is completed, Soul is going next and let's click on finish with Start Andrew studio check box checked. Now you can see that under his studio is running on its opened. If you see the screen, it means that you have successfully installed entering studio. In the next video, we will get more familiar, which, under studio environment and we will create our first android project. So see you then 4. Creating new Android Studio project: Now, when you're finished installing into studio when you open it, you will come up with something like this. No plea can start. You enjoyed studio project. So here we can choose whether we want to create application for phone and tablet for smart watches, TV's and many other gadgets that run injury system. We'll focus on making phone applications for now. In this feel here, we can choose between activities, so activities, something that user off our application can actually see. So its user interface off our application here we can choose between many templates, but in 99% off our development process, you will choose empty activity because everything else can be recreated from this empty activity. So we will select empty activity and we'll go next for the name off our application. We will say hello, Andrew. Next field is package Knee. If you're not familiar with packages, package is basically a folder. Where are java code? In this case, we restored for the package name. We use reverse domain off website if we have it. If not, it really doesn't matter. You can name it as ever you want. In this case, I will leave it as it is. So next we have project location, you can choose whatever you want and for the language will do job now me a p I a level. So this is very important. Here. We select minimum enjoyed version, which will support our application, as you can see currently are up, can be run on approximately 95.3% of devices. And if we change these minimal supported android version toe A by, for example, you can see that less than 1% of the devices can run a little vacation. And that's because not all the Android systems are updated. Not all the devices here and during nine or above. So now you might wonder, Why don't we choose? For example, injury 2.3 and approximately 100% of devices can run our application Well, that's because it requires a lot of time and money to test all application on all different devices because our application will be hey, same on every enjoyed version. And that's only one of the reasons. Other reason is if you choose to 0.3 version, we can't use features that are available only for newer versions. We select 2.3 versions. We can have access to a fingerprint, for example, on similar, so we'll choose AP I 90 or Android kick it. No, this part below might not be the same in your injuries studio as it is in mine, and that's because they change it on every single version. Don't worry about it. Just click on finish. Sometimes this building can take a long time. That depends on your computer, and sometimes it also depends on your Internet connection speed, because from time to time, entries to here will make some downloads in the background. No, when the buildings finished, just click here to hide this build informations. So project is greatest successfully and lets it for this lecture in the next one will see how to run this application on the rial device and also how to run it on virtual enjoyed emulator. So see you next 5. Creating virtual device and running your first App!: In case you don't see this main activity Java file and this activity underlined made dot xml file. You need to make sure that this project is selected here and that there is android. If there is not Android, click on this little arrow here as selected. Now, to open this main activity the job for you need to open this application folder than job than package. Name that we said before and you're simply open this class. So don't worry about this cold here right now. For now, you only need to know that in this file here will write Java code which will represent our application logic. For example, when the user clicks on a button, we will write code here which will tell the application what to do. So we will talk more about this later and we will see how to do that. Now we in orderto open this activity underline main dot xml file, which is actually design off our application. It is a preview off how our application will look like so to open this file. If you don't already seat, you need to click on this arrow which points to the rest folder now restaurants for resources. And here we keep images. Music's on layout files. The most important thing, which is in this folder is layout. So when you click a layout curies the file we're looking for now we will click on Project Again to hide this project structure in order to make this area wider. Now click on this. I I can hear and show layout decorations, and this is exactly how our application will look like when it's run on a mobile device. We'll talk more about this later. For now, we'll just run application to see how it is done, and later we will do some customization. Click on these green play button here and now. If you don't see any of those here, that means that you don't have any virtual device, so we'll create a new virtual device in case you don't have it. Click on this button here he re choose Which device would you like to create in the first column we see Name off the devices. Second column say's whether the device has placed or built in or not. Third column is about screen size on. In this way, we can test our application on many different screen sizes and see how our application becase. You can choose whichever device you like, but I will chose big. So no pickle next in this area. Here we choose between android versions. I suggest you to use the spy version. If it is first time you're creating a visual device. You don't also see download written here after the spy. And that means that we first must download software development kit for the pie version. And we will do that by simply clicking gone download. Since I don't have it here, I'll click on Oreo to show you when you click it, it will just start some downloads, and when it finish is just click on finish. Download will not be presented here anymore, and then you're just like next. Here, you can name your phone. If you issue, we can say, for example, my new device. We'll see portrait mode, so if you click on show advanced settings, we can make some changes. Here. We can make our ritual device to use in a build camera or to use emulate his camera. We'll see later. What does it mean now? Click on finish and new android ritual device is being created and it is created. Now, Now you can select it and click on OK, in order to run application. Now, we take some time to make her enjoyed virtual device working, because now it is turning on like the real device does. You can see down the bottom that it say's install. And it means that our application is being installed right now on this virtual device. Okay? And that it Congratulations. You made your first app up and running. So the next week you will make some customization is to our application, and we will run it on a real device. 6. Customising appearance and running app on Real phone device: before I show you how to run application on the rial device. First, let's customize this a bit just to make you feel more comfortable with hundreds studio. So let's click on this text view which says Hello, world here. Now you can see that right side off 100 studio has changed. Whenever you select user interface components here, attributes window will show up. Here We can change many things like size of this component or color and many other things. So let's change text size for these texts you here. So let's find text size attribute here and if you can't find it, you can simply search here for it by typing text and you can find here text size so has changed to a 25 SP. No SP stands for scale independent. Big salt and SP is always used. When we work with text, Just keep in mind it. Now let's change color off our text. So no, let's typing text color and here we can set it Toby Blue Dark, for example. Ondas, you can see color has changed. No, let's change background color off this text to you. There is area behind this Hello world which is constrained in this rectangle. So now let's search for Becky Ground attribute and let's make this color to be this one. Another change color off this whole background, which is called Ruutli Out. Or in this case, it's constraint layout. We'll learn more about Leo's later, so click here and for the background color. What set it to me. Orange light Click. OK, in order to run application on riel device, your first must enable USB debugging on your device. So let's see how it's done. I will show that on this emulator, but keep in mind that you must do it on a real device. So first you will find settings and now you find something you like about phone or system informations here on your device. It will be about phone, I believe, and you click there and next you find build number, which is here, and you need to top on it several times like this. And no, we're developer and just go back. And now click on this advanced here and find thes developer options. And here, let's find USB debugging. So scroll down on. As you can see on this device, it's turned on. So first you need to do that after you need to connect your phone with USB to your computer and then you just click on this play button here and in the area below connected devices. You can find your own mobile phone. In my case, it Samson you selected and just click on OK and the application will be installed on your rial device. So that's how you're an application on your rial device. In the next lecture, we're finally going to do something more interesting. We'll create new project and we will add buttons and we will connect user interface components with Java code, so I'm looking forward to seeing you next. 7. Handling Button click events: No, let's go and create a new project. First going click on file, then close current project, and then you can see that we have starting injury studio screen. Now we will go and start to new hundreds. With your project. We will choose empty activity and for the name of obligation, let's say and to and click on finish so no building process has finished. Now click on activity. Underline Main facsimil to design our applications interface and first click when I icon and show they have decoration. No, make sure that this magnet I come here looks like this, so make sure it's not crossed. No, it's drug. A button toe layout. Put it here and click on these empty circle here and connected to these hello world text. No, let's change idea off this button. I d is very important because later we use I d toe access this button from Java code. We will see that in a moment for the idea of this bottom. Let's say Bt and click me and breast in Turkey and for the text. Let's see. Click me. As you can see, text has changed Now, Now what? We're going to make is when the user clicks on this button. Here, text inside. This text view here will change from hello World Toe button is clicked, so let's go in Java code now. First of all, we need to declare our button and we will go and do that right here just after the first curly brace off this main activity class. So simply right button and let's call it as click meat button and cynical. So when you open the application, it will first run this on create method here, and this create method will set user interface, actually, So this line here will tell the application that user interface which should be presented toe our user is activity made and you can see that activity Maine is also here. So in your own application, this screen here will be show to the user. So we will now initialize are button here in order to do something with it later. So it's a click. The button equals find of you by i d and we type are which sent for re sources, and we know type i d dot and Bt and click me. And there's the idea that we said before. Now let's also declare our text to you because we need to change its text later. So let's go back and check the idea of this text it say's text for you so we could changes toe txt Hello world and press the enter here. Simply click on yes And now let's type in here next to you. Txt, Hilo. Cynical And let's declare it here are that I d don't txt Hello world when the user clicks the bottom and now what you want is to change the text off the text to you. Which ideas? Txt fellow world So how to achieve this? First we'll make a function which will be called change next and we will see public void change text as a perimeter off these function. Well say view. Have you no where we do that? It is because we want this function, Toby executed When a certain view is pressed on android, almost everything is view, so text to you is also view and button is also some kind of few. So now let's refer to that. Txt will say txt shallow dot and let's see, said text, and we will choose this one and is it is a text. Let's see, but is click. So now we need to go back in activity made. Let's click on this button here, and we need to find on Klink as the attribute here, as you can see, is there. But if you can't find it just simply right on click and now we hear Put the name off the method which we want to be executed when these button is pressed so you can also click here and it will show you methods that can be brute as want, like a tribute to you. And that's because if you remember, we put view as parameter here. So 100 studio automatically knows that this method can be used here and now Let's run the application, See the results. So no application is up and running. Now let's click with his button here. As you can see, text has been changed. So that's how we make connection from Java code to a user interface. So now you might wonder, why did we declare this button here also? So we did it because we also want to do something with this. But so let's change color off these button when it's breast and we'll also hear that Click me, but don't and I will call set big ground method. We will see color dot Let's see green Now let's run again. Let's see what happens. And now if you click the button no, concede that not on Lee. The text has been changed, but the color off this button also in the next video, we'll see how to get input from the user and do something with it. So see you in the next video. 8. Handling users inputs and building Convertor App: Now we're going to build application, which will convert inches to centimeters, so let's see how it works. So when you click here and typing three, for example, and click on convert two centimeters, it will show up. Three inches is equal to 7.62 centimeters. So let's see how it's done. We will start New Android Project first. So first, let's start No 100 Studio project. What's Jews? Empty activity and name it as each to C M converter. Let's go on finish. No, it's open activity underlined main dot xml. Done. Choose layoff decorations. We will delete these text to you here in order to get input from users, we use something called plain text or edit text. So when you were injuries to the aversions, it's called plain text. But in older versions, it's called edit text. And in fact, when we want to access it through Java, code will still must use edit text. So let's drag it here now. Don't forget toe add this constraint and then dragon Toby floor like so then we will delete these text here, and we will set hint. Hint is a text which will be shown before user types anything you'll see later in practice . What? Is that really so? No, just I mean input intra value percent for the I d. Let's say you didn t inch and press the enter key. Now let's add a button here. So dragon here for the idea. Let's say Bt in convert and for the text. Let's see. Convert inch toe See him now You can see that even though we didn't use all capital keys on this button, they are all capital. So how to deal with that by default? In injury studio there set. Toby always kept up. So to change it, we can click on text here. This is text representation off our design. So everything we do here by dragging and putting all items in here, we can also do with this text here. But for that you need to know a bit. XML Kotick. So find this button here which represents our button. They're click here, for example, and press enter and then typing text all caps and press the enter key and then typing fools . And now is you can see on this preview here letters are not all capital anymore. So go back to the design, and now we need a place where centimeter value will be show and let's make it Toby a text view and real dragons here. And let's add this constraint. So now we will delete this text. We wanted Toby empty before user clicks on a button and we will say txt. See him for centimeters. Now let's go to Java code and let's connect those elements. So first, let's declare edit text, which is plain text from before. Let's call it et inch, then declare text to you, which will be called TXT cm. And now let's initialize them. The best place for initializing values is on create method because you already know when the application runs. This is the first method which will be called so it is very usual toe make all instance. She ating right here, so this typing DDT inch is equal. Find view by i d are not i d dot unity Each does the idea that we set before No, What's a txt? CIA is equal. Find of you. Let's see de XTC a. No. Let's make a method which will be executed when the button is pressed. So let's type in public void convert and as parameter we'll say view, Have you in this way? Entry studio will know that this method expect a view to be clicked. No, there is a question how to fetch the well you, which user inputs so first will make a variable off type string. Every user's input will be of type string, even if that was a number, and later we will converted this extreme value to a double in order to use decimal points. So let's call this variable inch in boot. No would say equal. And to fetch the value from a certain edit text, we need toe first to refer to it and then call a method called Gets text by typing dot get text. And after that we need to say DOT does drink and cynical. So whenever user input something and then clicks on the battle, this variable here will hold the value which user has typed in. Now we will convert this value to a centimeters, so let's see double. We will use double because we want to be precise. Will use decimal points on the result will call this variable See him and the first we need to convert this string value toe a double, and we do that by typing in double dot bars. Double and we say entry. And after that we will multiply this by 2.54 in order to get centimeter value. Now let's throw a message to the user to set the message. Will use these 60 centimeters and will call Dr Seth Text. Let's first refer to these input value in tribute and always concoct innate some strings in order to make a sentence. So let's say bless and no typing in which sense for inches he's equal to space Plus, and I always get this value retreat. Calculate. See him? No. Before running application, we first must, as this method as an attribute to our button. So go back here and as on click, let's set dismounted. And now we can run application. So typing 14 and click here, and as you can see, it stays that 40 inches is equal toe 35.56 centimeters. Now I encourage you to make similar application, such as foreign hide cells. Use converter. So that's it for this tutorial. I'll see you in the next one 9. Preventing app crashing and Toast message: If you haven't noticed there is a small problem with our application, let's see what happens if the user inputs a world instead of number. Well, that's right in Hilo. Now, if you click on a button, our applications going toe crash and let's see what happens. What causes this error to see what causes the error? We used this logic it here we can click on it and EastEnders verbose. You just choose error. And now we're looking for blue text. Disable text here will point toe a line in the code which caused crashing. So when you click on it, it will mark this line here. So what's happening? Well, when we type inward process off, converting input to a double will fail because work can be a number. And that's why our application is crashed. So to prevent this, we can do it in two ways. We can go back here and as a input method off edit text. We can choose number and un select the sex here and now if you run the application, you will see that user will be able tow input only numbers. So if you could cure, you can see that only numbers will pop up, and the other way is to use something called Try Catch. So since this line of court cozy scenario, we can surround this line off coat. We try block like so and here after these curly brackets, maybe catch and that exception e and add one more pair off curly brackets. And here we will create a toast message. So click on this and is a message. Let's make it to be, Can't convert a It's drink. Those message is a message which will show up for a short period of time, and it will disappear. We will see in a minute how it looks like, but you can see this great out text here, says text. And this will say context. Just don't type it by yourself. It's feature off 100 studio. It adds it by itself. So, for example, if I the lead is, you can see that there is no context. But you simply typing this key and context will show up by itself. You can see that we have red error here, which say's country soul symbol cm. That means that compiler doesn't know what you see him, and that's because of scope. CME is declared and initialized inside his tribe. Look. So this line off court also must be in tribal look. So space it, Hugh. No, let's go back here and change input. Method toe a text to see what will happen next and apply No with ratification and we typing shallow and we click on convert. This is a toast message, so application is not going to crush and it will show warning toe User, which stays can convert ace tweak. 10. Animations in android and delaying code execution: Now we're going to learn how to animate you, I components, but before that I will show you how. Change appearance off Android studio, So find preferences or settings and then look for appearance and for the team. You can choose this one, for example, and now it will be dark. As you can see, I think that this one is more comfortable to your eyes. No, let's designed user interface for this application. So let's put image you, for example, here on. Let's just change its color to this one. Now you can expand it a little bit like this on constraint. ID to the top. No for these button here we will set I D. Bt in honey meat and we will change text to animate items. You can expand this also if you wish. I prefer changing attributes in the XML file. It's much more easier. And believe me, when you get more experienced, it will be easier for you. Also, you can just start typing text size, for example, and say 23 DP or SP if you wish. So SP's used when you want your text size to be adjusted to the user preferences in their phone. If some users has bigger funding their settings, this will also be bigger. But if you say DP, for example, then size of these texts will be fixed to 23 DP. Now let's change with Toe 200 and we can also change alignment off this text to the center . As you can see, you can simply just start typing. What you're looking for and how to complete feature will help you a lot so you can just typing color. You can see, for example, FF to do 88 and it will be changed. So this here is hex code, so it consists off six letters or numbers, if you will. 1st 2 numbers represent amount off red color dirt and four items represent amount of greed and last to represent amount off blue color. So if you say F, that means maximum amount off red in this case, and zero means no color at all. So if we say ff 0000 you can see that this text will be fully read. And if we say 00 ff, as you can see, it will be a green. So when you change those numbers, you will change 10th or the tone off the color. So let's leave it like this. Now let's go back to the main activity and let's declare those things first. Let's say they meet you. Claim G. No, let's declare text to you. Txt and let initialized No, I see that I says Bt. And even though this is text to you, so it doesn't matter. So I will show you no fast way off setting on click listener on the object. So we will set listener to these text to you. We could simply say txt dot set on quickly center, then type in new space, then hold shift in press Oh, and simply breast center. So in this way we're using anonymous inner class foreign click listener and we don't need toe specify anything in this XML file, as you can see. So in orderto animate this image view, we will say something like this. I m g dot any meat dot Now we can choose what type of animation it will be. So let's say rotation, for example Now we type degree of rotation. If we say 180 we will see what's going to happen. But now let's first set in duration, and let's say that it will be spinning for three seconds, so we'll type in 3000 milliseconds because duration said duration method requires milliseconds as parameter and the old, it's simply say star. So let's run the up and see what's going to happen. No one build is finished. Let's click on animate items, text to you and see what's going to happen. So if we if we set negative value to this, it will start spinning in a different direction. So let's click on this button here, which means just apply changes. You can use it if you don't have a lot off court. And if you didn't add any new resource toe application to a project, So now, if you click on animate is you can see it is rotating in opposite directions. No, let's add some more components to see how we can animate them, more so to quickly jump in. XML find you can hold control or command key on your keyboard. If you use Mac and simply click on it. Now let's see how toe ad a new item without design top, so by typing in only XML coat so conceivably right in. He made you you for the week. Who, let's say, 190 dp for the height. Let's see 300 for the I. D. This type in image view number two. And for the for the background, let's say 8888 to 2. And now we need to constraint it so you can do it right here in this design preview. So let's constrained it like this. Click and hold it to the left. Well, it's movie to below this enemy. Three items text you and constrain it like this. Okay, we can shrink it a bit. Now you can see that we have some text here. Added itself does because we were changing things here. He designed top. So it reflects in XML coat. No, I mean activity. Let's simply add comma. Let's say you mean number two and we will initialize it. Here. You can simply hold control and president or commander, and the and each will duplicate line of code. So we'll just change this some changes. So it's a lot faster than typing old all the stuff we will hear at some animation for this new image. I will show you how to face this image out. So we just I've been image with any, made it out ofa let's see zero and said, Duration four seconds or 4000 milliseconds and start. And also I forgot to put image to because we want toe animate image view that you recently added No, let's restart application. See how it looks like if you press enemy titans, you can see how this image riel faded out. So let's add some more logic to this app. Let's say when we click this once more that we want to fade in this image. Judy disappeared. So let's of a 1,000,000,000 variable on Let's go, it is faded and set it to false initially. So here we will add your statement, which will check whether Dame interview is faded or not. If the imagery is faded, well set just Alfa 21 and if image is not faded, will fade it out on Let's run up and see what's going to happen. So in the first click it is disappearing, and we and weekly once more nothing is happening because we forgot to change. This value Office faded to true, but here and also hearing it change it two fools again because we want this to work every time we click, we want toe, make imagery disappear or appear. If it's gone, earn and click it. It will disappear. And if you click once more, if you appear again so we to work every time we can combine mawr animations toe a single view so we can rotate and move this object. Just add here. Translation. Why? So this means that it will be moved vertically. If you use positive values, object will be moved vertically down, and if we use negative values, it will be moved up. So let's test this. As you can see, it moves down and rotating simultaneously. If weekly once more, you can see that our second image view has appeared by this one. Didn't enemies one more time. So why's that This? Because we were using rotation and translation. Why you for use this one method, It will continue moving every time we click, or if we use rotation by. It will also be rotating every time we click once more, So let's does decide when we click it. Once this is going to happen. And if we click one more time if you'll continue and now it disappeared from our site. So this is how animation works. So what if we want first animation to start and then wait for a while and then trigger some other animation? So let's see practically what it makes. Let's say that we want this image you to disappear and then appear itself without clicking . When we fade this image, you, we'll just use handler. So this is a bit more complex stuff, but just full of me and retired what I'm typing to see the results. It is topic related toe threads on that's really advanced stuff. So if you're a beginner, do not bother about this yet. Now just retype what I'm doing now. We will use post delayed and new Grenoble president er and here between curly brackets and the normal one, just type in five seconds. So that means that this line off court here here will be triggered after five seconds off our clicking time on the text view free. Copy this line of code here, let's reduce duration to 1000. Let's see, was going to happen. So now is going to disappear on. If you wait more, it will appear again itself. So this is how we can make our code toe wait for some other part off our code to be executed. So if you want toe show 1st 1 image and then second, this is how we'll do it. So it's first delete off this and initially, let's set positions to be somewhere out of screen, so we will set it like this. Let's see 5000 to be sure that this image you will be somewhere bottom, where we can't seat on the screen and which we just say Start it will happen automatically retold any waiting unless do the same for the image to. No, let's first show image one to the screen. Now we'll say Translation. Why? By minus 5000? Let's say the duration will be 1.8 seconds. It's a start, and then we will use our handler to delay execution off our coat on this real way for exactly 1.8 seconds and the tool in show the other image also. No, we will say 4000 for example, because we wanted to be negative. 4000 because you wanted to be below Image one. We will show this one a little bit faster on. We need to move those two lines of code here because we want this to happen when you our app is opened right away. We don't want to wait for a click. So it's now run the app. So as you can see, we can see those images. Andi, if we see any mate, is your first show, this one and then had to wait. So it seems that we need to increase or decrease this value because we're talking about negative units a bit more because imagery didn't show up here. It's somewhere like here, So let's restart the up and start again. It's a Greek inanimate. It will show this one on right after it will show this one too. So this is about animation. Sin android. You can experiment a bit more. You can brainstorm a bit on practice. A look 11. Creating new pages(Activities) Intents in android: Now we will see how to create new pages inside our application, how to deal with different activities because you already know that every single app out there contains multiple pages like home page profile page on etcetera. To achieve that, we need to use intent objects so we'll see how you do it in a minute. So let's first create new project. Andi, let's name it. Activity up. Anglican finish to create new activity. The fastest way is tapped, right? Click on this package Name here and go on new and then find activity. We'll choose empty activity now for the activity name. We will say you d second and finish so 100 Studio created activity second JAMA class and it also created new XML file. So now this is how well our second activity look like. So let's first modified a bit so that we can know that we're in second activity. Let's add text to you that will say second activity and increase text size and I'll adjust constraint it on top and let's modify our first main activity a little bit. So let's at a button here. Make it wrapped. Content and text will be goto second activity and give it an I D. BT in activity transition. And let's move it right here and well, let's change this. Hello World toe activity one. Now in Maine, inside mean activity will declare an initialize all the baton. We'll call it to be 10 on Let's initialize it, beating activity transition and to make transition from this activity to the second activity, we used objects called interns, so let's see how it's done. First, we will add on click. Listening to these button said on quickly. Sooner now, type in new and start typing upon Click. And now, as you can see, the complete feature helps us a lot now just breast and tricky. And let's create Ethan object. So we do it like this. We say, Call it however you want, I will just say intent again. Equal and new intent inside the brackets were specifying current activity and activity that we're going to. So we will just say main activity does this since we are in main activity class and we want to go to a activity second, and now we can say that this because this is not activity second, its main activity so we'll just say class and that's it. And now we just need toe call, start activity method and put intent object inside. So if you run the app and stop this button right here, we will be directed to the second. You know, let's see how it works. You click on this button here, you can see that we're now in second activity. We're not anymore in Maine. Active. When you press back button, we're going back to it. No, let's see how to transfer the data from main activity to second activity. So as you can see, main activity Java code is for manipulating data with you, a components off activity may and activity. Second, the job of file is for manipulating the data from second activity. So let's say how toe take the input from the user and transfer it to second activity. So it's an edit text. So let's put with to be 200 DP. Let's give an I d. Unity being booked on. Let's put it right here like this now in main activity. By the way, if you can see this preview here, here is the button toe. Show it or hide it anyway You can use design talk if you like, but I prefer doing it with next. So now in main activity. Well, it's initialized had it fixed and let's all right in the idea of it, any team put. And now let's see how toe past data. So to get the input will first make some string variable called in book, and it should be equal toe any text of get checks to string. So in the sweet we get the input from the user and to transfer this input to the second activity, we need to attach this to this intent object. So let's see how it's done. We simply say, intern, that put extra and we specify key and value. Sochi will be users. Input and value will be important. Variable. And now there is a second part. We need toe. We need to accept these value. So let's see, how is that done here? Here in activity. Second, we need to receive to catch the data so we'll create new interred object. And now we're not saying new intent object because where we want to get existing intent object one. From here, I would just say getting and Now we will declare new string, variable name, receive value equals and now to get the data we say intent dot get string extra because we know that string will be input here and we know specify just key in our case users input. And that's it. No, let's display these string value somewhere now. Instead, off second activity text we will display value that user his entered being main activity. So we must first even i d to the sex to you. So let's just call it txt except and we now need to declare it and initialize it in activity Second txt and like this and now simply set next to these decks to you received. I always around the up and see what's going to happen. So let's give some input here, for example, we came from first activity and let's stop on these baton. You can see that our input is now shown here. So we successfully received the data through these intent objects. If you found anything confusing in this tutorial, or maybe it was too fast for you can always ask me a question. I would be happy to answer. So let's see now second way off creating new activity so you can do it like this. You can create manually Nujoma class third activity. Because you want these class to be activity. We need to extend app company activity and need to override on create mental uh, this one and we need to set content to you. And now this is the part that we are missing because content to you is our XML file. As you can see in main activity, set content to you is actually going. This activity may file So now we need to create new XML file to be presented to the user when they open toed activity. So to do it, we need toe select layout, right click on it and new layout to resource. While let's name it turd activity. I'm just click on. OK, now let's put some text for you so that we can know that we are interdicted like this. That was change text size and let's center with the meat. So no, some quick information when we say layout gravity. That means that it will move entire text view to the center position off the parent view which is clearly out and if we just said gravity center, that means that text inside these texts, you will be centered. So if you now change this with toe match parent, you will see the text is centered inside it. But if you see lee out gravity, that means that this entire view will be centered inside its parent of you, which is linearly out on route layout in this case. So, no, since the Wheaties much parent, we can just leave it to be gravity on the now just interactivity class. It's in sad content. You We need to specify this layout to just create and we need to do one more thing and that's declaring this activity. So we need to open manifest file and you see that every activity in our app is declared right here. So here is activity. Second, here is activity first, So the second activity was added automatically. Since we just used new activity function on that. These your one to declare new activity. We just say activity and uses these out of complete features. So just breast and turkey and choose terror activity. Just close the stag and that's it. And now let's see how to get disturbed activity. My soul. Let's in Maine activity now say that we want to go Julie Productivity instead of second. Let's run the up and let's see what's going to happen now stop you. You can see that we're in our third activity, so that's pretty much it. 12. Prettifying UI components - Using shapes in android: Now we'll see how toe add some shapes. Toe our text for use on buttons. Now, if you create new button, I'm give it to wit off 100 dp and height off. 20 dp or better 50 on Well, it's just constraining here. Let's give some text Something like Buck. Now, As you can see, this is the default button, and it's a bit ugly, so let's see how to make it shape on more beautiful. For doing this, we need to create some XML file. So let's hope in this trouble folder and right click on it. New drum ble resource file and let's name it button shape. And that's what we get, so we'll delete. So now he said, this selector let's type in shape and press, enter key and now opened this tag and right in and right solid. No press space, and it will automatically give you this color attribute and you can see Primary Doc. Unclos it. Now you can modify corners off this button if you choose this radius. First tribute here you can specify for any tree dp. As you can see, these corners are getting around it right here, and let's close the stag now, to apply this shape toe our button, you need to open activity main and as big around attribute off our button. You need toe ad these draw global XML file. We called it button shape. Now you concede it are about the looks much more better if you want toe ad a border around the button. We can go back to these buttons shape and we can add a stroke attributes unless give color to be active. And, let's specify, read off for DP Now. If you go back, you can see that it looks much more better. No, let's see how to modify each corner if we want to get some modified custom shape So instead of radius you can choose bottom left radius Let's say 90 p as you can see now this Onley this corner go to rounded no space on will specify Botham right and choose 90 p Okay, let's increase this value to the 20 db so that we can see so that we can see difference better In short, been activity may you can see how these but it looks like now. So if you constraint it to the top for example, and change this biased 0.5 to be centered horizontally. You can see how it looks great because it's attached to the top off our activity play out. So in the same way, you're sure you can shape text views, You can just create file something like this. We can even use this one. And as a background that tribute, you just choose it. So that's right here. Just don't forget to increase size of it to make it to make it better on what centralise tex like this. So you can also use alignment instead of these gravity. If we work with text so it will be like this. You can choose whatever you want. Don't you worry. If you can't remember all of this because you can, you can always reuse same butter and you can just edit it so you can just go back, copy somewhere and look at it every time you need. So there is no reason to panic on. We can see. Let's see how to create a perfect circle. For example, Let's now we need to use radius. Let's put it 75 for example. So I mean activity Let's set with to be 75. Let's use 75 as the height. Also, let's send 30. Thanks. Now you can see how it looks perfectly around. So that's about it. See you in the song Future lectures. 13. Learn how to generate APK file in order to upload app on google play store or send app to someone: Hey, everyone in this video, I want to show you how to generate a PK file off your app So this file can be used later for sharing forgiving your app to your friends, for example. And they can be stole your app even though your app is not on Google play, so to generate a p k file off your project. So this is some project. It doesn't matter which one you would open your project and go on built. Then you would go on this build bundle a p k, and you would then click on this build a PK and once you do it, wait for the android studio to generate that a p k file so that hbk file can be sent someone. And if that person wants to install the app from that a p K file that you sent to them, they first need to enable or to turn on installing APS from untrusted sources. So now a PK is generated on. You would click on this locate right there and now. Now it took us to the folder where a B K file degenerated. So there's the one right here. So if you would like someone to install the app that you have just created. You have generated the A P K file like I just showed you, So you would just copy this a p K. And you could send it through the email or however you want. But as I mentioned that person that would receive your A P K file in order to install that app, they firstly must enable downloading or, let's say, installing APS from untrusted sources. To do that, you would probably need to enable that option in configuration off privacy settings. I believe so. It's different on different devices, but in general it's about security on privacy settings. So somewhere there you would need to enable it, and after that, you can easily install these app. So now what? If you want to applaud your app on Google play, you would then go on build and you then generate signed bundle A PK. So let's go and click What's going to happen? Let's see. So here you can choose between bundle or a PK if you choose bundle. It says that there are some convenience in here and benefits our app would take up less space and this is the probably best option when it comes to the applauding your app to the Google play. Because if you go on this android that bundle you need, though much less things than if you choose a PK. So let's stick to these android app a bundle, then go next. Here, you need to specify where your key will be stored. So this is some kind off virtual signing. It's approved this this is our up. So we're signing it basically like when you sign some paper so you would hear Choose destination where that key will be stored so you can choose whichever folder you would like . Let's say like this this week on a K. We need to specify password, so we will specify something we need to specify password in here. A swell. Well, now we need to fulfill some of those, but I believe that some of those are optional. So let's try with this. So we Twerk smell is go on next and here. We need to sign this with release build variant. So release is when you want to upload your up to the Google and the bug is D one that we are working on. So when you decide toe, publish your app on Google play, you choose release or else it won't be accepted by the Google. Now, when you click on finish, we need to wait until this bundle gets generated. Okay, so let's expand this and located only to locate this, actually, and we have this file with Extension A A B, and that is something like application bundle. Soto applaud these bundle to the Google play. We need to use Google Play Council and I already have this enabled and everything. By the way, you need toe pay $25 or euros, I forgot. If you want to have a Google play developer account only that you would be able to publish your app on Google play. So once you open your Google Play Council, you will be prompted to eat something like this. Then you would go on, create application here, you specify some name. I would just taping something random you would go and create and then, after all of those settings, so you would need to input some preview images, categories, all different kind of data. Then you would need to click on a polices. And somewhere there you will go on this production. Manage. And when you click on create release, you would upload. Did that bundle in here? So this is great out because we didn't fulfill any of those requirements. So those are great out. You can see when you do that, this will be enabled. And you could upload your app to the Google play store. I hope that you have learned a lot on this is very easy toe. Do so on Lee. Follow the steps and there are no mistakes whatsoever. So let's see you in the next video. 14. Menu in Android: Hello everyone. In this video we will learn about menus in Android. So let's start creating new project. Let's call this project menu testing, for example, and finish open activity underlying main.xml. Now click on this icon here and click Show System UI so that we can see Status Bar and ActionBar. So menu that we're going to create, we'll be in here. So we will have three dots and we're going to click on them. We will expand something where we will have some items. So firstly, let's go and see how we create menu, open resources folder, and right-click on a new. Then click on Android resource directory and 40 Type Choose menu. And click on OK. Now right-click on menu folder and create a new menu resource file. We will call it Main Menu. Then ok. And let's click on Split. So it's much more easier. Here we will start by adding items. So i ten will be basically a row that will be shown. Once we click on the three dots, we will firstly Ad Id and we will create, for example, camera item. Then we will add title, which will see camera. And we will add icon to be something like camera. For the icon we need to create vector asset. And we will do it by right-click on the drawable. Click on vector asset. Click on this one in here, and let's start searching for the camera. So let's click on this one here and click on OK. Here you can change the color if you wish, but I will keep a black one. And for the name, I will say I C, which is shortcut from the icon camera. And finish. Now if we expand the drawable, we have Cameron here. And I will just add it like this. Now. I'm gonna close tag of this item and I will add one more item, which will be called whoa. I will add ID to be, to be our item. Icon will be icon that we're going to add right now. So we will add new vector. We will search for the home, like so. We will rename it. And that's it. So now let's add it in here. And we will add one more item after we close this one. So we will know randomly type in some names. And we will now Ahmet icon for this one. Now we need to go in main activity and we'd need to override a method called on create options menu. We will delete this part here. And we will now call method get menu inflator, which will return some kind of object, which is of type menu inflator. And we will then inflate the layout file that we created or the menu XML file that we just created. We will refer to it by clicking R-dot menu.html, Main Menu comma. And we now need to specify this menu from parameter in here. And at the end, we must return Boolean. And it is true because we inflated something in here. Know if you run the app and let's see the result. Now you can see three dots in here. If we click on its own it we have items. But notice that we can't see icon anywhere in here. And that's because those icons are only used if we want to show our item in this action bar in here. So we will do it by adding one more attribute called show as action. And if a room. So we will add this parameter here as well. Now you can see that there are items in the action bar. And if you run the program, let's see what's going to happen. Now we have our items in here, and if we click on three dots, we have only one item that he is not showed, that is not shown in action bar. So this YFP room basically means that this item will be shown in the action bar if there is enough space for it. And if not, it will not be shown. And if you wonder, how will Android choose which to show is if we, for example, have one left space for the item, will show these home item or the camera item. There is something called Order in category. So if we put some number, for example, one, by default ordering categories 0, I believe for those items. So since we change this one to one, you saw that camera moved. So it is now at the rightmost. If we hear put order in category five, you can see that home is now here. So basically we are changing priority or the order in these action bar. You can guess that items that are left have lower priority. And if this title is, for example, bigger, they would disappear. If show action is if Rome for them. And the ones that are at the, those three dots, they have bigger priority and they would be left on the action bar. So we can also force showing those items if we hear put Always, instead of if rho. Now let's see how to handle click of the items which are here. So open main activity and let's override a method called on options, items selected. And let's hear put toast message, which will say Clicked. And let's concatenate with an item dot get, title, and return true. When we return true, it means that we have handled the selection. We will learn more about that. Do not worry about this just yet. So now let's just run the program. And let's see how it works. If we click on camera, we have clicked camera. If we click on some item, we have some item and this gets title is actually title that we have put in here. You've, you've probably noticed that in UI preview, those icons are black and we even specified colour of the items to be black. But when you run the app, you can see that those colors are actually white and as well as text of the action bar. So why is that? Well, that's because of teams and styles that our app is using. And that will be the topic for the next lecture. So see you there. 15. Themes in Android: Hello everybody. In the last video we started talking about color of those icons in here. So how it is possible that those icons are white in our app and inside Android preview, they are black. And we even specified that we want them to be black when we created those icons. So firstly, let's start the questioning how Android even knows that we want this thing to be purple or distinct to be blue. So there is a file called Styles in Android. So you need to expand values folder and open these styles in here. So you can see here that we have something called team. So every team has colors that are specific to it. So by default, this theme with the dark action bar, which already came when we initialized this project, contains those colors. Basically, some components of the Android will automatically get some of these. So you see that by default, primary color is the color, the action bar. So if we here change this color to, for example, this color, and if we now run the app, we will now have read ActionBar. So by default, Android will set color of this action bar to the primary color. Primary color has different roles in our app as well. But also it can have impact on many other components in Android. Okay, so now here's the question. Where are the colors of those icons defined? So how is it possible that they are white? Here some components are not set, but they are, they have some default values. And one of those e's, ie content color. So if we here add item which is called Eye content, and we set color to be, let's say black. So we would set it like this. If you now run the app, let's see what will happen. So now you can see that our icons in here are black. If you wonder, why is this AI content by default, white and white doesn't behave like we specified in our, in our many in here. Well, that's because of material design guidelines that Google is using an hardly suggest all developers to use. So basically, they have some kind of rules or guidelines that will make our app best. And they determined that it is the best. If the color. Of items in the action bar is white. So this is because by default they set it to white, but we can overwrite that value by putting content like so. So you can read about material design guidelines. If you open Google Chrome and search about material design guidelines. And open this link in here, which is official Android website for the Android development. You can here see whether they are preferring and what they use. So basically, if our team is, is using dark action bar, they prefer items to be white colored like on these previewing here. And if we use light ActionBar, they will probably be black. So we will now change these dark action bar. We will just delete it and we will run the app to see what will happen. So now you can see that our text is black and those three dots are also black. Now we could even remove these AI content. But let's say that we want to have dark action bar and still to keep these texts black. How we do that? We then also must override color value of this text. And it is called, it is called actually titled text color. And we could hear set black. If we now run the app, let's confirm that this is the case. So it is like we expect. And now if you wonder, how do we remember all of those things in here? Is it even possible to remember it? Well, it is not. By experience, you will remember some of the names. And you can guess like I just did, I just start started typing title text. And I had this AutoComplete feature and I guess that this is it. So you can check by running the app if it works like you expect. And now if you wonder how to change color of those three dots in here. Well, I don't know how it is called. So let's search on Google and see how would we find it. We would hear just start typing. How to change color of the three dots in menu Android. And let's see what we will have. So we will click on this first link here. And now this is Stack Overflow website. So basically 99.99% of the questions that you might have already answered in here. So I suggest you, when you, when you come up with a problem, always Google for it and try to find answer on the StackOverflow. So now let's search for the, for the solution that might fit our problem. So by experience, I know that this one here will help us. Because those three dots are called something like overflow. And when I saw this overflow here, I just knew that this will be the answer. So I will just copy this in here. And let's add it in Android Studio. So this is new style that we are going to define here. And we now instead of this, my custom team, we must put app team. So basically, we need to set overflow of this app team, which is defined in here. If you go back to the site, you can see that they also did that. But instead of app team, they had my custom team are written in here. And now instead of these drawable that we don't have, we would just put some our drivable, let's say that we want to display camera in here for example. So now we are, we are firstly going to see how to change three dots to some other icon. And later we will see how to change the color. And now when we define the style in here, we need to include it in, inside our bays style, which is the team that our application is using. So if you, so how to do that? If you go back in here, we see that there is another item which is called action overflow button style. So just like we changed title text and the icons that we are putting, we need to change now those three dots. And we will copy this. We will paste it in here. And we will just now set this style here which we defined. So with this item in here, we have change, we have overridden style of the action overflow button, which is this here. And if we click on this style, if jumps in here. And we see that for the SRC or the source image actually of the, of this item, we want to set the camera. So let's run the app and see what will happen. We now have a camera here. And if you wonder how to change the color, we will now hear just add tint attribute, tint item. And we will set color to be, let's say this one, yellow. Let's apply those changes. And this is yellow now. So now you see that position of the camera is not like we expect it to be. It has no margin or padding at all. So let's now search for that. Now we know that this icon here is called the action overflow button style. Or actually we need to change that style for applying our own. So we will now just copy this and we're going back to the front. And we will now see how to add base to the end. Just paste this button and opened the first link. And now we see that they have here some attribute called padding, right? And we will just copy this one. And we will paste under our style. And now when we run the app and let's see what will happen. So now you see the space in here. Basically there is no single developer that can know all the things in Android. It is very big and complex topic. Because of that, we simply must use Google. And there is nothing bad in that. We simply can't remember all of the names, all of the items, styles, and many other things. So be free to ask for help and for the questions on Google over 60% of the time, developer and professional one spends on Google by searching, something like we just did right now. So there is nothing bad of it. And you must fear of asking questions. So let's now also see how our Android app knows that we want to use this style in here as the primary one and not this one here. So we will now open manifest file. And of the team attribute inside the application, we see that this one is set in here. And that also means that we can set, own, our own team for different activities. Quickly. Create new activity. Empty one. Just click on finish. And we will say that this main activity two will be the launcher activity. So when the app starts, we want these main activity two to be opened. So we will just copy this part or actually remove it from here and paste it in here. And when we now run our application, we see how these activity looks like. And let's see that we want to use some different kinds of team in this activity. For example, we want to use the team that doesn't even have this action bar. So let's see how we do it. Open styles, and we will now define new style, which will be called my style. And as a parent, will specify Team, dot app compat dot no action bar. Just like this. And we will say that primary color will be this one. So you need to delete the centroid. Actually, we need to use color primary without Android two dots. And now if we open manifest file and decide these activity two and here, we can make space here like this, and we can put team to be my style. So the one that we have just created. And if we now run the program or our app, we will now see that there is no action bar. And these background is weirdly gray colored. And this thing in here is a black. And let's add primary dark to be the one that we have specified in here. Because this color primary is referred to the action bar. And since we removed it, we didn't see this pink color anywhere. So now you can see that this primary dark is put in here. So basically we can use different teams for the different activities. And if we want our activities to have all the same teams, we would just use team attributes inside application tag. And if you wonder how is it possible that these background, these great, well that's because this no action bar t And by default has that grey color. And if you wonder how to change it, well, Google for it. See you in the next video. 16. WebView in Android : Hey everyone, in this lecture we will learn about web view. So let's start a new Android Studio project. Chose M t1 and named the project however you want. I will call it web view and click on finish. Building has finished. So let's start talking about web view and what it is. Web view is basically component which is used for presenting content of the web pages. So basically we can load some kind of website inside our Android app. So let's open activity underlying Main. To add web view. We will delete this TextView and we will put that view in here. We will set it to match parent, and we will add an ID to be VAB view. So let's open the main activity. Let's declare it and initialize these web view. And now is the question how to load some kind of website in our app. So we will simply refer to the web view and we would say load URL. And let's try HTTPS, Facebook dot com. Now before we run the app, we need to add permission for the Internet inside our manifest file. So let's just add internet. And that's it. So we don't need to ask actually user for the permission of the Internet usage. It is enough to declare it a manifest file in here. If we now run the app as it is, it will actually open Google Chrome for us. And that is because default client of the WebView is Chrome. To actually load this Facebook website inside our app, we would need to set VAB view client to the new WebView client like this. So now let's run the app and see how it works. Now you can see that we have Facebook page inside our app. And if we remove this line of code, let's run the app and see what will happen now. So now you can see that the Google Chrome is automatically opened because default client of WebView is Chrome. This lecture was a short one. But it is very important to learn about value because it is very useful. You sometimes you need to just load some kind of website and presented to the user for some reason. In the next section we will be building QR code scanner app. I'm challenging you to expand that QR APP we developed view. So try to make the app that will scan QR code. And if that code is actually linked to the website, try to open it with WebView automatically. Go ahead and feel free to pause the results in comment sections. So that's for this lecture and I'm seeing you in the next one. 17. Animals App Preview: Hey everyone. In this section, we will learn how to build an application which is going to use a recycler view. And the recycler view is one of the most important Android UI components. Recycler view is used when we have many items that we want to display on our screen and we want to scroll either vertical or horizontal way. So every single chat application these days is using recycler view. So even WhatsApp, Messenger, and etcetera, we will learn how to implement the recycler view. And we will also learn how to use object-oriented programming in our application. So you will have better understanding of object-oriented programming and why we use it. You will also see how to set those fonts for the text to use and how to make our images look like this. Notice when we click on the parrot, For example, We will be presented with new activity, which will have circled image and text of the animal that we have clicked on. So we will also click on the tiger. So it would be like this. Creating this app will be fun and I'm excited to see you in the next video. 18. Creating row for the Image and Text: Okay, so now is the time to build the app that you can see at the right side. Firstly, let's create a new Android Studio project. Let's choose empty activity. And for the name of the app, you can put whatever you want. And I will put animals. And I will click on finish. Okay, building project is finished. So first thing we're gonna do is we will change colors of our app team. So we will open resources values and we'll open colors. Here are basically defined colors that will our team use. So you can see that here it says color primary. And when you hold control and click on this, it will drag you to here. So for the primary color, we will use this 109095922. For the primary dark, we will say 00 to F11. And for the color absent, we will put 11 99.. 00 and in front of those six numbers. So you'll learn that, that we only use six numbers for representing color. So for the red, green, and blue, but we can add two more numbers which will indicate transparency. So if you put 11, you see here that are green is now a bit transparent. So the higher the lower number is, it is more transparent. If we put f, f, it will mean that opacity will be 100% and transparency will be 0. Since we want the color to be transparent, we will put 11. So if we open the app that we want to build, you see those rows. So this one item, you see items that are basically for the, each animal. This item is called row. So each row contains image and name of the animal. So we'll firstly build template for these row and we will later see how to implement it inside the recycler view. So let's go in layout and create new one, which is called animal Row. And click on ok. So this is rho. We will click on Split so that we can put XML code in here. This entire row is one card view, so it is not constraint layout. We need to change that to the card view. But by default, card view is not included in our views that usually come when we opened the project. So we would need to search him here and we will need to download dependency for Descartes view. So what that actually means, it means that when we click on this arrow, it says that we need to include a library for the scarred view. When you click OK, it will download all the necessary codes and thinks that we can reuse in our project. We will talk about dependencies and how we add something else to our project that we can reuse that somebody else has built. We will do that later on. So now let's open this animal row and we can delete this and start typing card view. So now I will press enter here to make it better. We will now define VT. We will leave it as match parent. But for the height, we will put wrap content. And we will now add LinearLayout, which will be match parent. And for the height it will be match_parent as well. What is LinearLayout? Actually it is layout where we can store child's Or the other views linearly. So they can be put next to each other, either horizontal or vertical. And that is attribute of the orientation. So we would like it to be horizontal because we need image and then we need text. So they are horizontal to each other. And we will now close this tag. But with this one, because we wanted to put some items in here like this. And inside LinearLayout, we want to put this image and text view. So what is this image? Actually? This image is another card view. And inside that card view is an image view. So we'll firstly ad that card view. Let's set with 2D 85 dp. And for the height will put 75 dp. And now we will add something called elevation. Elevation is an attribute that card view has. And it will, let's say, put some kind of shadow so that we can have a feel that this view is actually above, the view that is below. So you can feel that those entire rows are basically like elevated or lifted a bit up. So for the elevation we will put five Dp. You can increase it or decrease it if you wish. And we will now set corner radius. And that corner radius is actually distinct here, which is rounded. And we will put that to be 90 B. We will now use this closing tag because inside we want to put an ImageView. So if you wonder why we didn't put ImageView straight here without card you, that's because we use card view. For these corners shaping and elevation. So now when we put width of this image view to the match_parent and height to the match parent. It will basically take space which discard view allowed to be taken. And we will achieve this effect of rounded corner. Now we will put an ID for this image view, which will be IMG underscore animal. Here we will put an animal and we will close this tag like this. Now, we will also add radius for our root card view layout, and it will be 90 p. And for the elevation, we will put HDP. Now we need to add a placeholder or the text view where name of the animal will be stored. And we will add it below discard view. So it will mean that this TextView, which are, which we are going to put, will be the right side of the card view because we are in linear layout that has horizontal orientation. For the width, we will say wrap content for the height will put wrap content as well. Now, we want to add some margin to the left because we want our text to be separated from the image. We don't want it to be close to much. So we will put, let's say 95 dp. Now for the font, we are going to use font-family. And font-family attribute needs to be changed. If you wish to use some custom font, we will use casual font. So now for the text, we can put some Placeholder. So just to see how it will look like. And we would put text and four detects style. We will use bold text. And for the text size we will put 22 Dp. Now, since we want to use these white text, we will set color to white. And because we now can see texts in the background is also white, we would need to change the background of this LinearLayout to be color primary. So now, you know you can notice how text is positioned and how it will basically look like on our app. Now we want this text to be centered and we will use layout gravity attribute, and we will set it to center. Now you see that the app that we are going to build, we have some margin from the left and from the right side. Also, we have small margin from the top and bottom. So we would here add margin. And we will put it to be DEP, smile, you see that it looks much better. And what we also need to do is we need to add padding to this LinearLayout to be done to achieve this effect that you just saw. So we want our row to look like that. So basically what is padding and what is a margin? Padding is pace that will be added inside this parent. So once we put padding for this parent, it means that child's inside. That parent will be put from ten DP onwards. So basically this margin, this padding, ten DP says that no item can be placed. Let's say like this. So it must be put ten DP away from the edge of our layout from inside. And we are talking when we are talking about margins, it means that we want this layout or this view that we are putting margins on to be moved ten dp from its parent layout. So padding is ordering where items inside that layout basically will be put. And the margin says where this layout will be put According to the parent layout. So now we need to close this tag in here and we need to add ID to this TextView, which will be TXT, animal name, like so. And we are finished with designing this row. So in the next video, we are going to implement recycler view. 19. RecyclerView and RecyclerAdapter in Android: Okay, so now is the time to design our main activity. So open activity underlying main.xml. And to use recycler view, we must also download dependencies of the recycler view as we did for the card view. So we'll click on arrow then ok, and wait until build is finished. Now let's split to the code. And for the background of this constraint layout, we will put color accent, and that was the color that we have to be a little bit transparent. It seems that our transparent color is too much transparent. So will change 11 to the 79, for example. And let's go back. So we have the color that we wanted to achieve. Now is the time to add text view. So we already have TextView will just edit it and that text you will be these animals title. So we will just put it on top. And since we don't see the section Barnes status bar, we will click on this icon and we'll say show System UI. We want it to be like that. And now let's update text from hello world to the animals. Will put text size to be 25 dB. We want color of the text to be Android and color black. Now is the time to add recycler view. So we will start typing recycler view in here. And we will put V to the match parent. For the height will put 0 dp, because we want it to behave according to the those constraints. And we will constraint it like this. So we want it to be from animals TextView till the bottom. We will add ID to this recycler view to be recycler view. And you can see that it has some kind of placeholders. It's a is item 01 to one and so on. So basically in here will be r rows, so our role will be item one, item two, and so on. To inflate our row that we have created. Inside these recycler view, we need something that is called adaptor. So we will need to create new class, which will be called animal adapter. And these class must extend recycler view dot adapter. So forget about the errors. Errors for the, for a moment. We now need to create class, which will be holder of this row. So what does it mean? It means that We will create objects by using that class. So each row inside our app is basically a single object. So this row is one object, second, third, and so on. So we will create that class inside this class in here. And that is called inner class. And we will call it anymore row holder. And it must extend recycler view dot view holder. And we will open and close braces. Now it complains about something and it says that there is no constructor. So we'll click on Create constructor to get rid of the error. And inside this class, we need to declare this TextView and this image view. Because we will create objects with this class and we will need a reference to text view and image so that we can update it with our real images and texts. So will first declare TextView, will say TXT, animal name, and then image view, IMG animal. So let's import the image view by clicking All and enter that in here we need to initialize those items, those components actually. So we'll say TXT animal equals item view dot find view by ID. And we will put ID TXT animal. And for the image animal will sail, say also Item view dot, find view by ID. And we want IMG animal. If you wonder why we used item view dot find, findViewByID. And you know that inside main activity we only put findViewByID. That's because in here, if we use findViewByID, it doesn't exist actually. So that find view by ID is called on views. So we here don't need to specify it because it knows that we are working with main activity. And in here it doesn't know. So we need to tell him, tell the ID specifically. We want to look for the text view inside this item view. And these item view is actually this one here. Now, when we finished this animal holder class, we will now go back to the animal adapter. So if we hover over the error, it says that we need to implement some methods in order to make those errors disappear. So we'll click on implement methods and we will click on ok. So now we have some kind of methods in here, which will be called automatically by the Android framework. So we will discuss later what each method. Does. Now firstly, let's create constructor of this animal adapter. So constructor will be public animal adapter and open and close curly brace. We will need some parameters that we want to put inside these adaptor. So those parameters will be ArrayList, which will hold Animal object, will create that object later. It will be called animal data. And we're going to need context to that will be provided once we create this animal adapter. So in here we'll pass ArrayList. With animal objects. We will create it later, don't worry. And we will pass context. We will now hear, assign it like this. Now. We are going to work with this onCreate view holder. So what is this? Firstly, you must understand how recycler view works. Basically, when we scroll like this, recycler view, recycled or deleted this dolphin in here, because it cannot store infinite number of those rows. So if our screen can handle, let's say 1-2-3-4-5. If our screen can show six rows, are recycler view will only have ten views. So when we scroll like this and if we had more items, let's imagine it will delete those items that are going off the screen too much. So recycler view is doing that because of preserving memory. And once we start scrolling like this, it will return, it will recycle this dolphin. So basically we will have only like eight to ten these rows. But in our heads, it will look that they are infinite or infinite number of it. So onCreateView holder, basically be called eight to ten times, depends on memory of our device and how much, how many items can our screen represent. So to create view holder or this object in here. We will firstly say view. View is equal to layout inflator. So we are here inflating that row. And we're going to now use contexts so that our app can know in which context is this being created. And then inflate. R-dot layout dot animal row. Now we're gonna specify parent of the where this row will be put. And here we will say false. So this is attached to route. If we don't set this to false, what will happen is if we want to add manually some kind of a view to this parent with something like this. Our app would crash. And if we leave it false, we can put views in this way without our app crashing. So don't be bothered about that too much. It is almost every time false. Now instead of returning null, we want to return a new animal whole row holder, and we are putting this view as parameter. So this is that view actually. So now that we have here created view, which will be this animal row. And then when we created this new animal row holder object, we have extracted the basically the text view and image view and we initialized them. No insight on bind view holder what is happening. So I already said that we will have like 108 to ten rose. So when we, when our app destroys those rows that are, let's say to much of the screen. When we call it back like this, it will not create, It will not call onCreate view holder, but it will call onBind view holder. So here we are basically putting the data inside our holders that are created in here. On bind view holder is basically binding this image view, real image that we want to put and this text to the, and these TextView to the real text that we want to put. So here we will put basically holder dot. We would refer to this TextView and we say TXT animal name dot set text. But you can see that we have an error. This holder doesn't have text to you. And that's because we are here using recycler view dot view holder. And we need to use animal a row holder. If we hear put animal row holder, we can set the text. But here we have an error which says that this method doesn't override appropriate method. And that's because these animal adapter needs to extend recycler view adapter of type Animal row holder. And to do that, we need to here put angle brackets. And we will say animal a row holder like this. So it automatically added animal adapter dot animal row holder because this class is inside animal adapter class. Now here instead of recycler view that view holder, we also need to return animal row holder, like so. So now we can set text and that's, and that text will be taken from the ArrayList of animals. So in the next video, we will firstly create that Animal object, and then we will proceed in here. So see you then. 20. Adding Animal data and inflating rows: We will now get rid of those errors, will create finally, that animal class. Don't worry if, if it is too confusing so far, we will recap everything at the end one more time. So let's firstly create Java class, which will be called Animal. And these animal will have string, name, and it will have image. And how we put image now. So image is basically an integer. So how is it integer? Well, that's because we, we're gonna put images inside these drawable folder. And Java sees that like the integer value inside the memory of our app. And it will later know when we say, when we refer to this integer number, which image from drawable, from drawable folder it needs to take. We will now create a constructor of the animal. Will have name and image as parameters. So we will set name. And then we will set image. If we go back to the animal adapter, we have finally got rid of animal error and we need to now import ArrayList with old enter. So that's it. We will now set text somehow. So we will refer to these animal data and we will say dot get position. So position is this one. And this is basically if we click on this turtle, it will know that position of the turtle is one, because I told you that indexes starting 40, so 012. And this is returning us object of type animal. And we wanted to get image of that animal. But we will first create getters and setters because it is a more professional. Let's right-click on here and then click on Generate and choose getters and setters, selected those fields, and click on ok. So it automatically generated getters and setters. And here instead of image, we will say Getty image. Now for setting image, we will say set image resource. And we will get that resource from Animal object that current position with get image like this. And for the get item count, that T is basically size of the ArrayList so that our recycler view can know what is the, how big actually is our ArrayList with data. So what we'll say animal data dot size. So that's it for the adapter. Now is the time to create that array list from MainActivity and initialize recycler view. So firstly read, let's declare recycler view. Let's hear, initialize it. Like this. Let's also declare a list of the animal or objects. We will call it animals. And we will hear initialized that list. Like so. So we need to add data, Judy, ArrayList, or actually we need to add objects of type animal. So we'll say add new animal. And now is the time to put images somehow. So firstly, you're going to need to download images from site called Pixabay. And let's type in Pixabay animals. So here you can find, find the pictures that I will be using in this project. Here, you can see that I have already downloaded images. So I will just copy them. And I will paste them inside these drawable folder. Chose these drawable here, and click on OK. Now, we need to firstly specify name of the animal. So we will first add dolphin. Then we're gonna add image of the dolphin so it is r dot drawable dot dolphin. We're referring to the file. Now let's click Control D, control D to add those animals like this. And we will just edit, dove into the a lion. Then we'll go, we'll use imagery that is appropriate for the for the Lion. I have added animals and that we will be presenting to our screen. So now is the time to create that recycler view adapter that we created. So animal adapter, adapter is equal to the new animal adapter. We need to pass the data or the ArrayList with animals. And then context. And context is this. So context is main activity actually. Now we need to set layout manager for our recycler view. So layout manager will be a linear layout to an integer. And we also need to specify context for it. Linear layout manager is used when we create recycler view that will be scrolled horizontally or vertically. And we have grid layout manager also and some other types of managers. So it depends how we want to arrange our items. Now to add. Finally, this adapter to the recycler view. We'll say recycler view dot set adapter and animal adapter. So I believe that we done everything. Now let's run the app and see how it looks like. So you now see what we have come up with. So obviously there are some problems. Let us see what are the problems and fix them. So firstly, let us see, firstly, let's fix this image. So you see this whitespace, we don't want to have that. So let's open anymore row. And for the ImageViewer, let's change scale type to center crop. Let's click on this in here, which will only apply changes to the UI of our app. So it will be much more faster than real installing the app. So you'll see that we have fixed that. So now what is going on with text? We will open adapter. And for the text view, instead of get image, I should have put the getName. Now let's also run the app. It is working just fine now. But if we click, you see that nothing is going on. And in the next video, we're gonna see how to set onClick listeners for the recycler view. 21. Handling clicks on RecyclerView items: And now we need to set a click listeners for the recycler view. So this is something a bit more complex. And if you don't understand interfaces in Java, it will be probably hard for you to grasp, but don't worry. Point is just to understand the logic behind it. And later on you can adjust, let's say this code for something that you will need in your project and by the time you will get it, how it works and why we did that. Firstly, we need to declare interface in here. So notice that we are still in this class. We can do it also in here. But I will do, I will do it in here. So we will say interface, my Qlik interface, like this. So interfaces are basically like classes, but we are not initializing anything inside interface. And we can't make an object of the interface like we did for the animal class for example. So we will here put method that we want to call when our item is clicked. And we will call it on item click. And it will have integer number, which will be position of the animal. And like this, we don't have curly braces or anything. We just have semicolon because implementation of this method will be put later. Now, we will add this interface as a field in here. We'll put my Qlik interface like this. We will need to pass this interface as a parameter inside our adapter, like this. And we will need to initialize it. So we will put this, we will, we will pass this interface for main activity later. You will see. And we need to set onClickListener for the row holder. And we will do it right in here. So we will refer to this item view. And the way we'll say set on click listener and the new onClickListener like this. And once we click the item, we want to call this on item click method. And to call this method, we need to refer to the interface that we have created in here. We'll say on item click, Get adapter position. And it will know on which animal we have clicked. So now what will happen when we call these on Item Click method? Well, that is something that we're going to define in main activity. So here you see errors because we are required to add that interface. And in here we will implement that interface. It is called the cyclic interface. And we need to override now methods from it. And that method is on item, click, click implement, and click on OK. Here is what will be happening when we click on some item. So firstly, we will want, so firstly, so firstly, we want display which animal we have clicked, and it will be clicked. Plus animals dot get. And this position of the animal that will be passed from here to here. Now, for the interface, we will say this. And it will know that basically we are referring to this on item click thing in here. Instead of this, we could have also said, knew my Qlik interface and the, we wouldn't need this in here. So however you prefer, we will stick to the, to this way. And let's run the app and see what is going to happen. Now if we click on lion, for example, we see something weird is going on. That's because we didn't say dot get name. So we were just printing out object location in the memory of our app. Now if we click on lion, we see clicked lion, and so on. So now we want to open new activity when we click on some animal, and we will do that in the next video. 22. Creating AnimalInfo activity and recapitulating project: Firstly, we will create new Activity, Empty Activity, and let's say anymore info. We will make some changes in here. So we would put card view, which will be 25225 dp wide. Now corner radius will be 125 because we want to achieve this circular shape. Now we will constrain this to the parents. Will move it like this. Now we will add TextView, which will be 350 dp wide and 250 dp height. We will now put this text to you somewhere like here. We will constraint it to the guard's views so that we can make it centered. Inside these card view, we're gonna need to add image view, which will be image of our animal. So firstly, let's close this tag like this and add image view, which will have match_parent attributes. Id will be image circled and scale type will be centered crop. We need to wrap this TextView in card view as well so that we can achieve that, those shapes and elevation effect. So car that you will be actually 300 dp and layout who'll be match_parent. So we will swap those values. We will add padding to the text view to be ten dp. And we need to make it like this. Now instead of those constraints that we have put for the TextView, we need to remove them and put them for Descartes view. Like so. We'll add a margin top to be ten or 15 however you want. Let's say that we want to see how we'll text look like on our screen, but we don't want to actually put text like this. So if you now run the app, this text will be shown, but we don't want that to just see a preview of the text in here. And we would use something called tools. Text. So now if you run the app, this text will not be shown in our app. Tools is only here to help us see how it will look like on the real app when some other real text will be putting here. Now we need to add text alignment to be center. And that's pretty much that. So now let us just put color to be color accidents. And for these card view, we can't set actually background attribute. We need to set the background color and it will be Android transparent. And for the text view background color, we want it to be primary, for example. Now let's go back in main activity. And once we click, we want to pass information that we want to be displayed in our newly created activity. So we'll create intent like this. We want to go from this activity to the animal UFO activity. We want to put integer x, which will be our image. So key will be image and the real value will be animals dot get position of the animal dot get image. So also, don't forget to make those fields private. Because we are using getters and setters for them. We don't want we don't want them to be accessed without getters and setters. And this is called encapsulation. In object-oriented programming, we are accessing fields with the methods that can control how our fields will be set. And now let's add the name of the animal that we wanted to show. Instead of put string array list extra, we will actually say just put extra. Then we need to receive these informations for our layout. So firstly, we need to declare image view, where the image will be put, and TextView and where text will be shown. So image is equal findViewByID, image circled. And this is. So let's just check once again, this text doesn't have ID, so we need to add it. We will just see an animal like this. So once we open this activity, we want to set values for those. We will firstly receive our intent. Inside intent object like this. Then we will set image like this, setImageResource, intent dot get into extra, and we will say image. And here we also need to specify a default value if it can't find image key. So it will be some placeholder, let's say lounge her foreground icon. Or you can put just some kind of color in here instead of some image. And for the text, we will put intent that GetString extra. So let's see what we have put for the key. It is name, and that's it. So if we run the app, it just stays clicked. Lie on because I forgot to say here. Start activity intent. So now if we run the app and we click on lion, We will be shown with these place holder which we have put. So why we, why we have this placeholder launcher foreground instead of real image. Because in here instead of getting text rubbery, we're supposed to say put extra. So like this. Now if we run the app, So now you saw that it couldn't find this image key. And it shows this placeholder. Now if he finally click on lion, we see the result. So you can modify this text view a bit. You can add bigger corner radius for the TextView. For example. If we apply changes, we see the results. So now you see that there is Lion Andrew here is some text. That's because we have said that tools will only be shown in here and not in the real app. Now we will recap what we have done in this project. So the most important thing was this adapter. So firstly, we have created this class and it extended recycler view adapter, which, which holder type is animal row holder. And we have defined it here. So we wanted our own view holder. On this view holder is basically this animal rho, which is declared in here. We are initializing TextView and ImageView for each row. And we have set on click listener for the entire row. So if we click on this text, it will also work even on the image, it will work. Inside our animal adapter. We have onCreateView holder, which is called when the sorrow is firstly created. So it will be called eight to ten times. And that's it. And these onBind view holder is called every time that our view holder requires new data. So let's imagine that we have 20 rows in here. Or let's go and main activity and actually add more wolves like this to make it more clear, if we now run the app, if we start scrolling like this, dolphin doesn't exist anymore. And when we scroll back to it again, on bind view holder is called and it is very inflated with the position that is required. So let's start again. When we start the app, onCreate is called probably eight to ten times, depends on the screen and memory. And if we now start scrolling, now when dolphin reaches, let us say somewhere like here, it just gets removed or deleted. It doesn't exist in our app anymore. And now only on bind view holder is getting cold. So basically now when we go back to him, this method is called to get the owl. And this method is now again call to get our dolphin back. But now those items, those wolves are deleted. So I will now try to show you the picture that will explain that better. So this is the image that I was looking for. So basically this item gets removed. Don't have worry about ListView, just focused on this recycler view. And here this item gets removed and we don't have more items. It is just being replaced in onBind view holder. And when we scrolling, we have a feeling that there are infinite rows, but actually there are only May 10 be rows. So that is how recycler view works. And then get item count. And we'll help recycler view to know how many items we actually have. Then about this item click listener. We need interface which is declared in here and initialized with our constructor. So we have here past Qlik interface and its method is this one. We have overridden it here. And when we set this, what we have basically said is that this clicker interface is this one from MainActivity. And when we say my Qlik interface on item click with a disposition. Basically, it would, it would here know that we have clicked. And this was the position, this one which is passed from here. And it will trigger everything in here in order to give us desired result. So I hope that you have understood most of the project. I suggest you to practice a lot. For example, make an app that will show celebrities instead of animals. And some activity where more info about that celebrity will be shown. So that's it for me. I see you in the next video.