{"id":2915,"date":"2020-07-04T06:01:27","date_gmt":"2020-07-04T00:31:27","guid":{"rendered":"https:\/\/developersbreach.com\/?p=2915"},"modified":"2025-02-08T23:46:38","modified_gmt":"2025-02-08T18:16:38","slug":"shared-element-transition-android","status":"publish","type":"post","link":"https:\/\/developersbreach.com\/shared-element-transition-android\/","title":{"rendered":"Shared element transition in fragments Android"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hey people! Welcome to my blog on shared element transition using fragments with navigation component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we begin with the implementation it is important to understand the difference between element transition and other such as container transforms.<br>Container transforms opens a View from a ViewGroup into a fragment or activity as a whole. Whereas, element or shared element transition only moves the views from one place to other.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);background-color:#1e1e1e;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;}.kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;text-transform:none;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-toggle-icon-style-basiccircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-toggle-icon-style-basiccircle .kb-table-of-contents-icon-trigger:before, .kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-toggle-icon-style-arrowcircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-toggle-icon-style-arrowcircle .kb-table-of-contents-icon-trigger:before, .kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-toggle-icon-style-xclosecircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id8835_acf0cc-ff .kb-toggle-icon-style-xclosecircle .kb-table-of-contents-icon-trigger:before{background-color:#1e1e1e;}<\/style>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/_sCbEy5A4_I?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-add-dependencies-to-project\">1. Add dependencies to project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Start with new android studio project choosing <strong>Empty Activity<\/strong>.<br>Give project and package name and select language <strong>Kotlin<\/strong>.<br>Minimum SDK as <strong>API 21: Lollipop<\/strong> and finish<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>gradle.build(Module: app)<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-comment\" style=\"color: grey;\">\/\/ ConstraintLayout<\/span>\nimplementation <span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">'androidx.constraintlayout:constraintlayout:1.1.3'<\/span>\n<span class=\"hljs-comment\" style=\"color: grey;\">\/\/ Material Design Components<\/span>\nimplementation <span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">'com.google.android.material:material:1.1.0'<\/span>\n<span class=\"hljs-comment\" style=\"color: grey;\">\/\/ Navigation Component<\/span>\nimplementation <span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"androidx.navigation:navigation-fragment-ktx:2.3.0\"<\/span>\nimplementation <span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"androidx.navigation:navigation-ui-ktx:2.3.0\"<\/span>\n<span class=\"hljs-comment\" style=\"color: grey;\">\/\/ RecyclerView<\/span>\nimplementation <span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">'androidx.recyclerview:recyclerview:1.1.0'<\/span><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-create-destination-fragments\">2. Create destination fragments<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We need two fragments for <strong>shared element transition<\/strong> to take place. First fragment has <strong>RecyclerView<\/strong> list data and Second fragment has detail for each item from the list. <br><br>So create two blank fragments with names as follows and leave them empty for now:<br><strong>ListFragment<\/strong><code><strong>.kt<\/strong><\/code> with <strong>fragment_list.xml<\/strong><br><strong>DetailFragment.kt<\/strong> with <strong>fragment_detail.xml<\/strong><br>If you are unsure of this, take this as reference. <a href=\"https:\/\/gist.github.com\/3c0ca01bdcd90eaa4f5965f68b5517f1\" target=\"_blank\" rel=\"noreferrer noopener\">BlankFragment<\/a> and <a href=\"https:\/\/gist.github.com\/30b4aca885eab80c578d737d5c1daf32\" target=\"_blank\" rel=\"noreferrer noopener\">fragment_blank.xml<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-make-navigation-graph-and-attach-to-activity\">3. Make navigation graph and attach to activity<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s create a graph to connect all destinations in our app with actions. In our case we connect previously created empty fragments.<br><br>Right click on <strong>res<\/strong> <code>--&gt;<\/code> <strong>New<\/strong> <code>--&gt;<\/code> <strong>Android Resource File<\/strong><br>In the dialog section:<br>File name <code>--&gt;<\/code> <strong>nav_graph<\/strong><br>Resource type <code>--&gt;<\/code> <strong>Navigation<\/strong> and then click Ok.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Attach graph to Activity :<\/strong><br>Let&#8217;s make our <strong>MainActivity<\/strong><span style=\"color:#000000\" class=\"has-inline-color\"><strong> <\/strong><\/span>class as default navigation host for all fragments by attaching our navigation graph.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>activity_main.xml:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"php\"><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">&lt;?<\/span>xml version=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"1.0\"<\/span> encoding=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"utf-8\"<\/span><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">?&gt;<\/span><\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.constraintlayout.widget.ConstraintLayout<\/span> \n    <span class=\"hljs-attr\">xmlns:android<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\n    <span class=\"hljs-attr\">xmlns:app<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\n    <span class=\"hljs-attr\">xmlns:tools<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/tools\"<\/span>\n    <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n    <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n    <span class=\"hljs-attr\">tools:context<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\".MainActivity\"<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">fragment<\/span>\n        <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/nav_host_fragment\"<\/span>\n        <span class=\"hljs-attr\">android:name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"androidx.navigation.fragment.NavHostFragment\"<\/span>\n        <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n        <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n        <span class=\"hljs-attr\">app:defaultNavHost<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"true\"<\/span>\n        <span class=\"hljs-attr\">app:navGraph<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@navigation\/nav_graph\"<\/span>\n        <span class=\"hljs-attr\">tools:ignore<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"FragmentTagUsage\"<\/span> \/&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.constraintlayout.widget.ConstraintLayout<\/span>&gt;<\/span><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s set <strong>NavController<span style=\"color:#000000\" class=\"has-inline-color\"> <\/span><\/strong>with <strong>ActionBar <\/strong>using <strong>NavigationUI <\/strong>to the activity class<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>MainActivity.kt:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.os.Bundle\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.appcompat.app.AppCompatActivity\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.navigation.NavController\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.navigation.findNavController\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.navigation.ui.NavigationUI\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">MainActivity<\/span> : <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">AppCompatActivity<\/span><\/span>() {\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> lateinit <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">var<\/span> navController: NavController\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreate<\/span><span class=\"hljs-params\">(savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?)<\/span><\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">super<\/span>.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_main)\n        navController = <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">this<\/span>.findNavController(R.id.nav_host_fragment)\n        NavigationUI.setupActionBarWithNavController(<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">this<\/span>, navController)\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onSupportNavigateUp<\/span><span class=\"hljs-params\">()<\/span><\/span>: <span class=\"hljs-built_in\">Boolean<\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">return<\/span> navController.navigateUp()\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-connect-destinations-with-actions\">4. Connect destinations with actions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open <strong>nav_graph.xml<\/strong> file that you have created earlier, in that file from the toolbar go to <strong>Design<\/strong> section.<br>Click the <strong>New Destination<\/strong> icon to see available destinations to add.<br><br>Locate <strong>fragment_list<\/strong> and then click to insert, similarly add <strong>fragment_detail<\/strong> to the graph.<br>Now arrange the layouts properly. Select <strong>listFragment<\/strong> and drag the connection to <strong>detailFragment<\/strong>.<br><br>Here&#8217;s the xml layout for what we did.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>nav_graph.xml:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"php\"><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">&lt;?<\/span>xml version=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"1.0\"<\/span> encoding=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"utf-8\"<\/span><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">?&gt;<\/span><\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">navigation<\/span>\n    <span class=\"hljs-attr\">xmlns:android<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\n    <span class=\"hljs-attr\">xmlns:app<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\n    <span class=\"hljs-attr\">xmlns:tools<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/tools\"<\/span>\n    <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/nav_graph\"<\/span>\n    <span class=\"hljs-attr\">app:startDestination<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@id\/listFragment\"<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">fragment<\/span>\n        <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/listFragment\"<\/span>\n        <span class=\"hljs-attr\">android:name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"com.developersbreach.myapplication.ListFragment\"<\/span>\n        <span class=\"hljs-attr\">android:label<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"List\"<\/span>\n        <span class=\"hljs-attr\">tools:layout<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@layout\/fragment_list\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">action<\/span>\n            <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/listToDetailFragment\"<\/span>\n            <span class=\"hljs-attr\">app:destination<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@id\/detailFragment\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">fragment<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">fragment<\/span>\n        <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/detailFragment\"<\/span>\n        <span class=\"hljs-attr\">android:name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"com.developersbreach.myapplication.DetailFragment\"<\/span>\n        <span class=\"hljs-attr\">android:label<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"Detail\"<\/span>\n        <span class=\"hljs-attr\">tools:layout<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@layout\/fragment_detail\"<\/span> \/&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">navigation<\/span>&gt;<\/span><\/pre>\n\n\n<div class=\"lazyblock-text-highlight-5poiQ wp-block-lazyblock-text-highlight\"><p>\r\n  <mark style=\"background-color: #fffadd; padding: 0.25em;\">\r\n    Now run the app and you will be able to see blank screen with no views to make sure everything is working.\r\n  <\/mark>\r\n<\/p><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"5-create-classes-to-show-recyclerview-and-data\">5. Create classes to show RecyclerView and data<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We need data such as text string resources to show in layout, let&#8217;s copy the strings for showing titles and other data, colors, drawables and styles for the app.<br>Get all the strings and paste into your <a rel=\"noreferrer noopener\" href=\"https:\/\/gist.github.com\/15ec0ada003633a9e244c1177375a279\" target=\"_blank\"><span style=\"text-decoration: underline;\">strings.xml file<\/span><\/a>.<br>Get all the colors and paste into your <a rel=\"noreferrer noopener\" href=\"https:\/\/gist.github.com\/b2c6215cb996d466e4ffc31adcc42693\" target=\"_blank\"><span style=\"text-decoration: underline;\">colors.xml file<\/span><\/a>.<br>Get all the styles and paste into your <a rel=\"noreferrer noopener\" href=\"https:\/\/gist.github.com\/30df42a355ad2c2a5ad8a646e3de815c\" target=\"_blank\"><span style=\"text-decoration: underline;\">styles.xml file<\/span><\/a>.<br>Get all drawables and paste into your <span style=\"text-decoration: underline;\"><a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/drive\/folders\/1DDOw4Y5CePecWQsuI5gTY6KxNveO0Mnx?usp=sharing\" target=\"_blank\">drawables<\/a><\/span> folder.<br><br>Now let&#8217;s create a data model class <strong>Sports.kt<\/strong> which helps in making a list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Sports.kt:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.content.Context\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.os.Parcelable\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> com.developersbreach.sharedelementtransitionexample.R\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> kotlinx.android.parcel.Parcelize\n\n<span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">@Parcelize<\/span>\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">data<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">Sports<\/span><\/span>(\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> id: <span class=\"hljs-built_in\">Int<\/span>,\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> banner: <span class=\"hljs-built_in\">Int<\/span>,\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> title: String,\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> about: String\n) :\n    Parcelable {\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">companion<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">object<\/span> {\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">sportsList<\/span><span class=\"hljs-params\">(context: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Context<\/span>)<\/span><\/span>: List&lt;Sports&gt; {\n            <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">return<\/span> listOf(\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">0<\/span>, R.drawable.ic_rugby,\n                    context.getString(R.string.title_rugby),\n                    context.getString(R.string.about_rugby)\n                ),\n                Sports(\n                    <span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">1<\/span>, R.drawable.ic_cricket,\n                    context.getString(R.string.title_cricket),\n                    context.getString(R.string.about_cricket)\n                ),\n                Sports(\n                    <span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">2<\/span>, R.drawable.ic_hockey,\n                    context.getString(R.string.title_hockey),\n                    context.getString(R.string.about_hockey)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">3<\/span>, R.drawable.ic_basketball,\n                    context.getString(R.string.title_basketball),\n                    context.getString(R.string.about_basketball)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">4<\/span>, R.drawable.ic_volleyball,\n                    context.getString(R.string.title_volleyball),\n                    context.getString(R.string.about_volleyball)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">5<\/span>, R.drawable.ic_esports,\n                    context.getString(R.string.title_esports),\n                    context.getString(R.string.about_esports)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">6<\/span>, R.drawable.ic_kabaddi,\n                    context.getString(R.string.title_kabbadi),\n                    context.getString(R.string.about_kabbadi)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">7<\/span>, R.drawable.ic_baseball,\n                    context.getString(R.string.title_baseball),\n                    context.getString(R.string.about_baseball)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">8<\/span>, R.drawable.ic_mma,\n                    context.getString(R.string.title_mma),\n                    context.getString(R.string.about_mma)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">9<\/span>, R.drawable.ic_soccer,\n                    context.getString(R.string.title_soccer),\n                    context.getString(R.string.about_soccer)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">10<\/span>, R.drawable.ic_handball,\n                    context.getString(R.string.title_handball),\n                    context.getString(R.string.about_handball)\n                ),\n                Sports(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">11<\/span>, R.drawable.ic_tennis,\n                    context.getString(R.string.title_tennis),\n                    context.getString(R.string.about_tennis)\n                )\n            )\n        }\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Create item_sports layout file to show each item in list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>item_sports.xml:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"php\"><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">&lt;?<\/span>xml version=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"1.0\"<\/span> encoding=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"utf-8\"<\/span><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">?&gt;<\/span><\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">com.google.android.material.card.MaterialCardView<\/span>\n    <span class=\"hljs-attr\">xmlns:android<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\n    <span class=\"hljs-attr\">xmlns:app<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\n    <span class=\"hljs-attr\">xmlns:tools<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/tools\"<\/span>\n    <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n    <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"wrap_content\"<\/span>\n    <span class=\"hljs-attr\">app:cardCornerRadius<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"8dp\"<\/span>\n    <span class=\"hljs-attr\">app:cardElevation<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"6dp\"<\/span>\n    <span class=\"hljs-attr\">app:cardUseCompatPadding<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"true\"<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.constraintlayout.widget.ConstraintLayout<\/span>\n        <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n        <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"wrap_content\"<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">ImageView<\/span>\n            <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/sports_item_image_view\"<\/span>\n            <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"0dp\"<\/span>\n            <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"0dp\"<\/span>\n            <span class=\"hljs-attr\">android:padding<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"16dp\"<\/span>\n            <span class=\"hljs-attr\">android:scaleType<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"fitCenter\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintDimensionRatio<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"2:2\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintLeft_toLeftOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintRight_toRightOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintTop_toTopOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">tools:ignore<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"ContentDescription\"<\/span>\n            <span class=\"hljs-attr\">tools:src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@drawable\/ic_hockey\"<\/span> \/&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">TextView<\/span>\n            <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/title_item_text_view\"<\/span>\n            <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n            <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"wrap_content\"<\/span>\n            <span class=\"hljs-attr\">android:layout_marginTop<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"16dp\"<\/span>\n            <span class=\"hljs-attr\">android:layout_marginBottom<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"16dp\"<\/span>\n            <span class=\"hljs-attr\">android:gravity<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"center\"<\/span>\n            <span class=\"hljs-attr\">android:textAppearance<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@style\/TextAppearance.MaterialComponents.Headline5\"<\/span>\n            <span class=\"hljs-attr\">android:textColor<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"?attr\/colorOnSurface\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintBottom_toBottomOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintEnd_toEndOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintStart_toStartOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintTop_toBottomOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@id\/sports_item_image_view\"<\/span>\n            <span class=\"hljs-attr\">tools:text<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"Title\"<\/span> \/&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.constraintlayout.widget.ConstraintLayout<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">com.google.android.material.card.MaterialCardView<\/span>&gt;<\/span><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Finally create an RecyclerView adapter for fragment to show a list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>SportsAdapter.kt:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.LayoutInflater\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.View\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.ViewGroup\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.widget.ImageView\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.widget.TextView\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.recyclerview.widget.RecyclerView\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">SportsAdapter<\/span><\/span>(\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> sportsList: List&lt;Sports&gt;,\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> onClickListener: OnClickListener\n) :\n    RecyclerView.Adapter&lt;SportsAdapter.SportsViewHolder&gt;() {\n\n    <span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">SportsViewHolder<\/span><\/span>(itemView: View) : RecyclerView.ViewHolder(itemView) {\n\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> banner: ImageView = itemView.findViewById(R.id.sports_item_image_view)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> title: TextView = itemView.findViewById(R.id.title_item_text_view)\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">bind<\/span><span class=\"hljs-params\">(\n            sports: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Sports<\/span>,\n            onClickListener: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">OnClickListener<\/span>\n        )<\/span><\/span> {\n            banner.setImageResource(sports.banner)\n            title.text = sports.title\n            itemView.setOnClickListener {\n                onClickListener.onClick(sports)\n            }\n        }\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreateViewHolder<\/span><span class=\"hljs-params\">(parent: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">ViewGroup<\/span>, viewType: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Int<\/span>)<\/span><\/span>: SportsViewHolder {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">return<\/span> SportsViewHolder(\n            LayoutInflater.from(parent.context).inflate(\n                R.layout.item_sports,\n                parent,\n                <span class=\"hljs-literal\" style=\"color: rgb(104, 151, 187);\">false<\/span>\n            )\n        )\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onBindViewHolder<\/span><span class=\"hljs-params\">(holder: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">SportsViewHolder<\/span>, position: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Int<\/span>)<\/span><\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> sports: Sports = sportsList[position]\n        holder.bind(sports, onClickListener)\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">getItemCount<\/span><span class=\"hljs-params\">()<\/span><\/span> = sportsList.size\n\n    <span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">OnClickListener<\/span><\/span>(<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> clickListener: (Sports) -&gt; <span class=\"hljs-built_in\">Unit<\/span>) {\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onClick<\/span><span class=\"hljs-params\">(\n            sports: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Sports<\/span>\n        )<\/span><\/span> = clickListener(sports)\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-with-safeargs-pass-data-class-as-argument\">6. With SafeArgs pass data class as argument<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We have to pass our data class <strong>Sports.kt<\/strong> as argument from <strong>ListFragment<\/strong> to <strong>DetailFragment<\/strong>, and we will do this from <strong>nav_graph <\/strong>file.<br><br>In <strong>nav_graph.xml<\/strong> file go to design section from toolbar.<br>Select <strong>detailFragment<\/strong>, to the right side <strong>Attributes <\/strong>section, click <strong>plus(+)<\/strong> button to add new arguments to that fragment.<br><br>In Add Arguments section dialog :<br>Name <code>--&gt;<\/code> <strong>sportsArgs<\/strong><br>Type <code>--&gt;<\/code> Custom Parcelable <code>--&gt;<\/code> <strong>Sports.kt<\/strong><br>Continue by clicking <strong>OK <\/strong>and then again select <strong>Add <\/strong>to finish.<br>Now <strong>Rebuild <\/strong>the project for android studio to auto generate the classes required for this.<\/p>\n\n\n<div class=\"lazyblock-text-highlight-7SDYP wp-block-lazyblock-text-highlight\"><p>\r\n  <mark style=\"background-color: #fffadd; padding: 0.25em;\">\r\n    Note: If build is not successful or android studio cannot build at this point, try cleaning the project and Rebuilding it from Build&#8211;&gt; Clean Project.\r\n  <\/mark>\r\n<\/p><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"7-show-list-and-detail-data-in-fragments\">7. Show list and detail data in Fragments<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now we have data and arguments ready to be passed let&#8217;s populate the data inside fragments.<br>Add RecyclerView to <strong>ListFragment.kt<\/strong> and layout. Replace the code inside the layout with below one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>fragment_list.xml:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"php\"><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">&lt;?<\/span>xml version=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"1.0\"<\/span> encoding=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"utf-8\"<\/span><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">?&gt;<\/span><\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.constraintlayout.widget.ConstraintLayout<\/span>\n    <span class=\"hljs-attr\">xmlns:android<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\n    <span class=\"hljs-attr\">xmlns:app<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\n    <span class=\"hljs-attr\">xmlns:tools<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/tools\"<\/span>\n    <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n    <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n    <span class=\"hljs-attr\">tools:context<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\".ListFragment\"<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.recyclerview.widget.RecyclerView<\/span>\n        <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/sports_recycler_view\"<\/span>\n        <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n        <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n        <span class=\"hljs-attr\">android:clipToPadding<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"false\"<\/span>\n        <span class=\"hljs-attr\">android:orientation<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"vertical\"<\/span>\n        <span class=\"hljs-attr\">app:layoutManager<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"androidx.recyclerview.widget.StaggeredGridLayoutManager\"<\/span>\n        <span class=\"hljs-attr\">app:layout_behavior<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@string\/appbar_scrolling_view_behavior\"<\/span>\n        <span class=\"hljs-attr\">app:spanCount<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"2\"<\/span>\n        <span class=\"hljs-attr\">tools:itemCount<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"12\"<\/span>\n        <span class=\"hljs-attr\">tools:listitem<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@layout\/item_sports\"<\/span> \/&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.constraintlayout.widget.ConstraintLayout<\/span>&gt;<\/span><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ListFragment.kt:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.os.Bundle\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.fragment.app.Fragment\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.LayoutInflater\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.View\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.ViewGroup\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.navigation.NavDirections\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.navigation.fragment.findNavController\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.recyclerview.widget.RecyclerView\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> com.developersbreach.sharedelementtransitionexample.R\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">ListFragment<\/span> : <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Fragment<\/span><\/span>() {\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> lateinit <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">var<\/span> recyclerView: RecyclerView\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreateView<\/span><span class=\"hljs-params\">(\n        inflater: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">LayoutInflater<\/span>, container: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">ViewGroup<\/span>?,\n        savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?\n    )<\/span><\/span>: View? {\n        <span class=\"hljs-comment\" style=\"color: grey;\">\/\/ Inflate the layout for this fragment<\/span>\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">return<\/span> inflater.inflate(R.layout.fragment_list, container, <span class=\"hljs-literal\" style=\"color: rgb(104, 151, 187);\">false<\/span>)\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onViewCreated<\/span><span class=\"hljs-params\">(view: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">View<\/span>, savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?)<\/span><\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">super<\/span>.onViewCreated(view, savedInstanceState)\n\n        recyclerView = view.findViewById(R.id.sports_recycler_view)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> list = Sports.sportsList(requireContext())\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> adapter = SportsAdapter(list, sportsItemListener)\n        recyclerView.adapter = adapter\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> sportsItemListener = SportsAdapter.OnClickListener { sports -&gt;\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> direction: NavDirections =\n            ListFragmentDirections.listToDetailFragment(sports)\n        findNavController().navigate(direction)\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Our ListFragment is ready to show the RecyclerView, let&#8217;s complete <strong>DetailFragment <\/strong>to show each list item which user is selected.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>fragment_detail.xml:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"php\"><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">&lt;?<\/span>xml version=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"1.0\"<\/span> encoding=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"utf-8\"<\/span><span class=\"hljs-meta\" style=\"color: rgb(187, 181, 41);\">?&gt;<\/span><\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.core.widget.NestedScrollView<\/span>\n    <span class=\"hljs-attr\">xmlns:android<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\n    <span class=\"hljs-attr\">xmlns:app<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\n    <span class=\"hljs-attr\">xmlns:tools<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"http:\/\/schemas.android.com\/tools\"<\/span>\n    <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n    <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"wrap_content\"<\/span>\n    <span class=\"hljs-attr\">android:clipToPadding<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"false\"<\/span>\n    <span class=\"hljs-attr\">app:layout_behavior<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@string\/appbar_scrolling_view_behavior\"<\/span>\n    <span class=\"hljs-attr\">tools:context<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\".DetailFragment\"<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.constraintlayout.widget.ConstraintLayout<\/span>\n        <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n        <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">ImageView<\/span>\n            <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/detail_image_view\"<\/span>\n            <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n            <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"256dp\"<\/span>\n            <span class=\"hljs-attr\">android:scaleType<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"fitCenter\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintTop_toTopOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">tools:ignore<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"ContentDescription\"<\/span>\n            <span class=\"hljs-attr\">tools:src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@drawable\/ic_hockey\"<\/span> \/&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">TextView<\/span>\n            <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/title_detail_text_view\"<\/span>\n            <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n            <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"wrap_content\"<\/span>\n            <span class=\"hljs-attr\">android:layout_marginTop<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"12dp\"<\/span>\n            <span class=\"hljs-attr\">android:gravity<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"center\"<\/span>\n            <span class=\"hljs-attr\">android:textAppearance<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@style\/TextAppearance.MaterialComponents.Headline4\"<\/span>\n            <span class=\"hljs-attr\">android:textColor<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"?attr\/colorOnPrimary\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintEnd_toEndOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintStart_toStartOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintTop_toBottomOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@id\/detail_image_view\"<\/span>\n            <span class=\"hljs-attr\">tools:text<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"Title\"<\/span> \/&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">TextView<\/span>\n            <span class=\"hljs-attr\">android:id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@+id\/about_detail_text_view\"<\/span>\n            <span class=\"hljs-attr\">android:layout_width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"match_parent\"<\/span>\n            <span class=\"hljs-attr\">android:layout_height<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"wrap_content\"<\/span>\n            <span class=\"hljs-attr\">android:layout_marginStart<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"16dp\"<\/span>\n            <span class=\"hljs-attr\">android:layout_marginTop<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"28dp\"<\/span>\n            <span class=\"hljs-attr\">android:layout_marginEnd<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"16dp\"<\/span>\n            <span class=\"hljs-attr\">android:justificationMode<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"inter_word\"<\/span>\n            <span class=\"hljs-attr\">android:textColor<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"?attr\/colorOnPrimary\"<\/span>\n            <span class=\"hljs-attr\">android:textSize<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"20sp\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintEnd_toEndOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintStart_toStartOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"parent\"<\/span>\n            <span class=\"hljs-attr\">app:layout_constraintTop_toBottomOf<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@id\/title_detail_text_view\"<\/span>\n            <span class=\"hljs-attr\">tools:targetApi<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"o\"<\/span>\n            <span class=\"hljs-attr\">tools:text<\/span>=<span class=\"hljs-string\" style=\"color: rgb(106, 135, 89);\">\"@string\/about_tennis\"<\/span> \/&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.constraintlayout.widget.ConstraintLayout<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(232, 191, 106);\">androidx.core.widget.NestedScrollView<\/span>&gt;<\/span><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>FragmentDetail.kt:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.os.Bundle\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> androidx.fragment.app.Fragment\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.LayoutInflater\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.View\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.view.ViewGroup\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.widget.ImageView\n<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">import<\/span> android.widget.TextView\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">DetailFragment<\/span> : <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Fragment<\/span><\/span>() {\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> lateinit <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">var<\/span> sportsArgs: Sports\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreate<\/span><span class=\"hljs-params\">(savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?)<\/span><\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">super<\/span>.onCreate(savedInstanceState)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> args = requireArguments()\n        sportsArgs = DetailFragmentArgs.fromBundle(args).sportsArgs\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreateView<\/span><span class=\"hljs-params\">(\n        inflater: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">LayoutInflater<\/span>, container: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">ViewGroup<\/span>?,\n        savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?\n    )<\/span><\/span>: View? {\n        <span class=\"hljs-comment\" style=\"color: grey;\">\/\/ Inflate the layout for this fragment<\/span>\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">return<\/span> inflater.inflate(R.layout.fragment_detail, container, <span class=\"hljs-literal\" style=\"color: rgb(104, 151, 187);\">false<\/span>)\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onViewCreated<\/span><span class=\"hljs-params\">(view: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">View<\/span>, savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?)<\/span><\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">super<\/span>.onViewCreated(view, savedInstanceState)\n\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> banner: ImageView = view.findViewById(R.id.detail_image_view)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> title: TextView = view.findViewById(R.id.title_detail_text_view)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> about: TextView = view.findViewById(R.id.about_detail_text_view)\n\n        banner.setImageResource(sportsArgs.banner)\n        title.text = sportsArgs.title\n        about.text = sportsArgs.about\n    }\n}<\/pre>\n\n\n<div class=\"lazyblock-text-highlight-1dNc2b wp-block-lazyblock-text-highlight\"><p>\r\n  <mark style=\"background-color: #fffadd; padding: 0.25em;\">\r\n    Now run the app, ListFragment will be able to show list of Cards and when you click single item you will be navigated to DetailFragment with no errors.  Now let&#8217;s see how we can add shared element transitions between these fragments.\r\n  <\/mark>\r\n<\/p><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"8-make-sharedelementtransition-between-fragments\">8. Make SharedElementTransition between fragments<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To perform any transition between views first we need to identity those views from both layouts. So in our case we are performing transition between two layouts which are <strong>item_sports.xml<\/strong> to <strong>fragment_detail.xml<\/strong>.  See the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"540\" data-attachment-id=\"2965\" data-permalink=\"https:\/\/developersbreach.com\/shared-element-transition-android\/set-detail-content\/\" data-orig-file=\"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/set-detail-content.png?fit=960%2C540&amp;ssl=1\" data-orig-size=\"960,540\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Shared Element Transition Preview\" data-image-description=\"&lt;p&gt;Android app screenshots for shred element transition.&lt;\/p&gt;\n\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/set-detail-content.png?fit=960%2C540&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/set-detail-content.png?resize=960%2C540&#038;ssl=1\" alt=\"Preview image for shared element transition\" class=\"wp-image-2965\" srcset=\"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/set-detail-content.png?w=960&amp;ssl=1 960w, https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/set-detail-content.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/set-detail-content.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/set-detail-content.png?resize=249%2C140&amp;ssl=1 249w, https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/set-detail-content.png?resize=600%2C338&amp;ssl=1 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">Shared Element Transition Android<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Since our item views are created by the adapter let&#8217;s make changes to those. Open <strong>SportsAdapter.kt<\/strong> file and scroll down below to class which implements <strong>OnClickListener<\/strong>, this takes single argument which is data class but now change that to take two more arguments which are ImageView(<strong>banner<\/strong>) and TextView(<strong>title<\/strong>). <br>These are the changes you need to make:<\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">OnClickListener<\/span><\/span>(<span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> clickListener: (Sports, ImageView, TextView) -&gt; <span class=\"hljs-built_in\">Unit<\/span>) {\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onClick<\/span><span class=\"hljs-params\">(\n            sports: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Sports<\/span>,\n            banner: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">ImageView<\/span>,\n            title: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">TextView<\/span>\n        )<\/span><\/span> = clickListener(sports, banner, title)\n    }<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now for views which we are passing needs unique transition names while transition occurs, if all views have same transition name then transition won&#8217;t take place. <br>So the best way to do this is by giving each view transition name from it&#8217;s data class itself which must be of the type String.<br>We have access to both banner, title view with data in <strong>SportsViewHolder <\/strong>class.<br>These are the changes  you need to make:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Inside SportsViewHolder<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\">        <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">bind<\/span><span class=\"hljs-params\">(\n            sports: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Sports<\/span>,\n            onClickListener: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">OnClickListener<\/span>\n        )<\/span><\/span> {\n            banner.setImageResource(sports.banner)\n            title.text = sports.title\n            \n            banner.transitionName = sports.banner.toString()\n            title.transitionName = sports.title\n            \n            itemView.setOnClickListener {\n                onClickListener.onClick(sports, banner, title)\n            }\n        }<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Since <strong>ListFragment.kt<\/strong> implements <strong>OnClickListener<\/strong> it takes extra parameters after changes which needs ImageView and TextView, so we will pass that which shown below.<br>Let&#8217;s use <strong>FragmentNavigatorExtras <\/strong>which builds pair of view with string value. We can pass as many as pairs we want for transition to take place. In our case we are going to pass two pairs a ImageView for banner and TextView for title.<br>After with an assigned value we pass that inside navigate along with directions and extras.<br>After all the required changes this is how your code should look like.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ListFragment.kt:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\">    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> sportsItemListener = SportsAdapter.OnClickListener { sports, imageView, textView -&gt;\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> direction: NavDirections =\n            ListFragmentDirections.listToDetailFragment(sports)\n\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> extras = FragmentNavigatorExtras(\n            imageView to sports.banner.toString(),\n            textView to sports.title\n        )\n\n        findNavController().navigate(direction, extras)\n    }<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">We have to specify what kind of transition should take place from the leaving fragment and for that we have inflate a transition type using <strong>TransitionInflater <\/strong>in our fragment <strong>OnCreateView <\/strong>before returning. <br>So let&#8217;s inflate the transition with type move effect, see those changes below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>onCreateView ListFragment<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\">    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreateView<\/span><span class=\"hljs-params\">(\n        inflater: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">LayoutInflater<\/span>, container: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">ViewGroup<\/span>?,\n        savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?\n    )<\/span><\/span>: View? {\n        <span class=\"hljs-comment\" style=\"color: grey;\">\/\/ Inflate the layout for this fragment<\/span>\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> view = inflater.inflate(R.layout.fragment_list, container, <span class=\"hljs-literal\" style=\"color: rgb(104, 151, 187);\">false<\/span>)\n        sharedElementReturnTransition =\n            TransitionInflater.from(context).inflateTransition(android.R.transition.move)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">return<\/span> view\n    }<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">With this we will be able to perform moving transition but when user clicks back button we must be able to perform return transition, so we will this changes inside <strong>OnViewCreated <\/strong>after all views have been ready.<br>This gives fragment the ability to delay fragment animations until all data is being loaded.<br>With these changes you can get backward transition taking place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>onViewCreated at the end<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\">postponeEnterTransition()\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">But enter transition on any view should happen while it&#8217;s been drawn. So kotlin has a way of doing this by calling <strong>doOnPreDraw <\/strong>for view for transition.<br>In our case we have to call this on RecyclerView while being drawn or laid out.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>onViewCreated after enter transition<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\">recyclerView.doOnPreDraw {\n    startPostponedEnterTransition()\n}<\/pre>\n\n\n<div class=\"lazyblock-text-highlight-1plU1p wp-block-lazyblock-text-highlight\"><p>\r\n  <mark style=\"background-color: #fffadd; padding: 0.25em;\">\r\n    If you get an error at doOnPreDraw which means you have to specify proper jvm target version. So here&#8217;s the fix for it.\r\n  <\/mark>\r\n<\/p><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>build.gradle(Module:app) after build types<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\">compileOptions {\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">sourceCompatibility<\/span> JavaVersion.VERSION_1_8\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">targetCompatibility<\/span> JavaVersion.VERSION_1_8\n}\n\nkotlinOptions {\n    jvmTarget = JavaVersion.VERSION_1_8.toString()\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now Sync the project to fix this.<br>With all the changes being made to ListFragment. This is how it should look like.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ListFragment.kt:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">ListFragment<\/span> : <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Fragment<\/span><\/span>() {\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> lateinit <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">var<\/span> recyclerView: RecyclerView\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreateView<\/span><span class=\"hljs-params\">(\n        inflater: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">LayoutInflater<\/span>, container: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">ViewGroup<\/span>?,\n        savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?\n    )<\/span><\/span>: View? {\n        <span class=\"hljs-comment\" style=\"color: grey;\">\/\/ Inflate the layout for this fragment<\/span>\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> view = inflater.inflate(R.layout.fragment_list, container, <span class=\"hljs-literal\" style=\"color: rgb(104, 151, 187);\">false<\/span>)\n        sharedElementReturnTransition =\n            TransitionInflater.from(context).inflateTransition(android.R.transition.move)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">return<\/span> view\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onViewCreated<\/span><span class=\"hljs-params\">(view: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">View<\/span>, savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?)<\/span><\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">super<\/span>.onViewCreated(view, savedInstanceState)\n\n        recyclerView = view.findViewById(R.id.sports_recycler_view)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> list = Sports.sportsList(requireContext())\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> adapter = SportsAdapter(list, sportsItemListener)\n        recyclerView.adapter = adapter\n\n        <span class=\"hljs-comment\" style=\"color: grey;\">\/\/ When user hits back button transition takes backward<\/span>\n        postponeEnterTransition()\n        recyclerView.doOnPreDraw {\n            startPostponedEnterTransition()\n        }\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> sportsItemListener = SportsAdapter.OnClickListener { sports, imageView, textView -&gt;\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> direction: NavDirections =\n            ListFragmentDirections.listToDetailFragment(sports)\n\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> extras = FragmentNavigatorExtras(\n            imageView to sports.banner.toString(),\n            textView to sports.title\n        )\n\n        findNavController().navigate(direction, extras)\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">One last thing remaining to do is to apply these transition names in <strong>DetailFragment <\/strong>for transition to occur correctly.<br><br>Just like <strong>ListFragment <\/strong>one same thing we have to do is to inflate transition same way.<br>Optionally you can delay the transition from leaving fragment at certain duration and let the transition take place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>onCreateView<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\">sharedElementEnterTransition =\n    TransitionInflater.from(context).inflateTransition(android.R.transition.move)\npostponeEnterTransition(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">250<\/span>, TimeUnit.MILLISECONDS)<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>DetailsFragment.kt:<\/strong><\/p>\n\n\n\n<pre class=\"hljs\" style=\"color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 1em;\"><span class=\"hljs-class\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">class<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">DetailFragment<\/span> : <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Fragment<\/span><\/span>() {\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">private<\/span> lateinit <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">var<\/span> sportsArgs: Sports\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreate<\/span><span class=\"hljs-params\">(savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?)<\/span><\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">super<\/span>.onCreate(savedInstanceState)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> args = requireArguments()\n        sportsArgs = DetailFragmentArgs.fromBundle(args).modelArgs\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onCreateView<\/span><span class=\"hljs-params\">(\n        inflater: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">LayoutInflater<\/span>, container: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">ViewGroup<\/span>?,\n        savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?\n    )<\/span><\/span>: View? {\n        <span class=\"hljs-comment\" style=\"color: grey;\">\/\/ Inflate the layout for this fragment<\/span>\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> view = inflater.inflate(R.layout.fragment_detail, container, <span class=\"hljs-literal\" style=\"color: rgb(104, 151, 187);\">false<\/span>)\n        sharedElementEnterTransition =\n            TransitionInflater.from(context).inflateTransition(android.R.transition.move)\n        postponeEnterTransition(<span class=\"hljs-number\" style=\"color: rgb(104, 151, 187);\">250<\/span>, TimeUnit.MILLISECONDS)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">return<\/span> view\n    }\n\n    <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">override<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">fun<\/span> <span class=\"hljs-title\" style=\"color: rgb(255, 198, 109);\">onViewCreated<\/span><span class=\"hljs-params\">(view: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">View<\/span>, savedInstanceState: <span class=\"hljs-type\" style=\"color: rgb(255, 198, 109);\">Bundle<\/span>?)<\/span><\/span> {\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">super<\/span>.onViewCreated(view, savedInstanceState)\n\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> banner: ImageView = view.findViewById(R.id.detail_image_view)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> title: TextView = view.findViewById(R.id.title_detail_text_view)\n        <span class=\"hljs-keyword\" style=\"color: rgb(204, 120, 50);\">val<\/span> about: TextView = view.findViewById(R.id.about_detail_text_view)\n\n        banner.setImageResource(sportsArgs.banner)\n        title.text = sportsArgs.title\n        about.text = sportsArgs.about\n\n        banner.transitionName = sportsArgs.banner.toString()\n        title.transitionName = sportsArgs.title\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now run the app check how transitions takes place between them. For your better understanding experiment by removing code where transition changes or doesn&#8217;t work at any point.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will find this example wrote completely with <strong>BindingAdapters <\/strong>in my <strong>GitHub <\/strong>repository in different branch, so make sure to check that too.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9-external-links-project-github-and-download\">9.  External links, project Github and download<\/h2>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-lighter-gray-color has-text-color wp-element-button\" href=\"https:\/\/github.com\/RajashekarRaju\/SharedElementTransitionExample\" target=\"_blank\" rel=\"noreferrer noopener\">GithUB PROJECT<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-lighter-gray-color has-text-color wp-element-button\" href=\"https:\/\/drive.google.com\/file\/d\/1TjrFOXYubyPODpXb7DTCFDZrDvM0mOYH\/view?usp=sharing\" style=\"border-radius:4px\" target=\"_blank\" rel=\"noreferrer noopener\">dOWNLOAD<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Android Developer Documentation &#8211; <strong><a href=\"https:\/\/developer.android.com\/guide\/navigation\/navigation-animate-transitions\" target=\"_blank\" rel=\"noreferrer noopener\">Animate transition between destinations<\/a><\/strong><\/li>\n\n\n\n<li>Learn about Motion ContainerTransform, SharedAxis, Fade &#8211; <a href=\"https:\/\/material.io\/develop\/android\/theming\/motion\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Material Component<\/strong><\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kadence-column3268_2c3af4-ba > .kt-inside-inner-col,.kadence-column3268_2c3af4-ba > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column3268_2c3af4-ba > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column3268_2c3af4-ba > .kt-inside-inner-col{flex-direction:column;}.kadence-column3268_2c3af4-ba > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column3268_2c3af4-ba > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column3268_2c3af4-ba{position:relative;}@media all and (max-width: 1024px){.kadence-column3268_2c3af4-ba > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column3268_2c3af4-ba > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column3268_2c3af4-ba inner-column-2\"><div class=\"kt-inside-inner-col\">\n<p class=\"has-text-align-center has-medium-font-size wp-block-paragraph\">Author<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > .kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap{max-width:unset;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap{border-top:5px solid var(--global-palette7, #eeeeee);border-right:5px solid var(--global-palette7, #eeeeee);border-bottom:5px solid var(--global-palette7, #eeeeee);border-left:5px solid var(--global-palette7, #eeeeee);border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;background:#fff;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);margin-top:50px;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap:hover{background:#fff;}.kt-info-box3268_66e196-86.wp-block-kadence-infobox{max-width:100%;}.kt-info-box3268_66e196-86 .kadence-info-box-image-inner-intrisic-container{max-width:120px;}.kt-info-box3268_66e196-86 .kadence-info-box-image-inner-intrisic-container .kadence-info-box-image-intrisic{padding-bottom:100%;width:150px;height:0px;max-width:100%;}.kt-info-box3268_66e196-86 .kadence-info-box-icon-container .kt-info-svg-icon, .kt-info-box3268_66e196-86 .kt-info-svg-icon-flip, .kt-info-box3268_66e196-86 .kt-blocks-info-box-number{font-size:50px;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-media{color:#444;background:#fff;border-color:#212121;border-radius:200px;overflow:hidden;border-top-width:4px;border-right-width:4px;border-bottom-width:4px;border-left-width:4px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-media-container{margin-top:-75px;margin-right:0px;margin-bottom:20px;margin-left:0px;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media{color:#000;background:#fff;border-color:#d1d1d1;}.kt-info-box3268_66e196-86 .kt-infobox-textcontent h4.kt-blocks-info-box-title{color:#000;font-size:20px;line-height:25px;font-family:Montserrat;font-style:normal;font-weight:500;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:5px;margin-right:0px;margin-bottom:10px;margin-left:0px;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap:hover h4.kt-blocks-info-box-title{color:#000;}.kt-info-box3268_66e196-86 .kt-infobox-textcontent .kt-blocks-info-box-text{color:#444;}.wp-block-kadence-infobox.kt-info-box3268_66e196-86 .kt-blocks-info-box-text{font-size:16px;line-height:24px;font-family:Montserrat;font-style:normal;font-weight:300;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-text{color:#000;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-learnmore{color:#444;border-color:#e6e6e6;font-size:var(--global-kb-font-size-sm, 0.9rem);font-family:Montserrat;font-style:normal;font-weight:300;border-width:0px 0px 0px 0px;padding-top:20px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-learnmore,.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap .kt-blocks-info-box-learnmore:focus{background:#fff;}@media all and (max-width: 1024px){.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap{border-top:5px solid var(--global-palette7, #eeeeee);border-right:5px solid var(--global-palette7, #eeeeee);border-bottom:5px solid var(--global-palette7, #eeeeee);border-left:5px solid var(--global-palette7, #eeeeee);}}@media all and (max-width: 767px){.kt-info-box3268_66e196-86 .kt-blocks-info-box-link-wrap{border-top:5px solid var(--global-palette7, #eeeeee);border-right:5px solid var(--global-palette7, #eeeeee);border-bottom:5px solid var(--global-palette7, #eeeeee);border-left:5px solid var(--global-palette7, #eeeeee);}}<\/style>\n<div class=\"wp-block-kadence-infobox kt-info-box3268_66e196-86\"><div class=\"kt-blocks-info-box-link-wrap kt-blocks-info-box-media-align-top kt-info-halign-center\"><div class=\"kt-blocks-info-box-media-container\"><div class=\"kt-blocks-info-box-media kt-info-media-animate-none\"><div class=\"kadence-info-box-image-inner-intrisic-container\"><div class=\"kadence-info-box-image-intrisic kt-info-animate-none\"><div class=\"kadence-info-box-image-inner-intrisic\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"24443\" data-permalink=\"https:\/\/developersbreach.com\/implement-auth-aws-cognito-spring-boot-jwt-backend\/photo_crop\/\" data-orig-file=\"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2025\/04\/photo_crop-e1745307698346.jpg?fit=305%2C305&amp;ssl=1\" data-orig-size=\"305,305\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;1.8&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;Pixel 3a&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1645397338&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;4.44&quot;,&quot;iso&quot;:&quot;258&quot;,&quot;shutter_speed&quot;:&quot;0.04001&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Author-Raj\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2025\/04\/photo_crop-e1745307698346.jpg?fit=305%2C305&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2025\/04\/photo_crop-e1745307698346-150x150.jpg?resize=150%2C150&#038;ssl=1\" alt=\"Author-Raj\" width=\"150\" height=\"150\" class=\"kt-info-box-image wp-image-24443\" srcset=\"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2025\/04\/photo_crop-e1745307698346.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2025\/04\/photo_crop-e1745307698346.jpg?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2025\/04\/photo_crop-e1745307698346.jpg?w=305&amp;ssl=1 305w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/div><\/div><\/div><\/div><\/div><div class=\"kt-infobox-textcontent\"><h4 class=\"kt-blocks-info-box-title\">Raj<\/h4><p class=\"kt-blocks-info-box-text\">Hi ! I\u2019m\u00a0a\u00a0<em><strong>Software Engineer<\/strong><\/em>\u00a0at MedKitDoc &amp;\u00a0<em><strong>Technical writer<\/strong><\/em>.<br>I lead organization\u00a0<em><strong>Developers Breach<\/strong><\/em>\u00a0focusing on contributing to\u00a0<em><strong>Open Source<\/strong><\/em> and <strong><em>Student Projects<\/em><\/strong>.<\/p><div class=\"kt-blocks-info-box-learnmore-wrap\"><a class=\"kt-blocks-info-box-learnmore info-box-link\" target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/developersbreach.com\/author\/rajashekarraju\/\" aria-label=\"Explore articles\">Explore articles<\/a><\/div><\/div><\/div><\/div>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.wp-block-kadence-icon.kt-svg-icons3268_ff8861-8a{justify-content:center;}<\/style>\n<div class=\"wp-block-kadence-icon kt-svg-icons kt-svg-icons3268_ff8861-8a alignnone\"><style>.kt-svg-item-3268_14044b-0f .kb-svg-icon-wrap, .kt-svg-style-stacked.kt-svg-item-3268_14044b-0f .kb-svg-icon-wrap{color:var(--global-palette6, #718096);font-size:25px;margin-right:15px;}.kt-svg-item-3268_14044b-0f:hover .kb-svg-icon-wrap{color:var(--global-palette5, #4A5568);}<\/style>\n<div class=\"wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-3268_14044b-0f\"><a href=\"https:\/\/www.linkedin.com\/in\/rajasekhar-k-e\/\" class=\"kt-svg-icon-link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Ahmed Sellami\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fa_linkedin\"><svg viewBox=\"0 0 448 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  role=\"img\"><title>LinkedIn<\/title><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"\/><\/svg><\/span><\/a><\/div>\n\n\n<style>.kt-svg-item-3268_a173c2-17 .kb-svg-icon-wrap, .kt-svg-style-stacked.kt-svg-item-3268_a173c2-17 .kb-svg-icon-wrap{color:var(--global-palette6, #718096);font-size:25px;margin-right:15px;}.kt-svg-item-3268_a173c2-17:hover .kb-svg-icon-wrap{color:var(--global-palette5, #4A5568);}<\/style>\n<div class=\"wp-block-kadence-single-icon kt-svg-style-default kt-svg-icon-wrap kt-svg-item-3268_a173c2-17\"><a href=\"https:\/\/github.com\/RajashekarRaju\" class=\"kt-svg-icon-link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Ahmed Sellami\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fa_github\"><svg viewBox=\"0 0 496 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  role=\"img\"><title>GitHub<\/title><path d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"\/><\/svg><\/span><\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to implement SharedElementTransition between destinations using NavigationComponent in an android application. Perform move transition between views with an example i have shown.<\/p>\n","protected":false},"author":107376512,"featured_media":2916,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"_crdt_document":"","advanced_seo_description":"Start a fragment with shared element transition using navigation component in android. Understand the implementation using list to detail example.","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[641922,2713827,2713832,2713631,2713768],"tags":[2714190,2713501,2713542,2713544,2713690,2713545,2713507,2713691,2713513,2713547,2713552,2713541,2713543],"class_list":["post-2915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-animation","category-fragment","category-material-design-comp","category-recyclerview","tag-android-development","tag-android-studio","tag-android-transitions","tag-animate-changes-between-destinations","tag-fragmentnavigatorextras","tag-fragmenttransitions","tag-kotlin","tag-navigation-transitions","tag-navigationcomponent","tag-reyclerview","tag-shared-element-transition-fragments","tag-sharedelementtransition","tag-transitions"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/developersbreach.com\/wp-content\/uploads\/2020\/07\/Untitled-1.png?fit=960%2C540&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9ZheG-L1","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/posts\/2915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/users\/107376512"}],"replies":[{"embeddable":true,"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/comments?post=2915"}],"version-history":[{"count":99,"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/posts\/2915\/revisions"}],"predecessor-version":[{"id":23576,"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/posts\/2915\/revisions\/23576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/media\/2916"}],"wp:attachment":[{"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/media?parent=2915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/categories?post=2915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developersbreach.com\/wp-json\/wp\/v2\/tags?post=2915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}