How to add sections in a ListView (android)? - android

I read this tutorial to create a Navigation Drawer with a ListView.
Link: http://developer.android.com/training/implementing-navigation/nav-drawer.html
How can I divide my ListView into sections and add a title for each section? (Like facebook application). I read many examples and tutorials, but no one is very clear.
Must I do override the getView method of an Adapter? Or..
I hope someone knows how to answer clearly. Thanks!!
This is my code:
public class NoLeague extends Activity{
private ListView listView;
private DrawerLayout drawerLayout;
private String[] items = {"Lega_1","Lega_2", "Option", "Logout"};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getActionBar().setBackgroundDrawable(getResources().
getDrawable(R.drawable.banner));
getActionBar().setTitle("TITOLOdiPROVA");
setContentView(R.layout.noleague_layout);
listView = (ListView) findViewById(R.id.left_drawer);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
listView.setAdapter(new ArrayAdapter<String>(this,
R.layout.item_layout, items));
}
}
This is the item_layout:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textColor="#fff"
android:background="?android:attr/activatedBackgroundIndicator"
android:minHeight="?android:attr/listPreferredItemHeightSmall"/>
This is the layout of my Navigation Drawer:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/noleague_image" >
</LinearLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#575555"
android:dividerHeight="1dp"
android:background="#111" />
</android.support.v4.widget.DrawerLayout>

If you search for Sectioned Listview! you'll find many examples,
You check out Amazing Listview! and Expandable Listview!
Hope this helps!!

This is pretty slick Using multiple layouts in Listview. It's for those who want to build something of their own. the Amazing Listview and Expandable Listview are ready to be used

Related

Showing items on a ListView

I'm trying to show a number of items on a listView but it's not showing on the screen.
It's just dummy information but it's still not working. I've tried to see a bunch of tutorials but found nothing.
Here is the xml file
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
android:fitsSystemWindows="true"
android:id="#+id/container"
tools:context="com.example.pedrofialho.musicristo.SearchActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/list"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="55dp" />
</RelativeLayout>
and here is the java code
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_search_actvity);
container = (ViewGroup) findViewById(R.id.container);
LayoutInflater inflater = LayoutInflater.from(this);
View rootView = inflater.inflate(R.layout.listview_search,container,false);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
list = (ListView) rootView.findViewById(R.id.list);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
String[] items = {"Comunhão","Passo a Passo","Tudo bem?","Esta lista não tem sentido"};
mArrayList = new ArrayList<>(Arrays.asList(items));
mArrayAdapter = new ArrayAdapter<>(this, R.layout.activity_search_actvity, R.id.list, mArrayList);
list.setAdapter(mArrayAdapter);
}
On the screen it shows nothing just a white screen.
Thank you in advance
Here is the proper way of ArrayAdapter initialization. You have to provide a layout containing eg. a TextView (if you want to show texts), so you should modify the line with new ArrayAdapter... to something like this: mArrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mArrayList);, because now your adapter gets the layout of your activity, not an item layout...
If you have to use a custom layout for each item, you should pass its id, and also the id of the TextView.
If you need a more complex item view, you can extend either ArrayAdapter or BaseAdapter classes to achieve the creation of item views.
View rootView = inflater.inflate(R.layout.listview_search,container,false);
inflates a new screen, which is not at screen until you put it explicitly, even adding it to a container part of the current View hierarchy or replacing the current content (calling again setContentView). Accordingly to the layout you posted, activity_search_actvity.xml I assume, contains already a ListView, so get rid of the inflater, and simply use findViewById to retrive the object part of the layout you set with setContentView(R.layout.activity_search_actvity);. You also have instantiated the ArrayAdapter with the wrong parameters. The second parameter is the layout you want to use a list's item and the third is the id of a TextView you want to use to show your dataset.
You are passing wrong parameter to array adapter. In Your case it will be as ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mArrayList)
For details ArrayAdapter in android to create simple listview
Use app:layout_behavior="#string/appbar_scrolling_view_behavior" in Relative layout.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/list"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="55dp" />
</RelativeLayout>
As explained by the support library guidelines:
Use this
ArrayAdapter <String> adapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,getResources().getStringArray(R.array.array);
Don't forget to attach the list view to it.
ListView listView=getListView();//Your activity shoudl extends ListActivity
listView.setAdapter(adapter);

Android Navigational Drawer with Textviews, Buttons

