Remove extra space after html image - android

I'm displaying the html content in android Textview. I'm facing a strange issue while fetching the html images. After the image embed, an extra space is observed. I Tried what suggested in the below links:
http://salman-w.blogspot.in/2012/10/remove-space-below-images-and-inline-block-elements.html
Mysterious gap under image appearing
Remove white space below image
But none of the suggestions worked.
And one strange thing, that I observed is: If i remove the tag, and add the text without any tag, then extra space disappears.
For example:
<div class="img_dv"><div class="img_dv_content"><img id="story_image_main" style="display:block;" src="http://htmlimage.jpg" /><p class="img_dv_Caption">Photo Credit: Sample Image Caption</p></div></div>
This gives an extra space after the image.
But in the below code, there is no space:
<div class="img_dv"><div class="img_dv_content"><img id="story_image_main" style="display:block;" src="http://htmlimage.jpg" />Photo Credit: Sample Image Caption</div></div>
But I have a separate style for caption. So, I must use a custom view, using which gives an extra space.
I also refered the below link and tried.
How to remove the top and bottom space on textview of Android
And tried the solutions given in this link. But none of them is working.
Below is my custom view layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="0dp"
android:gravity="top">
<com.ndtv.core.common.util.views.HtmlTextview
android:id="#+id/img_caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/img_caption_color"
android:textSize="#dimen/img_caption_size"
app:customTypeface="#string/roboto_light"
android:padding="0dp"
android:gravity="center|top"
android:includeFontPadding="false"/>
<View
android:id="#+id/line_below_caption"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="#color/img_caption_color"
android:visibility="gone" />
</LinearLayout>
And this is how I'm setting the text to the textview:
public static void createImageCaptionView(Context context, LinearLayout container, String source, Fragment fragment){
if (context != null && container != null && fragment != null) {
LayoutInflater inflater=LayoutInflater.from(context);
View imageCaptionView=inflater.inflate(R.layout.img_caption_view, container, false);
HtmlTextview imgCaption= (HtmlTextview) imageCaptionView.findViewById(R.id.img_caption);
View lineBelowCaptiin=imageCaptionView.findViewById(R.id.line_below_caption);
imgCaption.setHtmlFromString(Utility.decodeString(source),context);
lineBelowCaptiin.setVisibility(View.VISIBLE);
container.addView(imageCaptionView);
}
}
I'm I doing anything wrong here?. I'm not getting whether it's an textview issue or html issue or my layout issue. Please help me to solve this issue.

Related

How to correctly use listSeparatorTextViewStyle for ExpadanbleListView header items?

I've spent a lot of time looking for a way to get the default header state indicator (▲/▼) to show on my ExpadanbleListView header item (something I would expect to be trivial). Eventually, I've found mention of the android:attr/listSeparatorTextViewStyle style. So I tried this in my group view layout XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
style="?android:attr/listSeparatorTextViewStyle"
android:id="#+id/firmwareItemHeader"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="50dp"/>
</LinearLayout>
But the result is wrong - the indicator overlaps with the text:
How to fix this?
Of note: the ExpandableListView has android:indicatorRight="?android:attr/expandableListPreferredChildIndicatorRight".
As you can see, my header view layout is a primitive single TextView, and it's going to stay that way. I'll happily use a default view with an indicator instead of my own XML, if such a view exists (I couldn't find one).
One can set a custom #drawable indicator via android:groupIndicator attibute of the list view, but again, I can't find any default value.

Custom InfoWindow -- image showing, text not showing

I want to make an infowindow showing an image, a title, and a subtitle, using the default design for the InfoWindow, and am thereby implementing the InfoWindowAdapter interface in my code. Because I want to keep the default design for the window, I am using the getInfoContents method and setting my values there. However, the only thing that shows when I click on the marker is the image, not the text. I tried commenting out the image to see if the text was just getting buried by the image, but nothing showed up. My Title and subtitle fields are not showing in the callout.
However, when I put the same code inside the getInfoWindow method, all three fields show up as expected.
I'd rather not use the getInfoWindow method since the default callout style suffices for me.
Here's where I call the custom info adapter:
private class CustomWindowAdapter implements GoogleMap.InfoWindowAdapter {
private View infoView;
CustomWindowAdapter() {
infoView = getLayoutInflater().inflate(R.layout.custom_map_infoview, null);
}
#Override
public View getInfoContents(Marker marker)
{
TextView title = (TextView)infoView.findViewById(R.id.popup_title);
TextView subtitle = (TextView)infoView.findViewById(R.id.popup_subtitle);
ImageView image = (ImageView)infoView.findViewById(R.id.popup_image);
title.setText(marker.getTitle());
subtitle.setText(marker.getSnippet());
image.setImageResource(R.drawable.image);
return infoView;
}
#Override
public View getInfoWindow(Marker marker)
{
return null;
}
}
And here's my layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/popup_image"
android:layout_height="match_parent"
android:layout_width="match_parent" />
<TextView
android:id="#+id/popup_title"
android:layout_height="match_parent"
android:layout_width="match_parent" />
<TextView
android:id="#+id/popup_subtitle"
android:layout_height="match_parent"
android:layout_width="match_parent" />
</LinearLayout>
Any ideas of why it might not be showing up?
One of the problems with info windows is that since the View is being rendered by another process, you cannot readily use tools like Hierarchy View to see if the layout is working as expected. Using an IDE's graphical layout editor can help provide a preview that may be useful in diagnosing problems.
Regardless, in this case, you requested that all three children of a vertical LinearLayout have a height of match_parent, and with no weight. As a result, "first one in wins", and the two TextView widgets would wind up with a height of 0.

Listview changing size of (reused) views

I am all for reusing views in listview. I always set visibility, contents, witdth etc. of all controls again in getView Unfortunately it seems ListView fails to recalculate height.
Picture one shows the initial item showed:
Picture two shows how item one is rendered after we scrolled away and back into it
The background linearlayout height (the black area) made me think that in picture two, Android is reusing a view that just showed a much heigher item (e.g. the second item). But why does it not recalibrate/reset/recalclulate itself (it is in "wrap_content" mode in its XML) when reused as view for the first item which content (text + image) is not as heigh?
In truth I am not sure what is happening. The problem only manifests itself if I have image in the view. I have tried organize the bitmap/image loading in different ways (sample code underneath) with different things commented out, but that does not seem to make much difference. I am really at a loss here as to the reason.
override_listitem_news.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="wrap_content"
android:padding="10dip"
android:background="#android:color/black"
>
<TextView
android:id="#+id/listitem_news_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="22sp"
android:padding="5dip"
android:text="#string/newsItemTitle"/>
<TextView
android:id="#+id/listitem_news_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="italic"
android:textSize="15sp"
android:padding="5dip"
android:text="#string/newsItemDate"/>
<TextView
android:id="#+id/listitem_news_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="normal"
android:textSize="15sp"
android:padding="5dip"
android:autoLink="web"
android:text="#string/newsItemDesc"
android:background="#android:color/darker_gray"
/>
<ImageView
android:id="#+id/listitem_news_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Here is code where I load image in getView
ViewTreeObserver vto = image.getViewTreeObserver();
vto.addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
image.getViewTreeObserver().removeGlobalOnLayoutListener(this);
image.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
SharedCode.sharedUtilScaleImage_Width(image);
}
}
);
image.setTag(data.image_file_name + data.image_file_url);
Bitmap bit = null;
bit = SharedCode.sharedGetFileFromOffline(thisActivityContext, "news", data.image_file_name, MyGetKindOfFile.ImageAsBitmap).bitmap;
if (bit != null) {
image.setImageBitmap(bit);
image.setVisibility(View.VISIBLE);
}
else {
image.setImageBitmap(null);
image.setVisibility(View.GONE);
}
image.setPadding(0, 0, 0, 0);
image.setBackgroundColor(data.backgroundColorInt);
For what it is worth, problem appeared to be related to the imageview. Just for reference, I will write here how I solved it.
In getView I fixed the imageview width to screen width (instead of "wrap-content" and/or parent view width - earlier code used OnGlobalLayoutListener for parent width)
I switched over to using SetDrawable instead of SetImageBitmap. It is odd, but this difference was actual very important in solving the odd space around the imageview after scrolling an item/row in/out of view.
My research did also indicate that others had problems using wrap_content in listview for cases similar to mine, but I was not able to find anyone who had experienced exact same problems as me.

