web design software on android
hello everyone my name is oum saokosal. today i will teach you best way to createandroid database app in 30 minutes. ok in this video you will learn navigationdrawer recyclerview, android volley, php & mysql i know it sounds a lot to you but if you wantmore detail you can find more videos on my channel: oum saokosal my facebook page: kosalgeek,twitter: @okosal, and some source code in library at github.com kosalgeek as well. so for this requirements, you have to havethe android studio the latest one genymotion for the emulator xampp for php and sublimetext. ok let's go the project ok let's open up theandroid studio.
i use android studio 2.1.2 and then let'scall it androiddbapp1 and you choose the version for android 4.0 that's fine, you choose theandroid navigation drawer because we want to use that and just leave it like this. ok it is finished now so let's run it becauseyou wanna test it. ok it works now. so this is the navigation drawer, that’sit. ok so we want to make maybe a fragment onthis one so i want to quick change a little bit the menu so you go to menu here this oneso i just delete all of this so i don't need it ok and maybe just group like this.
we just give it two option you know like thisone for the you know like let's say our news because maybe you want to have a news andthen maybe product okay so give the item name so usually i give the name like menu, menunews,menuproduct ok. and then this one you want to change to somethingelse but you if you don't just delete it so just wanna make quick change that's it. and then you go to java here and go down. this one is a default you know like a quotelike a generated for you so just change to menu for that and delete all the rest herebut don't delete this part, this here is well, this one is very important and then you wantto have a fragment so right-click on this,
go to fragment here and then choose the blankone and then uncheck this because we don't need it and just give it like newsfragmentok and if you want for more detail about this i have a good video on my youtube channelabout the navigation drawer. please check it out. but for this purpose i just make a simpleone okay and make sure that you import the fragment the right one you go to import here. if you see something like this ok it worksbut it has some problem when you use it in the future so make sure you use the supportversion 4.0 ok so here you can use the recyclerview inside the fragment ok so before anythingyou want to test it so you go to present the
rest in layout here in the fragmentnews okjust go here and then you know like you want to test it, just grab maybe a clock ok likethis. if you want to change to linearlayout, yougo linearlayout ok something like that, that's fine and if you wanna drag again ok doesn'tworry, it doesn't matter and then maybe you run it. oh i forgot you have to call the fragmenthere of course we didn't call it yeah so we go to mainactivity here and over here youjust call the newsfragment and you just call newsfragment with a smaller case you knowand then newsfragment like this, that's it. one more thing that you have to understandthat fragment is a part of the activity so
you have to know that where you want thisfragment to go to so actually you will put it into the content_main here so you haveto give like the name to the relative here so if you just delete it inside the contentmain and you have to give a name to the relativelayout here. well actually it's id not name, id like thisand then we'll find like that and then maybe i call it mainlayout ok and this is the placethat you want to put the fragment into all so you go back to mainactivity here and thenyou call fragmentmanager and let's call it manager, must be inside. ok and then get support of fragment managerhere like that so now what we can do is manager.begintransaction
and then you need to replace so we want toreplace the fragment here and into the yeah content_main so remember that so r.layout.mainwait no no, id.mainlayout and then newsfragment here okay and you want toput the text, it is ok. if you don't that's fine ok so if you want to have a default activityjust copy this and pass it to the oncreate here, down here that's fine you have to callcommit() at the end so it doesn't run because you just call the replace and then you havecommitted so run again ok now you see the clock it means that the activities, you knowlike take the fragment and put inside that and this isn't you and it's clock here oknow you want to put the recyclerview inside newsfragment here and the fragment is calledin like that.
so you need some library so you have to googleand type android recyclerview and you go to here and maybe this one too. so in this blog google give you a very goodyou know example there so if you want to just grab the code here, great, like that, youneed a card like this ok so but before anything you have to put the dependency here but youhave this plus sign you have to put the you know the the latest one. so you go to here or maybe around it's okand then you ctr+f and you find recyclerview so this is the dependency for recyclerviewso grab the code like this and then you go to android and you go to gradle the secondone, not the first one and you say compile
then paste like it and you need another onecardview so cardview is the like companion of the recyclerview. so grab the code and compile again great sosee now ok. it has some problem because my you know likei compile it with the version 23 now i use 24 i think i have to change it to 23 maybesomething this is fine. i have to do the sync again the reason thatyou got some error because i used the version 4.0 remember when i create a project i usedandroid 4 and this one is you know like the latest updates so it's gonna go to 24 andi used 23 so it's fine just you know downgrade little bit and if you want to use, you know,the latest one.
but you have to change it properly but justgo like quick quick now so it's done and then go back to here and ready for the recyclerviewso here copy and you go to layout so you go to fragment_news ok this one you don't analogclock whatever just this one and lets change to rv and this one is news ok so you knowlike that it's match parent so it's gonna match the whole screen. this is for recyclerview but then you needa cardview right click new and choose xml and layout here so i will call new_card_viewok like this and this and bring it to maybe that is fine maybe let you play out whatever,linearlayout is fine and then you know like i want to have one image and like two textor maybe two image whatever but let's try
it so one image from the left and one at theright you know 2 image so let me try ok so i will create an inner layout called linearlayoutand this one is going to be this is match_parent but i give it yeah match parent first andthis one match parent first and inside here i will haveâ image view and this one is goingto be wrap content ok and should be there is a name here let itcall left may be ivleftimage and image scaletype is going to be centercrop and maybe i don'thave a source and they want to use from android maybe you want to have one image, let's go grab an image here angkor you know angkor, it's from mycountry here and we need to fill this space and no capital letter just only smaller caselike that so you can have drawable and then
angkor ok let's see ok it's gonna use thewhole screen but then height i'm maybe just give a 300dp like this ok so this one maybe300dp here, cardview and outside here i need a cardview so grab the cardview somewhereyeah usually i put the cardview in the outer not inside like this and then cardview likethis ok it complain because you don't have the name space here, pass it like this. now you have all the point you want and thisone window, yes. but the width of cardview is 200 it's verysmall so i have to put it like match_screen, match_parent and this one is gonna be 300so this one i put match_parents, it was 300 now and this one i don't look at the 14:39300 again so it's gonna be like this so i
want to have two one from the left and onefrom the right so this one going to put the orientation horizontal ok and this one youhave to put layout_weight this one and .5 mean 50-percent you cannot put 50%, you canput 5 like that and this one is gonna be to left and this one right ok and lets run againusually see something like that just press ok. now it's done ok gravity center doesn't matterok and corner is 4 yeah maybe i just have image only, if you want some text it's finemaybe just put the text below here ok but now just make it quick quick. ok so you want to get the data from the databaseso you need android volley here so go back
again android volley ok so first you needyou know like gradle you need to go to this one, second one just like that you know likeserial but the third one you going to grab the code ok not this one you're gonna grabthis one and gradle again and sync it here like that you know sync's done so you needthe you know like a class for mysingelton it's a code that prevent the calling, youknow, like you're gonna have to duplicate follow and mysingelton is just like afterwhen you create many object from a class so this is the one going to protect you knowonly one instant an object creates from a class and this one we need to support version4 here again, that's fine. i know this sounds little bit difficult foryou but if you wanna you know like a complete
course you go to my youtube channel and nowit's done mysingelton and you go to the newsfragment here you need it to call for this one mysingeltonand get instant and then this so one problem now you need this from outside so you canget the context from here context container.getcontext() here so this one is context and then you canadd the request here ok so you need a stringrequest ok and stringrequest new stringrequest sothis is calling to the network. so first you need like a method and this igo grab a data from the database so you start getdata ok and you want both data you usewhole ok grab a data and you need url here so it's url so you will use the local oneso you're going to be 10.3.2.0 you have a 18:50â like that but make sure you have torun this one as well.
ok so i will make a project and gonna callit like examplenews and the fall is going to be index php and this one say new no you'regoing to be messy here so like this first url and this one and comma and another newbelow here so you have four this one is gonna grab the data back when there is no errorand when there is an error you get the error from the error listener here ok so you needone more thing you have to go to android manifest here and you have to ask for permission thisone's gonna need internet like this right ok now you can all stringrequest and put downbelow here so now you can call through the network ok and this represents your local-hostif you use a real server just put the you know like this in google just google and putyour url ok but this one is going to be for
the local host and examplenews so i have togo here to them and create new folder. for mac it's going to be 20:27 and then renameit examplenews one more time. and then we will create a more like php indexand you need sublime text here so make sure you did it all of this because you need onlyphp and this one and you will send a data so you just grab a data actually so you needa connection but maybe it's better to create a make them outside, may be copy and pastelike that, connection so you will need a server and the server is local host and user is rootand pass is blank and db so you will need a db database name so just call examplenewsand then you will need like mysqlite connect and then server and user and pass and db andthis one maybe you can call comm with a double
m here so if comm error may be just call theerror ok and then call die so just call error db ok that's all. and then we will get the connection here into the index so you can include maybe include once and connection php ok so you wanna getall the database you know, like now you don't have database so you go again localhost, mydatabase is not running so let’s start it so once again so you go to php myadmin, createa database, new database examplenews, use the collation for the utf-8 general ci thisone great and just calling news maybe that's 4, it's fine plus one id and then we're gonnabe auto increment this one primary key and it's called title and type varchar maybe 250like this title an image 1, this one just
you know image url and then maybe 250 that'sfine ok save. now you can insert simple data here so liketest image 1 and this one i call image1.sql and this one image 2 then this one test image2 and this one is gonna be 3, this is gonna be 4 ok good, now you have all the data hereso you wanna get the data from the database here ok so mysql_query ok now you got thedata okay and remember i'm using the sublime text if you use notepad++ you will have someproblem with the code here ok now you can get a data and then you want to put it intothe android here. so before anything you want to test here sothis is the right spot in the data so just use log like there may be just put name ofthe fragment like that and this is the response
ok you open up the android monitor here andyou like filter by a new fragment you can see now the data is like this. if you see something in front of this likeyou know like some symbol that means that you have some error so you have to changeto sublime text ok. now the data is done and you want to convertthis the... you know like the json onto the arraylist so you have to go to my github kosalgeekthis one and then you go to kgjsonconvertor ok and then you have to grab the code andif you want to donate some money you can donate here okay it's free to use. so first you need the gson so go here youcan download the gson here ok and then go
back and then this one here to download myproject or click download ok and zip it and copy this one and go back and click here onthe27:04 here and go to project on the apps - libs and right-click and pass it. yes and another one, this one pass this andjust you know like this and add as library, you want to add this to the library that'swhy right click on this so it will take some time and now it's completed go back to youknow android here ok so first you need to create a class that represent a data fromthe database so let’s call news as well and then you will have public integer id,make sure that the name must match to the field of database here id title image 1&2ok okay you cannot rename to anything and
this one string title and you have to usepublic as well and string image 1 public string image 2. ok and then is the main serializable hereyou want to get the response and then the code convert to arraylist, it's in my materialhere just grab the code you know like this and then the response now is gonna be overhere and the class is news ok now you have the arraylist so you wanna put the arraylistinto the recyclerview the last part of the material, recyclerview and rv and just callnews ok so this one you need to use this so i go remain it to view so this one is goingto be view like this. ok now you can just use view like this andfind view by id so now i can the rv yeah and
we have to be pass it okay now rvnews andyou want you know like the setlayout usually you use the linear layout. context and the context here must be finalok so now we have to set the hasfixed as true and lastly you want to set the adapter themost important part here, so you need to create adapter outside so i will call newsadapterok so right click and create a class call newsadapter and then you have to extend recyclerviewadapter and then inside that you will have the you know like a view holder so recyclerview,view holder and then you have to implement this so in the main method three method yeah. so here we need to call newsadapter and thennewsadapter like that, newsadapter, so
you want to pass the you know the arraylistinto this one so you will create the contractor for that. hello everyone my name is oum saokosal. todayi will teach you best way to create android database app in 30 minutes. ok in this videoyou will learn navigation drawer recyclerview, android volley, php & mysql i know it soundsa lot to you but if you want more detail you can find more videos on my channel: oum saokosalmy facebook page: kosalgeek, twitter: @okosal, and some source code in library at github.comkosalgeek as well. for the emulator xampp for php and sublimetext. ok let's go the project ok let's open up the android studio. i use android studio2.1.2 and then let's call it androiddbapp1
and you choose the version for android 4.0that's fine, you choose the android navigation drawer because we want to use that and justleave it like this. ok it is finished now so let's run it because you wanna test it.ok it works now. so this is the navigation drawer, that’s it. it ok and maybe just group like this. we justgive it two option you know like this one for the you know like let's say our news becausemaybe you want to have a news and then maybe product okay so give the item name so usuallyi give the name like menu, menunews, menuproduct just wanna make quick change that's it. andthen you go to java here and go down. this one is a default you know like a quote likea generated for you so just change to menu
for that and delete all the rest here butdon't delete this part, this here is well, i have a good video on my youtube channelabout the navigation drawer. please check it out. fragment the right one you go to import here.if you see something like this ok it works but it has some problem when you use it inthe future so make sure you use the support version 4.0 ok so here you can use the recyclerviewinside the fragment ok so before anything you want to test it so you go to present therest in layout here in the fragmentnews ok just go here and then you know like you wantto test it, just grab maybe a clock ok like this.
run it. oh i forgot you have to call the fragmenthere of course we didn't call it yeah so we here. well actually it's id not name, id likethis and then we'll find like that and then maybe i call it mainlayout ok and this isthe place that you want to put the fragment into all so you go back to mainactivity hereand then you call fragmentmanager and let's call it manager, must be inside. content_main so remember that so r.layout.mainwait no no, id.mainlayout and then newsfragment here okay and you want to put the text, itis ok. if you don't that's fine ok so if you want to have a default activity just copythis and pass it to the oncreate here, down here that's fine you have to call commit()at the end so it doesn't run because you just
call the replace and then you have committedso run again ok now you see the clock it means that the activities, you know like take thefragment and put inside that and this isn't you and it's clock here ok now you want toput the recyclerview inside newsfragment here and the fragment is called in like that. here and maybe this one too. so in this bloggoogle give you a very good you know example there so if you want to just grab the codehere, great, like that, you need a card like this ok so but before anything you have toput the dependency here but you have this plus sign you have to put the you know thethe latest one. so you go to here or maybe around it's ok and then you ctr+f and youfind recyclerview so this is the dependency
for recyclerview so grab the code like thisand then you go to android and you go to gradle the second one, not the first one and yousay compile then paste like it and you need another one cardview so cardview is the likecompanion of the recyclerview. so grab the code and compile again great sosee now ok. it has some problem because my you know like i compile it with the version23 now i use 24 i think i have to change it to 23 maybe something this is fine. i haveto do the sync again the reason that you got some error because i used the version 4.0remember when i create a project i used android 4 and this one is you know like the latestupdates so it's gonna go to 24 and i used 23 so it's fine just you know downgrade littlebit and if you want to use, you know, the
latest one. but you have to change it properlybut just go like quick quick now so it's done and then go back to here and ready for therecyclerview so here copy and you go to layout so you go to fragment_news ok this one youdon't analog clock whatever just this one and lets change to rv and this one is newsok so you know like that it's match parent so it's gonna match the whole screen. maybe you want to have one image, let's gograb an image here angkor you know angkor, it's from my country here and we need to fillthis space and no capital letter just only smaller case like that so you can have drawableand then angkor ok let's see ok it's gonna use the whole screen but then height i'm maybejust give a 300dp like this ok so this one
maybe 300dp here, cardview and outside herei need a cardview so grab the cardview somewhere yeah usually i put the cardview in the outernot inside like this and then cardview like this ok it complain because you don't havethe name space here, pass it like this. now you have all the point you want and thisone window, yes. but the width of cardview is 200 it's very small so i have to put itlike match_screen, match_parent and this one is gonna be 300 so this one i put match_parents,it was 300 now and this one i don't look at the 14:39 300 again so it's gonna be likethis so i want to have two one from the left and one from the right so this one going toput the orientation horizontal ok and this one you have to put layout_weight this oneand .5 mean 50-percent you cannot put 50%,
you can put 5 like that and this one is gonnabe to left and this one right ok and lets run again usually see something like thatjust press ok. now it's done ok gravity center doesn't matter ok and corner is 4 yeah maybei just have image only, if you want some text it's fine maybe just put the text below hereok but now just make it quick quick. class and this one we need to support version4 here again, that's fine. i know this sounds little bit difficult for you but if you wannayou know like a complete course you go to my youtube channel and now it's done mysingeltonand you go to the newsfragment here you need it to call for this one mysingelton and getinstant and then this so one problem now you need this from outside so you can get thecontext from here context container.getcontext()
ok and stringrequest new stringrequest sothis is calling to the network. so first you need like a method and this i go grab a datafrom the database so you start getdata ok and you want both data you use whole ok graba data and you need url here so it's url so you will use the local one so you're goingto be 10.3.2.0 you have a 18:50â like that but make sure you have to run this one aswell. the local host and examplenews so i have togo here to them and create new folder. for mac it's going to be 20:27 and then renameit examplenews one more time. db ok that's all. and then we will get theconnection here in to the index so you can include maybe include once and connectionphp ok so you wanna get all the database you
know, like now you don't have database soyou go again localhost, my database is not running so let’s start it ok. you know image url and then maybe 250 that'sfine ok save. now you can insert simple data here so like test image 1 and this one i callimage1.sql and this one image 2 then this one test image 2 and this one is gonna be3, this is gonna be 4 ok good, now you have all the data here so you wanna get the datafrom the database here ok so mysql_query ok now you got the data okay and remember i'musing the sublime text if you use notepad++ you will have some problem with the code hereok now you can get a data and then you want to put it into the android here.
see now the data is like this. if you seesomething in front of this like you know like some symbol that means that you have someerror so you have to change to sublime text here okay it's free to use. so first you needthe gson so go here you can download the gson here ok and then go back and then this onehere to download my project or click download ok and zip it and copy this one and go backand click here on the27:04 here and go to project on the apps - libs and right-clickand pass it. yes and another one, this one pass this and just you know like this andadd as library, you want to add this to the library that's why right click on this soit will take some time and now it's completed go back to you know android here ok so firstyou need to create a class that represent
a data from the database so let’s call newsas well and then you will have public integer id, make sure that the name must match tothe field of database here id title image 1&2 ok okay you cannot rename to anythingand this one string title and you have to use public as well and string image 1 publicstring image 2. you use the linear layout. context and thecontext here must be final ok so now we have to set the hasfixed as true and lastly youwant to set the adapter the most important part here, so you need to create adapter outsideso i will call newsadapter ok so right click and create a class call newsadapter and thenyou have to extend recyclerview adapter and then inside that you will have the you knowlike a view holder so recyclerview, view holder
and then you have to implement this so inthe main method three method yeah. so here we need to call newsadapter and then newsadapterlike that, newsadapter, so you want to pass the you know the arraylist into this one soyou will create the contractor for that. publicâ news adapter and then you want toput the arraylist of news so it's just new list like this and then this, maybe you wannaput the context as well, context inside here, newslist no and this one to, and this onenewslist and make sure that the return must not be zero, because zero means that no dataso you will say like if newslist not null then you will return the newslist.size() okand otherwise you will return zero ok. ok now you wanna pass it over here at thecontext and the userlist not new list it's
newslist ok so first you have to create thisone but you have to create an internal viewholder so you have to call public static newsvh publicclass and then extends recyclerview viewholder and then you have to implement a contractorlike this and you have to check the cardview this one, so where is your cardview over hereso you have image left and right, right! so we need only this thing. the title we don'thave that so it doesn't matter, so this one cardview and we would have a name for cardviewyeah call it newscard and then we got to imageview image 1 and image 2 so this one newscard,cardview, this one 34:59 first here and you'll call itemview find view by id and newscardand this one is imageview so i have to rename it like that as well ok now we have to createthe viewholder so layoutinflater and layoutinflater
from parent.getcontext() here and view viewinflater inflate so we inflate the resource here so r.layout.newscard ok so now we inflatethat and then we put recall the news view holder here so newsvh here so newsvh and thenthe data will come through this onbindview. so we get the data you know like release thatlike arraylist the selecteddata so it's gonna be selected news and we're gonna have thenew list and then get from which position, this position will go to this one and thenwe wanna display an image so we need another library so we will need picasso this one,very simple. i usually use this one ok picasso this oneimage and a url so of course we need the dependency as well just grab the gradle here ok so nowthe picasso is ok but url is not we need the
image so the image, the url is the string, we can get an image from the selectednews. remember selectednews is the arraylist socopy all of this image and we go to example, examplenews here and right click you knowfolder, gonna call image and pass it and this one is image 1 but it's png so i have to changethe database a little bit, database, png, just rename all of this to png because theimage is png so now the url is in our database so i'm gonna put the real url 38:05 localhost,this one is fine examplenews and the folder is image ok. now it's done now this one placeholderso i will just android. now the imageview, imageview is data from the view holder, thisone usually i use the instance of holder instanceof newsvh ok then i will convert to newsvh likethat and this one is in the inside, and this
one now put into the image left and lastlythis one url. so let me take it inside 1, 2, this one 1, 2 this one right! ok. oh iforgot so i just put ones in all, now let’s change one to two, this one previously it'snumber 1 now it's number 2, so let’s see ok now it's running ok you can rotate it. ok that's it for this video i hope you likeit and don't forget to subscribe my channel and give me a thumb up. share to your friendson facebook and twitter if you have any problem or question, please comment below i try toanswer as many as possible and i'll just say bye for now and i will see you in the nextvideo. thank you.
Tidak ada komentar:
Posting Komentar