ColdFusion - ColdfusTion's Android 3D UI Tutorial [Take Android To The Next Level]

Starting point is 00:00:00 Two and five Canadians will hear the words, you have cancer. That's why every step and dollar raised matters. On September 19th, join thousands in Toronto for the Princess Margaret Cancer Foundation Walk. Challenge yourself, friends, and family to walk 21 kilometers in support of life-saving research. Together, we can carry the fire and help create a world free from the fear of cancer. Register today at pmcfwalk.ca.ca. This episode is brought to you by Accenture. When your advertising operations fall out of sync, everything else follows.

Starting point is 00:00:37 Spotify and Accenture are working together to reinvent the rhythm of ad sales, using automation, analytics, and smarter workflows to simplify campaign delivery and access better data across the business. The result? Less time spent on operations, more time connecting brands with the moments and fandoms that matter most. Learn more at Accenture.com slash Spotify. Previously on Coldfustin. Last episode I showed you the Galaxy Note 2 and all of its glory.

Starting point is 00:01:19 Find an in-depth review. It got posted immediately on Z-Net after its release, so check it out if you haven't already. But I guess that's not why you're here. Let's move on to today's episode. The new 3D UI tutorial. Are you sick of your phone looking like this, stuck in portrait? Do you hate touchwives and want your phone to look more modern but it still looks like it's from 1985 no matter how hard you try? Well, the interface might as well be on this phone.

Starting point is 00:01:43 Our telecommunication technology turns your phone into a computer terminal. Well, I think it's about time you revamped your phone. Samsung makes great software and hardware, but could really use a few pointers when it comes to design. First let me walk you through what I have, and then I'll show you exactly how to do it. So the first thing you'll be able to notice is this massive widget here. It's actually called fancy widgets, and it's kind of like an HTC weather hub where the clouds come across and it shows different weather patterns for the different day forecasts. forecasts. If we move over to the next page you'll be able to see that there is a web browser and also a shortcut to the Play Store using something called

Starting point is 00:02:16 simple text and we'll get to that a little bit later and on the bottom left-hand corner there is a shortcut for the camera and video camera and another widget on there as well and up the top you can see there's desktop indicators to see which page you're on and I've got a live scrolling calendar on this page so you can see all your daily tasks and everything and also on this page you can see another simple text icon and also a computer. So this is kind of like an advanced file manager that just looks kind of like Windows. And on the bottom right hand corner we have Google Now which is just a shortcut and moving on to the next page you'll be able to see that

Starting point is 00:02:54 there's a massive widget for KingSoft Office for some editing and on the next page there's a folder for your games where you can customize and put anything you want in there. And then there's a kind of social hub which I've made which is kind of just all your text messaging and your call contacts and everything all in one place and a live scrollable Facebook feed as well on that down the bottom and if you move to the next page we'll be able to see your app drawer where you can swipe across and see all your apps on your phone i don't use this because i have relaunch there's another application for s note and also on the next page there's uh shortcuts for some videos pictures and all that good kind of stuff so um you know basically it's just a whole bunch of

Starting point is 00:03:35 shortcuts and different themes that are put into this that kind of create a unique UI. So there's two major components to this. There is Go Launcher, which is the underlying launcher and there's also multi-live picture wallpaper. So as you'll be able to see, they work in conjunction together. So if you double tap or double click, you can see that it changes every single wallpaper. Two and five Canadians will hear the words, you have cancer. That's why every step and dollar raised matters. On September 19th, join thousands in Toronto for the

Starting point is 00:04:11 Princess Margaret Cancer Foundation Walk. Challenge yourself, friends, and family to walk 21 kilometers in support of life-saving research. Together, we can carry the fire and help create a world free from the fear of cancer. Register today at pmcfwalk.ca.ca. This episode is brought to you by Accenture. When your advertising operations fall out of

