F.R.I.E.N.D.S-App
If this frame looks familiar then this app is for you!
This project is an android app inspired by the tv show "Friends" , built using android studio & Kotlin with a sprinkle of awesome 3rd party libraries :)
Dependencies
I've used the following ones in my project:
- Glide : to upload images by URL
implementation 'com.github.bumptech.glide:glide:4.12.0'
- PDFview : to view pdf file in the app
implementation "com.dmitryborodin:pdfview-android:1.1.0"
- gson : to convert data from Json files
implementation 'com.google.code.gson:gson:2.8.8'
- gif : to display gifs
implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.23'
- lottie : to display json drawables
implementation 'com.airbnb.android:lottie:3.0.7'
App Sections
1) Catchphrase
At the top of the main page , I displayed a random quote from my "quotes.json" file , along with a drawable of the Catchphrase's character.
//read the quotes from JSON file, shuffle them and display a random one in the catchphrase bar
val jsonFileString = getJsonFromAssets(this, "quotes.json")
val gson = Gson()
val listQuotesType = object : TypeToken
?>() {}.type
val myQuotes: List
= gson.fromJson(jsonFileString, listQuotesType)
var rand = (myQuotes.indices).random()
var currentQuote = myQuotes[rand]
tvQuote.text="\"${currentQuote.quote}\""
//display the quotes' corresponding image
when(currentQuote.character){
"Monica"->charImageView.setImageResource(R.drawable.monica)
"Ross"->charImageView.setImageResource(R.drawable.ross)
"Joey"->charImageView.setImageResource(R.drawable.joey)
"Phoebe"->charImageView.setImageResource(R.drawable.phoebe)
"Rachel"->charImageView.setImageResource(R.drawable.rachel)
"Chandler"->charImageView.setImageResource(R.drawable.chandler)
}
2) Characters List
With a horizontal layout , I displayed all the actors in my "actors.json" file , each in a card view generated by the recyclerview.
//get all the actors from the JSON file and display them in the recyclerview
val jsonFileString2 = getJsonFromAssets(this, "actors.json")
val listCastType = object : TypeToken
?>() {}.type
var myActors: List
= gson.fromJson(jsonFileString2, listCastType)
myActors= myActors.shuffled()
rvMain.adapter = RecyclerViewAdapter(this,myActors)
rvMain.layoutManager = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)
3) Rounded Buttons
There are 4 rounded themed buttons inspired by Friends' logo, each button has a diffrent sevice as follows:
- Map : with one click you'd find yourself inside Friends' aparetment! just click on Map and it will redirects you to a new page where 2 maps are shown, each has 2 unique secret spots that when clicked , shows an image of the real-life spot (ex:kitchen, livingroom).
- Recipes : ever felt hungry watching all the yummy food in the episodes? click on Recipes and reveal the secrets on "how to pull a monica" !! the cookbook is displayed for the user to view & zoom.
- Episodes Picker : must be hard to choose among all these amazing episodes! so just click on the episode picker which will open a new page and randomly pick an episode for you!
- Quiz : if you like fun games this one is for you ! 4 diffrent online quizzes to complete with various fun facts and questions :)
4) Info Dialog
At the right-top corner there is a yellow info icon which when clicked shows some details regarding the app , my contact info & accounts and credits. Try clicking on the twitter & github icons to be redirected to the corresponding account :)
infoDialog.mp4
Final Result !
Here is the full app , hope you enjoyed it :D
fullApp.mp4
Credits
Thanks to Melanie Seltzer & Dimitri Wahyudiputra for all Friends data & quotes :D