I am trying to create a personal details page where the user can view and change his/her personal details. I followed a tutorial and created a Navigational Drawer which loads a ListView. The thing is that i need to add a few TextViews and 1 button but no matter where i put them in the xml, they keep showing outside the drawer, messing up the whole layout. Any help? Thanks for your time everyone!!!
GuestMain.java
public class GuestMain extends Activity {
/////////NAVIGATIONA LDRAWER///////
String[] info;
DrawerLayout dLayout;
ListView dList;
ArrayAdapter<String> adapter;
///////////////////////////////////
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guest_main);
addListenerOnButton();
////////////////////////////////////////NAVIGATIONAL DRAWER//////////////////////////////////////////////
info = new String[]{"Full Name","Phone Number","Email","Address","Country","City"};
dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
dList = (ListView) findViewById(R.id.left_drawer);
adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,info);
dList.setAdapter(adapter);
dList.setSelector(android.R.color.darker_gray);
/////////////////////////////////////////////////////////////////////
}
activity_guest_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context="com.example.domotel.GuestMain" >
<ImageButton
android:id="#+id/iconback"
android:contentDescription="#string/btn_back"
android:src="#drawable/icon_back"
android:layout_width="40dp"
android:layout_height="25dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_marginTop="11dp"
android:scaleType="fitStart"
android:clickable="true"
android:background="#e5b53a" />
<ImageButton
android:id="#+id/iconuser"
android:contentDescription="#string/btn_back"
android:src="#drawable/icon_user"
android:layout_width="40dp"
android:layout_height="25dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_marginTop="12dp"
android:scaleType="fitStart"
android:clickable="true"
android:background="#e5b53a" />
</RelativeLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#d9ffffff"/>
<!-- 85% Opacity -->
</android.support.v4.widget.DrawerLayout>
Not sure if I completely understand what you are trying to do, but here is the way that I understand what your saying. You want to have the ability to edit items inside the drawer and then have the changes reflected outside. Don't really think that this is what the drawer was designed for. But in order to have the text boxes inside the drawer with the strings you could create another xml layout file with the list view containing a string and a text box. Then in place of android.R.layout.simple_list_item_1 you would use your drawer_layout from your xml layout file
adapter = new ArrayAdapter(this, R.layout.drawer_layout, R.id.text_field, info)
Then you need to handle the text and layout from within the drawer

Listview dynamically allocate width

I want to allow my ListView to be wrapped to its content on its width and making it aligning to the parent centre.
This is what a normal ListView is giving me
This is almost what i want to achieve, only that i want the ListView to wrap by the longest test in the ListView. Currently this is achieved by declaring the dp which is something I would like to avoid if possible
Some codes for first image:
<ListView
android:id="#+id/lst_test"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content" >
</ListView>
Some codes for second image:
<ListView
android:id="#+id/lst_test"
android:layout_width="200dp"
android:layout_height="wrap_content" >
</ListView>
Do I have to use custom adapter for this or I can stick with the current one? If I would need to use custom adapter, how do i go about doing this?
You don't need to create custom adapter. Here is an example which can help you.
public class MainActivity extends Activity {
HashMap <String, CheckBox> options = new HashMap<String, CheckBox>();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView list_view = (ListView) findViewById(R.id.listView1);
ArrayList<String> str = new ArrayList<String>();
for (int i = 0; i < 10; i++) {
str.add("Example " + i);
}
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list_layout, R.id.textView1, str);
list_view.setAdapter(adapter);
}
}
Above I have created an activity in which i am getting listview and setting data using ArrayAdapter.
I have created two layouts :
First layout: Contains listview.
Second layout: Contains textview which need to display.
Main logic to align data at center of Listview is you need to set gravity of textview as center.
You can manage second layout according to your needs.
Here is my first XML layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
Here is my second layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="TextView" />
</RelativeLayout>
If you are still facing any problem then you can ask. If you need more flexibility then you can create custom adapter by inheriting ArrayAdapter class.
Here is an example of custom adapter: How do I link a checkbox for every contact in populated listview?
Hope it will help you.

Android Layout with ListView overlaps Buttons