Starting point is 00:04:35 sync, everything else follows. Spotify and Accenture are working together to reinvent the rhythm of ad sales, using automation, analytics and smarter workflows to simplify campaign delivery and access better data across the business. The result? Less time spent on operations, more time connecting brands with the moments and fandoms that matter most. Learn more at Accenture.com slash Spotify. You can change all those settings, which we'll get to a little bit later, but you also be able to see the animation transitions actually do vary and the background actually changes color between each wallpaper so you saw that it goes from yellow to a kind of white and then if you keep scrolling it goes to green and then it goes to blue yellow again i think and then blue etc so it's just kind of a dynamic

Starting point is 00:05:22 feel that's kind of something that i chucked in there so without further ado let's get started on how to do it all so first let's see what we need go launcher x with the ui 3.0 theme simple text multi-live wallpaper, bob clock, colourised widgets, fancy widgets and semi-clock. For optimum performance, an Android phone over 1 gigahertz dual core and Android 4.0 or higher. Jelly Bean is recommended though. So step one, setting up the launcher. So of course we're using go launcher so the first thing we want to do is go into your preferences and from there we can set up all the parameters to modify everything the way we need. So going into preferences the first thing you want to do is go into appearance settings, the second one from the top and make sure that under

Starting point is 00:06:03 the preferences the first four items are unchecked so make sure they're all blank and then for the next four items make sure they're checked that's probably the easiest way of putting it next we go into visual settings make sure that the wallpaper mode is on okay that's very important and also I've decided to blur the wallpaper to make the text and icons stand out a bit more didn't notice much of a difference but it might actually help also make sure that the tab UI is on 3.0 next we go into icons and I just basically chose the smaller size possible

Starting point is 00:06:33 Then we have the indicator, so I've done an auto hide indicator and it's going to be on the top of the screen and I've done the numeric style which is the little dots with the numbers in the centre. After this we can go into application settings. Go screen orientation and I've selected horizontal mode. You can actually select auto rotation if you want but I've just kept it at horizontal and I've made the grid size 5 by 5. So this is the tidesist setting and also I've made the transition a random customised customised transition. So I've chosen cube inside, cube outside, flip simple and flip with wallpaper. The rest I've left unchecked but you can have some fun with that and choose all the ones that you want to but I've chosen those for because they kind of go

Starting point is 00:07:17 well with the multi-live wallpaper animation that I have as well so you'll see that in a minute. Next I've chosen the smooth speed so at 45 I found this to be the optimum. If we scroll down from application settings you'll come to gesture settings and in this you can choose what function you want so I've made the home key a function and that function was to show the home screen and after that I've chosen the glide app action so swipe up action to actually be another function and that function was to actually show the menu so that's the menu of go launcher and the swipe down was also a function and that actually shows the task bar so that's the way of getting your

Starting point is 00:07:57 notifications and everything and the double tap the words, you have cancer. That's why every step and dollar raised matters. On September 19th, join thousands in Toronto for the Princess Margaret Cancer Foundation Walk. Challenge yourself, friends, and family to walk 21 kilometers in support of life-saving research. Together, we can carry the fire and help create a world free from the fear of cancer. Register today at pmcfwalk.ca.ca. This episode is brought to you by Accenture. When your advertising operations fall out of sync, everything else follows. Spotify and Accenture are working together to reinvent the rhythm of ad sales,

Starting point is 00:08:42 using automation, analytics, and smarter workflows to simplify campaign delivery and access better data across the business. The result? Less time spent on operations, more time connecting brands with the moments and fandoms that matter most. Learn more at Accenture.com slash Spotify. was disabled because we need that to change the wallpaper and multi-live wallpaper. So the app drawer I've chosen an horizontal loop for the orientation and the grid size was a 4x4 standard setup and the transition was flip for the enter transition and the horizontal transition

Starting point is 00:09:20 once you're actually inside the app drawer was a chord transition. So that's actually pretty cool. I'll show you that in a sec. The jester settings, I've both enabled the glide up and glide down settings. And if we move to advanced settings, I've just selected system persistent and prevent force closers. But there's nothing really to modify there, so that's quite straightforward. Anyway, by the way, at any time, if you're finding this too fast, you may pause the video, and hopefully that helps out. So a quick breakdown on what all of that achieved. If you watch the games icon very carefully, you can see it flipping around, and the same with the key.

