ListView items expanding to WebViews - Transition Animation

Question

I have a custom ListView with each item opening local HTML files (WebView). I have difficulty in adding animations for the transition when I click on the ListView item to the WebView. I tried using the ActivityOptions.makeSceneTransitionAnimation() method in the startActivity()method as follows:-

MainActivity.java

public class MainActivity extends AppCompatActivity {

ListView listView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    listView = (ListView) findViewById(R.id.list);


    String[] values = new String[] { "LINK 1",
            "LINK 2", "LINK 3"
    };

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, android.R.id.text1, values) {
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = super.getView(position, convertView, parent);
            if (position==0||position==1||position==2) {
                view.setBackgroundColor(Color.parseColor("#BBDEFB"));
            } else {
                view.setBackgroundColor(Color.parseColor("#006064"));
            }
            return view;
        }
    };

    listView.setAdapter(adapter);
    //final HashMap<String, Integer> hashMap = new HashMap<String, Integer> ();



    **listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                                int position, long id) {
            // TODO Auto-generated method stub
            if (position == 0) {
                Intent myIntent = new Intent(getApplicationContext(),
                        WebViewActivity.class);
                myIntent.putExtra("key", 0);
                startActivity(myIntent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
            }else if (position == 1) {
                Intent myIntent = new Intent(getApplicationContext(),
                        WebViewActivity.class);
                myIntent.putExtra("key", 1);
                startActivity(myIntent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle()   );
            }else if (position == 2) {
                Intent myIntent = new Intent(getApplicationContext(),
                        WebViewActivity.class);
                myIntent.putExtra("key", 2);
                startActivity(myIntent);
            }**



        }

    });

But I get the following error :

Error:(69, 60) error: no suitable method found for makeSceneTransitionAnimation(<anonymous OnItemClickListener>)
method ActivityOptions.makeSceneTransitionAnimation(Activity,View,String) is not applicable
(actual and formal argument lists differ in length)
method ActivityOptions.makeSceneTransitionAnimation(Activity,Pair<View,String>...) is not applicable
(actual argument <anonymous OnItemClickListener> cannot be converted to Activity by method invocation conversion)

My full code :

WebViewActivity.java

public class WebViewActivity extends AppCompatActivity {
WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_web_view);

    webView = (WebView) findViewById(R.id.webView1);
    //webView.setWebViewClient(new myWebClient());
    webView.getSettings().setJavaScriptEnabled(true);
    int pos = getIntent().getIntExtra("key", 0);
    if (pos == 0) {
        webView.loadUrl("file:///android_asset/index.html");
    } else if (pos == 1) {
        webView.loadUrl("file:///android_asset/index2.html");
    } else if (pos == 2) {
        webView.loadUrl("file:///android_asset/index3.html");
    }

}


}

activity_main.xml

`

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.a405146.listview.MainActivity">

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/list"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:background="?android:attr/selectableItemBackground"/>
</RelativeLayout>

`

activity_web_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.a405146.listview.WebViewActivity">

<WebView
    android:id="@+id/webView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

</RelativeLayout>

Please help me understand where I went wrong and how to properly implement the transition.

Answer 1

You need to provide a unique transitionName to all the views in the listView. You can do that in the adapter when getView is called, call setTransitionName and set a unique name, such as some combination of a string and the current position which is unique for every item. Write something like this inside getView method

ViewCompat.setTransitionName(convertView, "list_item_"+position);

And in the next activity, give your WebView a unique transitionName also, like "sharedWebView". Now when you are starting the next activity, create a Pair object for the view and the name which the view is going to be in the next activity. Something like this

Pair<View, String> pair = Pair.create(view, "sharedWebView");

and pass it when you start the activity, also that you are passing a reference to the inner class here, but you have to pass the reference of activity. Something like this

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, pair).toBundle());