android - spacing between groups ExpandableListView - android

I have an ExpandableListView and I want to have less space between the group rows. dividerHeight is already set to zero, I don't get where those top/bottom margins come from. See a screenshot below (please ignore the volume control which accidentally came up)
I need to reduce that spacing between rows but can't manage it.
ListView:
<ExpandableListView
android:id="#android:id/list"
android:listSelector="#android:color/transparent"
android:layout_marginTop="80dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_centerHorizontal="true"
android:cacheColorHint="#android:color/transparent"
android:smoothScrollbar="true" >
</ExpandableListView>
in the Activity:
getExpandableListView().setGroupIndicator(null);
getExpandableListView().setDividerHeight(0);
Grouprow XML:
<CheckedTextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:gravity="center_vertical"
android:text="#string/hello_world"
android:paddingLeft="20dp"
android:textColor="#FFFFFF"
android:textSize="65sp"
android:textStyle="bold" />
UPDATE
The grouprow now looks like that:
<CheckedTextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/hello_world"
android:paddingLeft="20dp"
android:textColor="#FFFFFF"
android:textSize="65sp"
android:textStyle="bold" />
I enabled the listSelector and figured out that the row height is still larger than the height of the actual text.. looking for a solution

You can use negative values in your margin attributes to reduce spacing. Try this in your CheckedTextView:
android:layout_marginTop="-8dp"

You are giving fixed height to your row data, so it cause a problem.
Use
android:layout_height="wrap_content"
Instead
android:layout_height="65dp"
Second solution#
Remove android:gravity="center_vertical"
and check and let me know, else will delete my answer.

Use this code for programmatically
expListView.setDividerHeight(0);
(or) mension in expandable listview divider height value as 0 (xml)
android:dividerHeight="0dp"

Related

how to add space between items in listview

The below mentioned layout is a model of one item in a ListView. As you see it, the three TextViews are separated from each as each one occupies .3 of the entire row space.
The problem is, when I add items to the ListView I found that the three TextViews are just linked to each other. For example, let's assume I want to add item to the ListView contains the following:
Adam USA M
I expect to see that row on the screen with some spaces separating each textView, but what happens is that I get something like the following:
AdamUSAM
Why this is happening and how to solve it?
model_view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:text="Name"/>
<TextView
android:id="#+id/tvAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:text="Address: "/>
<TextView
android:id="#+id/tvGender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:text="gender: "/>
</LinearLayout>
Update:
Now I changed the layout to be as follows, but the problem is persists which is that the three textviews are appearing clinching to each other without spacing.
layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/tvName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Name: "
android:focusable="false"/>
<TextView
android:id="#+id/tvAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Address: "
android:focusable="false"/>
<TextView
android:id="#+id/tvGender"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="gender: "
android:focusable="false"/>
</LinearLayout>
screen shot:
You need to specify the orientation of LinearLayout e.g. android:orientation="horizontal" then replace your weights to 1 instead of 0.3 and make sure your TextView width is 0dp not wrap_content.
Add a layout_margin or padding to each TextView.
Use property
android:layout_margin="10dp"
in your listView xml add :
android:dividerHeight="8 dip"
or any value you want.
I would suggest to remove layout_weight from TextViews, define a specific height to them and add padding. Adding margins may cause your TextViews to go out of ListView.

list view taking up more space than needed

This is my custom dialog which consist of the following
list view,button and finally a textview used when the list is empty.
My problem is the listview seems to take up more space than it needs to when only 1 item exists.
The image below shows this.
My XML code
<?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="match_parent" >
<ListView
android:id="#+id/lvRaffles"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/bCloseDialog"
android:layout_alignParentTop="true" >
</ListView>
<Button
android:id="#+id/bCloseDialog"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#drawable/alert_dialog_button_style"
android:text="Close" />
<TextView
android:id="#+id/tvRaffleEmpty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="No Raffle Code Found With That Search"
android:textAppearance="?android:attr/textAppearanceMedium"
android:visibility="gone" />
</RelativeLayout>
I have tried the following.
List View height on wrap_content, 0dp does not help.
I know you fixed this with LinearLayout but to answer your question, the reason it appears as if your listview is taking up too much space is because you used layout_alignParentBottom="true" if you want the button to appear below the listview you would need to use layout_below="#id/lvRaffles" You also have two elements aligned to parentTop, which can cause the elements to overlap.