I can't seem to find a way to make a layout that contains a ListView that show the entire list of my contacts (its a long list), with 2 buttons one next to the other below the list.
its freaking me out, nothing i do seems to work. i searched some related quiestions and found this one: Android Layout with ListView and Buttons
but none of the alternative solutions over there is working for me.
when i look at the graphical presntation (of eclipse) it looks fine, but when i run it on my device i can only see the list of contacts. the listView overlaps the buttons.
I am using a simpleList that render on another layout that represent a row. i'm starting to suspect something i do programtically ruins it, because i ran over my java code and found no mention of the activity_contact_list that i was talking about. only connection to the row layout.
so i got this activity_contact_list.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/contact_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_alignParentTop="true" >
</ListView>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1.0"
android:orientation="horizontal" >
<Button
android:id="#+id/action_cancel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancle" />
<Button
android:id="#+id/action_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Add" />
</LinearLayout>
</LinearLayout>
this is after many tries such as: using RelativeLayout instead of the LinearLayout, puting the ListView's code below the LinearLayout of the buttons, and many more..
and here is the code of the activity: ContactList.java:
public class ContactList extends ListActivity{
//some global variables for late use.
public Model model;
SimpleAdapter adapter;
List<Map<String, String>> data; /* data is a list of Map */
String[] from = {"name","phone"}; /* names of the columns */ //TODO - add date!
int[] to = {R.id.name, R.id.number};
List<Contact> contacts; /* list of contacts */
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_contact_list);
// Set up the action bar.
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayHomeAsUpEnabled(true);
model = Model.getInstance(this);
data = new ArrayList<Map<String, String>>();
contacts = fillContactsList();
fill_data();
adapter = new SimpleAdapter(this, data, R.layout.contact_list_row, from, to);
setListAdapter(adapter);
}
i commented the setContentView line cause it doesnt compile otherway...
As is said. the list works perfactly. but it overlaps the buttons at the bottom of the activity. any idea? i'm sure its something silly i'm missing..
thanks in advance!
Did you try to use Relative Layout ?
Change Linear Layout to Relative Layout that's all.
As Linear Layout Doesn't support align parent..
Edited
set List Height to mach parent.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/contact_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_below="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:id="#+id/action_cancel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancle" />
<Button
android:id="#+id/action_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Add" />
</LinearLayout>
How long is your ListView. Maybe it is longer than your screen and is the LinearLayout with buttons shown outside your screen.
What happens when you rearrange with the buttons above the ListView.
EDIT:
I think you have to set a Max-size in your ListView. Maybe you can try something like this in your java-code, but I don't know if it is scrollable then...
ListView listView = (ListView) findViewById(R.id.listView):
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) listView .getLayoutParams();
params.height = 200; // or something bigger / smaller
listView .setLayoutParams(params);

How to add title in Navigation drawer layout?

[UPDATE]
I solve the problem by adding addHeaderView :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTitle = mDrawerTitle = getTitle();
mPlanetTitles = getResources().getStringArray(R.array.planets_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
LayoutInflater inflater = getLayoutInflater();
ViewGroup mTop = (ViewGroup)inflater.inflate(R.layout.header_listview_menu, mDrawerList, false);
mDrawerList.addHeaderView(mTop, null, false);
================================
My question is so simple !
I would like to how to add a title in a navigation drawer ?
I already created my navigation drawer with listview (icon+text) for each item.
Thanks a lot,
You would do that the same way as you would add headings in any other ListView, by teaching your ListAdapter to return heading rows as well as detail rows. At the low level, this involves overriding methods like getViewTypeCount() and getItemViewType() in your ListAdapter, plus having getView() know the difference between the row types. Or, use an existing high-level implementation like https://github.com/emilsjolander/StickyListHeaders or http://code.google.com/p/android-amazing-listview/ or any of the others found when searching for android listview headers.
Put a TextView above a ListView, and wrap it inside a vertical LinearLayout . Give to your ListView android:layout_weight="1" and android:layout_height="0dip"
Maybe it's a bit late but I think I have a simpler solution. In your Activity's layout, instead of adding a listView inside the DrawerLayout, you can add for example a LinearLayout, and you can easily add separators and rows. For example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.astuetz.viewpager.extensions.PagerSlidingTabStrip
android:id="#+id/indicator"
android:layout_height="48dip"
android:layout_width="fill_parent"/>
<ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:orientation="vertical"
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Separator 1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First button"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Separator 2"/>
</LinearLayout>
And in the Activity, you can add the listeners to the buttons.
Hope that helps!

Categories

Resources