Setting a Button with background Image and Round corners - android

I know there are already questions like this but i cannot find the answer for my uestion. Please Help?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button"
android:state_pressed="true" />
<item android:drawable="#drawable/button"
android:state_focused="true" />
<item android:drawable="#drawable/button" />
</selector>
i already set the background but i dont know how to make the edges round.

Create your own custom button like this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#1a1a1a" />
</shape>
Also check this on Developers Site

Related

When I add more than one states to an <item> in a state-list drawable, it stops working. Why?

What I want:
An ImageView with a transparent background. When it is clicked, its background should turn blue, and should remain blue until something else is clicked. I am using state-list drawable for it.
What is happening:
The code is given as follows. The problem is that the background does turn blue, but it does not remain blue. So I thought it is because android:state_pressed just represents the moment when the widget is being clicked. So I also added android:state_selected="true" to button_state_list_drawable.xml right after android:state_pressed="true". What happened then is that the background stopped turning blue even when the imageview is being clicked.
How do I fix this?
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"
android:clickable="true" />
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"
android:state_selected="true" />
<item android:drawable="#drawable/button_enabled_state_drawable" />
</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>
I recently had this problem, and this is what I did.
In your button_state_list_drawable.xml, add this somewhere before you default state item:
<item android:drawable="#drawable/button_pressed_state_drawable"
android:state_selected="true"
android:state_pressed="false" />
Also remove android:state_selected="true" from your state_pressed item.
Then in the beginning of your click listener for the ImageView, write
yourImageView.setSelected(true);
This had solved my problem. Hope it helps you.
I don´t know if this is the solution, but I have to show some code. You haven´t added a default state to your selector and I can´t see your selected state (you wrote it in yur question, but you haven´t posted it). It must be something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_enabled_state_drawable"
android:state_enabled="true" />
<item android:drawable="#drawable/button_pressed_state_drawable"
android:state_pressed="true" />
<item android:drawable="#drawable/your_selected_state_drawable"
android:state_selected="true" />
<item android:drawable="#drawable/your_button_default_drawable"/>
</selector>
And I think you have to add programmatically the selected state (I´m not sure for this or if it does it automatically)
yourImageView.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v){
if(yourImageView.isSelected()){
yourImageView.setSelected(false);
}else{
yourImageView.setSelected(true);
}
}
});

How to show effect on like button like facebook shows

I have a layout in which I have like button which is a simple textview and I have applied onclick event on this. Now I want to show the same effect which facebook shows when like button in facebook android app get clicked on the news feeds.
How can I do this in my android application. Please help me if you have any idea here.
Use selector if you want to give a highlight effect only when the button in touched.
Save this as an xml drawable and assign this drawable to the button :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_white_09_rectangle_unpressed" android:state_focused="true"
android:state_pressed="false" />
<item android:drawable="#drawable/btn_white_09_rectangle_pressed" android:state_focused="true"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_white_09_rectangle_pressed" android:state_focused="false"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_white_09_rectangle_unpressed" />
</selector>
Create 2 other drawable xml files which is being used by the above xml.
btn_white_09_rectangle_unpressed.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item >
<shape
android:shape="rectangle"
>
<corners
android:radius="9dp"/>
<gradient
android:angle="45"
android:endColor="#27FFFFFF"
android:startColor="#18FFFFFF"
/>
</shape>
</item>
</layer-list>
btn_white_09_rectangle_pressed.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item >
<shape
android:shape="rectangle"
>
<corners
android:radius="11dp"/>
<gradient
android:angle="90"
android:endColor="#09FFFFFF"
android:startColor="#02FFFFFF"
/>
</shape>
</item>
</layer-list>
If you want to change the background of the button(and not revert) when user clicks on it then you have to do it through code.
Use the following code in your onClick()
your_button.setBackgroundResource(R.id.desired_drawable);

Android: make list item with background clickable

