Is it possible to make an expandable table in Android, that is similar to the expandable list view, but where the child items are in a table/grid format.
For example, something like is here: http://www.coderzheaven.com/2011/04/10/expandable-listview-in-android-using-simpleexpandablelistadapter-a-simple-example/
, but with the child items being a grid of images.
This is how far I've gotten so far (in activity_main.xml using Eclipse Kepler) and am stuck on:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<ExpandableListView
android:id="#+id/expandableListView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
</ExpandableListView>
<ExpandableListView
android:id="#+id/expandableListView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
</ExpandableListView>
<ExpandableListView
android:id="#+id/expandableListView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
</ExpandableListView>
</LinearLayout>
With your expandable list view with usage of ExpandableListAdapter you can make your child cells to be TableViews or GridViews or whatever you want inside.
Just inflate view which you want in:
#Override
public View getChildView(int groupPosition, final int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this.context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.your_item_with_grid, null);
}
// get your views from convert view here
return convertView;
}
Here you got ExpandableListAdapter tutorial
Related
I have an ExpandableListView that I'm populating with items. I'd like to have the header (here, "meat") be wider than the list items.
However, ExpandableListView doesn't seem to respect margins/padding defined in XML, and also fails to respect programatically-set padding for the items. It does modify the parent ("meat") but the same code doesn't work for the items.
How can I do this?
Here's the relevant part of my custom adapter:
#Override
public View getGroupView(int position, boolean isExpanded, View view, ViewGroup parent) {
if (view == null) {
LayoutInflater layoutInflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = layoutInflater.inflate(R.layout.list_category, null);
}
view.setPadding(10, 0, 10, 0); //RESPECTED
initializeGroupComponents(view, getGroup(position));
return view;
}
#Override
public View getChildView(int position, int expandedPosition, boolean isLastChild, View view, ViewGroup parent) {
if (view == null) {
LayoutInflater layoutInflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = layoutInflater.inflate(R.layout.list_ingredient, parent, false);
}
view.setPadding(10, 2, 10, 2); //DOES NOT WORK
initializeChildComponents(view, getChild(position, expandedPosition));
return view;
}
The relevant portions of my XML:
The group:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_categoryContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:orientation="vertical">
The item:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/row"
android:layout_width="match_parent"
android:layout_height="62dp"
android:layout_marginBottom="1dp"
android:layout_marginEnd="6dp"
android:layout_marginStart="6dp"
android:background="#android:color/white"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="10dp">
Take one extra layout for header and add margin
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_categoryContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp">
//other content
</LinearLayout>
</LinearLayout>
I'm beginner in android development and i a have question about Listview and android:onclick attribute.
I try to use attribute android:onclick ="myMethod" on each element of my listview instead of define OnItemClickListener/onItemClick (too much verbose for me)
MyMethod is executed but how can i get clicked element (current context) ?
Thanks in advance
As a beginner, setting an OnItemClickListener might seem a bit scary, but it's really not a big deal at all (and a core concept you should be learning anyway!).
So if you have a simple layout with a ListView in it like this...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerView"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="#+id/myListview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
You can set up an OnItemClickListener with just this code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_listview_layout);
listView = (ListView)findViewById(R.id.myListview);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//Every time an item is clicked, you can handle it right here.
}
});
}
So every time an item in your list is clicked, the onItemClick method is fired, and you can figure out which item was clicked by using the int position argument that comes in.
If i am right your question is about implementing on click listener on each listrow item instead of list row.
If that is correct this is how you should implement:
1.In your adapter of getView() method you might be inflating a layout for list row like below:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.list_row_layout, parent, false);
return convertView;
}
In the above code list_row_layout is the xml file i'm inflating.
Go to that layout and add the following line android:descendantFocusability="blocksDescendants" to the root level of the xml layout like below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_margin="4dp"
android:descendantFocusability="blocksDescendants"<!--This is the line i'm talking about-->
android:background="#drawable/rounded_border_layout"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="40dp"
android:layout_marginRight="10dp"
android:id="#+id/review_main_user_image_layout"
android:layout_marginLeft="10dp"
android:layout_height="54dp">
<ImageView
android:layout_width="40dp"
android:id="#+id/review_main_user_image"
android:background="#drawable/reviews_x_trail_user_image_border"
android:layout_height="40dp"
android:src="#drawable/ic_help_user" />
<TextView
android:typeface="monospace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Me"
android:textSize="10sp"
android:layout_gravity="center"
android:singleLine="true"
android:id="#+id/review_main_user_name"
android:layout_below="#+id/review_main_user_image" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/review_main_user_image_layout"
android:layout_toEndOf="#+id/review_main_user_image_layout">
<TextView
android:layout_marginLeft="8dp"
android:layout_width="wrap_content"
android:textColor="#color/black"
android:layout_height="wrap_content"
android:singleLine="true"
android:id="#+id/review_main_title"
android:text="Good Product For The Price"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:orientation="horizontal">
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/review_main_rating"
android:progressDrawable="#drawable/apptheme_ratingbar_small_holo_light"
android:numStars="5"
style="?android:attr/ratingBarStyleSmall" />
<TextView
android:layout_marginLeft="8dp"
android:text="12-Jun-1993"
android:id="#+id/review_main_date"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
That't it now in your adapter getView method you can implement on click listener for each widget you have in that layout.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ReviewsXTrailViewHolder reviewsXTrailViewHolder;
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.list_row_review_main, parent, false);
TextView title = (TextView)convertView.findViewById(R.id.review_main_user_image);
//title.setOnclickListener()
return convertView;
}
In that above code i have added on click listener for textview.I hope it will work
Comment below if that doesn't work
I want to implement a layout which resembles Bank's PassBook. So I thought should I implement table layout inside a list view.
Here is a sample passbook example.
DATE PARTICULARS DEBIT CREDIT BALANCE
12/06/2014 Withdraw 200 10000
11/06/2014 Deposit 200 10200
create xml layout like below
<LinearLayout 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"
tools:context=".MainActivity"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/hello_world" />
<TextView
android:id="#+id/action_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:gravity="center"
android:layout_weight="1"/>
<TextView
android:id="#+id/amount"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:gravity="center"
android:layout_weight="1"/>
</LinearLayout>
use this layout as list item for your ListView.
Use an ArrayAdapter for your ListView.
In there, you can inflate the Layout for the items of the list, be it a TableLayout, or something other.
private class MyListAdapter extends ArrayAdapter<SomeObject> {
public MyListAdapter(Context context, int resource, List<SomeObject> someObjectList) {
super(context, resource, someObjectList);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
//view recycling
if (convertView == null) {
// inflate the single row with whatever layout you like
view = getLayoutInflater().inflate(R.layout.table_row, parent, false);
} else {
view = convertView;
}
SomeObject item = getItem(position);
//fill the view with data
TextView date = (TextView) view.findViewById(R.id.date);
date.setText(item.getDate());
...
return view;
}
...
}
Here's a little to read about ListViews and ArrayAdapter:
https://github.com/thecodepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView1
What is better solution to implement such layout:
I've tryid:
listview with negative divider (bad solution when rows need to have
different height)
scroll view with relativelayout (bad solution
because of memory consumption)
two listviews scrolling
simultaniously (very bad)
Create custom layout for listview items.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2" >
<LinearLayout
android:id="#+id/evenSideLayout"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="25dp"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/oddSideLayout"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Now in your custom Adapter... Manage layouts visibility. like
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
convertView = inflater.inflate(R.layout.item_option_layout, parent,
false);
LinearLayout oddLayout = (LinearLayout) convertView.findViewById(R.id.oddLayout);
LinearLayout evenLayout = (LinearLayout) convertView.findViewById(R.id.evenLayout);
if(position%2==0)
{
evenLayout.setVisibility(View.VISIBLE);
oddLayout.setVisibility(View.GONE);
}
else
{
evenLayout.setVisibility(View.GONE);
oddLayout.setVisibility(View.VISIBLE);
}
return convertView;
}
I want to put divider only between parent elements. When i set
android:divider="#drawable/divider" android creates divider between parent elements, but creates divider between child elements too. When i add android:childDivider="#color/transparent" android removes the divider between child elements, but the free space between them remains. Why?
I have tried to android:dividerHeight="0dp" but nothing happened.
At all i want to set divider between parent elements, but i do not want any divider or empty space between child elements.
any ideas how to do that??
In order to remove dividers just from the child views and not between the parents in the expandable list:
add android:childDivider="#00000000" in the ExapandableListView attributes in XML:
<ExpandableListView
android:id="#+id/elv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:childDivider="#00000000" />
Refer this page for more information
Give Divider color and its height (dividers will be visible when groups are collapsed)
<ExpandableListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#color/color_black"
android:dividerHeight="1dp"
android:groupIndicator="#null" />
The trick is to create an extra view for collapse group layout and last child layout.
collapse_group.xml:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17sp"/>
<!-- this is the extra view-->
<View
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#android:color/transparent"/>
</LinearLayout>
expanded_group.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17sp"/>
<!-- no extra view-->
</LinearLayout>
And apply the same technique to the child view, for the last child view insert the extra view
What I did was to set the ExpandableListView's divider to 0 and then insert "divider" groups into it's ExpandableListAdapter:
// To get dividers between the groups we add 'divider views' as if they were
// themselves groups.
public int getGroupCount() {
// Actual groups are at even groupPositions, dividers at odd
return (this.data.size() * 2) - 1;
}
public long getGroupId(int groupPosition) {
if(groupPosition % 2 != 0) return R.id.divider;
else return R.id.group;
}
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
if(groupPosition % 2 != 0) {
View divider = convertView;
if(divider == null || divider.getId() != R.id.divider) {
divider = this.inflater.inflate(R.layout.divider, null);
}
return divider;
}
View group = convertView;
if(group == null || group.getId() != R.id.group) {
group = this.inflater.inflate(R.layout.group, null);
}
return group;
}
expListView.setDividerHeight(10);
expListView.setChildDivider(getResources().getDrawable(
android.R.color.white));
If you want to remove child divider only, One simple trick is You can create a drawable with same color as of your child item's background color. Then set it as child divider.
ShapeDrawable sd1 = new ShapeDrawable(new RectShape());
sd1.getPaint().setColor(YOUR CHILD ITEM BACKGROUND COLOR);
mExpListView.setChildDivider(sd1);
Or using xml:
android:childDivider="#color/child_bg_color"
If you want to have divider between parent element of the ExpandableListView (Header) and don't want to have divider between children and parent , which is obviously the most natural case, then you have to do following:
In your parent xml file add one View at the bottom of the layout with divider height and divider color that you need.
Example:
Do same in the child xml file. Add one View at the bottom of the layout with divider height and divider color that you need. Make sure divider color and height are same like in parent xml.
Into your ExpandableListView Adapter method
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent)
manage the state of the View divider like this:
Example:
if(isExpanded){
headerDividerView.setBackgroundColor(ContextCompat.getColor(context,R.color.darker_grey));
}else{
headerDividerView.setBackgroundColor(ContextCompat.getColor(context,android.R.color.transparent));
}
BTW : In my case R.color.darker_grey is background color of the parent
Remove from your ExpandableListView xml all dividers and dividers height. Make ExpandableListView to not have dividers and divider height.
You can use attrs like this :
android:groupIndicator="#null"
android:childIndicator="#null"
android:divider="#null"
android:dividerHeight="0dp"
I solved it by adding two views one to header and other to child item like shown below.
Header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/rl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/square_box"
android:padding="#dimen/padding_10">
<ImageView
android:id="#+id/expandableIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_downarrow" />
</RelativeLayout>
<View
android:id="#+id/view_hidden"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_below="#+id/rl_header"
android:background="#android:color/transparent" />
</RelativeLayout>
child.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/rl_childView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/square_box"
android:padding="#dimen/padding_10">
<TextView
android:id="#+id/tv_startDate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="left"
android:paddingTop="#dimen/padding_5"
android:paddingBottom="#dimen/padding_5"
android:text="Start Date \nSep. 23, 2019"
android:textSize="#dimen/text_16" />
<ImageView
android:id="#+id/iv_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/right_arrow" />
</RelativeLayout>
<View
android:id="#+id/view_hidden"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_below="#+id/rl_childView"
android:background="#android:color/transparent" />
</RelativeLayout>
Now add this code to your Adapter class. The idea is to show/hide the View when group is expanded/collapsed, show on child last item.
#Override
public View getGroupView(int listPosition, boolean isExpanded, View convertView,
ViewGroup parent) {
String listTitle = (String) getGroup(listPosition);
String listCount = "(" + getChildrenCount(listPosition) + ")";
if (convertView == null) {
LayoutInflater layoutInflater = (LayoutInflater)
this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = layoutInflater.inflate(R.layout.expandable_header, null);
}
View view_hidden = convertView.findViewById(R.id.view_hidden);
if (isExpanded) {
view_hidden.setVisibility(View.GONE);
} else {
view_hidden.setVisibility(View.VISIBLE);
}
return convertView;
}
#Override
public View getChildView(int listPosition, final int expandedListPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
final Medication medication = (Medication) getChild(listPosition,
expandedListPosition);
if (convertView == null) {
LayoutInflater layoutInflater = (LayoutInflater)
this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = layoutInflater.inflate(R.layout.expandable_item, null);
}
View view_hidden = convertView.findViewById(R.id.view_hidden);
if (isLastChild) {
view_hidden.setVisibility(View.VISIBLE);
} else {
view_hidden.setVisibility(View.GONE);
}
return convertView;
}
set like this android:divider="#null" no divider for parents android:divider="2dp" set divider for parents
<ExpandableListView
android:id="#+id/expandable_list"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:divider="2dp"
android:groupIndicator="#drawable/group_indicator" />