Custom listview with two buttons in each row - android

I have spent literally two days trying to sort this issue. If anyone could help I would be massively appreciative.
What I'm trying to achieve:
Have a ListView, whereby the player can add new entries (players), through a text field (for the player name), and then a submit button. In each field of the ListView, I display the player name, and then two ImageButtons. One with a male symbol, and one with a female symbol. The male symbol is toggled by default, and the user can set the player as being male or female by toggling either the male button or the female button. Finally, once the user moves onto the next screen (a new activity), the application will save the player names and the attached sex to some form of storage and proceed to the next activity.
What I have achieved:
I have a simple array adapter, which upon the player adding a new player name to the list, I run the notifyDataSetChanged() on it. The adapter also is set to use a custom row layout file. Inside the layout file, it looks like this:
<?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="wrap_content">
<RelativeLayout android:layout_height="wrap_content"
android:layout_width="fill_parent" android:id="#+id/relativeLayout1" android:layout_marginTop="5dp">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/playerName"
android:layout_centerVertical="true" android:text="Derp" android:textStyle="bold" android:layout_marginLeft="5dp" android:textSize="22dp" android:textColor="#color/male_blue"></TextView>
<ImageButton android:layout_height="60dp"
android:layout_width="60dp" android:onClick="maleClickHandler"
android:src="#drawable/male_icon_settings" android:id="#+id/buttonA" android:layout_alignParentRight="true" android:layout_marginRight="65dp"></ImageButton>
<ImageButton android:onClick="femaleClickHandler"
android:layout_height="60dp" android:layout_width="60dp" android:id="#+id/buttonB"
android:layout_alignParentRight="true" android:layout_marginRight="5dp" android:src="#drawable/female_icon_settings"></ImageButton>
</RelativeLayout>
</LinearLayout>
The two buttons on each row reference to methods in the class file. Here is my code for this:
public void maleClickHandler(View v) {
RelativeLayout vwParentRow = (RelativeLayout) v.getParent();
ImageButton maleButton = (ImageButton) vwParentRow.getChildAt(1);
maleButton.setImageDrawable(getResources().getDrawable(
R.drawable.male_icon_selected));
vwParentRow.refreshDrawableState();
}
public void femaleClickHandler(View v) {
RelativeLayout vwParentRow = (RelativeLayout) v.getParent();
ImageButton femaleButton = (ImageButton) vwParentRow.getChildAt(2);
femaleButton.setImageDrawable(getResources().getDrawable(
R.drawable.female_icon_selected));
vwParentRow.refreshDrawableState();
}
I haven't yet implemented any inter-connectivity between these two buttons, to allow only one to be active at a time, or to even untoggle one, since I think I might be taking the wrong approach entirely.
The problem:
Upon adding new entries to the list, AFTER toggling one and/or the other male/female buttons, things get really buggy, and the male/female toggled icon might move as it should, along with the attached player string, or more likely, those toggled will stay on that first row (array position 0 of the list), or even move into the second list position, AND copy themselves as being toggled onto the row above.
How you can help...?
I have attached an image below of my screen, from the emulator, to help illustrate my points
Screenshot!
I think that I might need to use some form of custom adapter; I have done so much reading around on the subject, but I can't find anything relevant to what I am trying to achieve, so if you could point me in the right direction, or even try and put together the most basic solution to this type of problem, I would be very grateful.
Finally, when I get this working, which form of storage would be best for storing player names, and their sex? I would like the user to be able to keep the player list after they quit the application and restarted it.
Thanks for any help! :)

You will need to use a Custom Adapter, which in itself should be able to track the male/female flag for each of it's entries.
Your method will not work since the state of the buttons are managed by the getView method of the adapter. Even if you change them by digging through the children, the next time when the getView method is called, it's going to mess up things.

