image view on Customized dialog box

Question

I have one problem with customized dialog box in android,i have created the customized dialog using javainterface in android ,in my class CustomizeDialog i have one thread do some process in back ground after that i have set one imgae to this customized dialog i set the image in OnPostExecute but i got the following error

android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.

i know we can't access the main ui from another thread but we access the main ui in OnPostExecuted in my case that also not working , in my another class(main.class) i will call this class by

CustomizeDialog customizeDialog = new CustomizeDialog(mContext);
customizeDialog.show();

this my code which create dialog box

public class CustomizeDialog extends Dialog implements OnClickListener {
Button okButton;
ImageView img = null;
ImageView img2=null;
ImageView img3 = null;
ImageView img4= null;
 Bitmap bm;

public CustomizeDialog(Context context) {
super(context);

img2 = (ImageView) findViewById(R.id.imageView1);
img3 = (ImageView) findViewById(R.id.imageView3);
img4 = (ImageView) findViewById(R.id.imageView4);

WindowManager.LayoutParams params = getWindow().getAttributes();  
params.x = 30;  
params.height = 500;  
params.width = 500;  
params.y = 50;  

this.getWindow().setAttributes(params);  

setContentView(R.layout.test);
img = (ImageView) findViewById(R.id.imageView2);

img.setBackgroundResource(R.drawable.sample);

AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

 //Start the animation (looped playback by default).
 frameAnimation.start();

new LongOperation1(context).execute("");

}

else
{
    Toast toast = Toast.makeText(getContext(), "Erorr",
            Toast.LENGTH_SHORT);
    toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
    toast.show();
} }

private class LongOperation1 extends AsyncTask<String, String, String> {

    @Override
    protected String doInBackground(String... params) {
     //here i do some process
    return "Executed";
    }

    @Override
    protected void onPostExecute(String result) {

                 // here i do some process to get bm

            img2.setImageBitmap(bm);
            }

    @Override
    protected void onPreExecute() {
    }
    @Override
    protected void onProgressUpdate(String... values) {
        }
}

AndroidHTMLActivity class

    package com.example.hellogap;
import com.example.javainterface.R;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.os.Bundle;
import android.view.Gravity;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class AndroidHTMLActivity extends Activity {

WebView myBrowser;
private static final int TEXT_ID = 0;
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
     myBrowser = (WebView)findViewById(R.id.mybrowser);
     myBrowser.addJavascriptInterface(new MyJavaScriptInterface(this), "AndroidFunction");

     myBrowser.getSettings().setJavaScriptEnabled(true);
     myBrowser.loadUrl("file:///android_asset/mypage.html");

 }

public class MyJavaScriptInterface {
 Context mContext;

    MyJavaScriptInterface(Context c) {
        mContext = c;
    }

    public void showToast(String toast){
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }

    public void openAndroidDialog(){
        //CustomizeDialog.this.img2.setImageBitmap(bm);

        CustomizeDialog customizeDialog = new CustomizeDialog(AndroidHTMLActivity.this);
        customizeDialog.show();


    }

}
}

test.xml

     <AbsoluteLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/widget0"
         android:layout_width="500dp"
         android:layout_height="520dp"

         android:background="@drawable/bg"
         android:clickable="false" >

         <ImageView
             android:id="@+id/imageView3"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_x="193dp"
             android:layout_y="315dp"
             android:src="@drawable/fb" />

         <ImageView
             android:id="@+id/imageView1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_x="51dp"
             android:layout_y="318dp"
             android:src="@drawable/fa" />

         <ImageView
             android:id="@+id/imageView4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_x="335dp"
             android:layout_y="316dp"
             android:src="@drawable/fc" />

         <ImageView
             android:id="@+id/imageView2"
             android:layout_width="200dp"
             android:layout_height="204dp"
             android:layout_x="298dp"
             android:layout_y="91dp" />

     </AbsoluteLayout>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
<TextView 
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"

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

mypage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; user-scalable=0;" />
<title>My HTML</title>
</head>
<body>
<h1>MyHTML</h1>

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
 function showAndroidToast(toast) {
     AndroidFunction.showToast(toast);
 }
</script>

<input type="button" value="Open Dialog" onClick="openAndroidDialog()" />

<script type="text/javascript">
 function openAndroidDialog() {
     AndroidFunction.openAndroidDialog();
 }
</script>

</body>
</html>

do any have idea about how to do this

Answer 1

EDIT

If i understood well what you are trying to do, substitute your code with this:

CustomizeDialog.java

import android.app.Dialog;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;

public class CustomizeDialog extends Dialog {

    Button okButton;
    ImageView imageAnim = null;

    Bitmap bm;

    Context ctx;

    AnimationDrawable frameAnimation;

    public CustomizeDialog(Context context) {
        super(context);     

        ctx = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);     


        WindowManager.LayoutParams params = getWindow().getAttributes();  
        params.x = 30;  
        params.height = 500;  
        params.width = 500;  
        params.y = 50;  

        getWindow().setAttributes(params);  

        setContentView(R.layout.test);

        frameAnimation =  new AnimationDrawable(); 

        frameAnimation.addFrame(ctx.getResources().getDrawable(R.drawable.fb1), 1000);
        frameAnimation.addFrame(ctx.getResources().getDrawable(R.drawable.fb2), 1000);
        frameAnimation.addFrame(ctx.getResources().getDrawable(R.drawable.fb3), 1000);
        frameAnimation.addFrame(ctx.getResources().getDrawable(R.drawable.fb4), 1000);

        // set false for loop animation
        frameAnimation.setOneShot(false);

        imageAnim = (ImageView) findViewById(R.id.img); 
        imageAnim.setBackgroundDrawable(frameAnimation);

        imageAnim.post(new Starter()); 

    }

    class Starter implements Runnable { 

        public void run() { 
            frameAnimation.start(); 
        } 

    } 
}

text.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gallery animated" />

    <ImageView
        android:id="@+id/img"
        android:layout_width="154dp"
        android:layout_height="217dp" />

</LinearLayout>

This code show a dialog in which 4 images are loaded every second (in loop). It works. By the way, there were a lot of problems with your code.

1) First of all, you have to put variable reference to xml layout after setContentView and not before!

2) you can't cast AnimationDrawable to BitmapDrawable when you did AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground()

3) I don't understand why you tried to set img.setImageBitmap(bm) with a NULL bitmap variable (bm was never set).

4) You have to initialize contentView in onCreate method, not in CustomDialog constructor.

5) You have to use Thread for not stopping UI loading. If you put animation loop inside code dialog creation, dialog can be stopped and shown not correctly.

Hope this help you

Answer 2

Try to implement a static method inside your CustomizeDialog class that changes your image, and when you want to change the pic just call CustomizeDialog.thatStaticMethod(). In this way is the original class that changes the UI.