android listview item's border - android

good day.
today i was encounted this next problem:
i have listview:
<ListView
tools:listitem="#layout/list_view_item"
android:listSelector="#android:color/transparent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:dividerHeight="0dp"
android:divider="#color/transparent"
android:cacheColorHint="#color/transparent"
android:id="#+id/items"/>
where list_view_item is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/listview_item_background">
...
</LinearLayout>
and listview_item_background next:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/black" />
<padding
android:right="1dp"
android:top="1dp"
android:bottom="1dp"
android:left="1dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/green"/>
</shape>
</item>
</layer-list>
now then i run my app i see next:
as you can see between adjacent items horizontal border are same with vertical border, but i was expected double-bordered
then i try to set listview divider to 1dp. as expected i have three-bordered result
then i test my background drawable not in listview, but simple three linearlayout. i have expected result with double-border...
<LinearLayout
android:orientation="vertical"
android:padding="10dp"
android:layout_width="100dp"
android:layout_height="100dp">
<View
android:layout_width="50dp"
android:layout_height="25dp"
android:background="#drawable/listview_item_background"/>
<View
android:layout_width="50dp"
android:layout_height="25dp"
android:background="#drawable/listview_item_background"/>
<View
android:layout_width="50dp"
android:layout_height="25dp"
android:background="#drawable/listview_item_background"/>
</LinearLayout>
but in listview i still have one border.
how i can create listview with horizontal double-border on adjacent item?

ok, i didn't fix it, but i find workaround (but in my opinion it is a cruch):
in my drawable i set bottom padding form 1dp to 2 dp

Related

Elevation not working on a LinearLayout

