Anime App with Kotlin

Hello developers!

Today I will make an app that uses Jetpack Compose. So a weeb can only find an anime app for that. If you have a better idea and are looking for an API, check this link for free APIs.

What is Jetpack Compose?

Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

If you want dipping litter more you can check this link.

After a few quick introductions, I want to start writing code by summarizing, I will develop an application using jetpack compose in Kotlin. In this application, it will show animes with pictures. Here is the API that I will use. You can see the result from the request. Data has three attributes; Title, image, and address.

A card with a picture and two texts will be sufficient for this application.

Let’s get started!💥

I chose an empty compose activity to create a new app for simplicity.

Give a name to your app,

Run the application,

Here, instead of writing the Greeting function, you can write Text in OnCreate method after the super.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

From this step, I will start the arrangements for the application will make. One row and two columns will be enough for the view to be simple and clear. I want to get a look like this.

The image will appear on the left and the title and address fields will appear on the right.
I created a simple view using Material Design.

Since more than one anime content comes from the API, can turn this image into a list. You can use LazyColumn and LazyRow for this.

Before creating this List, I should get data from API.

Add this lines to your Manifest file,

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

I create a model package and Animes.kt data class. I just had 3 attributes but if your API has more than it you can use JSON To Kotlin -Seal plugin.

data class Animes(
    var title: String,
    var image: String,
    var address: String
)

After this step, create a service package and a new interface class and name it
AnimeService.kt, this interface class will contain our function to get all animes into a list using a Call function from the retrofit.

You can use this implementation for retrofit,

implementation 'com.squareup.retrofit2:retrofit:2.5.0'
implementation 'com.squareup.retrofit2:converter-gson:2.5.0'

I create an object class that will help us to build our services with retrofit and the interface, name it ServiceBuilder.kt

The goal is to create a retrofit with the OkHttp client, which will be in charge of getting our interface up and running.
I’ve provided the ‘base url’ that I’ll append to our interface to access our data in this section.

I create interface for get all animes into a list.

Now, I have anime list. I create a AnimeView.kt for help to send list to MainActivity.

Final structure look like this,

For showing the list, I use LazyColumn. It helps vertically or horizontally with a few lines of code as I will demonstrate in this story.

I create AnimeList Composable. Like the below code it takes AnimeView as a parameter.

class MainActivity : ComponentActivity() {
    private val animeModel = AnimesView()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AnimeListTheme {
                Surface(color = MaterialTheme.colors.background) {
                    AnimeList(animeModel)
                }
            }
        }
    }
}

@Composable
fun AnimeList(aV: AnimesView) {
    LaunchedEffect(Unit, block = {
        aV.getTodoList()
    })
    LazyColumn {
        items(aV.animeList) { anime ->
            AnimeCard(anime)
        }
    }
}

For the final view, change AnimeCard.

I used coil to upload pictures from URL.

implementation("io.coil-kt:coil-compose:1.3.1")

rememberImagePainter help us to get Image from the URL. Here there was another challenge. I had to make a few additions because the image links from the API were broken. If you want to take a look, you can check it from the repo link.

Result

🔗 The full code on GitHub

Conclusion

In this story, we learned how to display a list of items using LazyColumn. Along the way, we dealt with multiple essential comparables to build such UI. We learn how to send a get request to an API and how to handle data.

You can find different APIs and increase your own difficulty.

Good coding!