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.
   

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="center_horizontal">
       <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           android:gravity="top"
           android:layout_gravity="center_vertical"
           android:paddingBottom="200dp">
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="horizontal"
               android:id="@+id/usernameLinearLayout">
               <TextView
                   android:text="User Name:"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:id="@+id/userNameTextView" />
               <EditText
                   android:text="Amitgobare"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:id="@+id/userNameEditText" />
           </LinearLayout>
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="horizontal"
               android:id="@+id/passwordLinearLayout">
               <TextView
                   android:text="Password:"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:id="@+id/passwordTextView" />
               <EditText
                   android:text="amitgobare"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:id="@+id/passwordEditText"
                   android:password="true"
                   android:gravity="top" />
           </LinearLayout>
           <Button
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="Sign In" />
           <Button
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="Sign Up" />
       </LinearLayout>
   </LinearLayout>

   
   

6. We can set Main.axml to our MainActivity.cs, as shown below.
   
   
   

7. Create custombutton.xml file in Resource=>Drawable folder, as shown below.
   
   
   

8. Write the code for SignInCustomButton.xml and the screenshot is shown below.
   

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
       <layer-list>
   <item android:right="3dp" android:top="2dp" android:bottom="2dp" android:left="3dp">
           <shape>
             <corners android:radius="12dp"></corners>
             <solid android:color="#3193e1"></solid>
   <padding android:left="2dp" android:right="2dp" android:top="2dp"     android:bottom="2dp"></padding>
           </shape>
         </item>
       </layer-list>
     </item>
   
   </selector>

   
   

9. Create SignUpCustomButton.xml file in Resource=>Drawable folder, as shown below.
   
   
   

10. The code for SignUpCustomButton.xml is shown below.
    

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
        <layer-list>
    <item android:right="3dp" android:top="2dp" android:bottom="2dp" android:left="3dp">
            <shape>
              <corners android:radius="12dp"></corners>
              <solid android:color="#E6755E"></solid>
    <padding android:left="2dp" android:right="2dp" android:top="2dp" android:bottom="2dp"></padding>
            </shape>
          </item>
        </layer-list>
      </item>
    </selector>

    
    

11. In Main.axml file, we created a design for Sign In and Sign Up buttons, so customized code needs to be added to both Sign In and Sign Up button, as shown below.
    
    
    

12. Run the Application now, which looks, as shown below.
    
    
    

Summary 

We learned how to create custom button in Xamarin Android.