After searching for a solution, I didn't find any to solve my problem.
I have some elevation which produces a shadow on a big part of my app.
But in a particular place, I'm not able to make it work.
(It's where I put an arrow on the picture below)
The white area below the toolbar is a Fragment which displays a LinearLayout
layout:
<LinearLayout
android:id="#+id/panelAddress"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_flat_white"
android:elevation="10dp"
android:orientation="vertical"
android:padding="20dp"
>
//some content
</LinearLayout>
The parent of the Fragment :
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
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:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/custom_toolbar"
layout="#layout/toolbar"/>
<RelativeLayout
android:id="#+id/mapLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<FrameLayout
android:id="#+id/fragment_container_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<FrameLayout
android:id="#+id/fragment_container_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Do you have an idea about why I don't get my elevation?
As described here https://stackoverflow.com/a/27518160/2481494 there are several requirements so that the shadow is drawn:
Space for the shadow in the parents view Group. As bleeding182 mentioned, padding can cause the shadow to be clipped:
(Do NOT use a padding. A padding on the framelayout will also cut the shadow off)
However, this can be fixed with android:clipToPadding="false" in the parent.
The elevated view needs to have a background to cast a shadow. Without information about your #drawable/button_flat_white I can't tell whether this is a problem in your case.
To solve your problem you should modify your FrameLayout like this:
<FrameLayout
android:id="#+id/fragment_container_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:clipToPadding="false"
android:paddingBottom="10dp"/>
To check whether your #drawable/button_flat_white causes any problems try to change the background of your LinearLayout to a simple color temporarily:
<LinearLayout
android:id="#+id/panelAddress"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="10dp"
android:orientation="vertical"
android:padding="20dp"
android:background="#fff">
//some content
</LinearLayout>
Just make CardView as parent of your LinearLayout and you can achieve elevation.
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="3dp">
<LinearLayout
android:id="#+id/panelAddress"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_flat_white"
android:orientation="vertical"
android:padding="20dp">
//some content
</LinearLayout>
</android.support.v7.widget.CardView>
If elevation is not working than you can create you XML by giving reference as a background on the LinearLayout :
shadowfile.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#18000000" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#05000000" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#10000000" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#15000000" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20000000" />
<corners android:radius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFFFFF" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
Add like that :
<LinearLayout
android:id="#+id/profileDetails"
android:layout_width="match_parent"
android:layout_height="125dp"
android:background="#drawable/shadowfile"
android:padding="15dp"
android:layout_below="#id/toolbar_title"
android:layout_marginTop="20dp">
Output :
This is a drawing issue.
The cast shadow is drawn outside of the actual views bounds, so if the Parent layout does not "give" the view enough space, it will be clipped.
Since the parent of the fragment (Linear layout) has the same size, the shadow is clipped. Add a margin on the bottom to the LinearLayout.
If this does not help try wrapping the layout with a FrameLayout with a little margin on the bottom (Do NOT use a padding. A padding on the framelayout will also cut the shadow off)
1-2dp should do.
I have used paddingRight and paddingBottom(for shadow at bottom and to right of layout) then it worked for me, it shows a shadow otherwise the drawable shadow will not work properly.
Do such thing if you facing same problem.
You should be aware of android:hardwareAccelerated="false", shadows will not show if you have this line in the manifest
If the above point is okay then try this in your layout android:clipToPadding="false" and android:outlineProvider="bounds"
i hope it help you, Just add"marginTop" in second layout.
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="90dp"
android:orientation="vertical"
android:elevation="5dp"
/>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="90dp"
android:orientation="vertical"
android:padding="5dp"
android:layout_marginTop="3dp"
/>
Please enable hardwardAccelerated option in manifest file,
<application
...
android:hardwareAccelerated="true">

set space between rows in listview Android

I have a listView with custom rows and I need to set a custom divider between each row.
This is the code of the listView:
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/menu_padding"
android:background="#color/customBlue"
android:divider="#drawable/list_divider"
android:dividerHeight="2px" />
This is the code of the rows:
<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="50dp"
android:orientation="horizontal"
tools:ignore="contentDescription"
android:background="#color/strongBlue" >
<ImageView
android:id="#+id/row_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/row_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:textColor="#color/white"
android:textAppearance="#android:style/TextAppearance.Medium" />
</LinearLayout>
And this is the code for the 2 pixel divider:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="1px">
<shape android:shape="line">
<stroke
android:color="#0C0832"
android:width="2dp"
/>
<size
android:height="1px"
/>
</shape>
</item>
<item android:top="1px">
<shape android:shape="line">
<stroke
android:color="#2D2E57"
android:width="2dp"
/>
<size
android:height="1px"
/>
</shape>
</item>
</layer-list>
The problem is that I have a random space between each row that has the same color as the listView backgroundColor and if I set the dividerHeight to 4px I can see my divider. How can I remove the space that gets created automatically and only have my custom divider?
Use the following code in rows in linear layout
android:layout_marginTop="15dp"
Instead of pixel you can provide dp in xml
android:dividerHeight="10dp"
android:divider="#ffffff"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="schemas.android.com/apk/res/android">;
<gradient
android:type="radial"
android:startColor="#343030"
android:endColor="#151515"
android:gradientRadius="300"
android:angle="270"
android:centerY="0.3"/>
</shape>
Instead of making custom drawable for divider you can directly give color to divider.

Strange Black border around drawable android XML

I am drawing custom header to input information in my app. I have drawn 2 shapes in xml and then positioned them in a layout. That layout is then put in my main layout using . However there is a black border that is drawn around each of the included headers. This seems to only be on api 21 devices. What is going on?
circle.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/icon_background"
android:shape="oval">
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
<solid
android:color="#color/color_primary"
android:angle="270">
</solid>
</shape>
line.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="5dp"
android:color="#color/color_primary"/>
<size android:height="10dp" />
</shape>
Header layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="5dp"
android:layout_width="match_parent"
android:layout_alignParentStart="true"
android:layout_marginTop="14dp"
android:src="#drawable/line">
</ImageView>
<ImageView
android:id="#+id/circle"
android:layout_height="32dp"
android:layout_width="32dp"
android:src="#drawable/circle"
android:layout_centerHorizontal="true">
</ImageView>
<ImageView
android:id="#+id/header_icon"
android:layout_height="32dp"
android:layout_width="32dp"
android:src="#drawable/ic_action_car"
android:layout_centerHorizontal="true">
</ImageView>
</RelativeLayout>
Included layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/header_horizontal_margin"
android:paddingRight="#dimen/header_horizontal_margin"
android:paddingTop="#dimen/header_vertical_margin"
android:paddingBottom="#dimen/header_vertical_margin">
<include
android:id="#+id/carSpecs"
layout="#layout/header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</include>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/header_vertical_margin"
android:paddingBottom="#dimen/header_vertical_margin"
android:layout_gravity="center_horizontal"
android:id="#+id/vehicleSpinner"
android:layout_below="#+id/carSpecs"/> ...
Try to add this <solid android:color="#00FFFFFF"/> in your line.xml.
Remove this:
<stroke android:width="5dp"
android:color="#color/color_primary"/>
From line.xml
This is adding the extra "border", using the color_primary color resource as defined in your colors.xml.
Figured it out! Using same basis as #Der Golem I removed the
<size android:height="10dp" />
from the line.xml. Since the stroke was half of the size I was receiving the border. Thanks for the help all!

Android custom listview row with shape drawable

I was following this tutorial and I've applied that code in my xml but round corner is on full listview not in particular row. And I did exactly like the tutorial
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:baselineAligned="true">
<ListView
android:id="#+id/listaPedidos"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#color/background_pedidos"
android:dividerHeight="7dp"
android:padding="20dp"
android:background="#drawable/pedidos_shape"
android:smoothScrollbar="true"/>
</LinearLayout>
pedidos_shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="2dp"
android:color="#color/custom_gray" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
<corners
android:radius="8dp" />
<solid
android:color="#color/white"/>
</shape>
set background item.xml(custom listview row xml)
custom_listview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/pedidos_shape">
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"/>
</LinearLayout>
Mistake:
You have given background to whole ListView.
Resolution:
Background should be given it to individual items. Remove android:background="#drawable/pedidos_shape" from the <ListView> and include it inside the row XML layout file.
You need to set android:background="#drawable/pedidos_shape"to the item layout that you are inflating in your adapter.

How to assign padding to Listview item divider line

How can i give padding to list item as i show in image.
I want to make the divider in the layout as shown in the image.
this is my list fragment code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp">
<ListView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/listV_main"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"/>
This is my List section code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp">
<include
android:id="#+id/list_item_section_text"
layout="#android:layout/preference_category"
/>
This is my list item code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:adjustViewBounds="true"
android:paddingRight="?android:attr/scrollbarSize"
>
<ImageView
android:id="#+id/showlist_item_entry_drawable"
android:layout_width="82dp"
android:adjustViewBounds="true"
android:layout_height="68dp"
android:scaleType="fitXY"
android:paddingLeft="9dp"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="6dip"
android:layout_marginTop="6dip"
android:layout_marginBottom="6dip"
android:layout_weight="1"
>
<TextView android:id="#+id/list_item_entry_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:ellipsize="marquee"
android:fadingEdge="horizontal" />
<TextView android:id="#+id/list_item_entry_summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/list_item_entry_title"
android:layout_alignLeft="#id/list_item_entry_title"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true"
android:textColor="?android:attr/textColorSecondary" />
</RelativeLayout>
Use 'inset'.....
(list_divider.xml)
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="50dp"
android:insetRight="50dp" >
<shape>
<solid android:color="#color/orange" />
<corners android:radius="2.0dip" />
</shape>
</inset>
and in your list view add like this...
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/list_divider"
...
/>
you can set the inset value as desired...
UPDATE
As pointed out by #Giulio Piancastelli , If the background of list container is different from background of list item then you may use 'layer-list'...
(list_divider.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/list_background" />
</shape>
</item>
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="rectangle" >
<solid android:color="#color/divider_color"/>
</shape>
</item>
</layer-list>
and in your list view add like this...
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/list_divider"
...
/>
You need padding for dividers? Create your custom drawable-shape as:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/black" />
</shape>
</item>
</layer-list>
And set as divider for your ListView in xml:
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/custom_divider"
...
/>
UPD
I just have ListView in xml:
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="2dp"
android:divider="#drawable/line"
/>
Divider as line.xml in drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/black" />
</shape>
</item>
</layer-list>
Do not make any modifications on the ListView in code. You can try to use Clean if resources are wrong builded.
As #Giulio Piancastelli mentioned under #ASP answer, the <inset> fails when the background colour of the list container is not the same as the rows inside the list. One solution is to use <layer-list> like below:
//This item is to overlay the container colour with the row background colour
<item
android:left="0dp"
android:right="0dp">
<shape android:shape="rectangle" >
<solid android:color="#color/row_background" />
</shape>
</item>
//This item is the divider, put it at bottom so it will overlay the background colour
<item
android:left="92dp"
android:right="0dp">
<shape android:shape="rectangle" >
<solid android:color="#color/divider
</shape>
</item>
Then you can set it as divider as most answers suggest:
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/layer_list"
...
/>
In your listitem give the paddingtop to the main layout as
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:padding="10dp"
....// Remaining fields
>
... //Remaining items
</LinearLayout>
this should be alternative solution for this question:
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="color/secondary_text"
android:layout_marginTop="16dp" />
I don't know why people are adding shape to the layered-list but for me this works just fine.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="10dp" android:height="2dp" android:drawable="#android:color/holo_blue_dark"/>
<item android:height="22dp" android:drawable="#android:color/transparent"/>
</layer-list>
1st item will be 10dp from the top and with a height of 2dp and a color of holo_blue_dark. (This will be the divider)
Now to give 10dp margin to bottom we need to create another transparent item with a height of 22dp (10dp (top margin) + 2dp (height of divider) + 10dp(bottom margin from divider)).
This is working fine for me. I hope this will work for you too.
set your list item divider height and color:
<ListView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/listV_main"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:divider="#android:color/darker_gray"
android:dividerHeight="1dp"/>

Categories

Resources