Changing Button UI in Android - android

I am trying to customize a Button UI in Android.
I tried the following things:
btn.setBackgroundColor
btn.setBackgroundResource
btn.setBackgroundColor
But all of these are increasing the size of the Button, and because of that the Buttons near by can not be segregated (??).
Please suggest something.

If you want to apply a Hover effect then you have to do this in your XML where button layout is like
Button
android:id="#+id/xyz"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="15dp"
android:background="#drawable/general_btn_hover_effect"
android:onClick="somefunction"
android:text="#string/search_number"
android:textColor="#ffffff"
android:textSize="20sp"
/>
Notice android:background="#drawable/general_btn_hover_effect" there and then in #drawable folder make a general_btn_hover_effect.xml and write this into it
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/blank_normal_bg" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#drawable/blank_hover_bg" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/blank_hover_bg" android:state_focused="false" android:state_pressed="true"/>
<item android:drawable="#drawable/blank_normal_bg"/>
</selector>

Changing background color can not change size of button. Maybe you changed size in xml layout. Check again

Related

Button raised effect not working when background image attached

I am creating a simple button as follows :
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/edSearch"
android:id="#+id/btnSearch"
android:layout_marginTop="30dp"
android:drawableTop="#drawable/ic_action_search"
android:textSize="16sp"
android:text="Search"
android:background="#color/md_green_500"
android:textColor="#fff"
/>
Now, when i try add any image in background like :android:background="#drawable/img123" then button raise effect does not work. is there any way i can achieve raise effect with background image ?
You can create a selector drawable for this. You need to provide 3 different images for this so that the button can toggle those images as per the state.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/image_normal" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/image_pressed" />
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/image_focused" />
</selector>
Also inspite of that you can use ImageButton which will keep your image in center of button and the effects will be default as per operating system.

The only image for all button states for Android?

I have an image for my button.
In order to make use of it I have to have 1 additional image for each state:
1. disabled
2. selected
3. pressed
etc..
in iOS all those additional states are handled automatically and deferred from original image provided.
Is it possible to accomplish this for Android?
Is it possible to accomplish this for Android?
No, It is NOT. You need to have all states's images with you to define the selector
You can define button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selected state -->
<item android:drawable="#drawable/button_bg_selected" android:state_selected="true"></item>
<!-- Pressed state -->
<item android:drawable="#drawable/button_bg_pressed" android:state_pressed="true"></item>
<!-- Disabled state -->
<item android:drawable="#drawable/button_bg_disabled" android:state_enabled="false"></item>
<!-- Normal state -->
<item android:drawable="#drawable/button_bg_normal"></item>
</selector>
Then simply assign this selector as a background of a button
<Button
android:id="#+id/button1"
android:background="#drawable/button_selector"
android:layout_width="200dp"
android:layout_height="126dp"
android:text="Hello" />
Refer : Button Selector
Hope it will help you ツ
For selected and pressed you can use an xml file with root for button's background but for disabled I guess you need to handle it in java code. I'm not sure about disabled state.
You will have to use selector for android.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/focused"
android:state_focused="true" />
<item android:drawable="#drawable/normal" />
</selector>
android:background="#drawable/selector_button" />
just have a look of this link.
As far as I know you need to handle this states in a new resource file called cursor: e.g:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/edittext_selector" android:layout_height="fill_parent"
android:layout_width="fill_parent">
<!-- Image display in background in select state -->
<item
android:state_pressed="true"
android:drawable="#drawable/edittextback1">
</item>
<!-- Image display in background in select state -->
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/edittextback2">
</item>
<!-- Default state -->
<!--<item android:state_enabled="true"-->
<!--android:drawable="#drawable/your_ninepath_image">-->
<!--</item>-->
</selector>
This answer refers to how you can handle button states in Android
You can create a button layout file separately in put that in res > layout folder
For Instance:
if the layout file name is btn.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/btn_pressed" />
<item android:drawable="#drawable/btn_normal"/>
</selector>
You can set BackgroundResource of a Button
yourButton.setBackgroundResource(R.layout.btn);
EDIT
In addition you can refer to this link which is more closer to answer your question

custom button selector

