Show List
Tutorials > Android App Development > Building User interface with layouts and widgets

Building User interface with layouts and widgets

In Android, a user interface is built using XML files called layouts. Layouts describe the structure and appearance of the UI, and contain elements called widgets that can display text, images, buttons, and other types of user interface components.

Here is an example of how to create a simple user interface with a TextView and a Button:

  • Open Android Studio and create a new project. Choose the "Empty Activity" template.
  • Open the activity_main.xml layout file, and replace the default code with the following code:
xml
Copy code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:id="@+id/textView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello, World!"
       android:textSize="24sp"
       android:layout_centerInParent="true" />

   <Button
       android:id="@+id/button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Click me!"
       android:layout_below="@+id/textView"
       android:layout_centerHorizontal="true" />

</RelativeLayout>

This code defines a RelativeLayout that contains a TextView and a Button. The TextView is centered in the parent view, and the Button is placed below the TextView and centered horizontally.

  • In the MainActivity.java file, add the following code to display a message when the button is clicked:
java
Copy code
package com.example.myfirstapp;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

       Button button = findViewById(R.id.button);
       button.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               TextView textView = findViewById(R.id.textView);
               textView.setText("You clicked the button!");
           }
       });
   }
}

This code finds the Button element by its ID, and sets an OnClickListener that changes the text of the TextView when the button is clicked.

  • Run the app on an emulator or physical device. To do this, click on the "Run" button in the toolbar, select your device or emulator, and click "OK". After the app is installed and launched, you should see the user interface with the "Hello, World!" message and the "Click me!" button. When you click the button, the message should change to "You clicked the button!".

That's it! You have now created a simple user interface with layouts and widgets, and added interactivity with Java code. Of course, there are many more types of layouts and widgets you can use in Android, and many more ways to customize their appearance and behavior. But this example should give you a good starting point.



Next: Handling user input with event listeners

    Leave a Comment

  • captcha text