Starting point is 00:09:56 KingSoft Office icon. So all of that was basically just setting up those animations. Now if you move on to step two, so the backgrounds and all that moving wallpapers, that's setting out multi-picture live wallpaper. So let's go ahead and start that. So what you need to do is long press on the home screen and this will bring up the options for all the widgets and all that kind of stuff. So we scroll over to the wallpaper and select live wallpaper and then scroll down to multi-live

Starting point is 00:10:20 wallpaper. So I'll show you that. Also it would like to go into portrait mode for some reason when you go to go to a portrait mode for some reason when you go into this, so don't worry about that. So we go into the settings, and then what we can see is we have a group for common settings and settings for each individual screen. So up the top, you'll be able to see that you can select your picture source. This kind of just lets the multi-live wallpaper know where you want to select your pictures

Starting point is 00:10:42 from. You can also adjust the crop resize ratio, and I've put mine as fit to full screen, and I've decreased the saturation to 60%, so that's leaning towards a bit of black and white versus full color saturation. And you can also adjust the individual screen. So I've done my leftmost screen, so screen number one, and I've actually done a custom colour for the background. So this is what I was talking about before, you can actually select whatever colour you want for your different home screen. So you can go from screen one to screen eight whenever you need to and adjust the colours, so you can get the different colours when you swipe through.

Starting point is 00:11:15 And that's what gives that interesting effect and that interesting dynamic. So for the transition type, I've chosen the swing setting. You can choose anyone you want to, but that's just the one I chose. that's just the one I chose and the reflection on the top and bottom was both selected and double-tacked to change picture obviously which I showed you before or else you can actually put a picture change interval but I have not done that there's actually no workaround for Android jelly bean but I can't actually confirm for any of the other Android systems using Go Launcher so anyway

Starting point is 00:11:48 once you've finished all of those settings which I just told you in multi-live wallpaper now both the animations for the background wallpapers and the front icons should now be working in conjunction together, but we haven't set up our icons or widgets yet. Two and five Canadians will hear the words, you have cancer. That's why every step and dollar raised matters. On September 19th, join thousands in Toronto for the Princess Margaret Cancer Foundation walk. Challenge yourself, friends and family to walk 21 kilometers in support of life-saving research. Together, we can carry the fire and help create a world free from the fear of cancer. Register today at pmcf walk.ca.ca. This episode is brought to you by Accenture.

Starting point is 00:12:34 When your advertising operations fall out of sync, everything else follows. Spotify and Accenture are working together to reinvent the rhythm of ad sales, using automation, analytics, and smarter workflows to simplify campaign delivery and access better data across the business. The result? Less time spent on operations, more time connecting brands with the moments and fandoms that matter most. Learn more at Accenture.com slash Spotify. So you would have a blank screen

Starting point is 00:13:02 for where the widgets are supposed to go. We've covered a lot in a very short amount of time, so it's time for a short tea break. You can grab a snack or something, and then I'll be back after this short break. Okay, so we're back, and I hope you had a good snack. But anyway, so we're up to the last step. I know I've gone through a lot,

Starting point is 00:13:17 but you can pause and take it at your own pace. You know, I wanted to be very efficient and make sure that you weren't here all day looking at these instructions. But not to worry, we have come to the final step and that is setting up all of our icons and all of our widgets. So the first thing you'll be able to notice here is these text icons that are kind of like shortcuts to certain applications. Now that's a thing called simple text and all you have to access that is hold down the home screen and then scroll up to the widgets place and then scroll all the way down to simple text in a two by one format. Now make sure you select this every time so all your text will be uniform.

Starting point is 00:13:53 So we go select icon and select simple text icon. And you can see I've got a whole bunch of them that I've made earlier. And you can see that to save time, you can just always reuse ones that you've made earlier and then just rename them to something else. So the first four of the stock setups that you'd normally get. So we'll start with the first on. And as you can see, the first line is simple. And then the next line is just text.

