Build fluid UI with Layout Editor

B

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 select Kotlin language. Read Create a first Android application tutorial to learn how to create Android project.
  • After that, download Employee images, unzip and copy images to your project drawable folder. You can just drag and drop images to drawable 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.

sample employee’s data

Now you have five employee images and you will hard code an employee details. You can find here tutorials, which guides you to load data from the net, too For now, you are learning how to create an application UI’s.

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.

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.

// function displays employees data in UI
fun showEmployeeData(index: Int) {
    // show data to UI
    firstnameTextView.text = firstnames[index]
    lastnameTextView.text = lastnames[index]
    jobtitleTextView.text = jobtitles[index]
    employeeInfoTextView.text = lastnames[index] + " " + firstnames[index] + " is ...." + getString(R.string.basic_text)
    // load and show image from resources
    var id = 0
    if (index == 0) id = R.drawable.employee1
    else if (index == 1) id = R.drawable.employee2
    else if (index == 2) id = R.drawable.employee3
    else if (index == 3) id = R.drawable.employee4
    else if (index == 4) id = R.drawable.employee5
    imageView.setImageResource(id)
}

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.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // show first employee data
    showEmployeeData(0)
}

You can use layout file id’s directly from the Kotlin code (you don’t need to use findViewById function). You will get that working, if you import your layout file in your code. However, remember this is not working if you are using Java language.

import kotlinx.android.synthetic.main.activity_main.*

Test

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

Change employee

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.

<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 following numberClicked-function. This function will first get the text from the clicked TextView and convert it to integer. After that, earlier made showEmployeesData function will be called with that integer value.

fun numberClicked(view: View?) {
    // get text show in TextView
    val text = (view as TextView).text.toString()
    // convert text to integer, array is starting from zero position
    val int = text.toInt() - 1
    // call function to show selected employees data
    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.

If you have problem with spacing text numbers correctly, you should look more information about ConstraintLayout.

CODE

Check project from GitLab – Build a fluid UI with Android Studio Layout Editor

Add comment

Pasi Manninen

Pasi Manninen

Pasi is a mobile and web application developer. Currently working as a senior lecturer in JAMK University of Applied Sciences. Pasi has programming experience over many decades and has taught dozens of courses since the 90's.

Recent Posts

Follow Me