Im trying to create custom button and i cant see my problem.
i create in res/drawable/ custom.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/forwardpress"></item>
<item android:state_focused="true" android:drawable="#drawable/forwardhover"></item>
<item android:drawable="#drawable/forward"></item>
</selector>
and on main.xml i have this button
<Button
android:id="#+id/bFor"
android:background="#drawable/custom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right" />
The problem is, button is stay presed without animation, (yes i have 3 diferent picture in drawable folder)
Funny thing is, I for one button works but the other does not
i try this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/backpress" android:state_pressed="true"/>
<item android:drawable="#drawable/back"/>
its work but for second button i try the same process
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/forwardpress" android:state_pressed="true"/>
<item android:drawable="#drawable/forward"/>
</selector>
for second button doesnt work, wierd...
Clean and build your project again.

Android: ImageButton not showing states pressed

I have an ImageButton and I swear I have everything set up right but it is not showing the different icon when a state is pressed. Here is what I have.
ImageButton
<!-- HOME BUTTON -->
<ImageButton
android:id="#+id/home"
android:layout_width="45dp"
android:layout_height="fill_parent"
android:background="#android:color/transparent"
android:contentDescription="Home"
android:src="#drawable/title_home"
android:layout_alignParentLeft="true"
android:onClick="onClickHome" />
Title Home
<?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/title_home_pressed"/>
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/title_home_pressed"/>
<item android:state_focused="true" android:drawable="#drawable/title_home_pressed"/>
<item android:state_focused="false" android:state_pressed="false" android:drawable="#drawable/title_home"/>
</selector>
And yes these are all valid images, and they are different. title_home is the only one that is showing up.
I would appreciate any ideas?
Notice how you are referring to #drawable/title_home in the first block of code, but you are intending to refer to the xml file. Although in the second block of code you are referring to another #drawable/title_home which I am assuming is an image.
Because of this I can only assume that from your information your first block of code is reading the image and not the xml file. To fix this, I believe changing the names of one of them would help.
android:src="#drawable/title_home"
<item android:state_focused="false" android:state_pressed="false" android:drawable="#drawable/title_home"/>
Same name. Change your xml file name to title_home_btn_selector.
Then make the first one as
android:src="#drawable/title_home_btn_selector"

Drawable with selector?

in drawable folder:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/icon2" />
<item android:drawable="#drawable/icon3" />
</selector>
and the layout is just simple linear layout that fill the whole space
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/on_touch_"
android:weightSum="1" android:focusable="true" android:focusableInTouchMode="true">
</LinearLayout>
and when I press this nothing happens
If I add, for example, some textview and assign android:background="#drawable/on_touch_" then that textview when pressed it changes the image correctly.
Where is the problem with the linear layout why it does not change the image when pressed ?
Edit:
I am sure that my drawable selector is good and working cause I put as a background to other elements and it is working.
But my problem is how to set the drawable to the root element
Add this to your layout :
android:clickable="true"
This will set the pressed state when you'll click it.
try out
save_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:state_pressed="false"
android:drawable="#drawable/save_hover_new" />
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/save_hover_new" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/save_hover_new" />
<item android:drawable="#drawable/save_new" />
</selector>
and give layout's background as selector like
android:background="#drawable/save_selector
I would make sure I do not have a drawable namesake. You seem to be using on_touch_.xml as your selector. Is there perhaps also an on_touch_.png?
I would also make sure that I am not setting the background again, to something else, or making it unclickable, in code.
I got a selector in a root element that is working fine; the background switches when pressed. It is not the root element of the activity layout, but it is the root element of the XML file.
The background is assigned with a png at first:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/panel"
>
...
I assign the background to the selector only when assigning an OnClickListener:
private void setClickListener(OnClickListener ocl) {
View boxRoot = findViewById(R.id.box_root);
if (ocl != null) {
boxRoot.setOnClickListener(ocl);
boxRoot.setBackgroundDrawable(getResources().getDrawable(R.drawable.panel_arrow_right_bgstate));
setClickable(true);
...
In my XML, I used android:clickable="true" but then I also added android:focusable="true" android:focusableInTouchMode="true" to match your case. That also worked fine, with background switching for all my four states.
// panel_arrow_right_bgstate.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_pressed="false" android:drawable="#drawable/panel_arrow_right_normal"/>
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/panel_arrow_right_pressed"/>
<item android:state_focused="true" android:state_pressed="false" android:drawable="#drawable/panel_arrow_right_selected"/>
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/panel_arrow_right_pressed"/>
If this is not working for you, something else is wrong with your code, somewhere else.
When I add or remove drawables, Eclipse sometimes gets fishy and mix them up. My normal measurements are:
Clean project
Refresh res folder in Eclipse
Delete gen\com.comp.proj\R.java

Categories

Resources