Starting point is 00:14:17 And to get started with manipulating these, you can manipulate them in the X coordinates and y coordinates. And you can see, if you look closely on the right hand side, you can see the top line moving. It's quite hard to see. So first what we have to do is enable shadows. So we enable shadows so that it's more visible and even white backgrounds. So now if we move that again, you can see it's a lot clearer. So you can resize and Replace everything you want to and you can even rotate if you so feel like doing so, which I've done for one of my icons. Once you have got everything in place and the way you want it, you can change the font to whatever you want. So I've actually selected default font number four as as my certain font because I think it looks nicer than the stock font that comes with the simple text icons.

Starting point is 00:15:00 So once I've done that, you can actually rename the icon to whatever you want, and you don't have to have two lines of text, you can just have one if you want, and so I'm just going to rename it to my personal text. And then after that, you can actually go and add a shape. Now this is where you saw the squares and the circles on the icons. This is what I've actually done. So you can select a rectangle or a circle, and you can, can resize and do whatever you want and I've actually just done the solid outline

Starting point is 00:15:29 only so it just looks a lot cleaner you can adjust the line thickness or put a shadow on that if you want and you can rotate and remove and replace and once you've done that you can actually save the icon and save the style so we're going to click save the style so we don't have to redo all our work later and save the icon so we can actually use it in this instance so we want this icon to launch an application so we can click on launch application and then we scroll down to to the application that we want to launch, and let's just say we want to launch Google Chrome. So we just click on that and then...

Starting point is 00:16:01 This episode is brought to you by Accenture. When your advertising operations fall out of sync, everything else follows. Spotify and Accenture are working together to reinvent the rhythm of ad sales, using automation, analytics, and smarter workflows to simplify campaign delivery and access better data across the business. The result? Less time spent on operations, more time connecting brands with the moments, and fandoms that matter most.

Starting point is 00:16:27 Learn more at Accenture.com slash Spotify. Ready to take your investing knowledge to pro-level? This is Fidelity Connects, your daily edge in the markets. Get deep insights on real-time market topics that may impact your investment portfolio. Listen to Fidelity Connects on Spotify today and power your next move tomorrow.

Starting point is 00:16:46 You're done. That icon will now launch Google Chrome once you click on it, but we have to place it where we want it to be seen. So all you have to do to do that is just hold down the icon and move it around and then simply you'll just land anywhere you want you can squeeze it over to another home screen if you want but just wherever the space and wherever you think it looks the best you can put it there and once

Starting point is 00:17:05 that's done you can also resize just to make sure it fits properly so once you click on it it goes to Google Chrome so that's how you do that so that is simple text so you just redo that as many times as you want on different screens now the next thing we want to do is put a little clock on it's something called Bob clock so we go into our widgets and we scroll all the way down to Bob Clock which is not far from the top and then once that's done we can resize the text or change the color so I've just left the text as normal and I've changed the minutes color to a dark

Starting point is 00:17:41 morone or a red kind of color and the left the hours is just a standard white but you can do any color you want and once it's done it's just sits there like that and you can resize to make sure that everything fits properly but it's not that difficult there's not that many options to do for that one the next widget we have is something called colorized widgets now the one I use was colorize Facebook so we'll click on that and then immediately it comes up with a massive widget that you can resize in the way that you want now to make sure that it's all clear like I've got you click on the settings on

Starting point is 00:18:17 the top right-hand corner and then scroll all the way down to to themes and then select no theme and that's how you you get a clear transparent widget and it's fully scrollable and actually links to a mini Facebook application. The next app we have is fancy widgets and it's just a weather widget that you saw earlier. It's not going to look like this when you first get it. Unfortunately to get this theme you actually have to pay about $2 I think but I think it does look quite good so you can resize it once again to get it the way you want to fit

Starting point is 00:18:50 but to access the different type of themes all you have to do is click on the widget itself and then go into click on the option button and then go into weather skins and then I've chosen Voss-Sygin mod white. So the next widget we have is something called semi-clock weather and there's also a semi-clock battery which is kind of just a very small widget. But anyway so semi-clock weather there's nothing to really set up there you can just kind of make the background clear and then voila. Next thing is something called simple calendar so what we're going to do is select that and choose the skin on the

