{"id":69,"date":"2021-10-15T18:42:42","date_gmt":"2021-10-15T18:42:42","guid":{"rendered":"http:\/\/androidappspace.com\/android-building-a-podcast-app-series-1-mini-in-app-player\/"},"modified":"2021-10-15T18:42:42","modified_gmt":"2021-10-15T18:42:42","slug":"android-building-a-podcast-app-series-1-mini-in-app-player","status":"publish","type":"post","link":"http:\/\/androidappspace.com\/android-building-a-podcast-app-series-1-mini-in-app-player\/","title":{"rendered":"Android &#8211; Building a podcast app series: 1. mini in-app player"},"content":{"rendered":"<p><\/p>\n<div>\n<p>Start writing here&#8230;I am currently working on a project to rewrite an existing podcast app that was originally built with xamarin into a fully native Android app. The most important feature of any podcast app is the player, and specifically, the in-app player that has to:<\/p>\n<ul>\n<li>be visible on all screens<\/li>\n<li>have collapsed and expanded view<\/li>\n<\/ul>\n<p>Let\u2019s clarify the second point, the in-app player should have two modes, collapsed mode where the player\u2019s view is small and should sit below the main content. The second mode is expanded mode, where the player\u2019s view should occupy the whole screen. Ideally, there should be an animation when the player is transitioning between those two states. Let\u2019s talk about solving problem number 1.<\/p>\n<h2 id=\"navigation-library\"> Navigation library<\/h2>\n<p>If we use the navigation library and single activity pattern from AAC (android architecture components), we can easily make our in-app player visible on all screens by restricting the navigation host fragment to be above the in-app player\u2019s view. Since the navigation framework loads \/ unloads all views inside the navigation host fragment, we can make all views in our app span just up to the in-app player. If the player is hidden, all views automatically span over it, otherwise, they will span to just above the player.<\/p>\n<p>A nice side effect of using the single activity pattern is the player itself will be configured from one place, main activity, and in combination with a view model, we can implement the player without violating the DRY principle. Now let\u2019s talk about implementing the second feature.<br \/>Layout behavior<\/p>\n<p>Ever since the coordinator layout came out, Android became a lot more flexible in terms of animations and interaction between views. In this specific use case all I had to do was to write a normal constraint layout and add one line to it:<\/p>\n<pre><code class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">androidx.constraintlayout.widget.ConstraintLayout<\/span>\n<span class=\"hljs-attr\">....<\/span>\n<span class=\"hljs-attr\">app:layout_behavior<\/span>=<span class=\"hljs-string\">\"com.google.android.material.bottomsheet.BottomSheetBehavior\"<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>That was enough to have a view that can sit on the bottom of the screen, be expanded and animate those state changes out of the box. Pretty awesome if you ask me. So, how does the final layout look like?<\/p>\n<pre><code class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CoordinatorLayout<\/span>&gt;<\/span>\n   <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">MainContent<\/span>\/&gt;<\/span>\n   <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">InAppPlayer<\/span>\/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">CoordinatorLayout<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>Of course, nothing is this simple, is it? <img class=\"emoji\" draggable=\"false\" alt=\"\ud83d\ude03\" src=\"https:\/\/twemoji.maxcdn.com\/2\/72x72\/1f603.png\"\/>. But, what if our app has tabs and a BottomNavigationView? Our in-app player should, of course, sit above the BottomNavigationView but below the main content. One solution to this edge case is to position the main content above the bottom tabs\u2019 view using constraint layout.<\/p>\n<h2 id=\"dry-principle-and-viewmodel\"> DRY principle and ViewModel<\/h2>\n<p>Since the player exists across multiple screens (fragments), we need a view model to group together all the player features in one place and just reuse the view model across all views. What better way to implement this than to use AAC ViewModel class. We can easily share this view model across fragments and have a player UI in sync at all times. PlayerViewModel can get data from a PodcastRepository class which will make network calls or read from the local database.<\/p>\n<p>Please refer to this GitHub link for the code.<\/p>\n<p>Stay tuned for the next article in this series!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Start writing here&#8230;I am currently working on a project to rewrite an existing podcast app that was originally built with xamarin into a fully native Android app. The most important feature of any podcast app is the player, and specifically, the in-app player that has to: be visible on all screens have collapsed and expanded&hellip;<\/p>\n","protected":false},"author":1,"featured_media":70,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false},"categories":[2],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Android - Building a podcast app series: 1. mini in-app player - Android App Space<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Android - Building a podcast app series: 1. mini in-app player - Android App Space\" \/>\n<meta property=\"og:description\" content=\"Start writing here&#8230;I am currently working on a project to rewrite an existing podcast app that was originally built with xamarin into a fully native Android app. The most important feature of any podcast app is the player, and specifically, the in-app player that has to: be visible on all screens have collapsed and expanded&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho\" \/>\n<meta property=\"og:site_name\" content=\"Android App Space\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-15T18:42:42+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/androidappspace.com\/wp-content\/uploads\/2021\/10\/1f603.png\" \/>\n\t<meta property=\"og:image:width\" content=\"72\" \/>\n\t<meta property=\"og:image:height\" content=\"72\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kvendal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/androidappspace.com\/#website\",\"url\":\"https:\/\/androidappspace.com\/\",\"name\":\"Android App Space\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/androidappspace.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/androidappspace.com\/wp-content\/uploads\/2021\/10\/1f603.png\",\"contentUrl\":\"http:\/\/androidappspace.com\/wp-content\/uploads\/2021\/10\/1f603.png\",\"width\":72,\"height\":72,\"caption\":\"\ud83d\ude03\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#webpage\",\"url\":\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho\",\"name\":\"Android - Building a podcast app series: 1. mini in-app player - Android App Space\",\"isPartOf\":{\"@id\":\"https:\/\/androidappspace.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#primaryimage\"},\"datePublished\":\"2021-10-15T18:42:42+00:00\",\"dateModified\":\"2021-10-15T18:42:42+00:00\",\"author\":{\"@id\":\"https:\/\/androidappspace.com\/#\/schema\/person\/9034e57a80e3c6224ca37e93d596adc5\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/androidappspace.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Android &#8211; Building a podcast app series: 1. mini in-app player\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/androidappspace.com\/#\/schema\/person\/9034e57a80e3c6224ca37e93d596adc5\",\"name\":\"Kvendal\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/androidappspace.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/415cb866ecfc2f7dfb7cc57bf651e953?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/415cb866ecfc2f7dfb7cc57bf651e953?s=96&d=mm&r=g\",\"caption\":\"Kvendal\"},\"sameAs\":[\"http:\/\/androidappspace.com\"],\"url\":\"http:\/\/androidappspace.com\/author\/Kvendal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Android - Building a podcast app series: 1. mini in-app player - Android App Space","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho","og_locale":"en_US","og_type":"article","og_title":"Android - Building a podcast app series: 1. mini in-app player - Android App Space","og_description":"Start writing here&#8230;I am currently working on a project to rewrite an existing podcast app that was originally built with xamarin into a fully native Android app. The most important feature of any podcast app is the player, and specifically, the in-app player that has to: be visible on all screens have collapsed and expanded&hellip;","og_url":"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho","og_site_name":"Android App Space","article_published_time":"2021-10-15T18:42:42+00:00","og_image":[{"width":72,"height":72,"url":"http:\/\/androidappspace.com\/wp-content\/uploads\/2021\/10\/1f603.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kvendal","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/androidappspace.com\/#website","url":"https:\/\/androidappspace.com\/","name":"Android App Space","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/androidappspace.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#primaryimage","inLanguage":"en-US","url":"http:\/\/androidappspace.com\/wp-content\/uploads\/2021\/10\/1f603.png","contentUrl":"http:\/\/androidappspace.com\/wp-content\/uploads\/2021\/10\/1f603.png","width":72,"height":72,"caption":"\ud83d\ude03"},{"@type":"WebPage","@id":"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#webpage","url":"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho","name":"Android - Building a podcast app series: 1. mini in-app player - Android App Space","isPartOf":{"@id":"https:\/\/androidappspace.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#primaryimage"},"datePublished":"2021-10-15T18:42:42+00:00","dateModified":"2021-10-15T18:42:42+00:00","author":{"@id":"https:\/\/androidappspace.com\/#\/schema\/person\/9034e57a80e3c6224ca37e93d596adc5"},"breadcrumb":{"@id":"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.codementor.io\/abdurahmanadilovic644\/android-building-a-podcast-app-series-1-mini-in-app-player-17y9qmrhho#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/androidappspace.com\/"},{"@type":"ListItem","position":2,"name":"Android &#8211; Building a podcast app series: 1. mini in-app player"}]},{"@type":"Person","@id":"https:\/\/androidappspace.com\/#\/schema\/person\/9034e57a80e3c6224ca37e93d596adc5","name":"Kvendal","image":{"@type":"ImageObject","@id":"https:\/\/androidappspace.com\/#personlogo","inLanguage":"en-US","url":"http:\/\/1.gravatar.com\/avatar\/415cb866ecfc2f7dfb7cc57bf651e953?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/415cb866ecfc2f7dfb7cc57bf651e953?s=96&d=mm&r=g","caption":"Kvendal"},"sameAs":["http:\/\/androidappspace.com"],"url":"http:\/\/androidappspace.com\/author\/Kvendal\/"}]}},"jetpack_featured_media_url":"http:\/\/androidappspace.com\/wp-content\/uploads\/2021\/10\/1f603.png","_links":{"self":[{"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/posts\/69"}],"collection":[{"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":0,"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/media\/70"}],"wp:attachment":[{"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/androidappspace.com\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}