I have a problem with changing button background image.
So i have 2 images (png-24 transparent background).
Images are a simple circle and the same circle but with some outerglow ).
I have the following code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ticketing_row_topup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#layout/pressed_topup_button"
android:orientation="horizontal" >
<TextView
android:id="#+id/topup_name"
android:layout_width="60dp"
android:layout_height="fill_parent"
android:gravity="center_vertical|right"
android:paddingRight="5dip"
android:paddingTop="22dip"
android:text="€"
android:textColor="#color/black"
android:textSize="35sp"
android:textStyle="bold" />
<TextView
android:id="#+id/topup_display_amount"
android:layout_width="90dp"
android:layout_height="match_parent"
android:gravity="center_vertical|left"
android:textSize="65sp"
android:textColor="#0d457f"
android:textStyle="bold" />
</LinearLayout>
And the pressed_topup_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:state_enabled="false">
<item android:state_pressed="true" android:state_enabled="true" android:drawable="#drawable/button_topup_glow" />
<item android:state_focused="true" android:state_enabled="true" android:drawable="#drawable/button_topup" />
<item android:state_enabled="true" android:drawable="#drawable/button_topup" />
</selector>
The LinearLayout is used to populate a GridView in each cell.
When i click the cell the behavior is correct (the glow is displayed) but also a yellow color is display on the corner of the image (where suppose to be transparent). How can i fix that?
Thanks
You need to add
android:listSelector="#android:color/transparent"
to your GridView declaration.
See this:
Android: Disable highlighting in GridView
Related
So i have a RecyclerView and it is populated by my custom layout (code below). I have made a background drawable and set it on the root of my custom layout so that when user clicks the item, the background colour changes. There is also an options button (3 dots) on every item's layout, which is also clickable and also needs to change the background colour when clicked.
The problem is, when i set my drawable as background for the options menu the whole layout doesn't change colour when clicked (screens below)
When i set the background on options menu as "?android:attr/selectableItemBackground", everything works fine.
Code for my layout:
<RelativeLayout xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#drawable/item_click"
android:layout_marginBottom="2dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:paddingLeft="16dp"
android:id="#+id/item_icon"
android:src="#drawable/ic_folder" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="72dp"
android:layout_centerVertical="true">
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#333333"
android:text="Caption"
android:textSize="13sp" />
<TextView
android:id="#+id/item_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#333333"
android:text="Description"
android:textSize="13sp" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:foregroundGravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:id="#+id/item_menu"
android:src="#drawable/ic_ellipsis_v"
android:background="#drawable/item_click" />
</RelativeLayout>
Code for the drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#color/primary_100" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#color/primary_100" />
<item
android:drawable="#android:color/white" />
</selector>
Item selected when the background of the options menu is set to "?android:attr/selectableItemBackground" (I want the whole row to change colour to blue):
Item selected when the background of the options menu is set to my drawable:
Change the default state of your selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#color/primary_100" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#color/primary_100" />
<item
android:drawable="#android:color/transparent" />
</selector>
this is my fragment
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="135dp"
android:background="#color/colorTerracota"
android:padding="15dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/statetexas"
android:id="#+id/btnTexas"
android:width="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/stateyucatan"
android:id="#+id/btnYucatan"
android:width="100dp"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/btnTexas"
android:layout_alignStart="#+id/btnTexas" />
</RelativeLayout>
I wanted this see as it:
Set your buttons' background color in your XML file:
android:background:"#9E9E9E" // Your color
Their background is set by default to be transparent.
Create a background selector as below in drawable folder
drawable - selectablebackground.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/grey_lightest" android:state_pressed="true"/>
<item android:drawable="#color/grey_lightest" android:state_focused="true"/>
<item android:drawable="#android:color/white"/>
</selector>
Replace colors as you like for pressed and normal states. Set this as background to your button
android:background:"#drawable/selectablebackground"
This should work.
I try to reproduce a button like this :
There is a gray background with a bottom border in other gray.
I don't how to add this fine bottom border. Here is my result now :
Here is the code of my button :
<Button
android:id="#+id/button_consulter_original"
style="?android:attr/borderlessButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="10dp"
android:background="#drawable/button_custom"
android:text="#string/detail_article_view_consulter_sur_web"
android:textColor="#color/blanc" />
and the code of button_custom.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/bleuactionbarFonce"
android:state_pressed="true" />
<item android:drawable="#color/bleuHome"
android:state_focused="true" />
<item android:drawable="#color/gray" />
</selector>
Add this view below your Button
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
this will add the border effect,
i want to make image button, so when it pressed i will replase the not-pressed image to pressed image of the button, and then go to other activity. i have two different images in drawable.
i have two xml files:
first one- load the main activity: background and image button
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<ImageButton
android:id="#+id/b1_l"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/s1"
android:scaleType="centerCrop"
android:background="#color/trans"
android:src="#drawable/b1_l" />
</RelativeLayout>
second one:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="#drawable/image_not_pressed" />
<item android:state_pressed="true"
android:drawable="#drawable/image_pressed"" />
</selector>
what is the code that i need to write in addition to my xml?
or can i pass the xml and write it only as code...?
thanks!
you need to usually have drawable for pressed and default(unpressed) state. You can have the xml file like this(below) for that. You need to put this xml file in the drawable folder and then use as src for ImageButton or background source in case of Button.
Lets name it is mybutton.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/your image name" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/your image name" />
<item android:drawable="#drawable/your image name" />
</selector>
You layout file for main activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<ImageButton
android:id="#+id/b1_l"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/s1"
android:scaleType="centerCrop"
android:background="#color/trans"
android:src="#drawable/mybutton" />
</RelativeLayout>
You migth want do check out android developer guide on this
http://developer.android.com/guide/topics/ui/controls/button.html
I have a customized ListView that each row of the list is composed by an ImageView and two TextView's. I want to change the text's color to white when a list's item is clicked (only in the clicked item). Also, I want to change back the color to black when the item is "unclicked" (when the "press" is released). I already made the item's background color change when it was clicked with the following list_item_bg.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/white" />
<item android:state_pressed="true"
android:drawable="#color/red_destaques" />
<item android:state_selected="true"
android:drawable="#color/red_destaques" />
</selector>
And the listitem_row.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="50dip"
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dip"
android:maxHeight="50dip"
android:adjustViewBounds="true"
android:background="#color/list_item_bg">
<ImageView
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/imagem_padrao_lista"
android:id="#+id/listItemLogo">
</ImageView>
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_toRightOf="#+id/listItemLogo"
android:layout_toLeftOf="#+id/listItemArrow"
android:textColor="#000000"
android:layout_marginLeft="5dip"
android:adjustViewBounds="true"
android:id="#+id/listItemTitle">
</TextView>
<TextView
android:layout_height="wrap_content"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_toRightOf="#+id/listItemLogo"
android:layout_below="#+id/listItemTitle"
android:textColor="#333333"
android:layout_marginLeft="5dip"
android:adjustViewBounds="true"
android:id="#+id/listItemDescription">
</TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:src="#drawable/setinha_navegacao" android:layout_centerVertical="true" android:id="#+id/listItemArrow"></ImageView>
</RelativeLayout>
I the text to change it's color exactly in the same manner that the background changes as shown in the above xmls. I would prefer doing this change by code if possible...
Create a new StateListDrawable like you did before but with black as default color and white when pressed.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#color/black" />
<item android:state_focused="true" android:color="#color/black" />
<item android:state_pressed="true" android:color="#color/black" />
<item android:color="#color/white" />
</selector>
Now for in the TextView change the text color to the new drawable:
android:textColor="#color/list_item_text"
More on StateListDrawables: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList