I have a ListView where I've implemented a Cards UI-type look to it. If an item in the ListView is in the "selected" or "pressed" state, there is a white border around the item. I would like the entire view to have the blue color, but not sure how to achieve that:
ListView item layout
<?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"
>
<RelativeLayout
android:id="#+id/itemLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:background="#drawable/bg_cards_ui"
>
<TextView
android:id="#+id/title"
android:layout_alignParentTop="true"
android:paddingBottom="4dip"
/>
<TextView
android:id="#+id/summary"
android:paddingBottom="4dip"
android:layout_below="#id/text"
/>
<TextView
android:id="#+id/siteName"
android:layout_below="#id/summary"
/>
<TextView
android:id="#+id/date"
android:layout_below="#id/summary"
/>
</RelativeLayout>
</FrameLayout>
bg_card_ui.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle" android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp"
/>
</shape>
</item>
<item>
<selector>
<item android:state_pressed="true" android:drawable="#color/my_blue_color" />
<item android:state_selected="true" android:state_pressed="false" android:drawable="#color/my_blue_color" />
<item android:state_activated="true" android:state_selected="false" android:state_pressed="false" android:drawable="#color/my_blue_color" />
<item android:state_selected="false" android:state_pressed="false" android:drawable="#android:color/transparent" />
</selector>
</item>
</layer-list>
Check this out:ListView - Highlight sub layout of item. I've implemented exactly what I think you're looking to do.
Basically, for what you've got, you need to have the selector reference a background xml file in the "drawable" property of the each item. You would need at least two background xml files, one for normal state and one for pressed which has the color changes you want. Should work after that.
Related
Create a login page. but I don't know what problem this code
login button don't work change color when I clicked!
I want to when I click then change color button
why doesn't changed that 'LOGIN' button?
how I can solve this?
activity_login.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"
android:orientation="vertical"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_login"
android:clickable="true"
android:gravity="center"
android:paddingLeft="32dp"
android:paddingRight="32dp">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_user" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="LOGIN"
android:textColor="#fff"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
selector xml ->
btn_login.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#4DAEEA" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#00ff00" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#999" />
<corners android:radius="30dp" />
</shape>
</item>
</selector>
you should make LinearLayout behave like a button by adding style and removing background , follow these steps
<LinearLayout
......
style="#style/btn_stand"
.......
>
</LinearLayout>
My style definition for the button:
<style name="btn_stand" parent="AppBaseTheme">
<item name="android:background">#drawable/btn_stand_sel</item>
<item name="android:textColor">#drawable/btn_stand_text_color</item>
<item name="android:minHeight">48dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
</style>
My #drawable/btn_stan_sel file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- disabled state -->
<item android:drawable="#drawable/btn_stand_disabled" android:state_enabled="false"/>
<!-- enabled and pressed state -->
<item android:drawable="#drawable/btn_stand_pressed" android:state_enabled="true" android:state_pressed="true"/>
<!-- enabled and focused state -->
<item android:drawable="#drawable/btn_stand_focused" android:state_enabled="true" android:state_focused="true"/>
<!-- enabled state -->
<item android:drawable="#drawable/btn_stand_enabled" android:state_enabled="true"/>
</selector>
My drawable file repeated for each state just with different colors for each state:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/stroke" />
<solid android:color="#color/blue" />
<corners android:radius="6dp" />
</shape>
this was an example that works for me , hope you use it and choose the color you want
Add android:focusable="true"to your linear layout xml code.
In the event that that doesn't work, you can try to replace android:background=#drawable/btn_login with android:foreground="?android:attr/selectableItemBackground".
I have my ImageView defined in XML like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fragment_imageView"
android:src="#drawable/ic_photo"
android:background="#drawable/button_state_list_drawable" />
The button_state_list_drawable.xml is:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_pressed_state_drawable"
android:state_pressed="true" />
<item android:drawable="#drawable/button_enabled_state_drawable"
android:state_enabled="true" />
</selector>
The button_pressed_state_drawable.xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size android:width="50dp"
android:height="50dp" />
<padding android:left="25dp"
android:right="25dp"
android:top="25dp"
android:bottom="25dp" />
<stroke android:color="#fff"
android:width="1dp" />
<solid android:color="#1aafd0" />
</shape>
The button_enabled_state_drawable.xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size android:width="50dp"
android:height="50dp" />
<padding android:left="25dp"
android:right="25dp"
android:top="25dp"
android:bottom="25dp" />
<stroke android:color="#fff"
android:width="1dp" />
<solid android:color="#android:color/transparent" />
</shape>
The problem is that when I click/touch the ImageView, the button_pressed_state_drawable does not seem to be used, i.e. I can't see the <solid android:color="#1aafd0" /> in action (which is basically the only difference between the two drawables), i.e the background color is still transparent instead of changing to blue. Where am I messing up?
I think your ImageView is not clickable.
Try to make it clickable by using ImageView.setClicked(true).
or
android:clickable="true"
Also make sure that your image resource is not covered your background.
This is what i've done which works fine.
<ImageView
android:id="#+id/fragment_imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_state_list_drawable"
android:clickable="true"
android:padding="20dp"
android:src="#drawable/ic_launcher"/>
<item android:drawable="#drawable/button_pressed_state_drawable"
android:state_pressed="true" />
<item android:drawable="#drawable/button_enabled_state_drawable"
android:state_enabled="true" />
A button can be both "pressed" and "enabled." Try removing android:state_enabled="true" from the 2nd item.
I have 3 TextViews stacked vertically in a LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item3"/>
</LinearLayout>
I could apply a drawable to the background attribute to render a Border
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#color/pale_grey" />
<padding android:left="24dp" android:right="24dp"
android:top="12dp" android:bottom="12dp" />
</shape>
</item>
</layer-list>
I could also apply a selector, via a drawable, to the background property so that the TextView changed color depending on states such as Pressed. However there is only one background attribute.
I do not believe i can apply the <shape> xml and the <selector> xml within the same drawable. Therefore do I need to wrap a single layout element around each TextView just so can apply another background?
It looks like google solves this by encompassing border, padding and background colour into one drawable patch-9 image. I was hoping I didn't need to do that
Thanks
In the selector set the state pressed and unpressed with your XML's that render the border
Example:
<selector xlmns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/border_unpressed" android:state_pressed="false"/>
<item android:drawable="#drawable/border_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/border_unpressed" />
</selector>
Note:
Make sure to set the TextView attribute android:clickable="true"
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="4dp">
</corners>
<stroke android:width="1dp" android:color="#ffffff"/>
<gradient
android:startColor="#187cb6"
android:endColor="#187cb6"
android:angle="270"/>
</shape>
</item>
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/gradient" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/gradient" />
</selector>
</item>
</layer-list>
I am trying to implement a custom RadioButton, and the styling is working as I would expecting, however, the selection highlighting is not exclusive. Meaning, I can have two buttons within the same group highlighted at the same time.
Edit
This the state before I select the second button:
This a visual of the issue I'm getting - note I'd only like one selected:
Below is the code for the background selector of my RadioButton:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_checked="true"
android:state_pressed="false"
android:drawable="#drawable/toggle_button_selected"/>
<item
android:state_checked="false"
android:state_pressed="false"
android:drawable="#drawable/toggle_button_unselected"/>
<item
android:state_checked="true"
android:state_pressed="true"
android:drawable="#drawable/toggle_button_selected"/>
<item
android:state_checked="false"
android:state_pressed="true"
android:drawable="#drawable/toggle_button_unselected"/>
</selector>
Below is my implementation in the group:
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/toggle_button_selector"
android:button="#android:color/transparent"
android:checked="true"
android:padding="10dp"
android:text="Test" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/toggle_button_selector"
android:button="#android:color/transparent"
android:padding="10dp"
android:text="Test1" />
</RadioGroup>
Any thoughts?
Edit
Drawables:
toggle_button_unselected.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#color/dark_purple" />
<stroke
android:width="1dp"
android:color="#color/dark_purple" />
</shape>
toggle_button_selected.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#color/purple" />
<stroke
android:width="1dp"
android:color="#color/dark_purple" />
</shape>
The only thing I can think of is that the RadioButtons should have different ids.
Actually I am developing an android application which has multiple listviews.
In ListView's Implementation, I inflate a cell for each list view item.
This is the category_cell.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="60dip"
android:id="#+id/cell_layout"
android:background="#drawable/list_bg">
<RelativeLayout
android:id="#+id/category_cell_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/category_image"
android:layout_centerVertical="true"
android:layout_marginLeft="10dip"
android:layout_height="45dip"
android:layout_width="45dip" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/category_name"
android:text="Category Name"
android:textSize="16dip"
android:typeface="sans"
android:layout_centerVertical="true"
android:layout_marginLeft="70dip"
android:textColor="#color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/arrow_image"
android:background="#drawable/list_arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dip" />
</RelativeLayout>
</RelativeLayout>
On the background of this cell, a drawable xml is placed.
that list_bg.xml has following code:
<?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/transparent" />
<item
android:state_pressed="true"
android:drawable="#color/blue" />
<item
android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/blue" />
</selector>
While populating the list view with the items, I want to set a different color for pressed and focused states of the background xml for each item. Each item contains a color's value and I want to set that color on the pressed state of that item.
StateListDrawable states = new StateListDrawable();
states.addState(new int[] {android.R.attr.state_pressed},getResources().getDrawable(R.color.translucent_red));
states.addState(new int[] {android.R.attr.state_focused},getResources().getDrawable(R.color.white));
states.addState(new int[] { },getResources().getDrawable(R.color.white));
row.setBackgroundDrawable(states);
I had tried to implement this but this normally accepts drawable as a second parameter of add_state function but I want to post a color there....
Could anyone please help me???
just change the list_bg.xml. This is just example you can set your own colors
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:angle="90" android:centerColor="#6da23f" android:endColor="#8bc45d" android:startColor="#2f481c" />
<stroke android:width="2dp" android:color="#999999" />
<padding android:bottom="4dp" android:left="3dp" android:right="3dp" android:top="6dp" />
<corners android:radius="10px"/>
</shape></item>
<item><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:angle="90" android:centerColor="#6da23f" android:endColor="#8bc45d" android:startColor="#4c8a39" />
<stroke android:width="1dp" android:color="#FFFFFF" />
<padding android:bottom="4dp" android:left="3dp" android:right="3dp" android:top="6dp" />
<corners android:radius="10px"/>
</shape></item>