A lot of this depends on how many players you expect to have in your game. If it's a number that would likely fit on one screen (or very close to it), the ListView is actually unnecessary. ListViews and adapters aren't really a convenience method as much as they are a tool to improve performance. They only keep in memory what is on the screen and recycle old, already-displayed Views for new rows when you scroll--this is why some of your button states are being copied to different rows.
There are a couple of ways you could fix this:
You could write a custom adapter yourself as Kumar Bibek suggests. In this adapter, you would want to override the getView() method to make sure each button has the correct state each time the method is called.
You could also simply use a ScrollView populated with a few of your rows manually if you don't have enough data to warrant using a ListView. This way you wouldn't need to worry about your rows being recycled and button states being out of wack.
In addition, you might want to look into using a RadioGroup for the gender selector (I can't think of a much better use for radio buttons since they are made to be mutually exclusive).
Also, the outer LinearLayout in your row XML file looks unnecessary.
As far as storage, you could either use an SQLite database or SharedPreferences. SharedPreferences requires no setup, but I feel like an SQLite database is more suited to your needs.

Related

Android Accessibility: sending several accessibility events on a single touch

Inside one of my recycle view adapters, I have a layout which displays an image and a checkbox.
I am adding accessibility to the app, and I want it so that when a user touches a picture, it will get a reading of the image and the current state of the checkbox (as in, "checked" or "unchecked", which is what the accessibility assistant reads, not true or false)
The two separate lines of code which I have used fit my purpose are as follows:
myImageView.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_SELECTED);
myCheckbox.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_SELECTED);
But if I run that call on the click event, the first instruction is cut short and only the second one is heard. So I believe this might not be the way to go. I probably have to use all of the Accessibility classes provided by Android, but I have no clue where to start.
What should I do for the voice feedback to read "Image one, checked... Image two, unchecked".
Additional info:
I cannot use strings to get the wanted value from the checkbox boolean because the app is multilingual and instead of having to get all the string resources I would rather take advantage of the system.
Thank you,
everyone, for your time.
You can combine both items in a linearlayout and/or you can market the "Image one" part as a label for the checkbox. Both examples are shown below and taken from the link below them.
<LinearLayout
android:id="#+id/consumedContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="false"
android:orientation="horizontal">
<TextView
android:id="#+id/coffeeLimitLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|center_vertical"
android:layout_weight="1"
android:labelFor="#id/coffeeLimitValue"
android:text="#string/coffee_limit_label"
android:textAppearance="#style/TextAppearance.AppCompat.Title"/>
https://www.raywenderlich.com/182100/android-accessibility-tutorial-getting-started

GridView elements randomly repositioned after scrolling

So, I'm having a very weird problem with GridView on my app.
What I want to do is pretty simple: I just want to get a list of installed apps (a-la app drawer) and display them in alphabetical order in a gridview.
It works pretty well, they all show up nicely, but as soon as I scroll down to see more apps and scroll back up, the apps at the top are slightly offselt. Vertically, to be more exact, and this happens every time I scroll down more than 1-2 rows and scroll all the way back up.
Also, sometimes I'll scroll back to the top and it'll keep scrolling past the top apps into oblivion, and not let me scroll back down. I'm not sure if the problems are related, but I'd sure like to fix both of them. The gridView resets completely to normal after clicking on one of the items or switching windows in the app.
This is only my 2nd day working with android Layouts and such, although I've done Java programming for a long time before, so I might be missing something but I'm not completely new to this.
I've looked online and I can't quite find an answer that works, I've tried all the ones I've found and now I'm just coming accross solutions I already have implemented in my code, so I'm not sure where to go besides here.
I'm also not sure which part of my code to post to figure out this problem, and I don't want to turn this into a huge wall of text with every one of my related files, so I would appreciate it a lot if someone could guide me into what to show.
I'll start with my GridView layout, my individual cell layout, and my adapter's getView method, as those seem to be the places where most of the solutions I found were guided to. Please let me know if you need any more of my code.
layout_grid
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="488dp"
android:numColumns="5"
android:textAlignment="center"
android:verticalSpacing="5dp" >
</GridView>
</LinearLayout>
layout_app
<ImageView
android:id="#+id/ivIcon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:scaleType="center"
android:adjustViewBounds="true"
/>
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
/>
</LinearLayout>
getView
public View getView(int position, View convertView, ViewGroup parent) {
View v;
if(convertView == null){
v = LayoutInflater.from(mContext).inflate(R.layout.layout_app, null);
//mContext is defined in the constructor for my Adapter
}else{
v = convertView;
}
ImageView icon = (ImageView)v.findViewById(R.id.ivIcon);
TextView name = (TextView)v.findViewById(R.id.tvName);
icon.setImageDrawable(getItem(position).getIcon());
name.setText(getItem(position).getName());
//getIcon and getName are from a custom App class made to store app info.
return v;
}
I have pictures of what it looks like, but it's not letting me post them or give links to all of them because of my reputation, so if you want to see something specifically just ask me.
P.S.: Another minor problem I'm having is that some icons don't seem to be scaling down completely to the size of the ImageView, but that's totally unrelated as far as I know and not the major point of this post. You can help me with that too if you want, though :P
I figured it out, although I'm not too sure why it was happening. Apparently, since I didn't have a hardcoded height for my individual cells, they would adjust to the text around them and change size, therefore changing the position of the other ones. I still don't really know why the whole overscrolling thing happens, I think it's just a bug with the gridview but I find it weird that no-one else has mentioned it. Oh well...

Displaying a TextView immediately after another