100% height android listview

I am just starting to develop android apps. I have a layout question. I want to create the main screen for my app. It is a menu with 7 options, each options would be an icon at the left, a short text and a check at the left (on/off component).
I have written it in a list view element, I have created a simple adapter with this layout:
<?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="match_parent" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_action_io"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:singleLine="true" />
</RelativeLayout>
Menu will have always 7 options, I would like that the listview filled the height of the screen. Each element with the same height. Is it possible that with listview? Or, perhaps would be better making the menu out of a list view?
I have been reading about linear layout and the weight property. Please, could you help me? It is my first layout, I would thank any advice aboput layout I should use.
Thanks a lot, best regards!
P.D: Sorry for my english.
I would use a Linearlayout and inside i put all the items to be displayed...
Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<RelativeLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Texto"
android:singleLine="true" />
</RelativeLayout>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Texto"
android:singleLine="true" />
</RelativeLayout>
<!-- Repeat the item five times more -->
</LinearLayout>
if you want all the items to be displayed (without a scroll) then there's no use in a ListView. use a LinearLayout instead and set the layout_weight of each menu item to 1.
As the others guys said is better use the LinearLayout. And like you mentioned you can use weight attribute too.
Equally weighted children
To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".
As you are trying to implement a Menu, I think the best approach is substitute each RelativeLayout(with textview and imageview) for a button. So, your layout will be like that:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="7.0" > //Defines the maximum weight sum
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:height="0dp"
android:layout_weight="1"
android:text="Option 1"
android:drawableLeft="#drawable/icon1"
android:onClick="handleOption"/> // method to handle onClick
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:height="0dp"
android:layout_weight="1"
android:text="Option 2"
android:drawableLeft="#drawable/icon2"
android:onClick="handleOption"/> // method to handle onClick
//Add more five buttons
.
.
.
In your activity, you should load this layout, using setContentView() and you must implement a method handleOption like below to handle onClick event of each button.
public view handleOption(View view)
{
switch(view.getId()) ....
}
In that way, you do not need implement onClickListener Interface, have one method to each button and set the onClickListener for each button.

Margin on ListView items in android

I'm trying (in vain) to add margins to my ListView items. I have tried adding margin values to my RelativeLayout below but no matter what I do all I seem to get is a 1px line between each item.
What I really would like is to have rounded corners on each item, a 1px black border and a 3-5px margin left, top, and right but right now I'll settle for just a margin around each item :-)
How do I achieve my goals? Just the margin for now... ;-)
Here's what I have:
UPDATE: I have updated the xml below removing main layout and fragment layout. I have also updated the ListView item layout to what I have now which is closer to what I want but still not perfect. Screenshot added as well
listview item layout xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/matchMargin"
android:paddingRight="#dimen/matchMargin"
android:paddingTop="#dimen/matchMargin" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cfcfcfcf" >
<include
android:id="#+id/matchKampstart"
layout="#layout/kampstart_layout" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tournamentImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/tournamentImageViewContentDescription"
android:gravity="left"
android:src="#drawable/sofabold_launcher" />
<ImageView
android:id="#+id/homeTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/homeTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/homeTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:text="#string/home"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/dash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="#string/dash"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/awayTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/awayTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/awayTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="#string/away"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tvChannelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:contentDescription="#string/tvChannelImageViewContentDescription"
android:gravity="right"
android:src="#drawable/sofabold_launcher" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
This gives me the following where you'll notice a very small line to the right and left for each item. That I would also like to get rid of.
I'm not great with layouts, but I have noticed in the past that ListView rows often ignore LayoutParams. I have no idea where this happens or if it's possible to override, I do know you can easily work around it by adding another layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#990000ff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#9900ff00"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99ff0000" />
</LinearLayout>
</LinearLayout>
Typically layouts that only have one child can be removed, but as you can see this one serves a purpose:
The outer-most layout is blue, the TextView is red, and the green is the extra layout that allows you to add some extra spacing. Notice the difference between padding (the green on the left) and margin (no green on the right). You have clearly stated that you want to use margins (android:layout_margin) but your code clearly uses padding (android:padding) so I included both.
A little late seeing this, but just add the following lines to your ListView xml element
android:divider="#00000000"
android:dividerHeight="10dp"
See the answer here for why. In short the child asks the parent, and the list view row uses AbsListView.LayoutParams, which doesn't include margins.
Why LinearLayout's margin is being ignored if used as ListView row view
In your adapter, catch your relative layout in getView(), then give a layout params ,
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
params.setMargins(80, 0, 0, 0); //substitute parameters for left, top, right, bottom
YourRelativeLayoutInAdapter.setLayoutParams(params);
I suppose you have a ListView defined in an XML file somewhere, if so, you could add some padding to it, so that there will be some space between the edge of the screen and the ListView.
Example:
<ListView
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:padding="15dp"/>

