User interfaces with XML: TextView, Button and EditText in depth

When you start developing for Android, one of the first challenges is understanding how the user interface is built and how visual elements connect with Java or Kotlin code. In this guide, you'll see, step by step, how these elements work. basic views in XML (TextView, EditText and Button), how they are organized within different types of layouts and how to make them react to user actions (such as pressing a button).

We'll start with the basics and work our way up to more advanced concepts: first, understanding what a view is, then how everything is described in XML, and finally, how it's organized using layouts like LinearLayout and RelativeLayoutAnd finally, how to capture events and do real things: read texts, add numbers, move data between activities, etc. All explained in everyday Spanish, but without losing technical rigor.

What is a View in Android and why does it all start there?

On Android, anything you see on screen and can interact with is a ViewWhether it's a button, a text box, an image, or a simple colored box, everything derives from the base class. android.view.View.

On top of that base class, a lot of ready-made components that we use daily are built: TextView to display text, EditText to enter data, and Button to trigger actions.You could extend View directly and draw everything by hand, but in day-to-day life you're almost never interested in reinventing the wheel.

Alongside the "simple" views, there are containers, which are classes that inherit from ViewGroupA ViewGroup does not display content itself, but is used for organize and position other child viewsTypical examples are LinearLayout, RelativeLayout, FrameLayout or the most modern ConstraintLayout.

The interface at the end is a View and ViewGroup hierarchyViewGroups form the branches (layouts), and child views (TextView, EditText, Button, ImageView, etc.) are placed within them. That's what you end up describing in XML when you design a screen.

Programming languages for Android: a complete guide with Kotlin, Java, XML and alternatives

Define the interface in XML: layouts and activity

In a typical Android application, each screen consists of two very distinct pieces: an XML layout file and a code class (the Activity). The XML file resides in the folder res/layout and it handles everything visual: what views there are, how they are distributed, what text is displayed, etc. The Activity lives in java o kotlin and defines logic, actions, and processes that run on that interface.

When you create a project with "Blank Activity" templates, Android Studio generates, for example, a MainActivity and a default layout called activity_main.xmlThis Activity is usually the first one that runs when the app is opened, so it's common to consider it the main visual entry point.

The connection between both worlds is made in the method onCreate()Within that method, it is called setContentView(R.layout.activity_main)which tells the Activity: “use this XML as the interface for this screen”. From that moment on, all the views defined in the XML are created and you can manipulate them from code using their IDs.

TextView, EditText and Button: the basics you'll always use

TextView: display text on screen

Un TextView is the standard component for display static or dynamic textUser messages, results, instructions, form labels, etc. Internally it simply paints text, but allows you to change size (textSize), color (textColor), font (typeface), style (bold, italic), margins and many other properties.

In the XML you can declare it like this:

<TextView android:id="@+id/tv_resultado" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Resultado" />

The key is the attribute android:idwhich assigns it a unique identifier within the layout. The prefix @+id/ This indicates that you are creating that ID for the first time. Later, from within the Activity, you can use that ID to search for the view. findViewById(R.id.tv_resultado) and change its text by setText().

EditText: data entry fields

If instead of displaying text you want the user to be able to type it, you have to use edittextThis is the classic input box where you type a name, email, password, or any other data. It's declared the same way as a TextView, but with the `<textView>` tag. <EditText> and with some extra features.

A typical example of EditText in an XML layout:

<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />

Attribute android:hint It's used to display "phantom" text while the field is empty, such as "Enter a message" or "Write your name." This hint disappears as soon as the user starts typing, which is very convenient. guide data entry without using a separate TextView.

Additionally, you can use specialized variants from the designer itself, such as the "Number" type (which is still EditText underneath), which forces the numeric keypad and limits the content to numbers.

Button: Execute actions with one tap

El Button It is the component used to trigger an action when the user presses it: validate a form, start a calculation, open another Activity, call a number, etc. In XML it can be defined like this:

