Coders' Guidebook

Resolving errors: missing constraints and hardcoded text in Android app development

You may notice the editor sometimes has a red or yellow warning sign in the top right corner. These warning signs indicate there is a problem with our code that needs addressing. Red warnings indicate a critical error that will prevent the app from running, while yellow warnings are advisory.

redwarning.png

Clicking the warning sign will tell us more about the error(s). For example, in the tutorial on adding a TextView object to our app, we caused "Missing Constraints in ConstraintLayout" and "Hardcoded text" errors. This tutorial will show you how to resolve these errors.

Constraint errors

Constraints are a set of rules which determine how an object positions itself relative to other objects and the layout as a whole. Without constraints, the objects in your app would likely jump out of position when the app is loaded or the device is rotated. To automatically apply any missing constraints you can press the 'Infer Constraints' button at the top of the editor.

infer.png

The red warning sign should now have turned yellow because we have resolved the missing constraints error. Also, the TextView object should have blue arrows coming out of it when selected in the editor. These blue arrows represent the constraints. They determine how the TextView object will position itself relative to the edges of the app interface.

constraints.png

The infer constraints button adds any missing constraints and resolves the error, but what if you want to fine-tune the position of the object? To adjust the position of an object, select it and refer to the Attributes panel. In this example, inferring constraints created a top margin of 99dp.

margin.png

A margin is a type of constraint that creates a fixed distance between the object and another reference point (e.g. another object or the edge of the app interface). In the above example, we can adjust the distance between the TextView object and the top of the app layout by editing the value of the layout_marginTop attribute. For instance, if you wanted to the TextView to sit near the top of the screen then you could set the layout_marginTop attribute to a small value such as 20dp.

An alternative method for adding constraints is to drag and drop the blue arrows yourself. To illustrate how this is done, add a second TextView object below the first one (for a reminder on how to add TextView objects see this tutorial). Next, select the original TextView object and notice the four circles which appear on each of its sides. Click the bottom circle and drag the arrow down to the top circle of the second TextView object. This creates a constraint connecting the two TextView objects. Note the second TextView object will now have some missing constraints of its own. You can fix this using the Infer Constraints button or by dragging the constraint arrows to the edge of the app layout yourself.

connectingconstraints.png

Hardcoded text warnings

While our objects now have the appropriate constraints, there is still a yellow warning sign in the top right corner of the editor.

yellowwarning.png

This yellow warning sign is there because our two TextView objects contain hardcoded text. Hardcoded text can cause issues when the underlying code is being read and edited. Fortunately, hardcoded text is quite easy to rectify. Simply click the yellow warning sign in the top right corner, scroll to the bottom of the hardcoded text error message and press the 'Fix' button. In the Extract Resource window that opens, you can simply press OK and the attribute with the hardcoded text will be converted to string format.

hardcode.png

For larger projects, it is often best to define any text (or strings) you intend to use in advance. That way you can prevent the hardcoded text warning from ever appearing. To define a string, open the strings resource file by clicking Project > app > res > values > strings.xml

strings-file.png

There will likely already be some strings in there. Simply add new strings between the opening <resources> and closing </resources> resources tags in the following format:

<string name="title">Coders' Guidebook</string>

The 'name' property is what you will use to refer to the string elsewhere in the app. The text between the two string tags will be displayed to the user whenever the string name is referred to. In other words, using the 'title' string will display 'Coders' Guidebook'.

<<< Previous

Next >>>