Starting point is 00:19:24 bottom left hand corner. That's the clear skin that works and looks the best. So you can just do that and it's fully scrollable and once again you can just resize to fit it however you like. And when you click on it, it actually goes into the calendar app. And I can't remember if I did that by myself or if it was automatically like that, but it's not hard to set up. The next thing we have is obviously this. Two and five Canadians will hear the words you have cancer. That's why every step and dollar raised matters. September 19th, join thousands in Toronto for the Princess Margaret Cancer Foundation Walk. Challenge yourself, friends, and family to walk 21 kilometers in support of life-saving research.

Starting point is 00:20:06 Together, we can carry the fire and help create a world free from the fear of cancer. Register today at pmcfwalk.ca.ca. This episode is brought to you by Accenture. When your advertising operations fall out of sync, everything else follows. Spotify and Accenture are working together to reinvent the rhythm of ad sales, using automation, analytics and smarter workflows to simplify campaign delivery and access better data across the business. The result?

Starting point is 00:20:36 Less time spent on operations, more time connecting brands with the moments and fandoms that matter most. Learn more at Accenture.com slash Spotify. After all, so I'll show you how to get that in a minute, but if you want an actual application that is with just a very very, very modified icon, all you have to do is click on the application and then drag it to the home screen you want it to go to. So I'm just dragging Gmail here and you'll see that everything kind of moves out of the way when you try and put it on top of another widget. But once you hold down on that Gmail icon you can click the replace button and then you have a list of icons

Starting point is 00:21:12 that you can replace it with to make it a little bit better. Now I'm not sure if you can get extra things that you can add onto this that have more icons but this is just the stock one that I had and you can change it to anything you want. So you can see that camera button I just modified when it launches the camera. So this photo little picture kind of opens Gmail now. So you get the point and you get the idea you can modify it to any way you want on any kind of widget. So about that app drawer to get that all you have to do is go into Go Launcher shortcuts and then click on app drawer. And then you can just hold that down and modify the widget and replace the icon.

Starting point is 00:21:50 So that's how I did that. So that's basically the gist of this tutorial. There's quite a lot to get through and it may take about two or three hours I estimate to get all this sorted but once you do have it you only have to do it once and it looks 10 billion times better than the original interface. So thanks for watching guys and there's one thing that I do ask for you, I don't usually ask for things, but if you do have this interface and someone asks you, well how did you get that? Just tell them that Colf Houston told you how to do it and link them to this video if they ask.

Starting point is 00:22:21 But anyway, a quick rundown. This is the fancy widget that I was talking about. We've got the Bob Clock here. And then under that we've got the modified camera icon and we have two simple text icons here. Another modified icon and semi-clock weather over there. Flip over and we have that simple calendar with a clear theme. We have the simple widget again. Stock Google's search bar with a couple of other simple text icons.

Starting point is 00:22:53 And we also have a massive Kinksoft widget which just kind of sits in there. It's not hard to do. And we have another simple text icon and folders, which I didn't do, but it's not hard. You just drag two icons on top of each other and they automatically group into a folder. And we set up the animation previously. We also have the Facebook widgets as well as a couple of other replaced icons, which launch something called Metro Messaging Beta. And this keyboard is called AI type keyboard, just in case you're wondering, if you want to modify that as well,

Starting point is 00:23:23 well. All of this will be in the description and we obviously have S note and another simple text icon as well as another modified icon and just some more simple text icons and another modified icon. So that's basically how I did the whole entire UI and hopefully you could follow that and hopefully everything works out for you if you have any problems just leave something in the description and I'll try and answer. Thanks for watching guys and don't forget to write, comment and subscribe.

ColdFusion - ColdfusTion's Android 3D UI Tutorial [Take Android To The Next Level]

There aren't comments yet for this episode. Click on any sentence in the transcript to leave a comment.