What does the Android R layout simple_list_item_1

Android Android ListView for beginners

display

You are familiar with list views, for example, from contacts on smartphones. ListView now allows you to create your own lists with data from databases or simple lists. Read here how you can create your first ListView, even if you have no prior knowledge of development.

What is ListView?

ListView is a view in Android development to display elements in a simple, scrollable list. This could, for example, be a list of contacts on the Android device. The elements of the list can come via a database query, can be read from an external file or simply come from an array, i.e. they can be specified directly in the code as text.

The ListView element is described in great detail in the Android developer documentation and there are also plenty of extensive examples on the Internet. However, basically all articles are aimed at more or less experienced developers. In other words: you have to be able to develop basic Android apps and understand a lot of the basics to get such a list.

In the following, we want to go a little differently and introduce you to the ListView as an introduction to development. It should not be about the many possibilities of data sources or the largest possible, illustrated list entries, but only about the absolute basic variant: An app that shows a list of fixed entries. You can then use this wonderfully as a springboard to plunge further into development work.

We will show you the fastest possible way to set up a working list in two ways: Android Studio and MIT App Inventor. The Android Studio is the large development environment for Android with which you can develop professional applications. Without basic development skills and knowledge of the structure of Android apps, however, you will find it difficult to make any headway here. The MIT App Inventor, on the other hand, does without a complicated environment and even without code: Here the design is created using a simple WYSIWYG editor and the program logic is tinkered with puzzle pieces. You can also program real apps with the App Inventor, but the possibilities are limited. But it really works without any programming knowledge!

ListView in Android Studio

So install Android Studio, if you haven't already, and start a new project. For the most part, you can simply click through.

You can also test the basic app created in this way directly: Click on the green "Play button"(Run app). If this is the first time, you must first press the button"Create New Virtual Device"Create a test device for the emulator. For example, select" Pixel 2 "to get a virtual Pixel 2 smartphone for testing. You can simply click through the wizard. The app then starts on the emulated device and shows - as usual - a simple "Hello world".

This is due to two files that you are about to change: "Java / com.example.USERNAME.myapplication" and "res / layout / activity_main.xml". Open both of them with a double-click. At" acivity_main.xml "you can already see a preview.

In the "acivity_main.xml"set the ListView view. Replace all of the code with the following:

display

Make sure to replace "USERNAME" with your name - as specified during the setup in the first screenshot of the gallery under "Company domain". This simply creates a simple layout with the ListView - all standard information that would go beyond the scope to explain in detail here. The line that starts with "tools: context"begins. Here," USERNAME "and the name of" MainActivity.java "are specified as variables - then it works even if you have a different name than here. For the sake of understanding, the written variant is directly below it. The comment between You can of course delete "<" - and "->".

In the "MainActivity.java"replace the complete code again:




display

Here, too, replace "USERNAME" in the first line. The required components are then imported. Then the actual list follows. Again, most of it is standard again, which you can simply leave for testing. The content then follows in the "String" area: "Entry" is the name of the array in which the data is stored, "Entry 1" and so on are the values ​​- and you can change them as you wish.

Under "Override"Then again some standards for setting the view follow. With"Listview adapter"you will find another element that is not (halfway ...) self-explanatory:"simple_list_item_1"is a permanently integrated layout. Alternatively, you could define this yourself in a separate file (as is also the case in the documentation and extensive tutorials). Finally,"onListItemClick"defines what happens when you click / tap on an entry in the list. Here," Your selection: Entry 1 "or equivalent is output. You can also adjust that again.

Now start the app again via the "Play button" and you will see your finished list. That was of course a quick run-through, but you have a working ListView list, know the relevant files and can now delve into the topic wonderfully.

ListView in MIT App Inventor

With the App Inventor, too, we will try a quick run-through, but briefly to the concept: You first create a design in the browser by placing buttons or a list view on a screen. Then you put together a few puzzle pieces called "blocks" to fill the list view with content. And then comes the kicker: You can test live on your real Android device. To do this, first install the MIT AI2 Companion on Android. Later you will establish a connection between App Inventor and Companion via a QR code and see your development live from the browser on the Android screen.

Sign in to App Inventor and start a new project. You land directly in the "Designer" and see an Android screen in the middle. Now drag on this from the left navigation from the area "User interface"one"Button". At the bottom right of the window, under"Properties / Button 1 / Text"name the button now"Load list". Then add the element"ListView"also via drag & drop into the app.

Now use the button at the top right to switch to "Blocks". Here, too, drag & drop is used again. In the navigation, click"Button 1"on and pull the item"when Button1.Click"in the middle. This determines what happens when the button that has just been created is pressed.

Click on "ListView1"and drag the item"set ListView1.Elements to"into the existing button element - it docks directly under the" when "in the block. This is the puzzle work mentioned. This block says that after clicking the button, the elements of the list should be set, which is above two more elements happen.

First you dock "Lists / make a list". Then click on the small one gearto add more to the list "items"Add (list entries) - again using drag & drop. For example, define four list entries. Now dock the element" to each of these entries.Text / """Now you can click into these empty text blocks to write the actual texts for the entries.

But in this case a picture is worth a thousand words, this is how the finished puzzle should look like:

display

So when you were doing the jigsaw puzzle, you decided: When the button is pressed, the list should be filled with a list that contains the following texts.

Time to Test: Click "Above"Connect / AI Companion"(a QR code appears), open the AI ​​Companion under Android, click on"scan QR code"and scan the code. If that doesn't work, re-establish the connection in the browser via"Connect / Reset connection"Go back and try again. This time, however, check the box next to" AI Companion "Use legacy connection"- it helped here.

From now on you can see every change from the App Inventor on the Android device without any further action. This is how testing is fun!

These were two very quick ways to get to the ListView. In practice, you will still have to look up many, many components for a real app. And that is exactly what will be a lot easier for you once you have a working minimal app.