Skip to main content

How to customize the appearance of an EditText in Kotlin Android

How to customize the appearance of an EditText in Kotlin Android.

How to Customize the Appearance of an EditText in Kotlin Android

In this tutorial, we will learn how to customize the appearance of an EditText in Kotlin Android. EditText is a crucial component in building user interfaces for text input. By customizing its appearance, we can enhance the user experience and make our app visually appealing.

Prerequisites​

Before we start, make sure you have the following:

  • Android Studio installed
  • Basic knowledge of Kotlin and Android development

Step 1: Create a new Android project​

Open Android Studio and create a new Android project. Choose an appropriate name, package, and other project settings. Once the project is created, wait for the Gradle sync to finish.

Step 2: Add an EditText to the layout file​

Open the activity_main.xml layout file located in the res/layout directory. Remove the default TextView and add the following code to add an EditText:

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter text"
    android:textColor="@color/black"
    android:textSize="16sp"
    android:background="@drawable/edittext_background"
    android:padding="10dp" />

This code snippet adds an EditText with an id of editText. It sets the width to match_parent, height to wrap_content, and displays a hint "Enter text" when the field is empty. The text color is set to black, the text size is 16sp, and the padding is set to 10dp. The background is set using a custom drawable called edittext_background. You can customize these attributes to suit your needs.

Step 3: Create a custom background drawable​

To customize the appearance of the EditText, we'll create a custom background drawable. Right-click on the res directory, select "New" -> "Drawable resource file". Enter the file name as edittext_background.xml and click "OK". Replace the default code with the following:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#E8E8E8" />
    <corners android:radius="8dp" />
    <stroke
        android:color="#000000"
        android:width="2dp" />
</shape>

This code defines a shape drawable with a solid color of #E8E8E8, rounded corners with a radius of 8dp, and a black stroke with a width of 2dp. You can modify these values as per your design requirements.

Step 4: Customize other attributes programmatically​

Apart from the XML attributes, we can also customize the appearance of the EditText programmatically in Kotlin. Open the MainActivity.kt file located in the java/[package_name] directory. Inside the onCreate method, add the following code to customize the EditText:

val editText = findViewById<EditText>(R.id.editText)
editText.setTextColor(ContextCompat.getColor(this, R.color.red))
editText.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18f)

This code snippet retrieves the EditText using its id and sets the text color to a custom color defined in the colors.xml file (replace R.color.red with your desired color resource). It also sets the text size to 18sp using the TypedValue class.

Step 5: Run the app​

Now, you can run the app on an emulator or a physical device to see the customized appearance of the EditText. The background, text color, and text size should reflect the changes made in the XML and Kotlin code.

Conclusion​

In this tutorial, we learned how to customize the appearance of an EditText in Kotlin Android. We covered customizing attributes in XML, creating custom background drawables, and programmatically modifying attributes in Kotlin. By leveraging these techniques, you can create visually appealing and user-friendly text input fields in your Android app.