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

image

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<List<quotes?>?>() {}.type
        val myQuotes: List<quotes> = 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<List<Cast?>?>() {}.type
        var myActors: List<Cast> = 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).

image

  • 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.

image

  • 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!

image
image

  • Quiz : if you like fun games this one is for you ! 4 diffrent online quizzes to complete with various fun facts and questions ?

image
image

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 ?

fullApp.mp4


Credits

Thanks to Melanie Seltzer & Dimitri Wahyudiputra for all Friends data & quotes ?

GitHub

View Github