Modern Android App Development with Kotlin/

...

/

Building Layout of Details Screen

Building Layout of Details Screen

Learn how to create a layout for blog details screen which consists of image, text, and author information.

We'll cover the following...

Final result preview

To make it easier to understand what we want to achieve, here is a preview of the layout that we are going to build.

Drawables

For the blog details screen, we need some images. There are several folders in Android where images can be added. We are going to use the app/src/main/res/drawable folder. Let’s add two images:

  • sydney_image.jpg
  • avatar.jpg

Now, these images will be packed into the application, and we will be able to use them.

Root layout

Let’s create a new activity_blog_details.xml layout file inside the app/src/main/res/layout folder. As a root layout, we are going to use ConstraintLayout:

Press + to interact
<androidx.constraintlayout.widget.ConstraintLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>

All the other views are going to be placed inside this layout.

Main image

At the very top of our layout, we have a picture of the Sydney Opera House. Let’s declare ImageView with the following attributes:

  • The layout_height="250dp" attribute to take 250dp in height
  • The src="@drawable/sydney_image" attribute to set image resource, in our case sydney_image from drawable folder
  • The id="@+id/imageMain" attribute for unique id
  • The
...