The first step is to build out a place for your photo to live on the crime detail screen. You will need two new View objects: an ImageView to display the photo and a Button to press to take a new photo (Figure 16.1).
Dedicating an entire row to a thumbnail and a button would make your app look clunky and unprofessional. You do not want that, so you will arrange things nicely.
Add new views to res/layout/fragment_crime.xml to build out this new area. Start with the lefthand side, adding an ImageView for the picture and an ImageButton to take a picture.
Listing 16.1 Adding an image and camera button to the layout (res/layout/fragment_crime.xml)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
... >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/crime_photo"
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="centerInside"
android:cropToPadding="true"
android:background="@android:color/darker_gray"/>
<ImageButton
android:id="@+id/crime_camera"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_camera"/>
</LinearLayout>
</LinearLayout>
<TextView
style="?android:listSeparatorTextViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/crime_title_label"/>
...
</LinearLayout>
Now set up the righthand side, moving your title TextView and EditText into a new LinearLayout child to the LinearLayout you just built.
Listing 16.2 Updating the title layout (res/layout/fragment_crime.xml)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
... >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
...
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
style="?android:listSeparatorTextViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/crime_title_label"/>
<EditText
android:id="@+id/crime_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/crime_title_hint"/>
</LinearLayout>
</LinearLayout>
...
</LinearLayout>
Run CriminalIntent and press on a crime to see its details. You should see your new UI looking just like Figure 16.1.
Looks great. Now, to respond to presses on your ImageButton and to control the content of your ImageView, you need properties referring to each of them. In CrimeFragment, call findViewById(Int) as usual on your inflated fragment_crime.xml to find your new views and wire them up.
Listing 16.3 Adding properties (CrimeFragment.kt)
class CrimeFragment : Fragment() {
...
private lateinit var suspectButton: Button
private lateinit var photoButton: ImageButton
private lateinit var photoView: ImageView
private val crimeDetailViewModel: CrimeDetailViewModel by lazy {
ViewModelProviders.of(this).get(CrimeDetailViewModel::class.java)
}
...
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
...
suspectButton = view.findViewById(R.id.crime_suspect) as Button
photoButton = view.findViewById(R.id.crime_camera) as ImageButton
photoView = view.findViewById(R.id.crime_photo) as ImageView
return view
}
...
}
And with that, you are done with the UI for the time being. (You will wire those buttons up in a minute or two.)