There are so many apps that are present in the play store which provides details related to different books inside it. Book Library is considered one of the basic applications which a beginner can develop to learn some basic concepts within android such as JSON parsing, using recycler view, and others. In this article, we will be building a simple Book Library application to display different types of books. We will be using Google Books API for building this application.
Note: If you are looking to build a Book Library application using Google Books API in android using Java. Check out the following article: How to Build a Book Library App using Google Books API in Android using Java
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Add the dependency for Volley in your Gradle files
Navigate to the app > Gradle Scripts > build.gradle file and add the below dependency in the dependencies section.
implementation 'com.android.volley:volley:1.1.1' implementation 'com.squareup.picasso:picasso:2.71828'
After adding the below dependencies in your Gradle file now sync your project to install dependencies.
Step 3: Adding permissions for the Internet
Navigate to the app > AndroidManifest.xml and add the below permissions to it.
< uses-permission android:name = "android.permission.INTERNET" />
< uses-permission android:name = "android.permission.ACCESS_NETWORK_STATE" />
|
Step 4: Working with the activity_main.xml file
Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.
<? xml version = "1.0" encoding = "utf-8" ?>
<!--on below line we are creating a swipe to refresh layout--> < RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:fillViewport = "true"
android:orientation = "vertical"
tools:context = ".MainActivity" >
< LinearLayout
android:id = "@+id/idLLsearch"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal"
android:weightSum = "5" >
<!--edit text for getting the search
query for book from user-->
< EditText
android:id = "@+id/idEdtSearchBooks"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_weight = "4" />
<!--image button for our search button -->
< ImageButton
android:id = "@+id/idBtnSearch"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_weight = "1"
android:src = "@drawable/ic_search" />
</ LinearLayout >
<!--recycler view for displaying our list of books-->
< androidx.recyclerview.widget.RecyclerView
android:id = "@+id/idRVBooks"
android:layout_width = "match_parent"
app:layoutManager = "androidx.recyclerview.widget.GridLayoutManager"
android:layout_height = "match_parent"
android:layout_below = "@id/idLLsearch" />
<!--progressbar for displaying our loading indicator-->
< ProgressBar
android:id = "@+id/idLoadingPB"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerInParent = "true"
android:visibility = "gone" />
</ RelativeLayout >
|
Step 5: Creating a Modal Class for storing our data from the API
For creating a new Modal class. Navigate to the app > java > your app’s package name > Right-click on it and Click on New > Kotlin class and give a name to our java class as BookRVModal and add the below code to it. Comments are added in the code to get to know in more detail.
package com.gtappdevelopers.kotlingfgproject
data class BookRVModal(
// creating string, int and array list
// variables for our book details
var title: String,
var subtitle: String,
var authors: ArrayList<String>,
var publisher: String,
var publishedDate: String,
var description: String,
var pageCount: Int,
var thumbnail: String,
var previewLink: String,
var infoLink: String,
var buyLink: String
) |
Step 6: Create a new layout resource file
Go to the app > res > layout > right-click > New > Layout Resource File and name the file as book_item and add the following code to this file.
<? xml version = "1.0" encoding = "utf-8" ?>
< androidx.cardview.widget.CardView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:layout_margin = "5dp"
app:cardCornerRadius = "5dp"
app:cardElevation = "4dp" >
<!--on below line we are creating a
linear layout for grid view item-->
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "vertical" >
<!--on below line we are creating
a simple image view-->
< ImageView
android:id = "@+id/idIVBook"
android:layout_width = "match_parent"
android:layout_height = "100dp"
android:layout_gravity = "center"
android:layout_margin = "8dp"
android:padding = "5dp"
android:scaleType = "fitCenter"
android:src = "@mipmap/ic_launcher" />
<!--on below line we are creating
a simple text view-->
< TextView
android:id = "@+id/idTVBookName"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:lines = "2"
android:maxLines = "2"
android:padding = "4dp"
android:text = "@string/app_name"
android:textAlignment = "center"
android:textColor = "@color/black"
android:textSize = "12sp"
android:textStyle = "bold"
tools:ignore = "RtlCompat" />
<!--on below line we are creating
a text view for page number-->
< TextView
android:id = "@+id/idTVBookPages"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_margin = "3dp"
android:text = "Book Pages"
android:textAlignment = "center"
android:textColor = "@color/black"
android:textSize = "10sp" />
</ LinearLayout >
</ androidx.cardview.widget.CardView >
|
Step 7: Creating a new Activity for displaying our Book Info in detail
Navigate to the app > java > your app’s package name > Right-click on it and click on New > Activity > Select Empty Activity and name it as BookDetailsActivity. Make sure to select Empty Activity.
Step 8: Creating an Adapter class for setting our data to the item of RecyclerView
Navigate to the app > java > your app’s package name > Right-click on it Click on New > Kotlin class and name it as BookRVAdapter and add the below code to it. Comments are added in the code to get to know in more detail.
package com.gtappdevelopers.kotlingfgproject
import android.content.Context
import android.content.Intent
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.squareup.picasso.Picasso
class BookRVAdapter(
// on below line we are passing variables
// as course list and context
private var bookList: ArrayList<BookRVModal>,
private var ctx: Context
) : RecyclerView.Adapter<BookRVAdapter.BookViewHolder>() { override fun onCreateViewHolder(
parent: ViewGroup,
viewType: Int
): BookRVAdapter.BookViewHolder {
// this method is use to inflate the layout file
// which we have created for our recycler view.
// on below line we are inflating our layout file.
val itemView = LayoutInflater.from(parent.context).inflate(
R.layout.book_item,
parent, false
)
// at last we are returning our view holder
// class with our item View File.
return BookRVAdapter.BookViewHolder(itemView)
}
override fun onBindViewHolder(holder: BookRVAdapter.BookViewHolder, position: Int) {
val bookInfo = bookList.get(position)
// below line is use to set image from URL in our image view.
Picasso.get().load(bookInfo.thumbnail).into(holder.bookIV);
holder.bookTitleTV.text = bookInfo.title
holder.bookPagesTV.text = "Pages : " + bookInfo.pageCount
// below line is use to add on click listener for our item of recycler view.
holder.itemView.setOnClickListener {
// inside on click listener method we are calling a new activity
// and passing all the data of that item in next intent.
val i = Intent(ctx, BookDetailsActivity:: class .java)
i.putExtra( "title" , bookInfo.title)
i.putExtra( "subtitle" , bookInfo.subtitle)
i.putExtra( "authors" , bookInfo.authors)
i.putExtra( "publisher" , bookInfo.publisher)
i.putExtra( "publishedDate" , bookInfo.publishedDate)
i.putExtra( "description" , bookInfo.description)
i.putExtra( "pageCount" , bookInfo.pageCount)
i.putExtra( "thumbnail" , bookInfo.thumbnail)
i.putExtra( "previewLink" , bookInfo.previewLink)
i.putExtra( "infoLink" , bookInfo.infoLink)
i.putExtra( "buyLink" , bookInfo.buyLink)
// after passing that data we are
// starting our new intent.
ctx.startActivity(i)
}
}
override fun getItemCount(): Int {
return bookList.size
}
class BookViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
// on below line we are initializing our
// course name text view and our image view.
val bookTitleTV: TextView = itemView.findViewById(R.id.idTVBookName)
val bookPagesTV: TextView = itemView.findViewById(R.id.idTVBookPages)
val bookIV: ImageView = itemView.findViewById(R.id.idIVBook)
}
} |
Step 9: Working with the activity_book_details.xml file
Navigate to app>res>layout>activity_book_details.cml file and add the below code to it. Comments are added in the code to get to know in detail.
<? xml version = "1.0" encoding = "utf-8" ?>
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".BookDetailsActivity" >
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical" >
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal" >
<!--Image view for displaying our book image-->
< ImageView
android:id = "@+id/idIVbook"
android:layout_width = "130dp"
android:layout_height = "160dp"
android:layout_margin = "18dp" />
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "20dp"
android:orientation = "vertical" >
<!--Text view for displaying book publisher-->
< TextView
android:id = "@+id/idTVpublisher"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:padding = "4dp"
android:text = "Publisher"
android:textColor = "@color/black"
android:textSize = "15sp" />
<!--text view for displaying number of pages of book-->
< TextView
android:id = "@+id/idTVNoOfPages"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "4dp"
android:padding = "4dp"
android:text = "Number of Pages"
android:textColor = "@color/black"
android:textSize = "15sp" />
<!--text view for displaying book publish date-->
< TextView
android:id = "@+id/idTVPublishDate"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "4dp"
android:padding = "4dp"
android:text = "Publish Date"
android:textColor = "@color/black"
android:textSize = "15sp" />
</ LinearLayout >
</ LinearLayout >
<!--text view for displaying book title-->
< TextView
android:id = "@+id/idTVTitle"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_margin = "8dp"
android:padding = "4dp"
android:text = "title"
android:textColor = "@color/black"
android:textSize = "15sp" />
<!--text view for displaying book subtitle-->
< TextView
android:id = "@+id/idTVSubTitle"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_margin = "8dp"
android:padding = "4dp"
android:text = "subtitle"
android:textColor = "@color/black"
android:textSize = "12sp" />
<!--text view for displaying book description-->
< TextView
android:id = "@+id/idTVDescription"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_margin = "8dp"
android:padding = "4dp"
android:text = "description"
android:textColor = "@color/black"
android:textSize = "12sp" />
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_margin = "8dp"
android:orientation = "horizontal"
android:weightSum = "2" >
<!--button for displaying book preview-->
< Button
android:id = "@+id/idBtnPreview"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_margin = "4dp"
android:layout_weight = "1"
android:text = "Preview"
android:textAllCaps = "false" />
<!--button for opening buying page of the book-->
< Button
android:id = "@+id/idBtnBuy"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_margin = "4dp"
android:layout_weight = "1"
android:text = "Buy"
android:textAllCaps = "false" />
</ LinearLayout >
</ LinearLayout >
</ ScrollView >
|
Step 10: Working with the BookDetailsActivity.kt file
Go to the BookDetailsActivity.kt file and refer to the following code. Below is the code for the BookDetailsActivity.kt file. Comments are added inside the code to understand the code in more detail.
package com.gtappdevelopers.kotlingfgproject
import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.squareup.picasso.Picasso
class BookDetailsActivity : AppCompatActivity() {
// creating variables for strings,text view,
// image views and button.
lateinit var titleTV: TextView
lateinit var subtitleTV: TextView
lateinit var publisherTV: TextView
lateinit var descTV: TextView
lateinit var pageTV: TextView
lateinit var publisherDateTV: TextView
lateinit var previewBtn: Button
lateinit var buyBtn: Button
lateinit var bookIV: ImageView
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_book_details)
// initializing our variables.
titleTV = findViewById(R.id.idTVTitle)
subtitleTV = findViewById(R.id.idTVSubTitle)
publisherTV = findViewById(R.id.idTVpublisher)
descTV = findViewById(R.id.idTVDescription)
pageTV = findViewById(R.id.idTVNoOfPages)
publisherDateTV = findViewById(R.id.idTVPublishDate)
previewBtn = findViewById(R.id.idBtnPreview)
buyBtn = findViewById(R.id.idBtnBuy)
bookIV = findViewById(R.id.idIVbook)
// getting the data which we have passed from our adapter class.
val title = getIntent().getStringExtra( "title" )
val subtitle = getIntent().getStringExtra( "subtitle" )
val publisher = getIntent().getStringExtra( "publisher" )
val publishedDate = getIntent().getStringExtra( "publishedDate" )
val description = getIntent().getStringExtra( "description" )
val pageCount = getIntent().getIntExtra( "pageCount" , 0 )
val thumbnail = getIntent().getStringExtra( "thumbnail" )
val previewLink = getIntent().getStringExtra( "previewLink" )
val infoLink = getIntent().getStringExtra( "infoLink" )
val buyLink = getIntent().getStringExtra( "buyLink" )
// after getting the data we are setting
// that data to our text views and image view.
titleTV.setText(title)
subtitleTV.setText(subtitle)
publisherTV.setText(publisher)
publisherDateTV.setText( "Published On : " + publishedDate)
descTV.setText(description)
pageTV.setText( "No Of Pages : " + pageCount)
Picasso.get().load(thumbnail).into(bookIV)
// adding on click listener for our preview button.
previewBtn.setOnClickListener {
if (previewLink.isNullOrEmpty()) {
// below toast message is displayed
// when preview link is not present.
Toast.makeText(
this @BookDetailsActivity ,
"No preview Link present" ,
Toast.LENGTH_SHORT
)
.show()
}
// if the link is present we are opening
// that link via an intent.
val uri: Uri = Uri.parse(previewLink)
val i = Intent(Intent.ACTION_VIEW, uri)
startActivity(i)
}
// adding click listener for buy button
buyBtn.setOnClickListener {
if (buyLink.isNullOrEmpty()) {
// below toast message is displaying
// when buy link is empty.
Toast.makeText(
this @BookDetailsActivity ,
"No buy page present for this book" ,
Toast.LENGTH_SHORT
).show()
}
// if the link is present we are opening
// the link via an intent.
val uri = Uri.parse(buyLink)
val i = Intent(Intent.ACTION_VIEW, uri)
startActivity(i)
}
}
} |
Step 11: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
package com.gtappdevelopers.kotlingfgproject
import android.os.Bundle
import android.view.View
import android.widget.EditText
import android.widget.ImageButton
import android.widget.ProgressBar
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.android.volley.Request
import com.android.volley.RequestQueue
import com.android.volley.toolbox.JsonObjectRequest
import com.android.volley.toolbox.Volley
class MainActivity : AppCompatActivity() {
// on below line we are creating variables.
lateinit var mRequestQueue: RequestQueue
lateinit var booksList: ArrayList<BookRVModal>
lateinit var loadingPB: ProgressBar
lateinit var searchEdt: EditText
lateinit var searchBtn: ImageButton
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// on below line we are initializing
// our variable with their ids.
loadingPB = findViewById(R.id.idLoadingPB)
searchEdt = findViewById(R.id.idEdtSearchBooks)
searchBtn = findViewById(R.id.idBtnSearch)
// adding click listener for search button
searchBtn.setOnClickListener {
loadingPB.visibility = View.VISIBLE
// checking if our edittext field is empty or not.
if (searchEdt.text.toString().isNullOrEmpty()) {
searchEdt.setError( "Please enter search query" )
}
// if the search query is not empty then we are
// calling get book info method to load all
// the books from the API.
getBooksData(searchEdt.getText().toString());
}
}
private fun getBooksData(searchQuery: String) {
// creating a new array list.
booksList = ArrayList()
// below line is use to initialize
// the variable for our request queue.
mRequestQueue = Volley.newRequestQueue( this @MainActivity )
// below line is use to clear cache this
// will be use when our data is being updated.
mRequestQueue.cache.clear()
// below is the url for getting data from API in json format.
// below line we are creating a new request queue.
val queue = Volley.newRequestQueue( this @MainActivity )
// on below line we are creating a variable for request
// and initializing it with json object request
val request = JsonObjectRequest(Request.Method.GET, url, null , { response ->
loadingPB.setVisibility(View.GONE);
// inside on response method we are extracting all our json data.
try {
val itemsArray = response.getJSONArray( "items" )
for (i in 0 until itemsArray.length()) {
val itemsObj = itemsArray.getJSONObject(i)
val volumeObj = itemsObj.getJSONObject( "volumeInfo" )
val title = volumeObj.optString( "title" )
val subtitle = volumeObj.optString( "subtitle" )
val authorsArray = volumeObj.getJSONArray( "authors" )
val publisher = volumeObj.optString( "publisher" )
val publishedDate = volumeObj.optString( "publishedDate" )
val description = volumeObj.optString( "description" )
val pageCount = volumeObj.optInt( "pageCount" )
val imageLinks = volumeObj.optJSONObject( "imageLinks" )
val thumbnail = imageLinks.optString( "thumbnail" )
val previewLink = volumeObj.optString( "previewLink" )
val infoLink = volumeObj.optString( "infoLink" )
val saleInfoObj = itemsObj.optJSONObject( "saleInfo" )
val buyLink = saleInfoObj.optString( "buyLink" )
val authorsArrayList: ArrayList<String> = ArrayList()
if (authorsArray.length() != 0 ) {
for (j in 0 until authorsArray.length()) {
authorsArrayList.add(authorsArray.optString(i))
}
}
// after extracting all the data we are
// saving this data in our modal class.
val bookInfo = BookRVModal(
title,
subtitle,
authorsArrayList,
publisher,
publishedDate,
description,
pageCount,
thumbnail,
previewLink,
infoLink,
buyLink
)
// below line is use to pass our modal
// class in our array list.
booksList.add(bookInfo)
// below line is use to pass our
// array list in adapter class.
val adapter = BookRVAdapter(booksList, this @MainActivity )
// below line is use to add linear layout
// manager for our recycler view.
val layoutManager = GridLayoutManager( this , 3 )
val mRecyclerView = findViewById<RecyclerView>(R.id.idRVBooks) as RecyclerView
// in below line we are setting layout manager and
// adapter to our recycler view.
mRecyclerView.layoutManager = layoutManager
mRecyclerView.adapter = adapter
}
} catch (e: Exception) {
e.printStackTrace()
}
}, { error ->
// in this case we are simply displaying a toast message.
Toast.makeText( this @MainActivity , "No books found.." , Toast.LENGTH_SHORT)
.show()
})
// at last we are adding our
// request to our queue.
queue.add(request)
}
} |
Now run your application to see the output of it.
Output: