Android: Make a ListItem Flash when tapped - android

I have a simple ListItem defined below I use in a ListView. How can I make it "flash" so that users know what listview item they tapped?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<ImageView
android:id="#+id/IconImageView"
android:layout_width="48dp"
android:layout_height="48dp"
android:padding="5dp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<TextView
android:id="#+id/CaptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="20dip" />
<TextView
android:id="#+id/ValueTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:textColor="#color/icongrey" />
</LinearLayout>
</LinearLayout>

When the item is selected, why not just change the background, and if you need to, create a new thread that will just go to sleep, then change the item color back.
If you create a new thread, then create a subclass so you can pass in the selected item to it, or at least the item number, in case they touch multiple items.

add a background to your root element
android:background="#drawable/item_click" :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/blue" android:state_pressed="true"/>
<item android:drawable="#color/white" android:state_pressed="false" />

Related

Selector on RelativeLayout not working

I know there are a lot of subjects about this and i read all of them. But still I couldn't make that selector working on RelativeLayout.
So i need your help. Here is my code.
Selector:
<?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/selected_background"/>
<item android:state_pressed="true" android:drawable="#drawable/selected_background" />
<item android:state_selected="true" android:drawable="#drawable/selected_background" />
<item android:drawable="#drawable/unselected_background" />
Layout:
<LinearLayout
android:id="#+id/calendarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="afterDescendants"
android:clickable="false"
android:focusable="false"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:clickable="false"
android:descendantFocusability="afterDescendants"
android:weightSum="3">
<RelativeLayout
android:id="#+id/calendarItem1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_dashboard_calendar_icon"
android:clickable="true"
android:focusable="true"
android:padding="3dp">
<TextView
android:id="#+id/dateTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:clickable="false"
android:lines="2"
android:padding="3dp"
android:textColor="#color/white"
android:textSize="12dp" />
</RelativeLayout>
</LinearLayout>
...
</LinearLayout>
As you can see I made child views not clickable and not focusable, all parent layouts except the one that i put selector has after descendent focusability. What happens is background only changes only when the layout is clicked but i want it to be changed on the selected state.

How do I put a background under a transparent ListView?

