Modern Android App Development with Java/

...

/

Building Layout

Building Layout

This lesson will cover how to create a layout for blog details screen which consist 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 which 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 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 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, ...