In my application I have a requirement of listview with empty spaces between rows of list.So that I can give background to each row and it will look something like blocks of rows.
I tried my best but didnt find any solution.
You can use android:divider and android:dividerHeight to customize the spacing between rows.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ListView
android:id="#+id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#FF0000"
android:dividerHeight="4px"/>
</LinearLayout>
I had the same problem except I needed to set the divider programatically because the view was dynamically generated. I'm posting this answer because it was my first google hit for future reference.
You need a custom Drawable.
Create a new file with the following code:
drawable/list_divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size
android:height="16dp"/>
<solid android:color="#android:color/transparent"/>
</shape>
Inside your java code you need to get a reference to your ListView and set the divider like this:
listView.setDivider(getResources().getDrawable(R.drawable.list_divider));
The result is exactly the same.
Related
I wan to create something like this. I'm want to use it in android kotlin application.
https://dribbble.com/shots/3830441-To-Do-App
Do you have any idea how to change background color soothly like you can see in that link ? Thanks a lot.
Create a drawable like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#376F9D"
android:centerColor="#4E9EB4"
android:endColor="#4F9FB5"
android:angle="0"
android:type="linear"/>
</shape>
Then use it as a back ground on the root element on the layout of your activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient">
<RelativeLayout
android:paddingTop="56dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo"/>
</RelativeLayout>
You are probably looking for things like this:
ViewPager for the UI
Set onPageChangeListener() for your ViewPager to detect when your ViewPager has been changed its screen
Use ViewPager.setBackgroundColor() api to change ViewPager background during the change
Use ArgbEvaluator.evaluate(positionOffSet, yourCurrentColorValue, yourNextColorValue) to get the smoothy animated color value for your above ViewPager.setBackgroundColor()
For more reference on the full solution, you can google it or you can look for something like this: http://kubaspatny.github.io/2014/09/18/viewpager-background-transition/
Kotlin is probably having similar way to solve this problem.
So I have a divider.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red"/>
</shape>
My View looks like this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Mvx.MvxListView
android:id="#+id/suppliersListView"
android:divider="#drawable/divider"
android:scrollbars="vertical"
android:choiceMode="singleChoice"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left|start"
local:MvxItemTemplate="#layout/item_supplier"
local:MvxBind="ItemsSource ReceptionSuppliersList; ItemClick ReceptionBasicInformationSelectCommand"/>
</LinearLayout>
in #layout/item_supplier i have no red styling attributes.
So when I run the view it shows like this, my 2nd,4th etc... line are way more highlighted then the line between 1st and 2nd element.
Any ideas why?
This is a typically behaviour for an emulator. Some pixels get lost while painting of tiny objects like lines or dots.
Start your app on a real device and it should work properly.
Add below properties in your Listview And use your prefered color in android:divider And put Transparent Color in android:cacheColorHint like below:
android:divider="#00000000"
android:cacheColorHint="#00000000"
android:fadingEdge="none"
I would like to make the divider for the last row appear so that the list "looks clean".
My ListView has been "included" in another XML layout.
I found that other posts show to use:
android:layout_height="match_parent"
or
android:footerDividersEnabled="true"
Neither work for me. I know I have the right XML layout because I can set the divider color to RED, and it renders correctly.
What am I missing?
You may define a drawable for the divider and add a view with background set to the divider drawable below list view .
Add a line view below ListView:
<View
android:layout_width="match_perent"
android:layout_height="1dp"
android:padding="your_padding"
android:background="#color/your_color"
/>
If you are Inflating a custom view , you can add the following at the bottom of your custom view XML :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#000000">
</RelativeLayout>
this will make a layout 4dp heigh black in color making it look like a line 4dp wide.
I ultimately had to do the following:
1) Create a custom divider xml such as:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="1dip" />
<solid android:color="#color/divider" />
</shape>
2) Then add the following to my LinearLayout widget.
android:divider="#drawable/custom_list_divider"
android:showDividers="end"
I would like to add padding between EACH item in a listview, but I would like to keep the default divider as I think it is aesthetically pleasing. Anything wider looks ugly.
I currently have:
<com.example.practice.MyListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
android:layout_below="#id/name" />
Now, I have tried using a transparent divider, and this succeeds at getting the spacing I want, but then I don't see the little line. And if I don't use a transparent divider than I have a huge thick ugly line. I want to keep the default line shown, and just add some spacing on the top part of each listview item.
You wouldn't be able to achieve what you want as simple as that then.
Step one: Set the divider as transparent, and make the height a tad larger:
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#android:color/transparent"
android:dividerHeight="8dp"/>
Step Two: In order to achieve the 'little line' effect, you can add a custom drawable as the list view item background, say the list view item is defined as 'list_item.xml':
<?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"
<-- Add a Custom background to the parent container of the listview items -->
android:background="#drawable/list_item_selector"
android:orientation="vertical" >
<-- Rest of the item layout -->
</LinearLayout>
Of course, that item can be anything you like it to be, mine is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/bg_gray" />
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FFDDDDDD" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
But that would then disable the 'Holo Selector' effect, where whenever you click, or highlight an item on the listview, there is a Holo Blue color drawn over it, that's why if you notice on the list item background we didn't use a layer list drawable, we used a selector named 'list_item_selector'.
Here's the selector, which uses the layer list drawable when not pressed, and uses a Holo-blue color when pressed:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="false"
android:drawable="#drawable/list_item_bg2"
/>
<item android:state_pressed="true"
android:drawable="#color/holo_blue"
/>
</selector>
EDIT for Comment
Absolutely possible, you can define a set height for list view items, however, it is recommended to set a minimum height, rather than a predefined height that never changes.
Say this is my list item 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/grid_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/grid_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/grid_image"
android:minHeight="48dp"
android:padding="8dp"
android:textIsSelectable="false" />
</RelativeLayout>
All needed would be,
Step One: Define the min height, or max height, as you prefer, in the dimens.xml file contained in the values/ folder. Why? Because the height should definitely change based on the layout, and you can define different dimens.xml for each device density.
in the dimens.xml, say:
<resources>
<!-- List Item Max and Min Height -->
<dimen name="list_item_min_height">48dp</dimen>
<dimen name="list_item_max_height">96dp</dimen>
<dimen name="list_item_set_height">64dp</dimen>
</resources>
And then use whichever value for the parent LinearLayout of you list item's 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="#dimen/list_item_min_height" >
And that's it for that topic, now to center the text, it's even simpler:
If you are using a TextView and is wrapped into a RelativeLayout, use: android:layout_centerVertical="true"
If you are using a LinearLayout, use: android:layout_gravity="center_vertical"
and couple that with: NOTE This only works if you didn't set the height to wrap_content, otherwise it is irrelevant.
android:gravity="center_vertical"
Hope that helps.
I don't know if I understand your question precisely.
If you want the divider to be transparent so you see a peace of the background between each ListView so it gives a kind of 3D effect when scrolling. You could do it this way:
In your list_item xml give the LinearLayout the background color you want for example:
<LinearLayout
android:id="#+id/listItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dip"
android:orientation="horizontal"
android:background="#FFFFFF"
>
Then give your ListView a background color like this:
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="8dip"
android:background="#0000FF"
android:cacheColorHint="#android:color/transparent"
android:drawSelectorOnTop="true"
/>
Now your ListView scrolls over your background
I hope this is what you wanted.
Also one more way to increase the spacing between the list items is that you add an empty view to your adapter code by providing the layout_height attribute with the spacing you require. For e.g. in order to increase the bottom spacing between your list items add this dummy view(empty view) to the end of your list items.
<View
android:layout_width="match_parent"
android:layout_height="15dp"/>
So this will provide a bottom spacing of 15 dp between list view items. You can directly add this if the parent layout is LinearLayout and orientation is vertical or take appropriate steps for other layout. Hope this helps :-)
you can simply use divider
see the following example
<ListView
android:id="#+id/activity_main_listview_data"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#android:color/transparent"
android:dividerHeight="10dp"
/>
here, in android:divider you can set color or make it transparent and in dividerHeight for add spce between items.
This is a solution for those of you who do not want the divider to be visible and still want to add more space. To get rid of the divider completely, set it to #null and set the dividerHeight to 0dp. Here is a generic ListView of mines.
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:divider="#null"
android:dividerHeight="0dp"
android:layout_alignLeft="#+id/txtMake"
android:layout_below="#+id/txtMake"
android:fadeScrollbars="false"
android:scrollbarThumbVertical="#drawable/scroll_bar_color"
android:scrollbarStyle="outsideInset" >
</ListView>
Next, go to the xml file in which you use the adapter with to populate your listview. Go to your container (Example RelativeLayout...) and simply add in the following.
android:layout_marginTop="15dp"
This will actually add space for those of you who are not using the divider. Unlike the padding which just increases the box size, this will increase the distance between each item.
Inside the ListView tag in XMLfile add a dividerHeight tag and give it a value(the spacing you want between your list items).
It would provide you with suitable space between the list items.
Code:
<ListView
android:id="#+id/listid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:divider="#drawable/divi"
android:dividerHeight="60dp"></ListView>
Now create a drawable XML file (in this case name is divi). Inside it add a stroke tag and give it a width and that would do.
Code:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="1dp"
android:color="#000000"
/>
</shape>
android:layout_width="match_parent"
android:textColor="#color/colorPrimary"
android:textSize="30dp"
android:layout_height="wrap_content"
Complete Code Here
I want to change the color of child divider of ExpandableListView by writing:
android:childDivider="#drawable/yellow"
in layout file. However, when I collapse the item, I found the background of the ExpandableListView turn yellow (#drawable/yellow) , but I just want to change the color of child divider. Who can tell me why? To my surprise, if I change it by java code like
expandableListView.setChildDivider(this.getResources().getDrawable(R.drawable.yellow));
it works normally. It is very weird, who can tell me the reason?
<!-- if I set childDivider in Layout xml, it can't work normally.
However, if set childDivider in java code, it work normally -->
<ExpandableListView android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:dividerHeight="2dp"
android:divider="#drawable/yellow"
android:childDivider="#drawable/yellow"
/>
create a drawable with small height and set it to childDivider
property
"child_separator.xml":
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/child_separator_color"/>
<size android:height="1dp"/>
</shape>
expandable list view:
android:childDivider="#drawable/child_separator"
Simply set child divider as the color of your choice.
<ExpandableListView
android:id="#+id/list_shopping"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:childDivider="#color/LightGrey"
android:dividerHeight="1dp" />
You just need to remove android:divider="#drawable/yellow" from your layout. This should resolve your problem if I understood it correctly.
Here is what I mean: