In this tutorial, we are going to learn how to make customized android Button and EditText because we all know that default android buttons and EdiText both are not attractive. So we all know that making our buttons and edittext customized will attract the user a lot. Here we are going to create two android resource file inside the drawable folder in our android studio. But both of the android resource files are different from each other as one is of the "selector" type and the other one is of the "shape" type. Why it is so because one is the static one and the other one is of the pressed type. In the static one which is the EditText require only the shape type because it is only going to get displayed to the user which do not require any other property so in the "custom_field" file we are only going to code on the "shape" type i.e we are only defining the edges of the edittext and which shape it is going to be. Now, comes the other one which is the "custom_btn" in this file we are going to code on "selector" type because it is not the static one, it's work is to get pressed that's why we are defining "selector" type in the android resource file inside the drawable folder. In this "custom_btn" file we are going to define three properties of the button one is of the "state_pressed" and the other one is of the "state_focused" and the last one is the "shape" Later which is going to decide the shape of the android but Later on we will declare these two android resource files in the activity_main.xml file to convert those two widgets into just awesome ones.
- Android Studio.
Step to be followed:-
- Open your android studio and create a new project of your desired name.
- Now we will create two android resource files "custom_btn" and the other one is of "custom_field", but for the first, we will create only one android resource file that is "custom_btn" file.
- Now after creating that "custom_btn" file open that file and make sure that it is of "selector" type.
- Now in this file, we are going to create three properties for the button i.e "state_pressed" "state_focused" "shape" which will make our android buttons look awesome.
- Now, first of all, define the item of the first property "state pressed" in which we are going to code for what is going to happen when we will press the button in the below steps we are going to add the properties to it.
- Now inside the item "state pressed" define the shape of the button because which shape it is going to get when the user presses the button.
- Apply corners to the button inside the shape that we have declared in the above step so that it will slightly curve the edges of the of the android button.
- After defining the corners of the button now its time to add the stroke to it so that the edges will get colored and the button will look awesome.
- In the last property, we are going to add final property i.e "gradient" which will totally change the look of the android button.
- As we have finished the first property now it's time for the second item i.e "state focused" which will work when user will long press and define the corners and stroke to the button as defined in the above steps.
- One more property we are going to add to the "state focused" is solid color property which will make the button look gorgeous.
- Now its time for the last item i.e "shape" which will declare the shape of the button while displaying to the user.
- In the item of "shape" declare the corners stroke and gradient, as we have done in the above "state pressed" property.
- Now we have finished coding for the "custom_btn" now create a Button widget in the activity_main.xml file and apply the android resource file "custom_btn" to the android button and compile the project in the below steps we will learn to code on the android resource file for the EditText.
- As we have finished coding for the "custom_btn" now create another android resource file "custom_field" for the EditText and make sure that it is of "shape" type not of "selector" type.
- Inside this file first, assign a solid color to the EditText which will make the EditText look awesome.
- Now it's time to define the corners to it so create a data type "corners" inside of which we will declare the radius to the android button.
- Now inside the corners, we will define four different properties for the EditText which are "bottom left radius","bottom right radius","top left radius","top right radius" and declare the radius sizes to it.
- So now we have finished coding for the "custom_field" its time to declare the EditText widget inside the activity_main.xml file and apply the android resource file to the EditText.
- Finally, compile the project and test the project again. If you have any queries then do comment below.