Skip to main content

[Make-A] Movies app using TMDb API Part 3 – Movie List Item Layout Using ConstraintLayout

 

Our goal for this part is to just create a layout for a movie in our RecyclerView and setting it all up so that it will be ready to be populated with real movies from TMDb API on the next part.

We should have something like this after this part:

Table of Contents

  1. Part 1 – Specs and Introduction
  2. Part 2 – Requesting an API Key
  3. Part 3 – Movie List Item Layout Using ConstraintLayout
  4. Part 4 – Networking using Retrofit Library and Image Loading using Glide
  5. Part 5 – Pagination
  6. Part 6 – Sort Movies by Popular, Top Rated and Upcoming
  7. Part 7 – Using CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout for Movie Details Screen
  8. Part 8 – Colors and a Free Launcher Icon Generator
  9. 5 Exercises and Thanks!

1. Creating a new project in Android Studio

1. Create a new project in Android Studio through File -> New Project and select Empty Activity as your template.

2. Set your Application name to ImapMovies or the application name that you provided when you requested an api key.

 

2. Creating our layout for our movie list item

1. Open your app-level build.gradle under app/ directory

dependencies {
    ...
    implementation 'com.android.support:cardview-v7:26.1.0'
}

As of this writing this is my latest version of CardView. Be sure to always use the latest.

2. Click Sync Now

3. Under res/ folder, create a new xml layout called item_movie

4. Set the root element to android.support.v7.widget.CardView

5. In your item_movie.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    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="128dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/item_movie_poster"
            android:layout_width="96dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@mipmap/ic_launcher_round" />

        <TextView
            android:id="@+id/item_movie_release_date"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:alpha="0.7"
            android:text="2018"
            app:layout_constraintEnd_toStartOf="@+id/item_movie_rating"
            app:layout_constraintStart_toEndOf="@+id/item_movie_poster"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/item_movie_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="Movie Title"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/item_movie_poster"
            app:layout_constraintTop_toBottomOf="@+id/item_movie_release_date" />

        <TextView
            android:id="@+id/item_movie_genre"
            android:layout_width="0dp"
            android:layout_height="18dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:alpha="0.7"
            android:text="Comedy, Action"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/item_movie_poster"
            app:layout_constraintTop_toBottomOf="@+id/item_movie_title" />

        <TextView
            android:id="@+id/item_movie_rating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp"
            android:text="8.7"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

 

3. Setting our RecyclerView.Adapter to show temporary items

1. Open your app-level build.gradle under app/ directory

dependencies {
    ...
    implementation 'com.android.support:recyclerview-v7:26.1.0'
}

2. In your activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/movies_list"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

3. Create a new class called MoviesAdapter

public class MoviesAdapter extends RecyclerView.Adapter<MoviesAdapter.MovieViewHolder> {

    @Override
    public MovieViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_movie, parent, false);
        return new MovieViewHolder(view);
    }

    @Override
    public void onBindViewHolder(MovieViewHolder holder, int position) {
        // TODO: Populate adapter with movies
    }

    @Override
    public int getItemCount() {
        return 50;
    }

    class MovieViewHolder extends RecyclerView.ViewHolder {
        public MovieViewHolder(View itemView) {
            super(itemView);
        }
    }
}

 

4. Let’s test it out!

1. Launch the app and you should see something like this

 

Next part coming soon.