<Button android:id="@+id/my_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/my_button_text" />

Attribute android:text This indicates the text that will be displayed on the button, usually referenced from a string resource. We'll see how later. Connect this button using Java code. so much with setOnClickListener() as through the attribute android:onClick in the XML.

String resources (strings.xml): centralized and translatable text

Whenever you want to display text to the user, it is highly recommended that you declare it as string resource in res/values/strings.xmlThis makes the app more maintainable and allows you to easily translate it into other languages without touching the layouts.

A file strings.xml A simple one might look something like this:

<resources> <string name="app_name">My First App</string> <string name="edit_message">Introduce un mensaje</string> <string name="button_send">Enviar</string> </resources>

Then, from the XML layouts, you use these resources with @string/nombre_cadenaFor example, the EditText from before points to the resource @string/edit_message and the Button uses @string/button_sendEven if the ID of an EditText is called edit_message and also have a chain edit_messageThere is no conflict because each one lives in its own type of resource (id vs string).

Organize the views: LinearLayout, FrameLayout, and RelativeLayout

Views alone aren't very useful if they aren't organized in some way. That's where the... layouts (ViewGroup)Each layout applies a set of rules regarding how its children are positioned on the screen. The most common and instructive ones are: FrameLayout, LinearLayout y RelativeLayout.

FrameLayout: the simplest container

FrameLayout This is the most basic layout: stack the views one on top of the otherStarting with the first one you declare in XML. The position is primarily defined with the attribute layout_gravity of the child views, which indicates where in the container you want to place them (top, bottom, center, etc.).

For example, you can center a TextView at the bottom using layout_gravity="bottom|center_horizontal"This tells the FrameLayout to snap that view to the bottom edge and center it horizontally. It's a very useful layout for simple things, overlays, or for placing an element floating above others.

LinearLayout: Place elements in a row or column

LinearLayout It is a ViewGroup that organizes its children into a single horizontal row or a single vertical column, depending on the value of android:orientationAll views are displayed in the order in which they appear in the XML.

An example of a horizontal LinearLayout for a text field and a button:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal">

The key properties you'll see continuously are android:layout_width y android:layout_heightIn most cases you will use the following values:

wrap_contentThe view occupies just the right amount of space for its content.
match_parentThe view fills all available space of the parent (formerly known as fill_parent).

Control the space with layout_weight

In LinearLayout, in addition to width and height, you have a very powerful attribute called android:layout_weightIt serves to divide the free space among the children as if they were proportional "portions".

For example, if you have an EditText and a Button horizontally, you might want the text field occupy all the remaining space and that the button maintains its correct width. If you give the EditText a weight of 1 and the button a weight of 0 (the default value), the EditText will take up all the remaining space:

<EditText android:id="@+id/edit_message" android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:hint="@string/edit_message" />

Notice that the layout_width the EditText is set to 0dpThis is not a bug: it improves performance because the system doesn't waste time calculating a width per content that it will then ignore to apply the weight.

If you had more views with weights 1, 2, 3, etc., the LinearLayout would distribute the space proportionally: a view with weight 2 would take up twice the space of one with weight 1, and so on.

RelativeLayout: positioning views relative to each other

RelativeLayout organizes their children based on relative position rulesYou can tell one view to be to the right of another, below it, aligned to the left edge of the parent, vertically centered, etc. It's much more flexible than LinearLayout and allows for complex designs without needing to nest too many layouts.

The basic idea is that each child view has a set of rules that tell it how to position itself. Some rules refer to the parent (RelativeLayout itself) and others to sibling views. For these rules to work, it is essential that each daughter view has its android:id well defined.

Imagine a design with an EditText and a Button, where the button should be to the right of the text field. You could define it like this in XML:

<RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent">

Here, the EditText is aligned to the left edge of the layout and positioned to the left of the Button. The Button is aligned to the right edge. This combination of rules creates the exact effect of "text field on the left, button on the right" without dealing with fixed margins.

RelativeLayout has many useful rules:

