Customize Button In Xamarin Android

Background

Most of the time, clients' requirements will be different regarding the design of the button of any B2B or B2C or C2C Application. Hence, we need to customize the button, as per their requirement.

Thus, let’s understand these concepts in detail.

1. Create a new project and give some meaningful name to it, as shown below.
   
   
   

2. After creation of the project, class file called MainActivity.cs, which is a default start activity of your project, which is similar to Public Static Main() method in Console Application as well as Main.axml file is also present, which is a default Activity Layout, which is set to MainActivity.cs.
   
   
3. Now, we are creating a sample app for Login system.
   
   
4. Design for sample app is shown below.
   
   
   

5. Source code and screenshot for the design given above is as follows, which is written in Main.axml.
   
   1. <?xml version="1.0" encoding="utf-8"?>
   2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   3. android:layout_width="match_parent"
   4. android:layout_height="match_parent"
   5. android:gravity="center_horizontal">
   6. <LinearLayout
   7. android:layout_width="wrap_content"
   8. android:layout_height="wrap_content"
   9. android:orientation="vertical"
   10. android:gravity="top"
   11. android:layout_gravity="center_vertical"
   12. android:paddingBottom="200dp">
   13. <LinearLayout
   14. android:layout_width="match_parent"
   15. android:layout_height="wrap_content"
   16. android:orientation="horizontal"
   17. android:id="@+id/usernameLinearLayout">
   18. <TextView
   19. android:text="User Name:"
   20. android:layout_width="wrap_content"
   21. android:layout_height="wrap_content"
   22. android:id="@+id/userNameTextView" />
   23. <EditText
   24. android:text="Amitgobare"
   25. android:layout_width="wrap_content"
   26. android:layout_height="wrap_content"
   27. android:id="@+id/userNameEditText" />
   28. </LinearLayout>
   29. <LinearLayout
   30. android:layout_width="match_parent"
   31. android:layout_height="wrap_content"
   32. android:orientation="horizontal"
   33. android:id="@+id/passwordLinearLayout">
   34. <TextView
   35. android:text="Password:"
   36. android:layout_width="wrap_content"
   37. android:layout_height="wrap_content"
   38. android:id="@+id/passwordTextView" />
   39. <EditText
   40. android:text="amitgobare"
   41. android:layout_width="wrap_content"
   42. android:layout_height="wrap_content"
   43. android:id="@+id/passwordEditText"
   44. android:password="true"
   45. android:gravity="top" />
   46. </LinearLayout>
   47. <Button
   48. android:layout_width="match_parent"
   49. android:layout_height="wrap_content"
   50. android:text="Sign In" />
   51. <Button
   52. android:layout_width="match_parent"
   53. android:layout_height="wrap_content"
   54. android:text="Sign Up" />
   55. </LinearLayout>
   56. </LinearLayout>