Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

How to load images uploaded from internet using RecyclerView in Android

Tiempo de lectura: 2 minutos

Reading time: 2 minutes

Hello everyone, this time I’m going to explain how to load images from a URL into a RecyclerView in Android.

If you don’t know how to create a RecyclerView, I recommend you visit the previous post on How to Create a RecyclerView in Android.

Now, let’s get started.

The first thing is to add an ImageView inside the layout that represents a row of the RecyclerView. To do this, follow these steps:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="100dp">
<RelativeLayout
android:id="@+id/capaPrincipal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/capaPrincipal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/imagen"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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="100dp"> <RelativeLayout android:id="@+id/capaPrincipal" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:id="@+id/capaPrincipal" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="30dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/imagen" android:layout_width="50dp" android:layout_height="50dp" android:padding="10dp"/> </LinearLayout> </RelativeLayout> </RelativeLayout> </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="100dp">
 
    <RelativeLayout
        android:id="@+id/capaPrincipal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/capaPrincipal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="30dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/imagen"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:padding="10dp"/>
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>

Once added, assign the id “imagen” android:id="@+id/imagen" to reference it from the RecyclerView’s holder as follows:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
public class ViewHolder extends RecyclerView.ViewHolder {
public ImageView imagen;
public int type;
public ViewHolder(View itemView, int type) {
super(itemView);
imagen = itemView.findViewById(R.id.imagen);
this.type = type;
}
}
public class ViewHolder extends RecyclerView.ViewHolder { public ImageView imagen; public int type; public ViewHolder(View itemView, int type) { super(itemView); imagen = itemView.findViewById(R.id.imagen); this.type = type; } }
public class ViewHolder extends RecyclerView.ViewHolder {

    public ImageView imagen;
   
    public int type;
   
    public ViewHolder(View itemView, int type) {
        super(itemView);
       
        imagen = itemView.findViewById(R.id.imagen);
 
        this.type = type;
    }
}

Since this is an image loaded remotely, before adding it to the RecyclerView item, we need to add a library to our project that will handle loading the corresponding image asynchronously directly into the ImageView. For this purpose, we can use two popular libraries: Glide (https://github.com/bumptech/glide) and Picasso (https://square.github.io/picasso/).

In this example, I have used Picasso, but both libraries work similarly.

First, we need to add the library to the app-level build.gradle file under dependencies:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dependencies {
implementation 'com.squareup.picasso:picasso:2.5.2'
}
dependencies { implementation 'com.squareup.picasso:picasso:2.5.2' }
dependencies {
    implementation 'com.squareup.picasso:picasso:2.5.2'
}

Once added, click on “Sync Now” to download the library.

Now we can use the library in our RecyclerView item.

Simply add the following line in the onBindViewHolder method:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {
String imageUrl = "https://devcodelight.com/wp-content/uploads/2022/02/cropped-cropped-cropped-cropped-light_logo-1.png";
Picasso.with(context).load(imageUrl).fit().centerCrop().into(holder.imagen);
}
@Override public void onBindViewHolder(@NonNull ViewHolder holder, final int position) { String imageUrl = "https://devcodelight.com/wp-content/uploads/2022/02/cropped-cropped-cropped-cropped-light_logo-1.png"; Picasso.with(context).load(imageUrl).fit().centerCrop().into(holder.imagen); }
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {

    String imageUrl = "https://devcodelight.com/wp-content/uploads/2022/02/cropped-cropped-cropped-cropped-light_logo-1.png";
    Picasso.with(context).load(imageUrl).fit().centerCrop().into(holder.imagen);
}

Remember to pass the Context context through the RecyclerView constructor.

And that’s it! This is how easily we canReading time: 2 minutes

Hello everyone, this time I’m going to explain how to load images obtained from a URL into a RecyclerView in Android.

If you don’t know how to create a RecyclerView, I recommend you visit the previous post on How to Create a RecyclerView in Android.

Now, let’s get started.

The first thing you need to do is add an ImageView inside the layout that represents a row of the RecyclerView. Follow these steps:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="100dp">
<RelativeLayout
android:id="@+id/capaPrincipal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/capaPrincipal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/imagen"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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="100dp"> <RelativeLayout android:id="@+id/capaPrincipal" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:id="@+id/capaPrincipal" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="30dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/imagen" android:layout_width="50dp" android:layout_height="50dp" android:padding="10dp"/> </LinearLayout> </RelativeLayout> </RelativeLayout> </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="100dp">
 
    <RelativeLayout
        android:id="@+id/capaPrincipal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/capaPrincipal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="30dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/imagen"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:padding="10dp"/>
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>

Once added, assign the id “imagen” android:id="@+id/imagen" to reference it from the RecyclerView’s holder as follows:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
public class ViewHolder extends RecyclerView.ViewHolder {
public ImageView imagen;
public int type;
public ViewHolder(View itemView, int type) {
super(itemView);
imagen = itemView.findViewById(R.id.imagen);
this.type = type;
}
}
public class ViewHolder extends RecyclerView.ViewHolder { public ImageView imagen; public int type; public ViewHolder(View itemView, int type) { super(itemView); imagen = itemView.findViewById(R.id.imagen); this.type = type; } }
public class ViewHolder extends RecyclerView.ViewHolder {

    public ImageView imagen;
   
    public int type;
   
    public ViewHolder(View itemView, int type) {
        super(itemView);
       
        imagen = itemView.findViewById(R.id.imagen);
 
        this.type = type;
    }
}

Since this is an image loaded remotely, before adding it to the RecyclerView item, we need to add a library to our project that will handle loading the corresponding image asynchronously directly into the ImageView. For this purpose, we can use two popular libraries: Glide (https://github.com/bumptech/glide) and Picasso (https://square.github.io/picasso/).

In this example, I have used Picasso, but both libraries work similarly.

First, we need to add the library to the app-level build.gradle file under dependencies:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dependencies {
implementation 'com.squareup.picasso:picasso:2.5.2'
}
dependencies { implementation 'com.squareup.picasso:picasso:2.5.2' }
dependencies {
    implementation 'com.squareup.picasso:picasso:2.5.2'
}

Once added, click on “Sync Now” to download the library.

Now we can use the library in our RecyclerView item.

Simply add the following line in the onBindViewHolder method:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {
String imageUrl = "https://devcodelight.com/wp-content/uploads/2022/02/cropped-cropped-cropped-cropped-light_logo-1.png";
Picasso.with(context).load(imageUrl).fit().centerCrop().into(holder.imagen);
}
@Override public void onBindViewHolder(@NonNull ViewHolder holder, final int position) { String imageUrl = "https://devcodelight.com/wp-content/uploads/2022/02/cropped-cropped-cropped-cropped-light_logo-1.png"; Picasso.with(context).load(imageUrl).fit().centerCrop().into(holder.imagen); }
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {

    String imageUrl = "https://devcodelight.com/wp-content/uploads/2022/02/cropped-cropped-cropped-cropped-light_logo-1.png";
    Picasso.with(context).load(imageUrl).fit().centerCrop().into(holder.imagen);
}

Remember to pass the Context context through the RecyclerView constructor.

And that’s it! This is how easily we can load images into our RecyclerViews.

0

Leave a Comment