I am a first time developer for Android, so you can say I've been learning as I was developing. For most of my code that doesn't have to do with the XML layout, I had no problem patching my rookie mistakes. With that said, my rookie mistakes has caught up to me in regards to two TextViews when I initially designed them with the GUI interface designer (my major rookie mistake).
My display_city tv and display_today_date tv seem to have a symbiotic relationship with each other. Removal of either one would crash the app. They seem so dependent on each other that changing each other's positioning is impossible (at least from the myriad of things I have tried such as setting layout margins).
<TextView
android:id="#+id/display_city"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dip"
android:layout_above="#+id/display_today_date"
android:layout_below="#+id/get_data"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal" />
<TextView
android:id="#+id/display_today_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/display_pollen_type"/>
My question is - how do I simply position display_today_date immediately after my display_city? When I first started this Android app, I relied a lot on the GUI builder. That was my first rookie mistake, which resulted in this symbiotic relationship I explained.
Currently this is what my app looks like:
I have tried changing display_today_date's layout to android:layout_below="#+id/display_city. This results in a crash. I checked logcat, but it did not give me relevant information to the reason of the crash within the XML file.
P.S. get_data is my TextEdit box.
You already have the city to show above the date with the line android:layout_above="#+id/display_today_date". You can't have 2 views in a relative layout each reference the other, or it won't be able to figure out what to do. If you don't want to put the city above the date, delete that line then add the code to place it where you want.
You could use a LinearLayout with the orientation set to horizontal. That way there is no reference to another view. So if you delete one the other one won't cause the app to crash.

Best solution to merge/include an xml layout file multiple times in an activity layout

I'm building a flashcards app as a college project, and wanted a horizontally scrolling display of the cards. I've built an xml file for the flashcard design itself:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/whitenote" android:padding="3dp">
<ImageButton
android:id="#+id/imageButtonPins"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" android:background="#color/transparent" android:src="#drawable/pinselector"/>
<TextView
android:id="#+id/textViewWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerHorizontal="true"
android:text="Word" android:textColor="#color/black" android:paddingTop="30dp" android:textSize="20dp"/>
<TextView
android:id="#+id/textViewMeaning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewWord"
android:layout_centerHorizontal="true"
android:text="Meaning" android:textColor="#color/black"/>
</RelativeLayout>
I've also created the Class file.
In the activity layout, I have a few more elements and as such a linearlayout at the root level is necessary. I've been able to display a single flashcard for test purposes using and using layout inflater.
Question
In both the ways, in and layout inflater I've been unable to get the ImageButton working. My question is how do I get the button to work.
Update: Managed to get the ImageButton working using . Realised that I have to handle the onclick event in the activity, and not the Custom Adapter class. This should allow me to obtain the words too, as long as I can keep track of the "current" flashcard on display
Also, whats the best way to handle the scrolling for a flashcard app? My current plans so far is to use a HorizontalScrollView and customise it a bit, because I need (a) a swipe should make the flashcard move only to the next one (b) I need to focus on the "current" flashcard since I need some data from its children views (ie, the word).
Are you considering Fragments?
You can get some help with the ViewPager here.This is supported in Android 3.0 or above or Android 1.6 with the compatibility package.
http://geekyouup.blogspot.com/2011/07/viewpager-example-from-paug.html
If you do not wish to use the fragments, you can simply use the Gallery. This way, you can achieve the horizontal scrolling. (like in the Amazon app) without complex ViewPager.
For the second part of your question, take a look at the ViewPager.
A HorizontalScrollView or a Gallery are probably the most direct way of implementing this. I don't use Gallery-- but it is good to at least know it exists.
If you want a much more robust implementation, I agree with dcanh121 and think you should check out a Fragment based ViewPager. This will allow more options than just a View , but might be overkill depending on the goal. A fragment is basically the bizarre offspring of an Activity and a View, but don't quote me on that.
Also,
Inflating layouts is costly, so try to only inflate the XML into a View once, and reuse that View object. Try not to re-inflate the XML every time a new flashcard is drawn.

How to make a sectionised ListView

I have been searching all day on how to make these sections in a ListView. Haven't found anything yet. I have been through many blogs and most of them talk about the approach CommonsWare takes (i.e. SectionAdapter) but the SectionAdapter.java is nowhere to be seen on his GitHub repo.
How can this be made? (i.e. the part marked A. I am not trying to make a Preferences list. Something more on the lines of a Contact List)
I struggled a lot on this. There are a number of ways to do this. The one I found simplest and which I recommend is using separator view in your list item layout (the one you inflate in get view) and change its visibility based on whether on not there should be a header. I use something like this:
<TextView
android:id="#+id/separator"
android:layout_width="fill_parent"
android:visibility="gone"
android:layout_height="wrap_content" />
I found this much simpler than the other adapter. I just kept track of where I wanted to have a separator using a variable and based on that I setVisibility(View.VISIBLE) in my getView().
Try putting this on the textview in the xml:
<TextView
style="?android:attr/listSeparatorTextViewStyle"
android:id="#+id/tv_separator"
android:visibility="gone"
/>
this will make it like preferences categories that looks much better..

Categories

Resources