Post
Ask Question

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.

    Xamarin
  1. 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.

  2. Now, we are creating a sample app for Login system.

  3. Design for sample app is shown below.

    Xamarin
  1. 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>  
    Xamarin
  1. We can set Main.axml to our MainActivity.cs, as shown below.

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

    Xamarin
  1. Write the code for SignInCustomButton.xml and the screenshot is shown below.
    1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
    2.   <item>  
    3.     <layer-list>  
    4. <item android:right="3dp" android:top="2dp" android:bottom="2dp" android:left="3dp">  
    5.         <shape>  
    6.           <corners android:radius="12dp"></corners>  
    7.           <solid android:color="#3193e1"></solid>  
    8. <padding android:left="2dp" android:right="2dp" android:top="2dp"     android:bottom="2dp"></padding>  
    9.         </shape>  
    10.       </item>  
    11.     </layer-list>  
    12.   </item>  
    13.   
    14. </selector>  
    Xamarin
  1. Create SignUpCustomButton.xml file in Resource=>Drawable folder, as shown below.

    Xamarin
  1. The code for SignUpCustomButton.xml is shown below.
    1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
    2.   <item>  
    3.     <layer-list>  
    4. <item android:right="3dp" android:top="2dp" android:bottom="2dp" android:left="3dp">  
    5.         <shape>  
    6.           <corners android:radius="12dp"></corners>  
    7.           <solid android:color="#E6755E"></solid>  
    8. <padding android:left="2dp" android:right="2dp" android:top="2dp" android:bottom="2dp"></padding>  
    9.         </shape>  
    10.       </item>  
    11.     </layer-list>  
    12.   </item>  
    13. </selector>  
    Xamarin
  1. 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.

    Xamarin
  1. Run the Application now, which looks, as shown below.

    Xamarin

Summary 

We learned how to create custom button in Xamarin Android.


Similar Articles