1 00:00:00,450 --> 00:00:07,260 Hi everyone in this theater I wanna talk about using Faunce in your Android projects. 2 00:00:07,260 --> 00:00:08,330 So just click on this. 3 00:00:08,370 --> 00:00:15,020 Start in your Android studio project and here are for the application name just type in here app 47 4 00:00:15,450 --> 00:00:22,890 and then click on next and here choose AP I-69 Android 4.1 Jelly Bean for your minimum SDK and then 5 00:00:22,890 --> 00:00:27,930 click on next and here choose activity next. 6 00:00:27,930 --> 00:00:28,800 And then here. 7 00:00:28,860 --> 00:00:30,070 Don't change anything. 8 00:00:30,120 --> 00:00:31,850 And then click on finish. 9 00:00:32,850 --> 00:00:36,020 So now as you can see our project is created. 10 00:00:36,090 --> 00:00:41,430 So now it's actually double click on this race folder here and double click on the layout for that and 11 00:00:41,430 --> 00:00:45,150 then double click and this activity underline main that examen. 12 00:00:45,390 --> 00:00:49,320 So as you can see here this is the user interface of our application. 13 00:00:49,320 --> 00:00:52,790 So here we can actually switch between the design and the text. 14 00:00:52,800 --> 00:00:53,260 OK. 15 00:00:53,340 --> 00:00:59,110 So just click on this design tab here and then select the Hello World text and then press until the 16 00:00:59,110 --> 00:01:00,390 key on your keyboard. 17 00:01:00,720 --> 00:01:05,290 So now I want to actually drive a large takes at the center of this relatively out. 18 00:01:05,370 --> 00:01:11,690 So just select these large stakes here and put it at the center of this relatively out here. 19 00:01:12,120 --> 00:01:17,520 And then here are DoubleClick and the stakes for you and for the text just typed in here. 20 00:01:17,520 --> 00:01:21,920 This is text OK. 21 00:01:22,030 --> 00:01:28,860 And for the I'll just type in here takes the value and then press enter key on your keyboard. 22 00:01:28,870 --> 00:01:34,990 So now let's actually go back to our main activity identify here and now I want you to create an object 23 00:01:34,990 --> 00:01:41,110 of type text view so text view takes the value assignment operator. 24 00:01:41,110 --> 00:01:49,480 So here I need to cast this object to a text view object you find view by ID or that ID that takes the 25 00:01:49,570 --> 00:01:53,660 value and then put a semicolon at the end of your statement. 26 00:01:53,680 --> 00:01:58,160 So now I want to actually use a format for my text view. 27 00:01:58,300 --> 00:02:02,470 So here in your web browser I'll just open your web browser. 28 00:02:02,560 --> 00:02:09,160 So as you can see here I open my web browser and in the search bar you can actually put this u r l l 29 00:02:09,220 --> 00:02:14,910 w w w that one thousand and one Fornes that come in this website. 30 00:02:14,920 --> 00:02:20,530 You can actually find some of the fonts and you can actually use them in your project. 31 00:02:20,530 --> 00:02:23,200 So for example I would like this font here. 32 00:02:23,380 --> 00:02:28,960 And then here I can just click on this download here and then it's going to download the default for 33 00:02:28,960 --> 00:02:29,250 me. 34 00:02:29,260 --> 00:02:29,890 OK. 35 00:02:30,220 --> 00:02:37,480 And after downloading the phone's unit to actually unzip this font here and four here for example in 36 00:02:37,480 --> 00:02:43,980 my of this the app on my desktop I have a custom font here as you can see for example this Fauntleroy 37 00:02:43,990 --> 00:02:44,620 Brown. 38 00:02:44,800 --> 00:02:45,700 I have this one. 39 00:02:45,880 --> 00:02:50,760 And inside this folder I have this data to T.F. 48. 40 00:02:50,770 --> 00:02:55,130 OK Fauntleroy Brown that is that TGF. 41 00:02:55,180 --> 00:02:58,510 So this is that phone that I want to use in my project. 42 00:02:58,510 --> 00:03:02,940 So how can I actually use this font in my project. 43 00:03:02,950 --> 00:03:05,460 So first I need to open the Android studio. 44 00:03:05,530 --> 00:03:07,880 So as you can see here this is my android studio. 45 00:03:07,900 --> 00:03:10,150 And here is my project structure. 46 00:03:10,330 --> 00:03:16,510 And here at the top in the section that says Android make sure that you actually choose Android OK for 47 00:03:16,510 --> 00:03:20,620 your project structure and then select this app here. 48 00:03:20,740 --> 00:03:21,350 OK. 49 00:03:21,640 --> 00:03:22,580 And then right. 50 00:03:22,720 --> 00:03:23,620 Right click on it. 51 00:03:23,650 --> 00:03:24,040 OK. 52 00:03:24,060 --> 00:03:31,090 New and then as you can see we have this folder here as you can see folder. 53 00:03:31,360 --> 00:03:35,290 And then here choose these assets folder. 54 00:03:35,350 --> 00:03:35,930 OK. 55 00:03:36,780 --> 00:03:44,130 And now it says creates our souls root for assets which will be included in the APJ EPA became means 56 00:03:44,610 --> 00:03:50,640 the APJ version of our application when we want to actually export our application for Google Play or 57 00:03:50,670 --> 00:03:52,530 other markets. 58 00:03:52,560 --> 00:03:56,240 So this is really important and target source said is Main. 59 00:03:56,490 --> 00:04:02,650 So make sure that you actually hit the target source that is made and here and here it says change the 60 00:04:02,670 --> 00:04:08,610 folder location so don't actually check this checkbox and then click on finish. 61 00:04:08,730 --> 00:04:12,600 So now as you can see I have these assets folder in my app. 62 00:04:12,690 --> 00:04:13,310 OK. 63 00:04:13,620 --> 00:04:18,610 So now I want to actually actually create a directory inside these assets. 64 00:04:18,720 --> 00:04:26,460 So right click on these assets here Neal and then click on directory and enter a new directory name. 65 00:04:26,460 --> 00:04:33,620 So here for that for our directory name just type in here Faunce OK and then click on. 66 00:04:33,630 --> 00:04:34,180 OK. 67 00:04:34,410 --> 00:04:41,690 So here I have this for us here and now on my desktop as you can see I have this Fauntleroy down here 68 00:04:41,730 --> 00:04:44,920 and I have this data T.F. Frontiere. 69 00:04:45,150 --> 00:04:51,210 So I could actually use this phone or I could actually use the phone that. 70 00:04:51,210 --> 00:04:57,780 I actually I have in my download folder as you can see I have this font here so let me actually drag 71 00:04:57,800 --> 00:05:01,300 it on my desktop and double on it. 72 00:05:01,460 --> 00:05:04,550 And now as you can see I have this fall Frontiere. 73 00:05:04,730 --> 00:05:11,280 So I just need to double click on it and he and as you can see I need this or T.F. here this Auty a 74 00:05:11,280 --> 00:05:13,570 font so I have two kinds of fonts. 75 00:05:13,610 --> 00:05:16,670 We have these TGF and this to. 76 00:05:16,970 --> 00:05:25,290 So I can just select both of these fonts here again just select this one and right click on it and then 77 00:05:25,620 --> 00:05:32,720 just click on this copy Fauntleroy Brown that ETF and then here I can just select is Faunce folder this 78 00:05:32,820 --> 00:05:36,110 directory and right click on it and then press on. 79 00:05:36,240 --> 00:05:40,140 Paste here OK and then click on OK. 80 00:05:40,240 --> 00:05:44,340 So here again open this wunderbar folder. 81 00:05:44,500 --> 00:05:48,660 This fall this winter that I actually downloaded from the Internet. 82 00:05:48,700 --> 00:05:56,350 And now I just need to right click on the front here and then click on copy this font wunderbar that 83 00:05:56,510 --> 00:05:57,630 ATF. 84 00:05:57,820 --> 00:06:03,480 And here I just need to select this Fornes for directory inside this as it's folder right click on it 85 00:06:03,760 --> 00:06:06,290 and then click and paste and here click on. 86 00:06:06,310 --> 00:06:07,010 OK. 87 00:06:07,390 --> 00:06:09,920 So I have these fonts in my project. 88 00:06:10,000 --> 00:06:13,880 So how can I use these fonts in my app project. 89 00:06:13,930 --> 00:06:19,640 So now I want to actually I need to actually putting some lines of code in my main activity class. 90 00:06:19,690 --> 00:06:25,540 So here inside our main activity class I want to actually create two objects of type type face because 91 00:06:25,930 --> 00:06:27,330 I have two phones. 92 00:06:27,340 --> 00:06:27,910 OK. 93 00:06:28,060 --> 00:06:30,530 So the first one is of type type face. 94 00:06:30,580 --> 00:06:37,480 Just type in here typeface with capital-T and this typeface is inside the android that graphics package. 95 00:06:37,480 --> 00:06:37,850 OK. 96 00:06:37,930 --> 00:06:41,160 So just selected and press Enter key on your keyboard. 97 00:06:41,530 --> 00:06:47,190 And for the name of this typeface just type in here font name one. 98 00:06:47,430 --> 00:06:47,760 OK. 99 00:06:47,780 --> 00:06:53,830 And put a semicolon here and just declaring these objects here in my main activity and then inside this 100 00:06:53,920 --> 00:06:56,830 uncreate my foot I'm going to instantiate these phones. 101 00:06:57,280 --> 00:07:07,640 And again just typing here type face font name to and put a semicolon at the end of your statement here. 102 00:07:07,840 --> 00:07:13,050 So now I'm going to actually instantiate these typeface objects. 103 00:07:13,180 --> 00:07:18,310 So for the first one name one I just know it refers to the name of this object. 104 00:07:18,310 --> 00:07:28,260 Assignment operator and here I can just type in typeface which capital-T that creates from assets. 105 00:07:28,290 --> 00:07:28,620 OK. 106 00:07:28,620 --> 00:07:29,900 Just select this method. 107 00:07:29,900 --> 00:07:35,070 Here I have some of them if it's here but we need to use the Smif it create from asset because. 108 00:07:35,170 --> 00:07:37,560 Because our form is inside the assets for that. 109 00:07:37,560 --> 00:07:38,380 OK. 110 00:07:38,520 --> 00:07:39,940 Create from assets. 111 00:07:40,540 --> 00:07:44,970 And as you can see here in our project structure I have these assets folder here. 112 00:07:44,970 --> 00:07:45,880 OK. 113 00:07:46,110 --> 00:07:51,920 So here I can just for the first argument I need to refer to the name of our assets. 114 00:07:51,930 --> 00:07:53,990 So I just need to type in here get assets. 115 00:07:54,210 --> 00:08:00,410 So it is going to automatically access these assets folder that that is inside of our app here. 116 00:08:00,470 --> 00:08:01,140 OK. 117 00:08:01,560 --> 00:08:09,540 Good assets and for the second argument we need to actually access the address of our phone inside our 118 00:08:09,630 --> 00:08:10,650 assets here. 119 00:08:10,920 --> 00:08:11,540 OK. 120 00:08:11,700 --> 00:08:13,730 So here we are inside these assets. 121 00:08:13,740 --> 00:08:18,880 So now I can just put into double quotes and I have inside assets for that. 122 00:08:18,900 --> 00:08:19,860 I have these funds. 123 00:08:19,860 --> 00:08:20,490 OK. 124 00:08:20,490 --> 00:08:23,160 So here I am just typing font's. 125 00:08:23,690 --> 00:08:24,170 OK. 126 00:08:24,300 --> 00:08:28,980 Slash and here I can just referred to the name of this front here. 127 00:08:29,220 --> 00:08:31,420 Fauntleroy Brown that T. 128 00:08:31,560 --> 00:08:38,010 So it is very important that you are named for the form that the name of the font here must be the same 129 00:08:38,070 --> 00:08:40,750 as the name of the font here inside this false there. 130 00:08:40,830 --> 00:08:41,290 OK. 131 00:08:41,490 --> 00:08:48,890 So here I need to just type in font font Leroi. 132 00:08:49,570 --> 00:08:50,200 OK. 133 00:08:50,220 --> 00:08:50,650 BROWN 134 00:08:53,580 --> 00:08:54,080 OK. 135 00:08:54,100 --> 00:09:00,160 Dot PTF and then put a semicolon at the end of your statement. 136 00:09:00,500 --> 00:09:04,110 So now I want to actually said that Fornes for this DXi value. 137 00:09:04,310 --> 00:09:09,130 So here I can't just type in the value that said typeface. 138 00:09:09,530 --> 00:09:12,570 And here I need to put an object of type typeface. 139 00:09:12,650 --> 00:09:16,100 So here had this font name von ease of type type face. 140 00:09:16,130 --> 00:09:18,740 So here I can just type in front name one. 141 00:09:19,100 --> 00:09:22,640 So let's actually run our project and see what happens. 142 00:09:22,640 --> 00:09:29,150 So now as you can see our application is running on this emulator and I have this text here and now 143 00:09:29,150 --> 00:09:33,830 as you can see the format of this text view is actually changed to this font. 144 00:09:33,830 --> 00:09:35,090 Leroy Brown. 145 00:09:35,270 --> 00:09:35,760 OK. 146 00:09:35,960 --> 00:09:38,270 So it might actually increase the size of this text. 147 00:09:38,270 --> 00:09:49,180 Here in my code so I can just type in the value that set text size to text size. 148 00:09:49,180 --> 00:09:55,460 And here I can assign for example the value of 50 and now it's actually on our project. 149 00:09:56,160 --> 00:09:59,960 So now you can see that our application is running on the simulator. 150 00:09:59,970 --> 00:10:03,380 And here is our text view of this new font. 151 00:10:03,420 --> 00:10:07,000 So now let's actually go back to our main activity that our fight is. 152 00:10:07,080 --> 00:10:10,120 And this time I want to instantiate this font name to here. 153 00:10:10,170 --> 00:10:10,890 OK. 154 00:10:10,890 --> 00:10:21,520 So here I can just type in font name to assignment operator typeface that's create from assets. 155 00:10:21,960 --> 00:10:29,100 And for the first argument I need to specify the assets so I can just type in get assets and for the 156 00:10:29,160 --> 00:10:32,680 second argument I need to specify the path that is of type string. 157 00:10:32,820 --> 00:10:38,970 So instead of double quotes I can't just type in here fonts and in my project structure as you can see 158 00:10:38,970 --> 00:10:43,980 here I have this Frontiere wunderbar space the more that ATF. 159 00:10:44,010 --> 00:10:51,170 So here I can just put in a slash here and then I can just type in wonder. 160 00:10:51,850 --> 00:10:59,250 Bar space Demel dot OTTF. 161 00:10:59,280 --> 00:11:02,490 And then I need to put a semicolon at the end of my statement. 162 00:11:02,550 --> 00:11:08,240 So now I want to actually change the typeface of this text view to this form to name two. 163 00:11:08,280 --> 00:11:10,410 So I can't just take it for its name too. 164 00:11:10,830 --> 00:11:13,050 So let's run our project here. 165 00:11:13,500 --> 00:11:19,920 So now as you can see our application is running on this emulator and now you can see that the front 166 00:11:19,980 --> 00:11:22,020 of my text is actually changed. 167 00:11:22,080 --> 00:11:22,680 OK. 168 00:11:22,980 --> 00:11:27,330 So let's actually make this application a little more a little bit more exciting. 169 00:11:27,480 --> 00:11:31,950 So here as you can see I have this error and I need to click on this clear cache. 170 00:11:32,550 --> 00:11:40,310 And now let's actually delete this takes you here and here let's actually drag a linearly out vertical 171 00:11:40,410 --> 00:11:44,400 at the center of this relative lay out and here. 172 00:11:44,400 --> 00:11:52,560 Let's actually try a large takes you at the center of this linearly vertical and for the layout we assign 173 00:11:52,570 --> 00:11:58,160 the value match parent and then person enter key on your keyboard. 174 00:11:58,440 --> 00:12:03,560 So now as you can see for the gravity attribute such just select this takes you here. 175 00:12:03,600 --> 00:12:08,100 And let's find the gravity attribute that is related to these takes. 176 00:12:08,190 --> 00:12:13,890 So here as you can see we have this gravity attribute that is going to actually position the children 177 00:12:13,980 --> 00:12:15,670 of this takes you OK. 178 00:12:15,870 --> 00:12:18,270 So I have this text inside this text view. 179 00:12:18,270 --> 00:12:22,440 So now I want to actually position this text at the center of this text view. 180 00:12:22,500 --> 00:12:25,580 So I need to work on this gravity attribute as you can see here. 181 00:12:25,590 --> 00:12:30,740 I have this gravity attribute and here I just need to check this checkbox for this center. 182 00:12:30,990 --> 00:12:32,510 OK center attribute. 183 00:12:32,580 --> 00:12:36,090 And now as you can see this text is at the center of this text view.