Android: Programmatically adding layouts

  • Written by  Clive

What! No XML? Creating layouts programmatically

Android layout programmatically code layout icon 

Our tutorial app

Our tutorial app creates a table containing text views, text fields and a button.

There is no XML layout file as we do everything programmatically.

A Toast message displays the input after the user has filled in the text fields and pressed the button.

Android programmatically add layout screenLandscape

We’ve created the above table in code. Filling in the text fields and pressing the Go button displays the input in a Toast message

Creating the layout

The Great Container: Creating the layout container for the table

Android layout programmatically tutorial app RelativeLayout

We create a RelativeLayout container to contain our TableLayout

Note the following:

  • relativeLayout – this is our root view group container that will contain the table. We use a RelativeLayout that enables us to centre the table on the screen

Putting the cards on the table: Creating the table and its rows

Android layout programmatically tutorial app creating table and rows

We call our custom methods to create the table and its rows

Note the following:

We call a number of methods that create and return a table and its rows.

  • getTable – creates and returns a table layout
  • getTableRowHeading – creates and returns a table row containing the table heading
  • addView – adds the heading row to the table
  • getTableRow(1-4) – creates and returns a table row
  • addView – adds the rows to the table
Get the table ready: Creating the table

Android layout programmatically tutorial app creating table

Create the TableLayout

Note the following:

  • tableLayout – we want to arrange our text view, text fields and the button in rows and columns so we use a TableLayout
The Head of the table: Creating the table heading

Android layout programmatically tutorial app creating rows heading

Create a TableRow containing the table heading

Note the following:

  • tableRow – a table row. We want to display the table heading in a table row
  • layoutParams – we define the layout parameters for the heading’s text view
  • span – we want the heading text view to span across two columns
  • tableHeading – our text view which will display the table heading
  • setText – we set the text to display in the heading text view
  • setTextSize – we set the size for the Heading’s text
  • setGravity – we want the heading to display centred in the row
  • addView – we add the heading’s text view to the row. We pass in two parameters:
    • the Heading text view
    • the layout parameters for the text view
Row-by-Row: Creating the rows

Android layout programmatically tutorial app creating row

Create a TableRow. This is the first of four table rows which essentially all follow the same format

Note the following:

  • tableRow – a table row where we will display a text view and a text field
  • textViewLabelName – our text view which will display a label
  • setText – we set the text to display in the label text view
  • setTextSize – we set the size for the label’s text
  • addView – we add the label’s text view to the row
  • editTextName – a text field that allows the user to enter text for a name
  • setImeOption – we tell the Input Method Editor what to do once the user has entered text
  • IME_ACTION_NEXT – the input cursor moves to the next text field
  • setHint – sets the text to display while the text field is empty
  • setInputType – set the type of content to accept
  • TYPE_CLASS_TEXT – normal text input
  • addView – we add the text field to the row
  • setOnEditorActionListener – listens for when an action is performed on the text view. We get the input text and assign it to a String which we will eventually display in a Toast message

Have you read Capturing user input with Android’s TextFields?

Fire away! Creating the button

Android programmatically add layout button

The TableRow that contains the button

Note the following:

  • tableRow – a table row. We want to display a button in a table row
  • setGravity – we want the button to display on the right-hand side of the row
  • button – our button view
  • setText – we set the text to display in the button
  • addView – we add the button to the row
  • setOnClickListener – handles the button clicks

If you’re interested in finding out more about using buttons in your apps, have a look at the Android Buttons tutorial.

Containerise it: Putting the table into the container

Android layout programmatically setContentView()

We specify how the table should be displayed in the relative layout and then call setContentView() to display it

Note the following:

  • centerTableParameters – these layout parameters tell the parent Relative layout how to position the table view child
  • addRule – this rule tells the Relative layout to place the table in its centre
  • addView – we add the table layout to the relative layout container. We pass two parameters:
    • the layout view that we want to place in the relative layout
    • the layout parameters that will determine how the child table view should be positioned in the parent relative layout
  • setContentView – we tell the activity to place this view in its view hierarchy. It displays the relative layout containing the table

You may also want to have a look at our, Playing with Android's TextViews tutorial where we programmatically create a TextView.

I hope that you have found this tutorial helpful.

This project was created using Android Studio.

You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.