Skip to main content

[Make-A] Movies app using TMDb API Part 8 – Colors and a Free Launcher Icon Generator

 

In Material Design, there are two types of colors – Primary Color(s) and Secondary Color.

Primary Color(s) are the most frequently displayed colors across your app’s screens and components. It is usually composed of lighter and darker tones of your primary color.

Secondary Color is what you call “accent” color. It is used to get the attention of the user. It should be complementary of your primary color should not be a light or dark variations of your primary color. It is commonly used in FloatingActionButtons (FAB).

Here’s sample color palette that you can find in the Material Design Color Palette:

 

 

Colors that has a label that starts with an “A” are Accent Colors. Others are variations of a primary color which is 500.

  • 500 – Primary Color
  • 700 – Dark Primary Color
  • A200 – Accent Color

Let’s get started

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!

 

Congratulations for making it this far! 🎉🎉🎉 We’re almost done so let’s end it with bang! 😎 Our app looks pretty bland we need to make it beautiful for it to really look like an app.

Please refer to Material Design Color Palette to choose or try the colors that you want.

1. Colors

1. Open your colors.xml under res -> values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#212121</color>
    <color name="colorPrimaryDark">#000000</color>
    <color name="colorAccent">#FF1744</color>
    <color name="white">#FFFFFF</color>
</resources>

2. Open your styles.xml under res -> values

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@color/colorPrimary</item>
    </style>

</resources>

Depending on the colors that you pick you might need to change the text colors your TextViews. Since I picked dark colors, I need to change my text color to white.

3. Open your item_movie.xml and change the card background and text colors

<?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"
    app:cardBackgroundColor="@color/colorPrimary">

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

        ...

        <TextView
            android:id="@+id/item_movie_release_date"
            ...
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/item_movie_title"
            ...
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/item_movie_genre"
            ...
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/item_movie_rating"
            ...
            android:textColor="@color/white" />

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

4. Open your activity_movie.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">

    ...

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <TextView
                android:id="@+id/movieDetailsTitle"
                ...
                android:textColor="@color/white" />

            <TextView
                android:id="@+id/movieDetailsGenres"
                ...
                android:textColor="@color/white" />

            <TextView
                android:id="@+id/movieDetailsOverview"
                ...
                android:textColor="@color/white" />

            ...

            <TextView
                android:id="@+id/summaryLabel"
                ...
                android:textColor="@color/white" />

            <TextView
                android:id="@+id/movieDetailsReleaseDate"
                ...
                android:textColor="@color/white" />

            ...

            <TextView
                android:id="@+id/trailersLabel"
                ...
                android:textColor="@color/white" />

            <TextView
                android:id="@+id/reviewsLabel"
                ...
                android:textColor="@color/white" />

            ...

        </android.support.constraint.ConstraintLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

5. Run the app and you should see different colors now. 🤩🎉

Yours could be different depending on the colors that you picked.

 

2. Launcher Icon

1. Head over to Android Asset Studio – Launcher Icon Generator by Roman Nurik.

Play around with it until you’re satisfied with the launcher icon that you made.

2. Set the name to ic_app_icon

3. Download the .zip file by pressing the download FAB

4. Extract the .zip file

5. Copy all folders -> right click res folder -> select paste

6. Open your AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.imakeanapp.imapmovies">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_app_icon"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_app_icon"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...
    </application>

</manifest>

7. Run the app and press home. You should now see your launcher icon

 

CONGRATULATIONS!!! 🎉🎉🎉

You’ve just completed the challenge! You should be proud of yourself! You’re making progress and improving a lot just by completing this challenge.

Where to go from here?

Part 9 – Exercises coming soon.