Custom Buttons Design - Android Studio Tutorial

hello guys and welcome to another video of mine in this tutorial I'm going to show you how to how to create a different kind of buttons so in Adobe XD I have designed five different buttons and we are going to implement them in Android studio so we are going to implement the first green button and next we are going to create one by one until we reach the final button which is a circle button go okay so now that we hear that we're going to copy this green color and open your Android studio and just create one simple project as we always do we're going to name it custom buttons just click Next Next Next and finish we're going to wait a little bit until Android studio finish building our project [Music] [Music] okay I think it's done so the next thing we are going to do is we're going to change the theme we're going to use no action bar team just for the purpose of this video and next we are going to delete this text and add one button we're going to Center this button with this constraint layout like that so now we are going to add a few attributes to this button we are going to change the text size and text color also text all caps to false and then width will be 250 and height to 60 VP okay now we're going to add size and color size will be 20 the SP and the color will be white like that so the next thing we are going to do we are going to add one drawable resource file in Roble folder we are going to name it custom button and now we are going to change this selector into a shape and we are going to add this one attribute which will which is shape and we are going to choose a rectangle next we are going to use a solid tag and add this green color from the first button just copy it and place it like like I just did okay so that's that's it for the first button we are now just going to import this drawable file into our button with the background attribute and next we are going to run the application to see how our button looks like in the Android emulator okay we are going to wait until our emulator finish installing this application okay and now we here as you can see the button is pretty beautiful so we are going to continue and create a next button our next button is blue button with corner radius of 10 we're going to copy the blue color again and just paste it here instead of the green and we're going to add one more attribute which is corners and it's radius will be 10 VP like I just said and there we go so we are going to run this application again to check it out in Android emulator and there we go we have successfully created the second button so we are going to continue and create the third button which is this pink button with a stroke we are going to copy this color and we are going to replace that instead we are going to use a stroke tag and just paste this color and width of this stroke will be 1 DP and colon radius will be 5 DP so there we go we are just going to change this text button text color to the same color as there is a stroke and now let's start our application to check it out so as you can see we successfully created this ping button - it looks cool next thing we're going to create a gradient button we need to copy two colors first is a green on the left side and blue on the right side so head over to our custom button file but before that we are going to switch to blue to white color for our button text and then we're going to use the gradient tag in this file we're going to use start color and color and type start color is already copied we're going to copy the end color and we're going to add the type to linear and that's it we're just going to increase radius to let's say 50 okay now let's check it out we're going to run our application again and there we go we have our button like it's on our design is pretty the same and the final button will be circle button so we're going to copy this this color and first we are going to change our text from button to go like it's on our design and we're going to change the height and width to 100 DP so we're going to remove this gradient and add solid and add color like that and we're going to just add corners to let's say 909 and 9dp it doesn't matter I could say 100 but let's try let's type 90 99 okay and there we go we have created the circle button as well let's open this Android emulator again and let's see so there we go we have created five different kind of buttons I hope you'll learn from this tutorial of mine and see the next video [Music]

Channel: Stevdza-San

Views: 249,225

Rating: 4.8834953 out of 5

Keywords: how to, create, make, design, custom, beautiful, button, buttons, in, android, studio, android studio, guide, tutorial, shape, drawable

Id: nlPtfncjOWA

Length: 8min 3sec (483 seconds)

Published: Wed Oct 10 2018