Advanced ListView Using Android Studio – Movies ListView

Hello Android Devs in this post/tutorial we will explain everything you need to understand Advanced ListView with Android Studio.

List of scrollable items can be displayed in Android using ListView. It helps you to display the data in the form of a scrollable list. Users can then select any list item by clicking on it. ListView is defaulting scrollable so we do not need to use scroll View or anything else with ListView.

ListView is widely used in Android applications. A very common example of ListView is your phone contact book, where you have a list of your contacts displayed in a ListView and if you click on it then user information is displayed.

Adapter: To fill the data in a ListView we simply use adapters. List items are automatically inserted to a list using an Adapter that pulls the content from a source such as an ArrayList, array or database.

ListView in Android Studio: Listview is present inside Containers. From there you can drag and drop on the virtual mobile screen to create it. Alternatively, you can also XML code to create it.

So let’s Start.

  • 1st We Need To Start Our New Project In Android Studio:

Click “Start a new Android Studio Project”.

ListView

Choose Empty Activity then Click “Next”.

ListView

Choose “Name”, “Package Name”, “Save Location” and “Minimum API Level” and click “Finish”.

ListView

  • Go to your main activity Layout our is ‘activity_main.xml’.

ListView

Add ListView to the Layout:

<ListView
    android:id="@+id/listView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
</ListView>
  1. Choose ID to use with our Java class.
  2. and choose width and height for our ListView.
  • Create a New “Layout Resource File” XML file for our ListView Row:

Right Click on “layout” Folder and click “New”, “Layout resource file”:

ListView

Choose your “File Name” and “Root element” and click “OK”:

ListView

We will need some colors for our “ListView Row”.

Go to “res/values/colors.xml“:

ListView

Add these colors to the file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="whiteColor">#ffffff</color>
    <color name="rowBg">#E4E4E4</color>
    <color name="movieTitle">#797979</color>
    <color name="yearTitle">#CC8BDA</color>
    <color name="rateTitle">#CFC767</color>
</resources>
  • You need to download some movies images like Avengers: Endgame or Game Of Thrones, use IMDb to download them or Google Drive to download ours.

ListView

NB: Images name must be “lower case”.

Copy these images to “res/drawable”:

ListView

 Right click on “drawable” then click Paste.

ListView

  • We need to add a Star “Vector Asset” for the “Rate”.

Right click on “res/drawable” and choose “New” then click on “Vector Asset”:

ListView

ListView

Search for “star” and select the icon then click “OK”:

ListView

Click on Color input and choose a yellow color then click “choose”:

ListView

  • Now we need to Design/code our “ListView row”, I already did so you can copy mine or code your own:

ListView

Copy This Code to your “ListView Row” XML File ‘lsitview_row.xml’:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10px">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/rowBg">
        <ImageView
            android:id="@+id/movieImg"
            android:layout_margin="10px"
            android:layout_width="90dp"
            android:layout_height="125dp"
            android:src="@drawable/fightclub"
            android:scaleType="fitXY"/>
        <RelativeLayout
            android:id="@+id/movieDetails"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/movieImg">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/movieTitle"
                android:text="Title: Fight Club"
                android:layout_margin="10px"
                android:textColor="@color/movieTitle"
                android:textSize="18sp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Year: 1999"
                android:id="@+id/yearMovie"
                android:layout_below="@id/movieTitle"
                android:textColor="@color/yearTitle"
                android:textSize="16sp"
                android:layout_margin="10px"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Genres: Drama"
                android:id="@+id/genresMovie"
                android:layout_margin="10px"
                android:textSize="16sp"
                android:textColor="@color/movieTitle"
                android:layout_below="@id/yearMovie"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/rateMovieStar"
                android:src="@drawable/ic_star_black_24dp"
                android:layout_below="@id/genresMovie"
                android:layout_margin="10px"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="8.8"
                android:textSize="16sp"
                android:id="@+id/rateMovie"
                android:layout_toRightOf="@id/rateMovieStar"
                android:layout_alignBottom="@id/rateMovieStar"
                android:textColor="@color/rateTitle"
                android:gravity="center"/>
        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>
  • We will need some data to use, I got some from IMDb 😀 

ListView