RelativeLayout weight

In a layout resource XML, I have 3 RelativeLayout(s) which are inside a main RelativeLayout. The view will be shown vertically. These 3 RelativeLayout() are set next to each other, and I want them to fill the whole screen, doesnt matter what will be the screen size. My, layout view:
<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="#drawable/backg"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/top_mr_image"
android:src="#drawable/temp" />
<RelativeLayout
android:id="#+id/r1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginLeft="10dp"
android:background="#drawable/r1bg"
android:layout_weight="1"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:layout_marginTop="39dp"
android:text="S"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView1"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:text="T"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/r2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r1"
android:layout_toRightOf="#+id/r1"
android:layout_weight="1" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/r3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r2"
android:layout_toRightOf="#+id/r2"
android:layout_weight="1" >
</RelativeLayout>
I set weight=1 and layout_width=0dp for each relativeLayout and this technique works with buttons, I thought the same will be with relativeLayout, seems my thoughts were wrong. Any idea?
UPD1: I have added an image of what I would like to have
RelativeLayout does not pay attention to android:layout_weight. (That's a property of LinearLayout.LayoutParams, but not of RelativeLayout.LayoutParams.)
You should be able to get the layout you want with a much simpler view hierarchy. It's not clear what you are trying to do, since the last two RelativeLayouts are empty. If you need a purely vertical organization, I'd suggest using LinearLayout instead of RelativeLayout.
EDIT Based on your edit, it looks like you want a horizontal layout of three compound views, each one clickable. I think something like the following will work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- First column -->
<LinearLayout
android:id="#+id/firstColumn"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="..." />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="text 1"
. . . />
</LinearLayout>
<!-- Second column -->
<LinearLayout . . . >
. . .
</LinearLayout>
</LinearLayout>
If the contents of the buttons aren't correct, you can replace the second-level LinearLayout views with RelativeLayout if that helps organize the layout better.
RelativeLayouts do not support weight. You need to use a LinearLayout as a parent container if you want to use weights.
Solution is very simple. I have been looking for weight distribution in relative layout.
It's a small trick for all these kind situations.
Use LinearLayout with android:orientation="horizontal"
You can use Horizontally oriented LinearLayout Manager in the Recycler View, and place each RelativeLayout in each item, of its Adapter.
The Link: How to build a Horizontal ListView with RecyclerView?
If your RelativeLayouts are set to a fixed width and height, that is to the size of the Screen, that you can get from DisplayMatrics, that will be OK.
The Link: Get Screen width and height
If the contents of your RelativeLayouts are different, then you can use getItemViewType() method.
Please see: How to create RecyclerView with multiple view type?
Happy Coding :-)

Categories

Resources