I have an app that's getting information from an API request and then displaying a list of devices. After several hours of combing through documentation, I cannot figure out how to format the View that is created from the ArrayAdapter. Essentially, if the device has an error, I want to display a red circle to the right of the button and display a green button if there is no error.
deviceList is the name of a ListView that I am trying to display my list of buttons inside of. deviceNames is an array of strings that contains the names of the devices.
The TextViews that are created are also clickable, which is what the onItemClickListener is handling. This section works, but I wanted to leave it in because I do need the buttons to start an activity that displays device-specific information.
Ideally I would like to essentially create a template that I can just change the values of the text and the color of the indicator for
Below is my code:
// List of device names
val listView: ListView = findViewById(R.id.deviceList)
val arrayAdapter1: ArrayAdapter<*>
arrayAdapter1 = ArrayAdapter(
this#Homepage,
R.layout.device_button,
deviceNames
)
listView.setAdapter(arrayAdapter1)
listView.onItemClickListener =
AdapterView.OnItemClickListener { parent, view, position, id ->
val pos = position
println(pos)
val device = jsonArray.getJSONObject(pos)
val ID = device.get("id") as String
println(ID)
goToDeviceDetail(ID)
}
Below is the XML file for device_button. I tried to add formatting here and essentially create a template for a button that would allow me to change the text and the color of the indicator, but it got mad that it wasn't just a TextView.
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:textColor="#25383C"
/>
Below is the button that I would like for it to look like. I'm likely going to just make the background a solid color rather than the image that is in the below picture:
I would say the biggest problem is your using a simple API for a more complex problem. It is entirely possible do it with a ListView and ArrayAdapter. But I would highly recommend looking into RecyclerView/RecyclerView.Adapter
The way it works out is...
RecyclerView.Adapter binds your list of data ie Devices to the individual RecyclerView.ViewHolder
The ViewHolder would inflate your xml layout that contains the button. You then have access to all View contained in that layout easily.
You then can put listeners on the button.
The Adapter then can be setup to receive new data, when received it can rebind the data that has changed.
Say the user clicks one of the device buttons it does a task. When it gets back it will say hey Adapter I have a new List for you.(The list now contains the "fixed" device).
ViewModel(contains observable data)->Fragment/Activity(Observers the data)->Adapter(Receives the data)->ViewHolder(Displays the data)->Activity("Fixes the data")->ViewModel->...loops
Here is a very good example.
https://medium.com/#atifmukhtar/recycler-view-with-mvvm-livedata-a1fd062d2280
If you really want to keep using the ListView and ArrayAdapter you are receiving the clicked view here.
OnItemClickListener {
/*Parent of the view*/ parent,
/*The view clicked*/ view,
/*position of data*/position,
/*id of the view clicked*/ id
->{
view.findById(R.id.text_view);
//onClick
}
}
With that you know what has been clicked so you know what has to be changed later when you get back from your other Activity.
I have a dialog containing a list of notes, and I want to make the user scroll to the end of the list to find the "OK" button to close the dialog.
The dialog contains a ListView and I add the button to the list using the footer row.
View footerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).
inflate(R.layout.list_footer_button, null, false);
listView.addFooterView(footerView);
When i turn on talk back and open this dialog, it reads the wrong count for the ListView as it is including the footer row. For example if my list has 3 items, talkback reads "Item 1 of 4".
ISSUE
How can i get talkBack to read the correct number of items ignoring the footer row?
OR
If i can't change this, how else do i create a dialog where the user has to scroll to the end of the list before seeing the button to dismiss the dialog.
I have resolved this issue by adding the button to the View for the last row rather than adding a footer.
My layout for each row contains a textView and a button, and the button is set to be "invisible".
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout android:id="#+id/notes_details"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- other views here but removed for this post -->
<TextView
android:id="#+id/notes_text"
style="#style/notes_text_style"/>
</LinearLayout>
<Button
android:id="#+id/notes_button"
style="#style/notes_button"
android:layout_below="#id/notes_details"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
</RelativeLayout>
In the adapter for the list, I show/hide the button based on whether the row is the last row
boolean isLastRow = iPosition == getCount()-1;
okButton.setVisibility(isLastRow ? View.VISIBLE : View.GONE);
Accessibility changes needed
There was additional work to make this all work for Accessibility purposes. If no changes were made to support accessibility, only the rows are navigatable. Therefore the last row will select the notes text and OK button as one selectable item and you would not be able to navigate to the button using a keyboard/trackerball.
Firstly you have to set the list so that items in a row are focusable
listView.setItemsCanFocus(true);
Secondly, in code in the adapter, i set the focusable/nextFocusXXX on the notes textView and button accordingly
// when in accessibility mode, we want to set the navigation order for
// the list item's text and the OK button
boolean isLastRow = iPosition == getCount()-1;
if (isAccessibilityEnabled) {
notesTextView.setFocusable(true);
okButton.setFocusable(true);
rowView.setNextFocusForwardId(isLastRow ? R.id.notes_button: R.id.notes_text);
rowView.setNextFocusDownId(isLastRow ? R.id.notes_button: R.id.notes_text);
okButton.setNextFocusUpId(R.id.notes_text);
}
I had another usecase with this issue.
Requirements
I have a screen containing a list of items and I have a Floating Action Button (FAB) on the bottom right of the screen allowing the user to add items to the list. On the right hand side of each row is a button presenting options for that row item.
I need the FAB to not overlay the last row in the list, otherwise I am never able to click on the right hand button of the last row as it will be under the FAB.
Solutions and their issues
I tried several solutions. One was adding an extra count to the list items and when getting the view for this last row I return an empty view, the height of the FAB. I also tried adding this empty padding row as the list footer. In both cases TalkBack reads one too many for the number of items in the list.
I can not use the solution I have posted for this question for my list of notes. I need the FAB to always be in the bottom right hand side of the screen (not just after the last row) even if there are only 1 or 2 items in the list or over a screen-full of items.
Working Solution
Adding the last 4 attributes in the code below to my list definition in the xml layout seems to solve the issue. There are no additional items added to the list so TalkBack reads the list count correctly and the following ensures the FAB in the bottom left of the screen never overlaps the last row.
<!-- Instead of adding a footer row to stay clear of the FAB,
add a padding to the listView and set clipToPadding to false
android:overScrollFooter is set to transparent to avoid having a divider
for the last item so there is just white space below the last item -->
<ListView
style="#style/my_list_style"
android:layout_alignParentTop="true"
android:paddingBottom="82dp"
android:clipToPadding="false"
android:footerDividersEnabled="false"
android:overScrollFooter="#android:color/transparent"/>
I have a messaging application. I can get messages and list from mysql database via json. When i get messages (for example last 10 messages and newer is at the bottom) first record is shown at the top, so user have to scroll down to see last message. I want to focus to last message and when user scrolls to top, I want to put there a Load Previous Messages button. I found Load More buttoni but its at the bottom of page. How can I do that?
My codes are these:
// Hashmap for ListView
categoryList = new ArrayList<HashMap<String, String>>();
// get listview
ListView lv = getListView();
Button btnLoadMore = new Button(this);
btnLoadMore.setText("Load older messages");
FrameLayout footerLayout = (FrameLayout) getLayoutInflater().inflate(R.layout.listfooter,null);
lv.addFooterView(btnLoadMore);
As I said in comments, simply change addFooterView() to addHeaderView() method which give you the Load More at the top of the list. This method use three parameters (at least one: View from reference) which are:
View v: the Load More view to add at the top
Object data: data associated to the view
boolean isSelectable: value to make the view selectable or not
Using these three params instead of only the view may allow you to prevent the color state on it by using android:listSelector attribute. Indeed, sometimes you want to prevent a background state on a header/footer view. That being says, the method might be:
lv.addHeaderView(headerLayout, null, false); // this isn't clickable now
Note: now, you can call the view variable headerLayout instead of footerLayout ;)
As I understand your requirements, HeaderView should have the Load More Button into it, to avoid to create it dynamically, as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load More"
android:onClick="loadMoreDatas" />
</LinearLayout>
Now, you have the right Button at the top of your list and you can add a method to handle the click event into the Activity (refer to android:onClick attribute) as:
public void loadMoreDatas(View v) {
// load more messages
}
Finally, to focus to a specific item, in your case the last item in the list (at the bottom), you should use setSelection(int position) which go to the index selected in its parameter. Then, after setting the Adapter, call this on the ListView as:
// set the adapter
setListAdapter(adapter);
// go to selection (last item)
lv.setSelection(adapter.getCount() - 1);
The getCount() method use (normally) your ArrayList size. Then, you have to prevent an IndexOutBoundsException because your array begins with position 0 and not 1. So, the last position is "All Items less First Position (0)".
However, the perfect method to begin at the bottom of the list is setStackFromBottom():
When stack from bottom is set to true, the list fills its content starting from the bottom of the view.
Then, it might be better to have:
// start from bottom
lv.setStackFromBottom(true);
This should do the trick and I hope this will be usefull.
I've spent about 6 hours on this so far, and been hitting nothing but roadblocks. The general premise is that there is some row in a ListView (whether it's generated by the adapter, or added as a header view) that contains an EditText widget and a Button. All I want to do is be able to use the jogball/arrows, to navigate the selector to individual items like normal, but when I get to a particular row -- even if I have to explicitly identify the row -- that has a focusable child, I want that child to take focus instead of indicating the position with the selector.
I've tried many possibilities, and have so far had no luck.
layout:
<ListView
android:id="#android:id/list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
/>
Header view:
EditText view = new EditText(this);
listView.addHeaderView(view, null, true);
Assuming there are other items in the adapter, using the arrow keys will move the selection up/down in the list, as expected; but when getting to the header row, it is also displayed with the selector, and no way to focus into the EditText using the jogball. Note: tapping on the EditText will focus it at that point, however that relies on a touchscreen, which should not be a requirement.
ListView apparently has two modes in this regard:
1. setItemsCanFocus(true): selector is never displayed, but the EditText can get focus when using the arrows. Focus search algorithm is hard to predict, and no visual feedback (on any rows: having focusable children or not) on which item is selected, both of which can give the user an unexpected experience.
2. setItemsCanFocus(false): selector is always drawn in non-touch-mode, and EditText can never get focus -- even if you tap on it.
To make matters worse, calling editTextView.requestFocus() returns true, but in fact does not give the EditText focus.
What I'm envisioning is basically a hybrid of 1 & 2, where rather than the list setting if all items are focusable or not, I want to set focusability for a single item in the list, so that the selector seamlessly transitions from selecting the entire row for non-focusable items, and traversing the focus tree for items that contain focusable children.
Any takers?
This helped me.
In your manifest :
<activity android:name= ".yourActivity" android:windowSoftInputMode="adjustPan"/>
Sorry, answered my own question. It may not be the most correct or most elegant solution, but it works for me, and gives a pretty solid user experience. I looked into the code for ListView to see why the two behaviors are so different, and came across this from ListView.java:
public void setItemsCanFocus(boolean itemsCanFocus) {
mItemsCanFocus = itemsCanFocus;
if (!itemsCanFocus) {
setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
}
}
So, when calling setItemsCanFocus(false), it's also setting descendant focusability such that no child can get focus. This explains why I couldn't just toggle mItemsCanFocus in the ListView's OnItemSelectedListener -- because the ListView was then blocking focus to all children.
What I have now:
<ListView
android:id="#android:id/list"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:descendantFocusability="beforeDescendants"
/>
I use beforeDescendants because the selector will only be drawn when the ListView itself (not a child) has focus, so the default behavior needs to be that the ListView takes focus first and draws selectors.
Then in the OnItemSelectedListener, since I know which header view I want to override the selector (would take more work to dynamically determine if any given position contains a focusable view), I can change descendant focusability, and set focus on the EditText. And when I navigate out of that header, change it back it again.
public void onItemSelected(AdapterView<?> listView, View view, int position, long id)
{
if (position == 1)
{
// listView.setItemsCanFocus(true);
// Use afterDescendants, because I don't want the ListView to steal focus
listView.setDescendantFocusability(ViewGroup.FOCUS_AFTER_DESCENDANTS);
myEditText.requestFocus();
}
else
{
if (!listView.isFocused())
{
// listView.setItemsCanFocus(false);
// Use beforeDescendants so that the EditText doesn't re-take focus
listView.setDescendantFocusability(ViewGroup.FOCUS_BEFORE_DESCENDANTS);
listView.requestFocus();
}
}
}
public void onNothingSelected(AdapterView<?> listView)
{
// This happens when you start scrolling, so we need to prevent it from staying
// in the afterDescendants mode if the EditText was focused
listView.setDescendantFocusability(ViewGroup.FOCUS_BEFORE_DESCENDANTS);
}
Note the commented-out setItemsCanFocus calls. With those calls, I got the correct behavior, but setItemsCanFocus(false) caused focus to jump from the EditText, to another widget outside of the ListView, back to the ListView and displayed the selector on the next selected item, and that jumping focus was distracting. Removing the ItemsCanFocus change, and just toggling descendant focusability got me the desired behavior. All items draw the selector as normal, but when getting to the row with the EditText, it focused on the text field instead. Then when continuing out of that EditText, it started drawing the selector again.
My task was to implement ListView which expands when clicked. The additional space shows EditText where you can input some text. App should be functional on 2.2+ (up to 4.2.2 at time of writing this)
I tried numerous solutions from this post and others I could find; tested them on 2.2 up to 4.2.2 devices.
None of solutions was satisfactionary on all devices 2.2+, each solution presented with different problems.
I wanted to share my final solution :
set listview to android:descendantFocusability="afterDescendants"
set listview to setItemsCanFocus(true);
set your activity to android:windowSoftInputMode="adjustResize"
Many people suggest adjustPan but adjustResize gives much better ux imho, just test this in your case. With adjustPan you will get bottom listitems obscured for instance. Docs suggest that ("This is generally less desirable than resizing"). Also on 4.0.4 after user starts typing on soft keyboard the screen pans to the top.
on 4.2.2 with adjustResize there are some problems with EditText focus. The solution is to apply rjrjr solution from this thread. It looks scarry but it is not. And it works. Just try it.
Additional 5. Due to adapter being refreshed (because of view resize) when EditText gains focus on pre HoneyComb versions I found an issue with reversed views:
getting View for ListView item / reverse order on 2.2; works on 4.0.3
If you are doing some animations you might want to change behaviour to adjustPan for pre-honeycomb versions so that resize doesnt fire and adapter doesn't refresh the views. You just need to add something like this
if(android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.HONEYCOMB)
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
All this gives acceptable ux on 2.2 - 4.2.2 devices.
Hope it will save people some time as it took me at least several hours to come to this conclusion.
This saved my life--->
set this line
ListView.setDescendantFocusability(ViewGroup.FOCUS_AFTER_DESCENDANTS);
Then in your manifest in activity tag type this-->
<activity android:windowSoftInputMode="adjustPan">
Your usual intent
We're trying this on a short list that does not do any view recycling. So far so good.
XML:
<RitalinLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:id="#+id/cart_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay"
/>
</RitalinLayout>
Java:
/**
* It helps you keep focused.
*
* For use as a parent of {#link android.widget.ListView}s that need to use EditText
* children for inline editing.
*/
public class RitalinLayout extends FrameLayout {
View sticky;
public RitalinLayout(Context context, AttributeSet attrs) {
super(context, attrs);
ViewTreeObserver vto = getViewTreeObserver();
vto.addOnGlobalFocusChangeListener(new ViewTreeObserver.OnGlobalFocusChangeListener() {
#Override public void onGlobalFocusChanged(View oldFocus, View newFocus) {
if (newFocus == null) return;
View baby = getChildAt(0);
if (newFocus != baby) {
ViewParent parent = newFocus.getParent();
while (parent != null && parent != parent.getParent()) {
if (parent == baby) {
sticky = newFocus;
break;
}
parent = parent.getParent();
}
}
}
});
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override public void onGlobalLayout() {
if (sticky != null) {
sticky.requestFocus();
}
}
});
}
}
this post was matching exactly my keywords. I have a ListView header with a search EditText and a search Button.
In order to give focus to the EditText after loosing the initial focus the only HACK that i found is:
searchText.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
// LOTS OF HACKS TO MAKE THIS WORK.. UFF...
searchButton.requestFocusFromTouch();
searchText.requestFocus();
}
});
Lost lots of hours and it's not a real fix. Hope it helps someone tough.
If the list is dynamic and contains focusable widgets, then the right option is to use RecyclerView instead of ListView IMO.
The workarounds that set adjustPan, FOCUS_AFTER_DESCENDANTS, or manually remember focused position, are indeed just workarounds. They have corner cases (scrolling + soft keyboard issues, caret changing position in EditText). They don't change the fact that ListView creates/destroys views en masse during notifyDataSetChanged.
With RecyclerView, you notify about individual inserts, updates, and deletes. The focused view is not being recreated so no issues with form controls losing focus. As an added bonus, RecyclerView animates the list item insertions and removals.
Here's an example from official docs on how to get started with RecyclerView: Developer guide - Create a List with RecyclerView
some times when you use android:windowSoftInputMode="stateAlwaysHidden"in manifest activity or xml, that time it will lose keyboard focus. So first check for that property in your xml and manifest,if it is there just remove it. After add these option to manifest file in side activity android:windowSoftInputMode="adjustPan"and add this property to listview in xml android:descendantFocusability="beforeDescendants"
Another simple solution is to define your onClickListener, in the getView(..) method, of your ListAdapter.
public View getView(final int position, View convertView, ViewGroup parent){
//initialise your view
...
View row = context.getLayoutInflater().inflate(R.layout.list_item, null);
...
//define your listener on inner items
//define your global listener
row.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
doSomethingWithViewAndPosition(v,position);
}
});
return row;
That way your row are clickable, and your inner view too :)
The most important part is to get the focus working for the list cell.
Especially for list on Google TV this is essential:
setItemsCanFocus method of the list view does the trick:
...
mPuzzleList = (ListView) mGameprogressView.findViewById(R.id.gameprogress_puzzlelist);
mPuzzleList.setItemsCanFocus(true);
mPuzzleList.setAdapter(new PuzzleListAdapter(ctx,PuzzleGenerator.getPuzzles(ctx, getResources(), version_lite)));
...
My list cell xml starts like follows:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/puzzleDetailFrame"
android:focusable="true"
android:nextFocusLeft="#+id/gameprogress_lessDetails"
android:nextFocusRight="#+id/gameprogress_reset"
...
nextFocusLeft/Right are also important for D-Pad navigation.
For more details check out the great other answers.
I just found another solution. I believe it's more a hack than a solution but it works on android 2.3.7 and android 4.3 (I've even tested that good old D-pad)
init your webview as usual and add this: (thanks Michael Bierman)
listView.setItemsCanFocus(true);
During the getView call:
editText.setOnFocusChangeListener(
new OnFocusChangeListener(View view,boolean hasFocus){
view.post(new Runnable() {
#Override
public void run() {
view.requestFocus();
view.requestFocusFromTouch();
}
});
Just try this
android:windowSoftInputMode="adjustNothing"
in the
activity
section of your manifest.
Yes, it adjusts nothings, which means the editText will stay where it is when IME is opening. But that's just an little inconvenience that still completely solves the problem of losing focus.
In my case, there is 14 input edit text in the list view. The problem I was facing, when the keyboard open, edit text focus lost, scroll the layout, and as soon as focused view not visible to the user keyboard down. It was not good for the user experience. I can't use windowSoftInputMethod="adjustPan". So after so much searching, I found a link that inflates custom layout and sets data on view as an adapter by using LinearLayout and scrollView and work well for my case.
I have a ListView. My point is, after selecting one of the elements on that view, I want to show a menubar Right below that element. What Im tryin to do is pretty much something like the app Any.Do.
Heres a picture of what I intent to do.
How can I do it ? Id rather not use GreenDroid.
To fill the array I use this code snniped:
TaskBoard.class
setListAdapter(new SimpleAdapter(this, array_tasks, R.layout.dash_tasks,
new String[] { "task", "project" , "date"}, new int[] { R.id.dashtask,
R.id.taskproject, R.id.final_date}));
R.layout.dash_tasks is the view im showing to the user.
This is a code snipped to call the menubar I want to show:
dash_tasks.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/menu_bar"
style="#style/page"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:visibility="gone">
<include layout="#layout/menubar"></include>
</RelativeLayout>
EDITED:
Ive figured out how can I find the position Im clicking. The problem is, its a relative position. I mean, if I click in the 2nd item on the array, the menubar will apear in the 2nd position every 7 items (thts the number of items that fill a page). Im guessin this position is acording to the screen and not the ListView..
lv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
View x= parent.getChildAt(position);
View a= x.findViewById(R.id.mini_menu_bar);
a.setVisibility(View.VISIBLE);
I hope this helps you understand the problem
What you do is that in your list items layout xml you also have the menu (wrapped in a vertical linearlayout) but set it to android:visibility="gone". When the item is pressed you just show that hidden menu view.
It depends on how many view you wanna display at the same time. If there is only one, and you want it to sorta stand out without much of programming I would go for QuickAction. If you have multiple views at the same time expanded, my suggestion would be to use RelativeLayout and BeLow. What you need to do is fairly simple. Make sure there is a way for your to find the item below the tapped on, add the new view below the tapped item and add the change the item bellow tapped item to be below the new item. Something like the code below
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.BELOW, view.getId());
Another solution would be to use LinearLayout but requires a loop to find the index of the item tapped on and adding the new item below it:
parent.addView(subItem, index+1);