TheMovieDb API – Part 5 – Movie Layouts

Movie item view example

Hey there! welcome back to this series on implementing TheMovieDb API. As always remember all the code for this series will be in this GitHub repo today we are getting away from Java code for a while and jumping to layout creation and xml files. We are going to set up a toolbar layout file so it can be reused, then prepare the activity_main needed views and finally a layout representation of a Movie item that later on our adapter will use to display sample movie information.

Let’s get started! Under app/src/main/res/layout create the following toolbar layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_collapseMode="pin"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


As you can observe nothing out of the ordinary we are just setting colors and elevation through the toolbar. One note thouth the:

 app:layout_collapseMode="pin"

is used in conjunction with a CoordinatorLayout, this layout came in with the material support library, we’ll see it later on. Now that we have our toolbar layout ready we can begin spreading it out thouth our layouts (you will typically want to do this if you will have multiple shared views or similar). Under activity_main.xml update to resemble the following:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/toolbar" />

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_gravity="center"
        android:indeterminate="true"
        android:progressDrawable="@drawable/progress_bar" />

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize" />

</FrameLayout>

In the preview you should see your toolbar reflected, but wait! are you seeing double? It’s not you, it’s probably that you have not updated your AppTheme to extend the correct theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Much better! Now my favorite so far, the representation of a Movie item view. In here you can get as creative as you like, its your design after all. For my case I will use the following. First I will create the “actions” in a separate layout file so it can be more maintainable. Name it movie_actions_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="3">


    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:background="@null"
        android:text="@string/text.movie.details"
        style="?borderlessButtonStyle"
        android:textColor="@color/colorPrimary" />

    <Button
        style="?borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:background="@null"
        android:text="@string/text.movie.reviews"
        android:textColor="@color/colorAccent" />

</LinearLayout>

Cool, now for the second and last one movie_view.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:elevation="6dp"
    app:cardCornerRadius="@dimen/card_view_radius">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image"
            android:layout_width="135dp"
            android:layout_height="200dp"
            android:background="@color/colorPrimary"
            android:contentDescription="@string/desc.movies.poster" />

        <LinearLayout
            android:id="@+id/info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@+id/image"
            android:layout_toRightOf="@+id/image"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginTop="16dp"
                android:textSize="26sp"
                android:textStyle="bold"
                tools:text="The Revenant" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:textSize="12sp"
                tools:text="Directed by: Jonh Doe" />

            <android.support.v7.widget.AppCompatRatingBar
                android:id="@+id/popularity"
                style="?ratingBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_margin="12dp"
                android:isIndicator="true"
                android:numStars="10"
                android:stepSize="0.1" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:layout_marginBottom="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginStart="16dp"
                android:background="@android:drawable/divider_horizontal_bright" />

        </LinearLayout>

        <include
            layout="@layout/movie_actions_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/info"
            android:layout_toEndOf="@+id/image"
            android:layout_toRightOf="@+id/image" />

    </RelativeLayout>
</android.support.v7.widget.CardView>

First notice how I set “demo” values with the tools namespace, this helps a lot meaning we can mock out content without the need for setting the actual values and risking wrong information to be leaked. We use the include tag to use layouts that we have created separately such as movie_actions_view. The results of the above is:

Movie item view example

So Awesome right? Try out and make your own and share it in the comments section! Until next time

Joel

Please follow and like us:
Facebook
Twitter
Joel Sosa

Author: Joel Sosa

Android nanodegree holder | Graduate Student @GeorgiaTech CS Interactive Intelligence | @gdgpuertorico Organizer

3 thoughts on “TheMovieDb API – Part 5 – Movie Layouts”

  1. Hello Jose. Thanks for the series. This is my favorite part too. I want to point out a typo on the movie_view.xml

    android:background=”@color/colorPrimary”
    //On Github it says: tools:background=”@drawable/test_movie”

    Regards

    1. Hey Javier! is not a typo I later updated it to use a sample drawable, you can use drawables, colors, vector and more. Thanks for pointing it out though that means they are awesome developers like you watching over 🙂

      Joel

Comments are closed.