I want to add shadow to bottom of my ListView item !!
I tried paddingEdageLenght but no change happened !
I added circular edges but i can't add the shadow below the item
this is my list item xml file
<?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"
android:fadingEdgeLength="5sp" >
<ImageView
android:id="#+id/site_image"
android:layout_height="50dp"
android:layout_width="65dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="10dp"/>
<TextView
android:id="#+id/site_name"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/site_image"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:textSize="20sp"/>
<TextView
android:id="#+id/site_description"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/site_name"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/site_image"
android:textSize="15sp"/>
</RelativeLayout>
and this is my ListView xml file
<?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/near_sites"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:fadingEdgeLength="5sp"
android:dividerHeight="10sp"
android:divider="#android:color/transparent" />
</RelativeLayout>
any help ?
In list_view_item, add a dummy View after your RelativeLayout and wrap them all at vertical LinearLayout like this:
<LinearLayout
android:orientation="vertical">
<RelativeLayout>
...
...
</RelativeLayout>
<View
android:id="#+id/shadow"
android:layout_width="fill_parent"
android:layout_height="3dp" <!--or your needed height value-->
android:background="#drawable/shadow_drawable">
</View>
</LinearLayout>
and at drawable folder add the new shadow_drawable.xml and put this at it
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<gradient
android:startColor="#color/#000000" <!--black-->
android:endColor="#color/#FFFFFF" <!--white-->
android:angle="90" <!-- angle of the gradient-->
>
</gradient>
</shape>
you have to add footerview in listview,
how to add footerview check bellow code,
private View footerView;
footerView = ((LayoutInflater)getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.listview_footer, null, false);
ListView.addFooterView(footerView);
so, what ever you can do, in footer view.
You can make 9-patch image for border with shadow effect.
Create a new drawable resource file named "border.xml" in "res/drawable" and write the following code-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape
android:shape="rectangle">
<gradient android:startColor="#ddd" android:endColor="#555" android:type="linear" />
<corners android:radius="0dp"/>
</shape>
</item>
<item android:right=".5dp" android:left=".5dp" android:bottom="2dp" android:top=".5dp">
<shape
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="0dp"/>
</shape>
</item>
</layer-list>
Just put android:background="#drawable/border" where you want to apply border.
You can change in android:right,android:left,android:top and android:bottom to give size to border. you can also make change in android:shape for more effect.
Hope its help for you !
Related
We have a linearlayout that has a background which is partially rounded (only the right side), at a determinate moment we need to migrate that background to a not rounded one, so I thought about using the TransitionDrawable, but for some reason this is not working. This are my files:
R.drawable.bg_right_rounded:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue" />
<padding android:left="0dip" android:top="0dip" android:right="10dip" android:bottom="0dip" />
<corners android:topLeftRadius="0dp" android:topRightRadius="10dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="10dp"/>
</shape>
R.drawable.bg_blue:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue" />
</shape>
R.drawable.bg_transition:
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android=
"http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_right_rounded"/>
<item android:drawable="#drawable/bg_blue"/>
</transition>
Then the layout is something like:
<LinearLayout
android:id="#+id/vg_chat_typer_inner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/bg_transition">
....
</LinearLayout>
Then at a given moment we do:
TransitionDrawable transition = (TransitionDrawable) layout.getBackground();
transition.startTransition(1000);
If I do it in a normal situation it works fine, but when I put that linearlayout inside another linear layout with another one, then it stops working. The situation where it fails is the following one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#drawable/bg_transition">
....
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="0">
....
</LinearLayout>
</LinearLayout>
Is it because of weight? Why is it not working?
Thanks in advance
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.
In my application I have a ListView with custom rows and I want to add a custom CheckBox for each item, like this:
When I click on 'EDIT' I want the ListView translates to right and it appears a custom CheckBox at left from each ListView's row.
Is it possible to maintain the ListView at right even if some row icons don't seen (like the star or arrow)? Or if I translate the ListView at right the row is compressed and all icons are visible?
I have put a TranslateAnimation:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:fromXDelta="0%"
android:toXDelta="17%"
android:duration="750" />
</set>
and I have managed to translate the ListView but after 2 seconds it returns to the initial position ... how can I manage that the ListView maintains at right after TranslateAnimation?
Is it better to put a checkbox like 'gone' at left to the row and when 'EDIT' button is pushed to put all checkbox like visible? In this case, Does each row translate to right like the image or it would be compressed and all icons would be visible?
Thanks
EDIT:
My row xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/backgr_greysoft" >
<LinearLayout
android:id="#+id/row_information"
android:layout_width="fill_parent"
android:layout_height="#dimen/rowDescargas_height"
android:background="#drawable/button_file"
android:descendantFocusability="blocksDescendants"
android:layout_margin="#dimen/rowDescargas_marginLateral"
android:orientation="horizontal"
android:weightSum="1" >
<ImageView
android:id="#+id/icon"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_margin="#dimen/rowDescargas_marginIcono"
android:layout_weight="0.25" />
<LinearLayout
...
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Yes, put a checkbox like gone. And set to your information view following:
android:layout_width="0dp"
android:layout_weight="1"
Parent of this view should be LinearLayout with android:orientation="horizontal".
custom_checkbox.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#xml/checked" />
<item android:state_pressed="true"
android:drawable="#xml/checked" />
<item android:drawable="#xml/unchecked" />
</selector>
checked.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#ff2665B4" android:endColor="#ff2665B4" android:angle="270"/>
<stroke android:width="4px" android:color="#ffc0c0c0" />
<size android:height="20dp" android:width="20dp"/>
</shape>
unchecked.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#ffffff" android:endColor="#ffffff" android:angle="270"/>
<stroke android:width="4px" android:color="#ffc0c0c0" />
<size android:height="20dp" android:width="20dp"/>
</shape>
set in to checkBox
facilityCheck.setButtonDrawable(R.xml.custom_checkbox);
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/backgr_greysoft" >
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/chk_facility"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/icon"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_margin="#dimen/rowDescargas_marginIcono"
android:layout_toRightOf="#+id/chk_facility" />
</RelativeLayout>
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 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"/>