Custom InfoWindow -- image showing, text not showing - android

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.

Related

How to make recyclerView_items unclickable, while one of them is clicked and working?

Premise
Each of my RecyclerView_items displays an image, and changes its image_resource when tapped.
One of them is the right answer which has additional function: navigation to another fragment 5-second after changing its image.
Basically, the function of clickListener of RecyclerView_items is
wrong item
click -> change image_resource
right item
click -> change image_resource -> delay(5000) -> navigate to another fragment
Problem
Then, my problem is that after the right_item is tapped, other items are clickable during delay(5000).
I don't want them to change their images during delay(5000).
How to do it?! Thanks in advance.
You can achieve this by adding a flag at time when user click right image then make that variable false. As such after the delay before moving to the next fragment make it true again.
boolean flag = true;
then in your item click method
view.setOnClickListner {
if (flag) {
if (rightimageclicked) {
flag = false;
delay {
flag = true;
// Move to other fragment
}
} else {
// change the image for wrong click
}
}
}
The simple trick you can use is make a FrameLayout or View that overlaps on the RecyclerView. Set ists visibility to GONE. Then inside activity or fragment where you can access this FrameLayout or View which is overlapping, add an empty OnClickListener on this view.
*viewId*.setOnClickListener { }
Now set its visibility to VISIBLE when you call delay. When delay finished again set its visibility to GONE
This is what I understood, you want to lock the entire screen (make all items or buttons unclickable) when you are in delay(5000).
This is what I would do, give a CLICKABLE overlay view on top of recycler view and toggle its visibility. I used the same for locking the entire screen while making an API call.
view_overlay.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_progress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:clickable="true"
android:focusable="true"
android:elevation="5dp"
android:visibility="invisible">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:indeterminateTint="#android:color/transparent" />
</RelativeLayout>
Obviously you can replace ProgressBar with just View to get a transaprent view.
To include it in your main view, give this at the bottom of your parent layout or below recycler view. Whichever you choose make sure you have the overlay view on top of recycler view.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent">
...
...
...
<include layout="#layout/view_overlay" />
</RelativeLayout>

Custom ListView set Background Drawable in XML doesnt work

