Pexels API Jetpack Compose

What is Pexels?

Pexels is a leading platform that provides high-quality, royalty-free stock photos and videos. Whether you're a blogger, web developer, designer, or content creator, Pexels offers an extensive collection of stunning visuals that can enhance your projects—all without worrying about licensing fees.

The best part? You don’t need to provide attribution (though it’s always appreciated). Pexels ensures that you have access to professional-grade images and videos without any cost, making it an invaluable resource for businesses, social media influencers, and website owners.

Why Use Pexels?

• Completely Free – Download and use photos and videos at no cost.
• High-Quality Content – All visuals are carefully curated for professional use.
• No Attribution Required – You can use images and videos without giving credit.
• Diverse Collection – Access a vast library of images, covering various themes and categories.
• User-Friendly Interface – Easily search and filter visuals based on your needs.
• API Access – Developers can integrate Pexels’ content into their apps and websites.

How to Get the Pexels API?

For developers, Pexels offers a powerful API that enables seamless integration of high-quality stock images and videos into applications, websites, and digital products. Here’s how you can get started with the Pexels API:

1. Sign Up on Pexels

To use the API, you need an account. Follow these steps:

• Visit Pexels.com.
• Click on the Sign Up button.
• Create an account using your email, Google, or Facebook.

2. Apply for API Access

• Once you have an account, you’ll need to request access to the API:
• Navigate to the Pexels API page (https://www.pexels.com/api/).
• Click on Request API Key.
• Fill out the application form with details on how you intend to use the API.

3. Get Your API Key

• After submitting the request, the Pexels team will review your application.
• Once approved, you’ll receive a unique API key.
• Use this key to authenticate your requests and fetch images or videos programmatically.

API Features

• Search Photos & Videos – Find media by keyword.
• Curated Collections – Get handpicked collections of visuals.
• Popular Media – Retrieve trending photos and videos.
• Flexible Resolutions – Choose different sizes for different needs.
• Free for Commercial Use – No legal complications.

Best Practices for Using Pexels API

• Use Efficient Queries – Optimize requests to avoid unnecessary API calls.
• Cache Results – Store frequently used images to reduce API requests.
• Follow API Guidelines – Respect usage limits and terms.
• Give Credit When Possible – While not required, crediting photographers supports the community.

Steps to Integrate Pexels API in Jetpack Compose:

1. Get the API Key from Pexels API.
2. Add Retrofit & Coil to fetch and display images.
3. Make an API request using Retrofit.

1. Add Dependencies (build.gradle.kts) ( Dependency we need )

// Jetpack Compose ViewModel
implementation ("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.7")

// Retrofit for API calls
implementation ("com.squareup.retrofit2:retrofit:2.9.0")
implementation ("com.squareup.retrofit2:converter-gson:2.9.0")

// Coil for image loading
implementation ("io.coil-kt:coil-compose:2.6.0")

2. Create Data Model

data class PexelsResponse(
    val photos: List<PexelsPhoto>
)

data class PexelsPhoto(
    val id: Int,
    val src: PexelsSrc
)

data class PexelsSrc(
    val original: String,
    val medium: String
)

3. Create API Service

interface PexelsApiService {
    @GET("search")
    suspend fun searchPhotos(
        @Header("Authorization") apiKey: String,
        @Query("query") query: String,
        @Query("per_page") perPage: Int = 10
    ): PexelsResponse
}

4. Create Retrofit Instance

// Retrofit instance
object RetrofitInstance {
    val api: PexelsApiService by lazy {
        Retrofit.Builder()
            .baseUrl("https://api.pexels.com/v1/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(PexelsApiService::class.java)
    }
}

5. ViewModel to Fetch Data

package com.codingbihar.pexelsgalleryapp

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.launch
import java.io.IOException

class PicturesViewModel : ViewModel() {
    var photos by mutableStateOf<List<PexelsPhoto>>(emptyList()) // Initialize as empty list
        private set

    var isLoading by mutableStateOf(false) // Loading state
        private set

    private val apiKey = "your_api_key" // Add your Pexels API Key here

    // Function to fetch photos
    fun fetchPhotos(query: String) {
        isLoading = true // Set loading state to true when starting to fetch
        viewModelScope.launch {
            try {
                val response = RetrofitInstance.api.searchPhotos(apiKey, query)
                photos = response.photos // Update photos once fetched
            } catch (e: Exception) {
                // Handle HTTP exceptions
                println("HTTP Exception: ${e.message}")
            } catch (e: IOException) {
                // Handle network exceptions
                println("Network Error: ${e.message}")
            } finally {
                isLoading = false // Set loading state to false after fetching completes
            }
        }
    }

    // Function to load some default images (optional)
    fun loadDefaultImages() {
        fetchPhotos("nature") // Load "nature" images on start
    }
}

6. Display Images in Jetpack Compose

package com.codingbihar.pexelsgalleryapp

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import coil.compose.rememberAsyncImagePainter


// Jetpack Compose UI for Displaying Images
@Composable
fun ImageScreen(viewModel: PicturesViewModel = viewModel()) {
    var searchQuery by remember { mutableStateOf("nature") }

    // Trigger loading default images when screen first loads
    LaunchedEffect(Unit) {
        viewModel.loadDefaultImages() // Load default images on start
    }

    Column(modifier = Modifier.padding(46.dp)) {
        // Search TextField
        TextField(
            value = searchQuery,
            onValueChange = { searchQuery = it },
            label = { Text("Search Images") },
            modifier = Modifier.fillMaxWidth()
        )

        // Search Button
        Button(
            onClick = { viewModel.fetchPhotos(searchQuery) },
            modifier = Modifier.padding(vertical = 8.dp)
        ) {
            Text("Search")
        }

        // Show loading indicator when fetching data
        if (viewModel.isLoading) {
            CircularProgressIndicator(modifier = Modifier.align(Alignment.CenterHorizontally))
        } else if (viewModel.photos.isNotEmpty()) {
            // Display images in a grid if data is available
            LazyVerticalGrid(columns = GridCells.Fixed(2), modifier = Modifier.fillMaxSize()) {
                items(viewModel.photos.size) { index ->
                    val photo = viewModel.photos[index]
                    Image(
                        painter = rememberAsyncImagePainter(photo.src.medium),
                        contentDescription = "Pexels Image",
                        modifier = Modifier
                            .padding(4.dp)
                            .fillMaxWidth()
                            .height(150.dp),
                        contentScale = ContentScale.Crop
                    )
                }
            }
        } else {
            // Show a message if no images are found
            Text(text = "No images found", modifier = Modifier.align(Alignment.CenterHorizontally))
        }
    }
}

Note: 

1. Replace "your_api_key" with your actual Pexels API key in Retrofit headers.
2. Add INTERNET PERMISSION in Manifest file

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

Run your app, and you’ll see stunning images from Pexels!

MainActivity:

package com.codingbihar.pexelsgalleryapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.codingbihar.pexelsgalleryapp.ui.theme.PexelsGalleryAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            PexelsGalleryAppTheme {

                ImageScreen()

                /*Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android ",
                        modifier = Modifier.padding(innerPadding)
                    )
                }*/
            }
        }
    }
}

Fianal Output: