{"id":2388,"date":"2020-02-12T13:21:49","date_gmt":"2020-02-12T12:21:49","guid":{"rendered":"https:\/\/home.et.utwente.nl\/slootenvanf\/?p=2388"},"modified":"2026-02-03T10:26:24","modified_gmt":"2026-02-03T09:26:24","slug":"android-studio-first-interactive-userinterface","status":"publish","type":"post","link":"https:\/\/home.et.utwente.nl\/slootenvanf\/2020\/02\/12\/android-studio-first-interactive-userinterface\/","title":{"rendered":"Android Studio: create a first interactive userinterface"},"content":{"rendered":"\n

This article has been updated to reflect the 2025 version of Android Studio (\u2018Otter\u2019<\/em>).<\/em><\/p>\n\n\n\n

In this tutorial you will create an app with Android Studio with a simple userinterface which provides an input field (textfield) in which you can enter text, a button and a textview which displays a message. It can be used as a first project if you are starting to create Apps using Android Studio. It will show the basics of creating a userinterface and adding an eventhandler to a button. If you did not install & setup Android Studio yet, do that first.<\/a><\/p>\n\n\n\n

Start a new Android Studio Project (either from the Welcome screen or via File > New > New project<\/em>).
Choose “Basic Views Activity”. Click Next<\/em>.
Type a name: eg. “Hello World”. Check the language, it should be set to ‘Java’. Set the API Level to 28: API 28: Android 9.0 (Pie). But if you want, you may also choose different. Make sure if you would like to run on your Phone, that you choose an Android version your phone supports.
Changing the Package name and the Location is optional.
Press Finish<\/em>.<\/p>\n\n\n\n

Wait until Android Studio sets up the project.<\/p>\n\n\n\n

Consider exploring\/setting some of the settings, via the settings icon at the right side of the title bar:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

For instance, I have changed the theme to “Light with Light Header”, via Settings > Theme<\/em>…<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Create the userinterface<\/h2>\n\n\n\n

The example project Basic Views Activity consists of two fragments, which can be seen as pages in the App. You can navigate between them using the next and previous buttons. We will extend the userinterface of the first fragment.<\/p>\n\n\n\n

The layout of the first page of the userinterface is defined in fragment_first.xml<\/strong>, which you can find under res, layout<\/em> in the folder structure, so open that by double clicking the file:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The userinterface already contains a button and a TextView with a large Lorem Ipsum text. You might need to use the Zoom button in the lower right corner of the view to get the same view as above.<\/p>\n\n\n\n

We will shorten the Lorem ipsum text. In the explorer, find the strings.xml<\/strong> file and open it:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Replace the Lorem ipsum text in the code, and change it to “Hello…”:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Change the text “First Fragment” of the first_fragment_label to “Hello world”. Close strings.xml<\/strong>.<\/p>\n\n\n\n

Next, set the NestedScrollView <\/strong>to take up the whole screen by setting “fillViewport” to true<\/em>:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Then, remove the top and bottom constraints. Select the element (eg. the button), then at the right, in the Attributes section, select the contraint and press Delete:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Drag the Button and the text downward so it looks like:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Now add an input field in which the user can type his\/her name. When the user presses the Ok-button, a welcome text will be shown with the name read from the input.<\/p>\n\n\n\n

Select Text, PlainText<\/em> in the Palette and drag it to the editor:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Drop it somewhere in the center.<\/p>\n\n\n\n

Now we will constrain the text element to the top and left. Learn how to apply constraints here<\/a>. When you hover over the circles, you can see you can interact with them. Click the circle at the top side and drag it upwards to the top. Then drag the element itself down again to the old position. The element will now be constraint to the top:<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Do the same with the left side to center the element:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Also align the ‘Hello…’ text to the left side of the textfield (drag its left-constraint circle to the left of the textfield above it):<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Select the textfield. In the Attributes panel, change its ID to “textField1” (click ‘Refactor’ in the popup that appears):<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

From the Palette, add a Button and constrain it to the textfield by clicking the small circle: do this for the left (start to textField1 end) and top-constraints.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Set it’s text to “Ok”. In the Attributes panel, open the ‘Declared Attributes’, then at ‘text’ enter “Ok”:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Run the App and verify everything is positioned well:
(if you do not have a Virtual Device yet, create one)<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

(Do not close the emulator)<\/p>\n\n\n\n

Add an eventlistener<\/h2>\n\n\n\n

Add an eventlistener for the Ok button:<\/p>\n\n\n\n

Open FirstFragment.java<\/strong>. You can also find it in the Project Structure<\/a> under app, kotlin+java, com.example.helloworld (your package name might be different):<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Add the code below to the onViewCreated()<\/em> method:
(make sure to add it at the end)<\/p>\n\n\n\n

binding.button.setOnClickListener(new View.OnClickListener() {\n@Override\npublic void onClick(View view) {\n    System.out.println(\"Ok pressed\");\n}\n});<\/code><\/pre>\n\n\n\n
Inside the eventlistener, we can add the line below to the onClick()<\/em> method, right after the line with System.out.println()<\/em>:<\/p>\n\n\n\n
binding.textviewFirst.setText(\"Hello, \"+binding.textField1.getText());<\/code><\/pre>\n\n\n\n
Via the binding object, we can access the userinterface elements, like the input textfield (textField1), in which the name will be typed. We can also access textviewFirst, which is the textview which is empty at start (we removed its original text). To get the text which was typed in the textField1, we can call its getText()<\/em> method.<\/p>\n\n\n\n
Now it is time to test the App! ((Re)Run the App).<\/p>\n\n\n\n
If you type your name and hit the Ok button, result should look like:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
You can also review the code in case you need it:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Things to fix:<\/h2>\n\n\n\n
Use hint instead of placeholder<\/h4>\n\n\n\n
When you test the App, you might notice that it is rather annoying that, when you start typing, you first have to remove the placeholder text<\/strong> ‘Name’.
Instead of having this text in the text-attribute of the text field, it is better to put it in the hint-attribute: In the Attributes of textField1, at text <\/strong>remove the value (attribute should be empty), then scroll down until hint<\/strong> and enter ‘Name’ there. <\/p>\n\n\n\n
Use resources instead of hard-coded strings<\/h4>\n\n\n\n
You might encounter warnings about strings<\/strong>:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Your app will work fine, it is just a warning. But if you want to build larger apps and for instance support multiple languages, you should fix this. We show how to do this for the hint <\/em>value for textField1<\/em>:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Select textField1<\/em> and in the list of attributes scroll down to the hint <\/em>value and make this value empty. Then click the small button ‘Pick a Resource’:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
The dialog to define resources appears. Click the + to add a resource. Ehen enter the Resource name and value and press Ok, then select that resource and press Ok again:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
The value will now be @string\/hint_for_name<\/code>:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Prevent errors<\/h4>\n\n\n\n
If nothing is typed, and the Ok button is pressed, a brief warning should be displayed, eg.: “Please enter your name, then press Ok”. We can use the class Snackbar<\/a> for that. Add this to the eventlistener:<\/p>\n\n\n\n
if (binding.textField1.getText().length()<1) {\n    Snackbar.make(view, \"Please enter your name, then press Ok\", Snackbar.LENGTH_LONG).setAction(\"Action\", null).show();\n}<\/code><\/pre>\n\n\n\n
The Class Snackbar might be unknown, then it will turn red. This means you have to import it, hover over it and click ‘Import Class’:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Now move the code which displays the “Hello, ” message in the ‘else’ part of this if-statement. (Add the ‘else’ yourself).<\/p>\n\n\n\n
Make the share button work<\/strong><\/h4>\n\n\n\n
In MainActivity.java<\/strong>, find the code which adds an eventhandler to the Floating Action Button (fab):<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
In the eventhandler, remove the line with Snackbar.make...<\/code> and add your own code to handle press of that button. You can find plenty of examples of how to handle the share button. For instance this example shows how to send an e-mail with it<\/a>. The code below can be used to accomplish this.<\/p>\n\n\n\n
\/\/ get reference to textField1:\nEditText textField1 = findViewById(R.id.textField1);\n\n\/\/ send e-mail by using the 'Send to' Intent:\nIntent email = new Intent(Intent.ACTION_SENDTO);\nemail.setType(\"message\/rfc822\");\nemail.setData(Uri.parse(\"mailto:\"));\nemail.putExtra(Intent.EXTRA_SUBJECT, \"my first app\"); \/\/ subject of the email\nemail.putExtra(Intent.EXTRA_TEXT, \"Hello, I just created an 'hello world' app to greet \" + textField1.getText()+\"\\n\\n\"); \/\/ the body of the email\ntry {\n    startActivity(Intent.createChooser(email, \"Send mail...\"));\n} catch (android.content.ActivityNotFoundException ex) {\n    Toast.makeText(MainActivity.this, \"There are no email clients installed.\", Toast.LENGTH_SHORT).show();\n}<\/code><\/pre>\n\n\n\n
Please note that in order for this to work, you must have a working & configured e-mail app on the device running this app.<\/p>\n\n\n\n
Make use of Enter key possible<\/h4>\n\n\n\n
When you hit the Enter key on the keyboard while entering the name, the same eventhandler should be invoked. How to do this is explained here.<\/a><\/p>\n\n\n\n
Get AI assistance<\/h3>\n\n\n\n
Android Studio supports Gemini for AI assisted coding. Clck the Gemini Chat icon in the toolbar to the right, and start chatting:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Let it apply changes suggested:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Change strings<\/h4>\n\n\n\n
You might want to change some other texts, like the heading of the fragment which is in the toolbar. For instance “First Fragment”. These can be found in the resource file Strings.xml<\/strong> (in the folder res, values<\/em>):<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
More information<\/h2>\n\n\n\n
Continue to the series of articles on Android App Development.<\/a><\/p>\n\n\n\n
Or, learn more from these tutorials and free courses:<\/p>\n\n\n\n