Google Rounded Corner EditText in Xamarin.Android | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Monday 19 March 2018

Rounded Corner EditText in Xamarin.Android

Introduction:
In Xamarin.Android, we can easily make rounded corner EditText with selector we need some simple steps to create xml files in layout resource directory of android application. This article will guide you in details to create rounded corner EditText.



Requirements:
  • This article source code is prepared by using Visual Studio Community for Mac (7.4). And it is better to install latest visual studio updates from here.
  • This sample project is Xamarin.Android project and tested in emulator.
Description:

This article can explain you below topics:
1. Create the new Xamarin.Android project.
2. Adding rounded corner selector layout.
3. Using rounded corner selector for EditText.

1. Create the new Xamarin.Android project
  • Launch Visual Studio for Mac.
  • On the File menu, select New Solution.
  • The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display. In the left pane, expand Android App General > Android App and click on Next.
  • Enter your App Name (Ex: RoundedEditText). And click on Next button.

  • You can choose your project location like below.

2. Adding rounded corner selector layout.
Right click on layout folder => Add => New File
Add layout rounded_border_edittext like below:
rounded_border_edittext.axml



  • <?xml version="1.0" encoding="utf-8"?>  
  • <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  •     <item>  
  •         <shape  
  •             android:shape="rectangle">  
  •             <solid  
  •                 android:color="#ffffff" />  
  •             <corners  
  •                 android:radius="10dp" />  
  •             <stroke  
  •                 android:width="2dp"  
  •                 android:color="#3bbdfa" />  
  •         </shape>  
  •     </item>  
  • </selector>  

  • 3. Using rounded corner selector for EditText

    Main.axml
    Now open Main.axml, create EditText and set background with above layout like below:

    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:orientation="vertical"  
    4.     android:layout_width="match_parent"  
    5.     android:layout_height="match_parent"  
    6.     android:background="@android:color/white">  
    7.     <EditText  
    8.         android:id="@+id/myEditText"  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="55dp"  
    11.         android:hint="EditText Rounded Border"  
    12.         android:layout_margin="20dp"  
    13.         android:padding="5dp"  
    14.         android:background="@layout/rounded_border_edittext"  
    15.         android:layout_gravity="center" />  
    16. </LinearLayout>  

    Demo screen from Android:

    You can directly work on below sample source code to understand this article

    ConstraintLayoutSample


    FeedBack Note: Please share your thoughts, what you think about this post, Is this post really helpful for you? I always welcome if you drop comments on this post and it would be impressive.


    Follow me always at @Subramanyam_B
    Have a nice day by  :)

    No comments:

    Post a Comment

    Search Engine Submission - AddMe