Skip to content

Exercise 03 - Build UI with Layout Editor 2

Project name : E03 Build UI With Layout Editor 2

Introduction

The purpose of this tutorial is to learn to use Android Studio’s Layout Editor to create a fluid application UI. You will add a view layouts with a common components to display an employees data in UI. Designed application will run smoothly in different devices and screen sizes.

The Layout Editor enables Designer quickly build layouts just dragging UI elements to visual Design Editor, instead of writing layout XML by hand. The Design Editor can preview your layout on different Android devices and versions. Designer can dynamically resize the layout to be sure it works well on different screen sizes.

Create UI

Application UI will contain common TextView and ImageView components to display employee’s information.

  • Create a new project and name it to E03 Build UI With Layout Editor 2
  • Remember save your project in your android-exercises folder
  • Download Employee images, unzip and copy images to your project drawable folder. You can just drag and drop images to that folder.
  • Use Horizontal and Vertical LinearLayouts to organize components (look a below image), look component names from the Component Tree. You can use your own naming rules in used components, but remember use same values later in the code.

!Image 01

Click image to to see it bigger!

You can use for example following data in your strings.xml. Note how you can use placeholders in your string resources (line 7). Now three different string variables will be used in employee_info_text string (later in UI).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 <string name="app_name">Build UI with Layout Editor 2</string>
  <string name="firstname">Firstname</string>
  <string name="lastname">Lastname</string>
  <string name="jobtitle">Jobtitle</string>
  <string name="employee_information_text_here">Employee information text here...</string>
  <string name="employee_image">Employee image</string>
  <string name="employee_info_text">%1$s %2$s is .... %3$s</string>
  <string name="_1">1</string>
  <string name="_2">2</string>
  <string name="_3">3</string>
  <string name="_4">4</string>
  <string name="_5">5</string>
  <string name="basic_text">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</string>

Modify strings.xml

Add sample employee's data

Now you have five employee images and you will hard code an employee details.

Create a three different arrays, which contains details of the employee: firstname, lastname and jobtitle. Add a string based data to variables: first, last names and job title. Define these arrays inside your MainActivity class.

1
2
3
val firstnames = arrayOf("Renato", "Rosangela", "Tim", "Bartol", "Jeannette")
val lastnames = arrayOf("Ksenia", "Metzli", "Asuncion", "Zemfina", "Giang")
val jobtitles = arrayOf("District Quality Coordinator","International Intranet Representative","District Intranet Administrator","Dynamic Research Manager","Central Infrastructure Consultant")

Create showEmployeeData function. This function will show employee’s data in the UI. Layout TextView‘s will be updated with correct employee’s first and last names, job titles and text from the string resources. Remember add a new basic_text key to your string resources with some text value. Image will be loaded from the drawable resources with setImageRecourse function.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// function displays employees data in UI
fun showEmployeeData(index: Int) {
  // find TextView's from the UI layout file
  val firstnameTextView = findViewById<TextView>(R.id.firstnameTextView)
  val lastnameTextView = findViewById<TextView>(R.id.lastnameTextView)
  val jobtitleTextView = findViewById<TextView>(R.id.jobtitleTextView)
  val employeeInfoTextView = findViewById<TextView>(R.id.employeeInfoTextView)
  // Update TextView texts
  firstnameTextView.text = firstnames[index];
  lastnameTextView.text = lastnames[index];
  jobtitleTextView.text = jobtitles[index];
  // info is 
  employeeInfoTextView.text = getString(R.string.employee_info_text, lastnames[index], firstnames[index], getString(R.string.basic_text))

  // image
  var id = 0;
  when(index) {
    0 -> id = R.drawable.employee1
    1 -> id = R.drawable.employee2
    2 -> id = R.drawable.employee3
    3 -> id = R.drawable.employee4
    4 -> id = R.drawable.employee5
  }
  // find imageView and display correct employee image
  val imageView = findViewById<ImageView>(R.id.imageView)
  imageView.setImageResource(id)
}

Note

You will need to import needed classes.

Call above showEmployeeData function with parameter 0 from onCreate after setContentView is called. Now, the loaded employees data, will be shown in the application UI.

1
2
3
4
5
6
7
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // show first employee data
    showEmployeeData(0)
}

Test

Build and run your application and it should display the first employee data in UI.

!Image 02

Change selected employee in UI

Application should show a selected employee’s information, when a number textview’s are clicked. In other words, now textview’s are working like a buttons.

Modify all the text XML elements and add onClick-attribute event handling to call the same numberClicked-function from all the text 1-5.

1
2
3
4
5
6
7
8
<TextView
  android:id="@+id/oneTextView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="@string/_1"
  android:textAlignment="center"
  android:onClick="numberClicked"/>

Open MainActivity Kotlin file and add a numberClicked-function. This function will first get the text from the clicked TextView and convert it to integer. After that, earlier made showEmployeesData function should be called with that integer value.

Click to see a solution - first try to code it by yourself 
1
2
3
4
5
6
7
8
9
// function will be called from the UI
fun numberClicked(view: View?) {
  // get clicked view as a textview and it text as a string
  val text = (view as TextView).text.toString()
  // modify string to int and decrease by one (array's start position 0)
  val int = text.toInt() - 1
  // show selected employee data in UI, call earlier made function
  showEmployeeData(int)
}

Now same showEmployeesData function can be called from all the text numbers clicked.

Test

Build and run your application and it should display the first employee data in UI and other employees by the selection made by user.

 

Remember test your application in landscape mode. In conclusion, your app is now working both portrait and landscape mode.

!Image 05

Test and push

Test your application in emulator, take screenshots and commit/push your project and screenshots back to JAMKIT/GitLab. Remember move your exercise/issue ticket from Doing to In Review in Issues Board and write your learning comments to issue comments.