Alignment to the father: layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight.
Position relative to another view: layout_above, layout_below, layout_toLeftOf, layout_toRightOf.
Centered: layout_centerHorizontal, layout_centerVertical, layout_centerInParent.

With these rules you can create very rich screens: centered text, blocks on the left and right, bars in the background of the screen, etc., without the need for complicated nested layout structures that penalize performance.

Create and configure layouts using code (when XML is not available)

Although in most cases you will design the interfaces in XML (because it is clearer and more maintainable), you also have the option of Build layouts and views entirely from JavaThis is useful for highly dynamic cases or when the design relies heavily on runtime data.

In the case of RelativeLayout, you would use the class RelativeLayout as a father and RelativeLayout.LayoutParams for child view parameters. Additionally, you will continue to use generic parameters from ViewGroup.LayoutParams (such as width and height) and of ViewGroup.MarginLayoutParams (margins).

How to remove Direct Share from Android: root, ADB, and TWRP methods

The general flow is:

Create the child views (TextView, Button, EditText, etc.).
Create some LayoutParams specific to RelativeLayout.
Add rules to those LayoutParams (e.g., center, align, etc.).
Create the parent RelativeLayout, assign it its own LayoutParams.
Start calling addView() to insert the child views with their LayoutParams.
Finally, call setContentView(relativeLayout) from the Activity.

This works very well, but if the screen gets even slightly complex, the code grows enormously, so it's usually better to Reserve this approach for special casesFor everything else, XML to the rescue.

Practical example: adding two numbers using EditText, Button and TextView

Let's now look at a complete and very common example for beginner projects: a screen with two numeric fields, a button to perform the addition, and a TextView to display the result. This will show you the actual connection between XML and Java code, and how the button press event is captured.

Design the interface in XML

We start with a new project (for example, called Project 002Created with Android Studio. The template adds a TextView by default. activity_main.xmlThe first thing we do is delete that TextView and design our interface from scratch, usually using a ConstraintLayout as a root container.

From the palette, “Text” tab, we drag a “Number” type component (which internally is a EditText (numeric)) and we place it in the top left of the design. We use the “Infer Constraints” button or manually place the constraints to fix it within the ConstraintLayout.

In the properties window, we modify:

id: we put, for example, et1.
hint: we write “Enter the first value”.

We repeat the operation for a second EditText of type Number, with:

id: et2.
hint: “Enter the second value”.

The result is a screen with two numeric text fields, each displaying a help message while empty, which makes up the interface much more intuitive for the user.

Now, from the “Buttons” tab, drag a Button and place it below the EditText fields. Configure:

id: we leave the default value (for example, button (if Android Studio generates it that way).
text: “Add”.

Finally, we add a TextView that will display the sum. We assign it:

id: tv1.
text: "Result".

With this, we now have the complete interface: two EditTexts to enter numbers, a Button to perform the sum, and a TextView for the result.If we ran the app now, we would see the screen, we could write in the EditText fields, but pressing the button would not happen because there is no associated logic yet.

Prepare the Activity and link views with findViewById

We open the class MainActivitywhich in a new project will have something like this:

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

Class MainActivity inherits from AppCompatActivitywhich is the representation of an Android window. The minimum is to overwrite onCreate() and call setContentView() to indicate which layout goes with this Activity.

To work with EditText and TextView, we define member variables in the Activity:

private EditText et1; private EditText et2; private TextView tv1;

Android Studio will highlight the classes in red until you import them. The easiest way is to use the usual keyboard shortcut (Alt+Enter on the class name) to automatically add them.

import android.widget.EditText; import android.widget.TextView;

After in onCreate()We link these variables to the XML views using findViewById():

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

et1 = findViewById(R.id.et1);
et2 = findViewById(R.id.et2);
tv1 = findViewById(R.id.tv1);
}

the constants R.id.et1, R.id.et2 y R.id.tv1 They are automatically generated from the IDs defined in the XML. The famous class R It is the bridge between resources and codeFor each layout, id, string, etc., it generates a constant reference that you use in Java/Kotlin.

Capture the button click: public method or setOnClickListener

To execute code when the button is pressed, you have two commonly used approaches:

Declare a public method in the Activity and link it from the XML with android:onClick.
Find the button with findViewById() and assign a setOnClickListener().

In the example we are following, we use the first approach, which is very convenient for simple projects. We define a public method in the Activity that receives a parameter of type View:

public void sumar(View view) { }

We import android.view.View If necessary. Then, in the design editor (or manually in the XML), we go to the button and set the property onClick with the value sumarThis tells Android that when that specific button is pressed, it should call the method sumar() of the Activity.

Logic to add the numbers and display the result

Now we implement the content of the method sumar()The flow is:

Read the text of et1 y et2.
Convert those strings to integers.
Add them up.
Convert the result to String.
Update the TextView tv1 with the result.

In code it would look like this:

public void sumar(View view) { String valor1 = et1.getText().toString(); String valor2 = et2.getText().toString();

int #1 = Integer.parseInt(value1);
int #2 = Integer.parseInt(value2);

int sum = number1 + number2;
String resu = String.valueOf(sum);

tv1.setText(resu);
}

The first two steps retrieve the content from the EditText fields. Note that getText() returns an object Editableso it is converted to String with toString()Then we parse an int with Integer.parseInt(), we perform the sum and convert back to String with String.valueOf(). Finally, setText() Change the text in the TextView and display the result on the screen.

The complete lesson looks something like this:

public class MainActivity extends AppCompatActivity {

private EditText et1;
private EditText et2;
private TextView tv1;

@
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

et1 = findViewById(R.id.et1);
et2 = findViewById(R.id.et2);
tv1 = findViewById(R.id.tv1);
}

public void add(View view) {
String value1 = et1.getText().toString();
String value2 = et2.getText().toString();

int #1 = Integer.parseInt(value1);
int #2 = Integer.parseInt(value2);

int sum = number1 + number2;
String resu = String.valueOf(sum);

tv1.setText(resu);
}
}

