ImageGetter Overlapping Multiple Images
first post, hopefully I am doing this right.
I have been working on an application that emulates a Forum on the mobile
phone. Basically I created an application that parses a forum I frequent
and displays the information in a mobile friendly format.
One of the pieces that I am having trouble with, is creating a 'thread
view' that properly displays embedded images. Here is a snip of what my
view is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#444444"
android:orientation="horizontal">
<!-- ListRow Left sied Thumbnail image -->
<RelativeLayout
android:id="@+id/titleContainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/container_thread_dropshadow"
android:padding="3dip">
<LinearLayout
android:id="@+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip"
android:padding="3dip"
android:orientation="horizontal"
android:background="@drawable/container_avatar_square" >
<ImageView
android:id="@+id/nr_image"
android:layout_width="50dip"
android:layout_height="50dip"
android:src="@drawable/rotor_icon" />
</LinearLayout>
<View
android:id="@+id/nr_sep"
android:layout_width="2dip"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/thumbnail"
android:layout_alignBottom="@id/thumbnail"
android:background="#FF808080" />
<!-- Title Of Thread -->
<RelativeLayout
android:id="@+id/titleTextContainer"
android:layout_toRightOf="@id/nr_sep"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip">
<TextView
android:id="@+id/nr_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/nrUserName"
android:textColor="#ffffff"
android:textSize="12dip"
android:textStyle="bold"
android:typeface="sans" />
<TextView
android:id="@+id/nr_userTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/nr_username"
android:layout_marginTop="1dip"
android:text="@string/nrUserTitle"
android:textColor="#ffffff"
android:textSize="8dip" />
<TextView
android:id="@+id/nr_userPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/nr_userTitle"
android:layout_marginTop="1dip"
android:text="1000"
android:textColor="#ffffff"
android:textSize="8dip" />
<TextView
android:id="@+id/nr_userJoin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/nr_userPosts"
android:layout_marginTop="1dip"
android:text="June 2013"
android:textColor="#ffffff"
android:textSize="8dip" />
<TextView
android:id="@+id/nr_postDate_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/nr_userJoin"
android:layout_marginTop="10dip"
android:text="@string/nrPostDate"
android:textColor="#ffffff"
android:textSize="8dip" />
<TextView
android:id="@+id/nr_postDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/nr_userJoin"
android:layout_marginTop="10dip"
android:layout_toRightOf="@id/nr_postDate_label"
android:text="07-16-2013"
android:textColor="#ffffff"
android:textSize="8dip" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/nr_buttonContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/titleTextContainer"
android:layout_alignParentRight="true"
android:padding="3dip">
<ImageView
android:id="@+id/nr_quoteButton"
android:layout_width="15dip"
android:layout_height="15dip"
android:layout_alignParentRight="true"
android:src="@drawable/quote_icon"
android:focusable="false"/>
<ImageView
android:id="@+id/nr_pmButton"
android:layout_width="15dip"
android:layout_height="15dip"
android:layout_marginRight="10dp"
android:layout_toLeftOf="@id/nr_quoteButton"
android:src="@drawable/black_mail"
android:focusable="false" />
<ImageView
android:id="@+id/nr_editButton"
android:layout_width="15dip"
android:layout_height="15dip"
android:layout_marginRight="10dp"
android:layout_toLeftOf="@id/nr_pmButton"
android:src="@drawable/black_pencil_icon"
android:focusable="false" />
<ImageView
android:id="@+id/nr_deleteButton"
android:layout_width="15dip"
android:layout_height="15dip"
android:layout_toLeftOf="@id/nr_editButton"
android:src="@drawable/black_x"
android:layout_marginRight="10dp"
android:focusable="false"/>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/postContainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/titleContainer"
android:background="#444444"
android:paddingBottom="30dip" >
<TextView
android:id="@+id/nr_postText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:paddingTop="5dip"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingBottom="5dip"
android:text="@string/nrPostText"
android:textColor="#ffffff"
android:textSize="8dip"
android:cacheColorHint="#00000000"
android:scrollbars="none" />
</RelativeLayout>
Which gives the following view format:
Sorry I dont have the rep to post images -
http://i.imgur.com/0pxS2w0.png
I have done some searching here, and came across a question/answer thread
that really got me started: Android ImageGetter images overlapping text
Displaying the text as an HTML in the 'posttext' area works great, except
for an issue with displaying multiple images. Like the previously linked
thread, images overlap like crazy. I understand that this could be because
of the view not properly sizing itself, but I just dont know how to remedy
this. Here is what I am talking about:
Sorry I dont have the rep to post images -
http://i.imgur.com/C6ncwYu.png
I essentially copied the code from the aforementioned link, and even tried
some of the variations listed to no avail
public class ForumImageHandler implements ImageGetter {
Context c;
TextView container;
/**
* Construct the URLImageParser which will execute
* AsyncTask and refresh the container
* @param t The source view
* @param c The source context
*/
public ForumImageHandler(TextView t, Context c) {
this.c = c;
this.container = t;
}
/**
* Grab the reference to a URLDrawable which will
* be updated with images.
* @param source The source of the image
*/
public Drawable getDrawable(String source) {
URLDrawable urlDrawable = new URLDrawable();
// get the actual source
ImageGetterAsyncTask asyncTask =
new ImageGetterAsyncTask( urlDrawable);
asyncTask.execute(source);
return urlDrawable;
}
/**
* Inner class designed to grab an image async.
*/
public class ImageGetterAsyncTask extends AsyncTask<String, Void,
Drawable> {
URLDrawable urlDrawable;
public ImageGetterAsyncTask(URLDrawable d) {
this.urlDrawable = d;
}
/*
* (non-Javadoc)
* @see android.os.AsyncTask#doInBackground(Params[])
*/
@Override
protected Drawable doInBackground(String... params) {
String source = params[0];
return fetchDrawable(source);
}
/*
* (non-Javadoc)
* @see android.os.AsyncTask#onPostExecute(java.lang.Object)
*/
@Override
protected void onPostExecute(Drawable result) {
if(result != null) {
urlDrawable.setBounds(0, 0,
0 + result.getIntrinsicWidth(),
0 + result.getIntrinsicHeight());
// change the reference of the current drawable to the result
// from the HTTP call
urlDrawable.drawable = result;
// redraw the image by invalidating the container
container.invalidate();
// For ICS
container.setHeight(
container.getHeight() +
result.getIntrinsicHeight());
// Pre ICS
container.setEllipsize(null);
}
}
/***
* Get the Drawable from URL
* @param urlString The url to grab the image from
* @return The drawable container that holds the image
*/
public Drawable fetchDrawable(String urlString) {
HttpGet httpget = null;
try {
DefaultHttpClient httpclient =
LoginFactory.getInstance().getClient();
httpget = ClientUtils.getHttpGet(urlString);
HttpResponse response =
httpclient.execute(httpget,
LoginFactory.getInstance().getHttpContext());
final BufferedInputStream bis =
new
BufferedInputStream(response.getEntity().getContent());
Bitmap bm = BitmapFactory.decodeStream(bis);
while(bm.getWidth() > 400) {
bm = Bitmap.createScaledBitmap(bm, bm.getWidth() / 2,
bm.getHeight() / 2, true);
}
Drawable drawable = new BitmapDrawable(bm);
drawable.setBounds(0,0,bm.getWidth(),bm.getHeight());
return drawable;
} catch (Exception e) {
return null;
} finally {
httpget.releaseConnection();
}
}
}
Any help would be greatly appreciated. And hopefully I can give back to
the community by providing the repository where my code is stored so that
others can get some ideas on how exactly I am doing what I do in the
application:
https://github.com/paimonsoror/RX8Club.com-Forum-Application
No comments:
Post a Comment