Custom checkBox in ListView - android

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>

Related

Background transition to remove corner radius

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

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.

adding shadow on the bottom of List item of Listview

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 !

android how to set border in listview

This is my code which work fine, I just want to add border at top and bottom of listview. So, My question is how to add border at top and bottom of listview. Note: I just want to add only border and where I can place border? Any help will be appreciated. Thanks
<ListView android:id="#+id/listCategory"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadeScrollbars="true"
android:fastScrollEnabled="true"
android:listSelector="#drawable/listview_selector"
android:dividerHeight="1dp"
android:layout_below="#+id/gridlayout"
android:visibility="gone"/>
listview_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="#drawable/listview_selector_focussed" />
<item android:state_pressed="true" android:drawable="#drawable/listview_selector_pressed" />
</selector>
listview_selector_focussed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#0a89f1" android:endColor="#56768d" android:angle="90" />
</shape>
listview_selector_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#0a89f1" android:endColor="#56768d" android:angle="90" />
</shape>
Add a header and footer, they will serve you as a border
In your Activity where you will declare your ListView;
View v=new View(this);
v.setLayoutParams(new LayoutParams(<width>,>height>));
v.setBackgroundColor(<your color>);
ListView list=(ListView)findViewById(R.id.listCategory);
list.addHeader(v);
list.addFooter(v);
In your layout file at your parent layout element
<YourParentLayoutElement
...
android:paddingTop="<your_value>"
android:paddingBottom="<your_value>"
>

how to create a pointy button on android?

How can I create a pointy button like iPhone back button in Android XML ?
I want to create using like this
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#f8bb49"
android:endColor="#f7941d"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#8c8382" />
<corners.....
Path and PathShape can build whatever you want. By layering a couple together and using a gradient fill you can create the 3D effect (recessed) effect.
However, you will need a class that you can use to create a drawable reference if you want to be able to use an XML definition. Sorry I have not worked out the exact code, but it's something I'm planning to do (which is how I found your question).
Looks like you have an image you can work with. Read the docs on 9-patches to set margins and resizable areas.
http://developer.android.com/guide/developing/tools/draw9patch.html
Create image like that and use ImageButton instead of Button
and , use this property for ImageButton
android:background="#drawable/createdimage"
I did this for the following back button
https://drive.google.com/file/d/0B1cySRpqElgyTkptOFpQa3NsdDQ
using the XML files:
left_arrow.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<rotate
android:fromDegrees="-45"
android:toDegrees="-45"
android:pivotX="89%"
android:pivotY="-22%" >
<shape
android:shape="rectangle" >
<stroke android:color="#color/calendarOrange" android:width="3dp"/>
<solid
android:color="#color/drakBlue" />
</shape>
</rotate>
</item>
</layer-list>
button_body.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:left="-4dp">
<shape android:shape="rectangle" >
<stroke android:color="#color/calendarOrange" android:width="3dp"/>
<solid
android:color="#color/drakBlue" />
</shape>
</item>
</layer-list>
Getting them together:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1.0"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/left_arrow"
android:layout_weight="0.7"
>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/button_body"
android:layout_weight="0.3"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#color/white"
android:text="Back"
android:gravity="center"
android:textStyle="bold"
android:textSize="22dp"
/>
</RelativeLayout>
</LinearLayout>
PS: You might need to change the android:pivotX and android:pivotY parameters depending on your conteiner layout

Categories

Resources