Setting custom view into layout in android

I am just learning about android development, and I am having some issues with getting this to work.
I have an activity that uses a relatively layout. I need it to have 2 buttons along the bottom, and then right above the bottoms, I want my custom view to take up the rest of the space.
viewer.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<sketchViewer.AnimationPanelView
android:id="#+id/animationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/homeFromViewerButton"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<Button
android:id="#+id/homeFromViewerButton"
android:layout_width="640dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Replay" />
<Button
android:id="#+id/replayButton"
android:layout_width="640dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Home" />
</RelativeLayout>
The issue I am having is I that when I run my program, I need to pass a number of parameters into my custom view constructor so that my custom view decides what it should draw. So after creating an instance of my custom view (AnimationPanelView), I am not sure how I set this object into the space I provided for the view.
This is my activity class:
Viewer.java
public class Viewer extends Activity {
AnimationPanelView animationPanelView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_viewer);
animationPanelView = new AnimationPanelView(this, true /*, more parameters here */);
animationPanelView.setBackgroundColor(Color.GREEN);
RelativeLayout v = (RelativeLayout) findViewById(R.id.viewerLayout);
v.addView(animationPanelView);
}
Right now, with my v.addView command, the view takes up the entire page, covering up the buttons at the bottom. Can anyone shed some light on this? I feel like I am close, but I've been playing around with it for a while, and I just seem stuck.
Check out the implementing a custom view section here. You need to override onLayout and onMeasure so you can tell your container how big you are.
You are adding another custom view to your layout instead you should use
animationPanelView = (AnimationPanelView) findViewById(R.id.animationView);
animationPanelView.setBackgroundColor(Color.GREEN);

How to make a section header in ListView which always sticks on top?

Android does not have a support for section headers on ListView by default. Based from my research, I've learned that there are 2 ways to implement a section header on ListView. The first one is to support 2 types of views in the list view: the separator view and the content view. The second one is to include a separator view in all of the content views and just set the visibility of the separator view to either VISIBLE or GONE. I'm using the second method.
However, when I scroll the ListView upwards, the section header is also scrolled up. I know this is normal. But I want the section header to remain on top as long as some data belonging to its section are still being displayed. The behavior that I want to accomplish is similar to the behavior of the section headers of UITableView in iOS. How can I accomplish this?
Also, I would like to note that I've read that one solution for this is to create a view above the ListView and just change it if needed. However, this won't work for all phones. For example, the ListView on Samsung phones are bouncing. If I placed a view above the ListView to act as header and the ListView bounces, the dummy header view won't bounce together with the ListView. Also, the top of the default ListView can easily be spotted because it glows when the ListView is being scrolled. Is there anyway to accomplish the said effect while making sure that it still looks natural?
The picture below shows the problem that I will be encountering if I just add a textview on top of the listview: (Taken from Samsung Galaxy S2)
see in this xml + symbol is static u will get some help
<?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:id="#+id/linearlayout">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#00ffff">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/plus" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</ScrollView>

Categories

Resources