I have a list where I have defined my own list view items with a custom layout. This layout has a background with a custom drawable.
My custom layout for the ListView item:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/item"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true" >
...
</RelativeLayout>
My custom drawable item.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- background: shadow -->
<item>
<shape
android:dither="true"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/itemShadowColor" />
</shape>
</item>
<!-- foreground: surface -->
<item android:bottom="2dp">
<shape
android:dither="true"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/itemBackgroundColor" />
</shape>
</item>
</layer-list>
Now this item is not clickable anymore.
Can you explain me why, and what I have to do to have the same behavior (selector with the blue background) like a button click?
Define a selector with its pressed and default states in res/drawable folder(one of the state will be your #drawable/item). Set it as the bg of your list row layout.
See similar question and answer :Selector on background color of TextView
Edit:
Best way to understand and apply something like google did is, to look into SDK and do similar things to that. For instance look at the btn_default_holo_dark drawable. It is a selector with states and yes it is a xml.
This is a selector taken from sdk (sdk\platforms\android-18\data\res\drawable\btn_default_holo_dark.xml)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/btn_default_normal_holo_dark" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/btn_default_disabled_holo_dark" />
<item android:state_pressed="true"
android:drawable="#drawable/btn_default_pressed_holo_dark" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/btn_default_focused_holo_dark" />
<item android:state_enabled="true"
android:drawable="#drawable/btn_default_normal_holo_dark" />
<item android:state_focused="true"
android:drawable="#drawable/btn_default_disabled_focused_holo_dark" />
<item
android:drawable="#drawable/btn_default_disabled_holo_dark" />
</selector>
These are the images taken from sdk (sdk\platforms\android-18\data\res\drawable-xhdpi):
When you apply this drawable/selector (#drawable/btn_default_holo_dark) to any view, you are going to have its states. I hope this sample makes my answer more clear.

Selector.xml is not working when clicked on the image button

I use the following selector to change image of image button, when I click on it. But this does not work most of the times. Only for few buttons it works. Don't know what the cause here is
mapselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button Pressed -->
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/mapiconover"/>
</selector>
And in the button,
Am doing like this,
<ImageButton
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/btnMap" android:layout_centerInParent="true" android:src="#drawable/mapselector"
android:background="#drawable/map" android:scaleType="fitXY"
android:layout_alignParentBottom="true">
</ImageButton>
but still image is not changing when I click.
Any guess for this?
you have create like this in the ImageButton xml
create xml file using the button image like this
<?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/backbutton" />
<item
android:drawable="#drawable/closebutton" />
</selector>
add that xml file as background for IMageButton
<ImageButton
android:layout_height="50px"
android:layout_width="50px"
android:id="#+id/settings"
android:background="#drawable/settings_button" //setting_button in
the xml file
android:text="Settings"/>
Not sure if this will work but you could try changing your selector to this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button Pressed -->
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/mapiconover"/>
<item android:drawable="#drawable/map" />
</selector>
And your image button to this:
<ImageButton
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/btnMap"
android:layout_centerInParent="true"
android:background="#drawable/mapselector"
android:scaleType="fitXY"
android:layout_alignParentBottom="true">
</ImageButton>
I had the same problem. For me it was because of
android:state_xxxx
conflict. It solved by clarifying the conditions between enabled and pressed. I used the following code to get different states between press and normal state:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="false" >
<shape
android:shape="rectangle">
<gradient android:startColor="#1094ff"
android:endColor="#7eb6e3"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#505050" />
</shape>
</item>
<item android:state_pressed="true" android:state_enabled="true">
<shape
android:shape="rectangle">
<gradient android:startColor="#0075d4"
android:endColor="#0070cb"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#ff0000" />
</shape>
</item>
<item android:state_enabled="false" >
<shape
android:shape="rectangle">
<gradient android:startColor="#b9b9b9"
android:endColor="#848484"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#505050" />
</shape>
</item>
</selector>
This example uses different gradient and stroke for different states. You can also use your drawable instead. Just create a file like "mybutton.xml" in your drawable folder. then set the background property of your button like this:
android:background="#drawable/mybutton"
I hope it be helpful.

Selector color on LinearLayout

I'm trying to assing a color selector to an extended class of LinearLayout, so, i think its like if we speak about linearLayout.
i followed the instructions on this post, the answer talking about shapes.
Now i have 3 xml on drawables folders:
normal.xml file
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffffff" />
</shape>
pressed.xml file
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#00000000" />
</shape>
and finally, bg.xml file
<?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/pressed" />
<item android:state_focused="true" android:drawable="#drawable/pressed" />
<item android:state_selected="true" android:drawable="#drawable/pressed" />
<item android:drawable="#drawable/normal" />
</selector>
I am accessing this in the following way:
Drawable d = getResources().getDrawable(context.getResources().getIdentifier("mypackageuri.tProject:drawable/bg", null, null));
view.setBackgroundDrawable(d);
The "normal" state its fine, with the color set at "normal.xml", but no way with the other ones, I press my view and nothing happens, it's not changing color in any way...
I can't see what i'm doing wrong...
Thank you
Your view needs to be clickable in order to get the state pressed when you click on it.
Use :
view.setClickable(true);
or in the layout xml :
android:clickable="true"

Categories

Resources