right now what I have is just a listview with a custom gradient as the background color. When I have 2 items in my list, the rest of the background beneath it is just all black. I can't set a background image anywhere that would make a background show up. My desired outcome is to have a background image in the back of the entire view where a transparent listview would overlay it. How could this be done? Let me know if you guys need more info/code from my project.
Thanks!
This is my listview in main.xml
<ListView
android:id="#+id/store_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/store_div2"
android:divider="#000000"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"/>
This is the list_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg" />
<item android:state_pressed="true"
android:drawable="#drawable/gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg_hover" />
</selector>
this is my list_row.xml
<?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="#drawable/list_selector"
android:orientation="horizontal"
android:padding="10dp" >
<!-- Application Icon -->
<LinearLayout
android:id="#+id/gmg_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:layout_alignParentLeft="true"
android:background="#drawable/image_bg"
android:layout_marginRight="5dp">
<ImageView
android:id="#+id/gmg_list_image"
android:layout_width="50dp"
android:layout_height="50dp" />
</LinearLayout>
<!-- Title-->
<TextView
android:id="#+id/gmg_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:layout_toRightOf="#id/gmg_thumbnail"
android:textColor="#040404"
android:typeface="sans"
android:textSize="15sp" />
<!-- Rightend Arrow -->
<ImageView
android:contentDescription="#string/right_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scaled_arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
Set your desired background on the Parent Layout containing ListView.
android:background="#drawable/ic_launcher"
Like this (Assuming RelativeLayout is yout parent 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"
android:background="#drawable/ic_launcher" >
<ListView
android:id="#+id/store_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/store_div2"
android:divider="#000000"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"/>
</RelativeLayout>
Add this property android:cacheColorHint="#00000000" to ListView

Highlight a Single Row in Android

I am inflating a layout multiple time as per records.so i want when the user select any particular row.It gets highlighted and after that it comes in normal state as it was before.How can we do this.
Layout that i am inflating multiple times
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainResultLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/request_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="25 Sep 2013" />
<TextView
android:id="#+id/trip_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="25 Sep 2013" />
<TextView
android:id="#+id/trip_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="XXXXXXXXXX" />
<ImageView
android:id="#+id/approval_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:src="#drawable/pending"/>
</LinearLayout>
</LinearLayout>
Please help me how we can do this .Will be thankful to u ..
To highlight a Layout use Selector. Selector can be used to layout,widgets like TextView,Button etc.
artists_list_backgroundcolor.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#color/grey" />
<item android:state_pressed="true"
android:drawable="#color/itemselected" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/itemselected" />
</selector>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="grey">#ffffff</color>
<color name="itemselected">#EDEDED</color>
</resources>
Use selector like this.
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/artists_list_backgroundcolor">
xml selector for layouts whats you need.
try this maybe help you.
See my answer here: how can i get android list view selector items to remember their state off screen?
It's basically using a Checkable RelativeLayout but you can do the same for LinearLayout.

Listview adapter's button can not be clicked

I am using listview's adapter, my code,
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:padding="10dp"
android:background="#android:color/darker_gray"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:text="position1"
android:textSize="20sp"
/>
<Button
android:id="#+id/btn_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#drawable/selector_translate_blue"
android:clickable="true" //Add this is to allow this to get focus, but the button can not be clicked.
>
</RelativeLayout>
</FrameLayout>
When i remove android:clickable="true", the button can be clicked, but the RelativeLayout can not focused.
How to achieve a similar effect as Google Plus?
UPDATE
Now only RelativeLayout can be clicked.
I mean how to make the Button also can be clicked?
NOT click them two at the same time.
Try to set android:focusable and android:focusableInTouchMode to false to your button:
<Button
android:id="#+id/btn_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:focusable="false"
android:focusableInTouchMode="false"
/>
UPDATE
You need to set your Button android:focusable as false and also the RelativeLayout. Plus, you need to have a selector for your both Button and RelativeLayout
Here:
<Button
android:id="#+id/btn_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:background="#drawable/selector"/>
And Here:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#drawable/selector_translate_blue"
android:background="#drawable/selector_ll"
android:focusable="false" >
And here is the important thing, in those selectors, at the android:state_pressed, you need to add more the android:state_focused, this way, when the item click, the Button and RelativeLayout can NOT get focusable, so it will NOT trigger this state:
selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/darker_gray" android:state_pressed="true" android:state_focused="true"></item>
</selector>
selector_ll.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_focused="true"
android:drawable="#android:color/darker_gray"/> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#android:color/darker_gray"/> <!-- focused -->
<item android:drawable="#android:color/white"/> <!-- default -->
</selector>
Hope this helps.
Have you tried adding android:focusable="true" or android:focusableInTouchMode="true" to your relativelayout?

StateList working for parent but not for child views

I am using StateList in android UI to show different drawables for different states of the views.
Heres the code. The problem is when I put android:background="#drawable/state_list" on 1st LinearLayout, it works to highlight the states of "pressed" event.
But if I attach the same StateList to 2nd LinearLayout, it does not work.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="5dp"
android:background="#drawable/highlight_states"> // this WORKS!
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal"
android:background="#drawable/highlight_states"> // this DOES NOT WORK.
<ImageButton
android:id="#+id/profile_call_button"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:background="#color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/icon_phone_green" />
</LinearLayout>
</LinearLayout>
Heres the code of the StateList I am using. highlight_states.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/selected_textbox" /> <!-- pressed -->
<item android:state_focused="true" android:drawable="#drawable/highlight_pressed" /> <!-- focused -->
</selector>
Set on the child LinearLayout
android:duplicateParentState="true"

Categories

Resources