When you run the app, you'll see that the EditText fields display the messages "Enter the first value" and "Enter the second value"; you type in two integers, press the "Add" button, and the TextView changes its text to the sum. It's a perfect example to understand how XML, IDs, Java code, and user events are communicated..

More views and layouts: Email, Phone, hierarchies, and key properties

In addition to TextView, EditText, and Button, Android includes other views such as ImageView for images, specific fields like E-mail or Phone (based on EditText, but with adapted keyboard and validations), and a wide set of layouts.

In a typical form, you might have a vertical LinearLayout with several EditText fields (name, email, phone number) and a final submit button. Each element is declared one below the other, and the LinearLayout itself handles the rest. arrange them in rowsIf you wanted to put them horizontally (for example, email and phone on the same line), you would change the orientation to horizontal and play with the weights and widths to distribute the space.

Other very common attributes when working with views are:

layout_width: View width. Most common values: wrap_content y match_parent.
layout_height: view height. Same typical values as width.
layout_weight: proportional allocation of space in LinearLayout.
gravity of the father: indicates how the children are placed inside the container (for example, center, center_horizontal, bottom...).
layout_gravity of the son: specifies how that view is positioned within its parent in layouts that support it (such as FrameLayout).

Using these properties well is what makes the difference between an interface that "halfway looks good" and a truly great interface. adaptable, clean and easy to maintaineven when you rotate the device or change the screen size.

Guide to viewing Java code for Android apps on mobile and PC

Once you master the different view types (TextView, EditText, Button, ImageView, etc.) and understand how they relate to ViewGroups like FrameLayout, LinearLayout, or RelativeLayout, you can build very powerful screens with very little extra code. From there, it's just a matter of practice: experimenting with weights, centering, relative alignment, and capturing events so that every user interaction has a clear response in your application. Share the guide so that more users can learn about the topic.