I'm getting frustrated about this:
When I define a custom ListView Layout,
Android Studio doesn't keep the background drawable I set in there.
Tried many things, and setting background programmatically doesn't work
since it's ignoring the layout_width which must be set to "wrap_content".
Actual style of background
Result without coding
If anyone could help me, I'd be very grateful !:)
EDIT:
I'm creating a Messenger and I want to display messages in a similar way to WhatsApp, where messages are shown in a listView. Depending on message is sent or received, items should be aligned ParentStart or ParentEnd.
But more importantly, if a message only contains a few chars, I don't want the ListItem Background to fill the entire screen, so it should be set dynamically.
I thought I could achieve this through simply setting wrap content in the parent layout file.
Files look like this:
<?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="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentEnd="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
tools:background="#drawable/background_message_sent">
//Here are TextViews
</LinearLayout>
</RelativeLayout>
Here is my ListViewAdapter, where I set background
(#drawable/background_message_sent/received) programmatically.
However, this covers the entire width of ListView, regardless of message length.
#Override
public View getView(int pos, View convertView, ViewGroup parent) {
int currentUserID = 1;
int senderID = messagesArrayList.get(pos).getSenderID();
if (senderID == currentUserID){
View v = View.inflate(context, R.layout.layout_chat_message_sent, null);
v.setBackgroundResource(R.drawable.background_message_sent);
TextView tvMessageText = v.findViewById(R.id.tvMessageText);
TextView tvTimeStamp = v.findViewById(R.id.tvTimeStamp);
tvMessageText.setText(messagesArrayList.get(pos).getMessageText());
tvTimeStamp.setText(messagesArrayList.get(pos).getTimeStamp());
return v;
}
else {
View v = View.inflate(context, R.layout.layout_chat_message_received, null);
v.setBackgroundResource(R.drawable.background_message_received);
TextView tvMessageText = v.findViewById(R.id.tvMessageText);
TextView tvTimeStamp = v.findViewById(R.id.tvTimeStamp);
tvMessageText.setText(messagesArrayList.get(pos).getMessageText());
tvTimeStamp.setText(messagesArrayList.get(pos).getTimeStamp());
return v;
}
}
Well, after trying, I got the solution if anyone comes to this point:
You have to set your background drawable directly for each TextView, not for Parent Layouts.
These two Lines finally solved everything ^^
android:maxEms="14"
android:background="#drawable/background_message_sent"
<TextView
android:id="#+id/tvMessageText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginEnd="0dp"
android:layout_marginTop="5dp"
android:layout_weight="0.22"
android:text="42456456456546"
android:textColor="#color/tentakelPrimary"
android:maxEms="14"
android:background="#drawable/background_message_sent"/>

Remove extra space after html image

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.

Android - Pop up a View on top of another View

Suppose I have a Button like what is in the following:
I want once this button is clicked a ImageView(popup message) appears in the top of this button, something like this:
But I do not know how put a View as an overlay on top of another View, Just I know this can be achieved by FrameLayout . Please suppose I want to embed this capability into the Button (in the other phrases I want to create a custom button with a method called showPopup(...) like Textview's setError(...))
Can any one please help me? Thanks
How about taking a look at the Quick Action Dialog?
It is an old article (We're talking Android 2.2 territory), but should still work for the latest devices and OS.
The example uses a contextual popup with buttons, but should be easily modifiable to just show text or whatever you want. There is an example further in that shows use alongside a button.
You can also use RelativeLayout. you can define as on top of other views that way.
Notice that if you define two views, the last one is stacked on the first
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
You can use a popupWindow
PopupWindow popupWindow = new PopupWindow(context);
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View popupView = layoutInflater.inflate(R.layout.popup_view_layout, null);
Imageview popupImage = popupView.findViewById(R.id.imageView);
popupWindow.setContentView(popupView);
popupWindow.setBackgroundDrawable(null);
int popupY = button.getTop() - button.getHeight();
int popupX = button.getLeft();
popupWindow.showAtLocation(keyView, Gravity.NO_GRAVITY, popupX, popupY);
The popup_view_layout can look like this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:minWidth="20dp"
android:visibility="gone"
app:srcCompat="#drawable/yourImage" />
</FrameLayout>
For more information click here or check this question's answers.

Android Ellipsize marquee issues with currently selected list item

My Question - I want the text of a TextView I have in a custom ListView to marquee scroll ONLY when the item is selected in the ListView. When the list item loses focus, I want the marquee to stop scrolling. I know that I need to set the TextView to enabled (setEnabled(true)) for scrolling to work however when I do this as items are added, they ALL scroll, which is not the behavior I want (but it does make sense why this happens). I tried setting them programmatically using the click handler of the ListView to set the TextView to enabled (setEnabled(true)), keep track of the current selected item in a private variable, then conversely setting the previous Views TextView enabled status to false when a new item is clicked and so on. I hope this makes sense. Here's some Java code that might better illustrate it:
private View tempListItemView = null;
if (this.tempListItemView != null) {
TextView tempTxtView = (TextView) tempListItemView.findViewById(R.id.txtArticleTitle);
tempTxtView.setSelected(false);
tempTxtView.setEllipsize(TruncateAt.END);
}
// Set marquee of currently selected list item
TextView tt = (TextView) v.findViewById(R.id.txtArticleTitle);
tt.setEllipsize(TruncateAt.MARQUEE);
tt.setSelected(true);
tempListItemView = v;
This does work, sort of. However, it's a little clunky. For example if the previous item leaves the display it never gets turned off and when I select the list item, I lose all of the custom listSelector properties I have set (see below). Also, I've had some other odd behavior with the background item of the scrolling TextView changing to black (and even the entire ListView listSelector disappearing entirely. None of this occurs when I use the keypad on my Droid. It works as it should, however I'm just trying to emulate this functionality when list items are pressed. I haven't found much on the web on how to achieve this. Below are snippets and screen shots.
I have a ListActivity that I've bound to an ArrayAdapter with a custom list view. The content view that this activity is tied to looks like this:
<?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"
>
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="#drawable/list_selector"
/>
</LinearLayout>
The list_selector drawable looks like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable ="#drawable/maroon_list_select_bg" />
<item android:drawable="#drawable/maroon_list_select_bg" />
</selector>
Its Drawable is simply a 1x1 maroon pixel to paint a maroon background color of the list item selection. In the interest of saving space, I've attached a screenshot of what the custom view looks like: (my first post so I couldn't :(
and here is a brief snippet of the custom layout that defines each list item (with the marquee TextView)...
<TextView
android:id="#+id/txtArticleTitle"
android:textSize="16sp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/list_item"
android:singleLine="true"
android:ellipsize="end">
</TextView>
<TextView
android:id="#+id/txtArticleSnippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/list_desc_copy"
>
</TextView>
<TextView
android:id="#+id/txtArticleVotes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Votes: 1576"
android:textColor="#color/list_small_copy"
>
</TextView>
Please remember, I do know that I need to set android:ellipsize to "marquee" to get the scrolling but as explained above, I was doing this programmatically to currently selected list tiems.
Does anyone have a solution for this? Thanks in advance and I apologize for the lengthy post...just trying to be thorough. Thanks again!
Have you tried to use a custom TextView ::New class and extend TextView:: ? Then override the onTouchEvent(MotionEvent event) And you are saying that it works good with the keypad on you're droid. So probably instead of calling
super.onTouchEvent(MotionEvent event);
call with the correct key
onKeyDown(int keyCode, KeyEvent event)
or this is enough
onTrackballEvent(MotionEvent event)
Dont forget to change the XML
I'm not sure where you put that setSelected(true).
In my case I'm using GridView(should apply to ListView as well). I just do this in setOnItemClickListener:
gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
v.setSelected(true);
// FIXME - text not align in the background
Toast.makeText(getSherlockActivity()
, "click " + SHOWN_TRACKED_ITEMS.get(position).name, Toast.LENGTH_SHORT).show();
}
});
It seems while the second item clicked, the first one doing the marquee is stopped and the second one start to marquee. Looks like it will automatically un-select other previous selected item.
You can see it live here in gif file.

Categories

Resources