How to make a sectionised ListView - android

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..

Related

Avoid impact to performance, when designing activity with more than 80 views

I'm new to android. I'm creating an application, which should handle more than 200 settings, mostly Boolean. Settings can be grouped by they type, there are 5 groups. I assume, that users won't like to configure and save each group separately,but would like to configure all the settings and by pressing save -> save all of them at one time, so scenario with having 5 different activities for each setting group doesn't suite.
What I've tried to do, is set up a TabHost, with separate tab for each group. After I've got "more than 80 views" warning, I've split up my layout, and now each group has own layout.xml;
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/cbSetting1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/strSetting1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/cbSetting2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/strSetting2" />
</TableRow>
...
</TableLayout>
And I'm inflating those views onCreate:
View setting1View= getLayoutInflater().inflate(R.layout.group1_layout, null);
group1Tab.addView(view);
With this steps done, I'm avoiding "more than 80 views warning", but won't have it impact on performance, when all views are inflated -> activity will have more than 80 views in total?
Next question: should I get references to all CheckBoxes on my views onCreate:
CheckBox setting1 = (CheckBox)setting1View.findViewById(R.id.cbSetting1);
or should reference them on my saving button press, like:
onSaveClick{
Boolean setting1Value = ((CheckBox)setting1View.findViewById(R.id.cbSetting1)).value
}
or in some other way, to have as little performance impact as possible?
Is there any "good pattern", for designing apps with a lot of views?
Thanks in advance!
P.S. I know, that "best practice" questions are not recommended on StackOverflow, but I've tried to ask as defined questions as possible, and, hopefully, my post is showing at least my researching effort on the issue.
Update
My fault not mentioning it earlier - those settings are stored remotely, and are accessed using HTTP requests (using Web-api). Does suggestions about Preference activities/fragments and ListViews fit in this case?
Based on the way you have described your application, it seems like you have many similar views. I would recommend using a ListView in each of your tabs. ListViews very efficiently handle tons of views.
You will need to write a custom adapter for you ListViews, but you can do this cleverly in a way that doesn't call findViewById() all the time (using the ViewHolder pattern).
It is hard to give specific advice because you have not described exactly what these settings items will contain, but this general idea works well when you have long lists of (event potentially slightly different) views. This pattern would work if you want to have a lot of flexibility over you layout. If you want some standard settings behavior, check out PreferenceFragments, or check out Android's settings developer guide.
If its just boolean settings [i.e. Checkbox].
Then I would prefer trying PreferenceActivity, its just like another activity but preferably used for settings functionality. Also there is an easy way to group your settings element, try PreferenceCategory for grouping.
A small tutorial is available here.
CheckBoxPreference is what you need.
Hope this helps!

Trying to put several textviews in a Button

I think I might be doing something stupid but I cannot find the answer. Obviously ht ebelow thing doesn't work but how would I do it?
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+#id/date"
android:text="+#id/heading"
android:text="+#id/subheading"
android:drawableLeft="+#id/featuredimage"
/>
I'm basically making an articlebutton to represent an article for a blog. I tried putting textviews inside but it miscounted the ending tags and threw an error.
What is that best way to create one of these buttons?
Dont use Button.
Use a Linear/Relative layout, with the attribute:
android:clickable="true"
Inside this layout add all your TextViews or any other thing you want.

Android - How to make a vertically-scrollable list

I am new to Android development, and have tried researching my question but can not find a suitable answer.
What I am trying to do is create a list of items, like the numbers 0-9 for example, and display that as a list that the user can scroll up or down to select the desired number, starting at 0.
The best example that I can think of is the HTC Sense timer, linked below (can not post pictures as a new user):
Sense Timer:
What I currently have is a Spinner, but that's not exactly what I want. I want the user to simply swipe up/down to make their selection, not press a button to bring up a drop-down list to make their selection.
Is there a simple way to do this that I am missing, or is it a fairly complicated thing to do? I have not been able to find an example on my own.
Thanks
This is simply known as Wheel View in android. I am not much aware of its implementation, but here is a very good demo. Take a look at it.
http://android-devblog.blogspot.in/2010/05/wheel-ui-contol.html
This will get you started with it.
Here is another one,
http://android-devblog.blogspot.in/2011/01/android-wheel-update-custom-views-for.html
Try ScrollView, may this will work:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
//Your Components
</RelativeLayout>
</ScrollView>
You need to use a listview and an adapter for this. Its a very simple way to implement the vertical scrolling list of items. Please refer the code from the following link:
http://developer.android.com/resources/tutorials/views/hello-listview.html

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.

Android Layout Elements

I'm trying to make an Android layout like the one below. I have a couple of questions:
1 - what is the element called that FB uses for posts? Ie, it doesn't look like a text view, but the element looks like it separates each post with a divider line. Also, the text style is different for a person's name and how long ago they posted. I'm looking to duplicate this (minus pictures) but I can't find the right UI elements.
What is the element called at the bottom? It's like a static menu. IE, it's the same as a menu but instead of pressing "menu" to access it, it's on the page at all times.
Finally, are there good tutorials/examples on how to make nice looking, professional layouts like the apps on the market? The tutorials that I've found on layouts are really basic. I'd like to understand what elements exist, what all of the attributes mean and see examples, etc. So far I'm only able to see the capabilities from other applications. I'd like to have a handbook or some type of some type of reference manual to go to.
For the "fancy" text views you can make a linear layout that hosts a <RelativeLayout>:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0">
<ImageView
android:id="#+id/userPhoto"
android:layout_height="64dip"
android:layout_width="64dip"
/>
<TextView
android:id="#+id/userFullName"
android:layout_height="25dp"
android:layout_width="fill_parent"
android:layout_marginLeft="70dp"
/>
</RelativeLayout>
Once you have a relative layout you can add different views inside of that to create a sort of customeized view.
As far as good examples I would look at this book. It's easy to understand and very helpful on such things.
I found a really helpful tutorial to solve a problem in ListView Row design a bit like yours. It goes a bit further explaining how to do Async Image loading but the first part should help you.
Also, I might be wrong (I am still a bit new to this) but I think the answer above lacks a TextView for the actual message besides the userName and the relative positions of the elements since it is a relative layout. Something like:
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
android:textSize="17dp"
android:textStyle="bold" />
<!-- actual message -->
<TextView
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/userName"
android:layout_marginTop="1dip"
android:layout_toRightOf="#id/userPhoto"
android:textSize="15dp" />
The key in organizing a relative layout is:
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
and
android:layout_below="#id/userName"
android:layout_toRightOf="#id/userPhoto"
I might be wrong but if it helps, great! Just adding my bit to the other answer.
Cheers

Categories

Resources