In this example tutorial, we'll look at how to create an EditText and show text in TextView using button click and explore its various properties in Android Studio using the Kotlin language.
What is EditText?
In the app, EditText is used to collect user input. EditText is most commonly used in login and registration form screens.
Implementation:
To begin, Create a new project in android studio with the name EditText Kotlin. Then press the Finish button.
Open the activity main.xml file and add the LinearLayout with orientation (Vertical or horizontal).
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#22FFAA00"
tools:context=".MainActivity"></LinearLayout> |
In activity_main.xml, insert an EditText view inside a LinearLayout.
<EditText
android:id="@+id/edittext"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:hint="Enter Username"
android:drawableLeft="@drawable/user"
android:drawablePadding="10dp"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:drawableTint="@color/white"
></EditText> |
Add an drawable to the edittext using the drawableLeft property, hint set using hint attribute.
|
android:hint="Enter Username"
android:drawableLeft="@drawable/user"
|
EditText has the following attributes:
id, padding, drawablePadding, textColor, textColorHint, background, layout_margin, layout_marginLeft, layout_marginRight, layout_marginEnd, layout margin, paddingLeft etc....
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:padding="10dp"
android:hint="Enter Username"
android:drawableLeft="@drawable/user"
android:drawablePadding="10dp"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:drawableTint="@color/white"
android:layout_margin="10dp" |
Add Button and TextView below EditText in activity_main.xml file
|
<Button
android:id="@+id/showBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show"></Button>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:textSize="29sp"
android:textColor="@color/white"
android:textStyle="bold"
></TextView>
|
Now, let's put our EditText, Button and TextView to use inside Activity. Any view, from layout to activity, can be used by using its unique id: "id" property with findViewById() method.
|
val edittext = findViewById(R.id.edittext)
val showBtn = findViewById(R.id.showBtn)
val textview = findViewById(R.id.textview)
|
R.id.edittext is the id of the edittext defined in the activity main.xml file.
Enter some value in the EditText Box and get the text using
| val text = edittext.text.toString() |
in MainActivity.kt file.
Set the text to TextView with this setText() method
| textview.setText("Text is: " + text) |
By implementing onClickListener, we will click on button and set the text on textView.
showBtn.setOnClickListener {
val text = edittext.text.toString()
textview.setText("Text is: " + text)
} |
Now run the application, you will see the output shown below.
Output:
Complete source code for Android EditText example:
activity_main.xml file
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#79231D11"
tools:context=".MainActivity">
<EditText
android:id="@+id/edittext"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:hint="Enter Username"
android:drawableLeft="@drawable/user"
android:drawablePadding="10dp"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:drawableTint="@color/white"
></EditText>
<Button
android:id="@+id/showBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show"></Button>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:textSize="29sp"
android:textColor="@color/white"
android:textStyle="bold"
></TextView>
</LinearLayout>
|
MainActivity.kt
|
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val edittext = findViewById(R.id.edittext)
val showBtn = findViewById(R.id.showBtn)
val textview = findViewById(R.id.textview)
showBtn.setOnClickListener {
val text = edittext.text.toString()
textview.setText("Text is: " + text)
}
}
}
|
Conclusion: We have covered the topic how to add EditText to Android and set the text on Textview using Button click event using Kotlin.
