CODEWITHSUNDEEP
javaandroidandroid-fragmentsonclick
siriuseteor77
siriuseteor77

Reputation: 1126

OnClick() on images adds the same fragment with different information

What I want to do is to create an app where I have clickable images in the main screen.

The idea I had in mind is when I click an image a Fragment with a WebView appears. And every image has to give me different information in that WebView but I couldn't do it so I went on with this:

public class MainActivity extends Activity implements OnClickListener{

    private ImageView image1;
    private ImageView image2;
    private ImageView image3;
    private ImageView image4;
    private ImageView image5;

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

        image1 = (ImageView) findViewById(R.id.imageView1);
        image2 = (ImageView) findViewById(R.id.imageView2);
        image3 = (ImageView) findViewById(R.id.imageView3);
        image4 = (ImageView) findViewById(R.id.imageView4);
        image5 = (ImageView) findViewById(R.id.imageView5);

        image1.setOnClickListener(this);
        image2.setOnClickListener(this);
        image3.setOnClickListener(this);
        image4.setOnClickListener(this);
        image5.setOnClickListener(this);


    }

    @Override
    public void onClick(View v) {

        Intent i = null;
        //Toast.makeText(getApplicationContext(), "working", Toast.LENGTH_SHORT).show();

        switch (v.getId()) {
        case R.id.imageView1:
            i = new Intent(getApplicationContext(), WebviewActivity1.class);
        break;
        case R.id.imageView2:
            i = new Intent(getApplicationContext(), WebviewActivity2.class);
        break;
        case R.id.imageView3:
            i = new Intent(getApplicationContext(), WebviewActivity3.class);
        break;
        case R.id.imageView4:
            i = new Intent(getApplicationContext(), WebviewActivity4.class);
        break;
        case R.id.imageView5:
            i = new Intent(getApplicationContext(), WebviewActivity5.class);
        break;
        }
        startActivity(i);
    }
}

I don't know how to work with Fragments so I just created different activities which call the xml with a WebView and I changed the WebView's content in each activity programmatically.

I believe there is a shorter and simpler way using Fragments. Could anyone guide me through it please?

Upvotes: 1

Views: 895

Answers (1)

Silvio Tamaso D'Onofrio
Silvio Tamaso D'Onofrio

Reputation: 3149

Resuming you want to show the same fragment, or activity, with the same layout and webview BUT with different contents inside this webview. So pass parameters to this second activity, or fragment. There you collect those parameters and act as you want in each case (load content X or Y on your webview).

These parameters can be passed with the help of sharedpreferences or bundle arguments.

EDIT: if you want to make things easier, do not use fragments at this time. If and when you will need to implement a ViewPager, for example, to swipe your screens, then it will be another time. For now, let's expand your activities sample and make things happen.

First of all, in your AndroidManifest.xml you have to get permission to access the internet (if you plan to load webpages from there), so put this before the <application>:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

And then, inside <application>, declare the second activity, where you will show your webview. Let's call this activity Webview.class. Define it this way, yet inside your manifest file:

<activity android:name=".Webview" android:label="My Test Webview" />

Now let's see the whole Webview.java:

public class Webview extends Activity{

private WebView wv;
private String url;

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.webview);

    // get the url to open
    Intent intentBundle = this.getIntent();
    url = intentBundle.getStringExtra("url");

    wv = (WebView) findViewById(R.id.myWebView);
    wv.setWebViewClient(new WebViewClient()); // needed to open url inside our webview, otherwise it will open at the default browser
    wv.loadUrl(url);
}}

Fine. This java will need the layout file I called webview.xml, with this content:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ff0000"
>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myWebView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />
</LinearLayout>

Finally, at the onClick of your MainActivity.java, change the places where you're calling your auxiliar activities like this:

1 - From this Intent i = null; to this Intent i = new Intent(getApplicationContext(), Webview.class);

2 - Then, at each case of your switch you implement this model:

case R.id.imageView1:
i.putExtra("url", "file:///android_asset/alocalpage.htm"); // use this to call a page on your assets folder
break;

case R.id.imageView2:
i.putExtra("url", "http://www.google.com");
break;

And so on, the same idea with the next imageViews, defining an url to each of them. That's all. Hope it helps. Best.

Upvotes: 4

Related Questions