[img: theshawshankredemption, Title: The Shawshank Redemption, Year: 1994, Genres: Drama, Rate: 9,3]
[img: thegodfather, Title: The Godfather, Year: 1972, Genres: Crime, Rate: 9,2]
[img: thedarkknight, Title: The Dark Knight, Year: 2008, Genres: Action, Rate: 9,0]
[img: schindlersList, Title: Schindler's List, Year: 1993, Genres: Biography, Rate: 8,9]
[img: fightclub, Title: Fight Club, Year: 1999, Genres: Drama, Rate: 8,8]
[img: forrestgump, Title: Forrest Gump, Year: 1994, Genres: Drama, Rate: 8,8]
[img: inception, Title: Inception, Year: 2010, Genres: Sci-Fi, Rate: 8,8]
[img: logan, Title: Logan, Year: 2017, Genres: Action, Rate: 8,1]
[img: geminiman, Title: Gemini Man, Year: 2019, Genres: Sci-Fi, Rate: -,-]
  • Now let’s go to our “MainActivity.java” and create Arrays for our small DataBase:

ListView

Copy this code “Data” to the MainActivity before onCreate():

private Integer[] moviesImages = new Integer[]{
       R.drawable.theshawshankredemption,R.drawable.thegodfather,
       R.drawable.thedarkknight,R.drawable.schindlerslist,
       R.drawable.fightclub,R.drawable.forrestgump,R.drawable.inception,
       R.drawable.logan,R.drawable.geminiman};
private String[] moviesTitles = new String[]{
       "The Shawshank Redemption","The Godfather","The Dark Knight",
       "Schindler's List","Fight Club","Forrest Gump","Inception","Logan","Gemini Man"};
private String[] moviesYears = new String[]{
       "1994","1972","2008","1993","1999","1994","2010","2017","2019"};
private String[] moviesGenres = new String[]{
       "Drama","Crime","Action","Biography","Drama","Drama","Sci-Fi","Action","Sci-Fi"};
private String[] moviesRates = new String[]{
       "9,3","9,2","9,0","8,9","8,8","8,8","8,8","8,1","-,-"};
  1. “Integer[] moviesImages” or “int[] moviesImages” for images, must be int.
  2. “String[] moviesTitles” for Titles, must be String.
  3. “String[] moviesYears” for Initial release date, you can use int or String but if you choose int you need to add “String.valueOf()” when we will use “.setText()”.
  4. “String[] moviesGenres” for the genre, must be String.
  5. “String[] moviesRates” for the rate, you can use Integer if the user will rate the movie “Advanced Apps”.
  • Now let’s create our ListView Adapter:
Add New java class which will extend BaseAdapter:

ListView

Choose class “Name” our is “movieListAdapter” and click “OK”:

ListView

You can add “extends BaseAdapter” and implements methods or just copy this code:

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class movieListAdapter extends BaseAdapter {
    private Integer[] moviesImages;
    private String[] moviesTitles, moviesYears, moviesGenres, moviesRates;
    private LayoutInflater inflter;
    private Context context;
    private ImageView movieImg;
    private TextView movieTitle, yearMovie, genresMovie, rateMovie;

public movieListAdapter(Integer[] moviesImages, String[] moviesTitles, String[] moviesYears, 
                        String[] moviesGenres, String[] moviesRates, Context context) {
        this.moviesImages = moviesImages;
        this.moviesTitles = moviesTitles;
        this.moviesYears = moviesYears;
        this.moviesGenres = moviesGenres;
        this.moviesRates = moviesRates;
        this.context = context;
        inflter = (LayoutInflater.from(context));
    }
    @Override
    public int getCount() {
        return moviesTitles.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        view = inflter.inflate(R.layout.lsitview_row, null);
        movieImg = view.findViewById(R.id.movieImg);
        movieTitle = view.findViewById(R.id.movieTitle);
        yearMovie = view.findViewById(R.id.yearMovie);
        genresMovie = view.findViewById(R.id.genresMovie);
        rateMovie = view.findViewById(R.id.rateMovie);
        movieImg.setImageResource(moviesImages[position]);
        movieTitle.setText(moviesTitles[position]);
        yearMovie.setText(moviesYears[position]);
        genresMovie.setText(moviesGenres[position]);
        rateMovie.setText(moviesRates[position]);
        return view;
    }}

Your moviesListAdapter must look like this:

ListView

ListView

  • Now Go back to MainActivity and add our Adapter to the onCreate method.

Add this code to onCreate() method:

this.setTitle("Movies List");
listView = findViewById(R.id.listView);
movieListAdapter movieListAdapter = new movieListAdapter(
               moviesImages,moviesTitles,moviesYears,moviesGenres,moviesRates,this);
listView.setAdapter(movieListAdapter)

We added a title to the activity “Movies List” then we identify the ListView and we added a new Adapter from movieListAdapter so we can pass the data then we connect our Listview to the adapter.

Now our MainActivity will look like this:

ListView

  • You can now run the App:

as you can see the app is working :

ListView

I hope that’s Clear & Simple.

Next Time We will learn how to handle clicks on ListView and RecyclerView.

Until thenhave a good time & Happy Coding 😉

 

 

Android Dev

Android Developer.

Leave a Reply

Your email address will not be published. Required fields are marked *