Creating User Interfaces with

Layouts and Widgets

 Upgrading Crime
• Open Crime.java and add two new fields. The
Date field represents the date a crime
occurred.
• The boolean field represents whether the
crime has been solved.
• Adding more fields to Crime (Crime.java)
• public class Crime {
• private UUID mId;
• private String mTitle;
• private Date mDate;
• private boolean mSolved;
• public Crime() {
• mId = UUID.randomUUID();
• mDate = new Date();
• }
Generated getters and setters (Crime.java)
• public Date getDate() {
• return mDate;
• }
• public void setDate(Date date) {
• mDate = date;
• }
• public boolean isSolved() {
• return mSolved;
• }
• public void setSolved(boolean solved) {
• mSolved = solved;
• }
 Updating the Layout
• CriminalIntent, episode 2
Adding new widgets (fragment_crime.xml)
• <TextView
• android:layout_width="match_parent"
• android:layout_height="wrap_content"
• android:text="@string/crime_title_label"
• style="?android:listSeparatorTextViewStyle"
• />
• <EditText android:id="@+id/crime_title"
• android:layout_width="match_parent"
• android:layout_height="wrap_content"
• android:layout_marginLeft="16dp"
• android:layout_marginRight="16dp"
• android:hint="@string/crime_title_hint"
• />
• <TextView
• android:layout_width="match_parent"
• android:layout_height="wrap_content"
• android:text="@string/crime_details_label"
• style="?android:listSeparatorTextViewStyle"
• />
• <Button android:id="@+id/crime_date"
• android:layout_width="match_parent"
• android:layout_height="wrap_content"
• android:layout_marginLeft="16dp"
• android:layout_marginRight="16dp"
• />
• <CheckBox android:id="@+id/crime_solved"
• android:layout_width="match_parent"
• android:layout_height="wrap_content"
• android:layout_marginLeft="16dp"
• android:layout_marginRight="16dp"
• android:text="@string/crime_solved_label"
• />
 Adding string resources (strings.xml)

• <string
name="crime_title_label">Title</string>
• <string
name="crime_details_label">Details</string
>
• <string
name="crime_solved_label">Solved</string>
 Adding widget instance variables
(CrimeFragment.java)
• public class CrimeFragment extends Fragment
{
• private Crime mCrime;
• private EditText mTitleField;
• private Button mDateButton;
• private CheckBox mSolvedCheckBox;
 Setting Button text (CrimeFragment.java)

• mTitleField.addTextChangedListener(new
TextWatcher() {
• ...
• });
• mDateButton =
(Button)v.findViewById(R.id.crime_date);
• mDateButton.setText(mCrime.getDate().toString());
• mDateButton.setEnabled(false);
• return v;
 Listening for CheckBox changes
(CrimeFragment.java)
• mDateButton.setEnabled(false);
• mSolvedCheckBox = (CheckBox)v.findViewById(R.id.crime_solved);
• mSolvedCheckBox.setOnCheckedChangeListener(new
OnCheckedChangeListener() {
• @Override
• public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
• // Set the crime's solved property
• mCrime.setSolved(isChecked);
• }
• });
• return v;
 Styles, themes, and theme attributes

• A style is an XML resource that contains

attributes that describe how a widget should
look and behave.
• <style name="BigTextStyle">
• <item name="android:textSize">20sp</item>
• <item name="android:padding">3dp</item>
• </style>
• You can create your own styles .You add them
to a styles file in res/values/ and refer to them
in layouts like this: @style/my_own_style.
 Margins vs. padding
• Margin attributes are layout parameters. They
determine the distance between widgets.
Given that a widget can only know about itself,
margins must be the responsibility of the
widget’s parent.
• Padding, on the other hand, is not a layout
parameter. The android:padding attribute tells
the widget how much bigger than its contents
it should draw itself.
Padding in action (fragment_crime.xml)

• <Button android:id="@+id/crime_date"
• android:layout_width="match_parent"
• android:layout_marginRight="16dp"
• android:padding="80dp"
 Creating a landscape layout
• The graphical layout editor can generate the
landscape version of a layout file for you.
Landscape layout for CrimeFragment
 Adding a new widget
• Select LinearLayout (Horizontal) and
• drag it to the component tree. Drop this
LinearLayout just above the date button.
Ensure that the new LinearLayout is a child of
the root LinearLayout
Changing LinearLayout’s width and height

• Modify the layout:width attribute to

match_parent and the layout:height attribute
to wrap_content
• Expand the layout:margin attribute. Select the
field next to Left and type 16dp. Do the same
for the right margin
Button and CheckBox are now children of
the new LinearLayout
 Updating child layout parameters
• First, select the date button in the component tree. In the
properties view, click on the current layout:width value and
change it to wrap_content.
• Next, delete both of the button’s 16dp margin values. The button
will not need these margins now that it is inside the LinearLayout.
• Finally, find the layout:weight field and set its value to 1. This field
corresponds to the android:layout_weight attribute
• Select the CheckBox in the component tree and make the same
attribute changes: layout:width should be
• wrap_content, the margins should be empty, and layout:weight
should be 1.