I'm trying to follow the tutorial located at http://www.dibbus.com/2011/02/gradient-buttons-for-android/, however I'm not getting the expected result. Everything compiles fine, however when I run it I get a button without any colors, gradients, or even borders (so actually all I see is just the button text). The button itself responds to events ok.
In order to be compatible with as many devices as possible I'm using android:minSdkVersion="3", could this be an issue?
This is part of my layout xml file:
<TableRow>
<Button
android:id="#+id/button_calculate"
android:background="#drawable/copy_btn"
android:layout_column="1"
android:layout_span="2"
android:padding="5dp" />
</TableRow>
This is copy_btn.xml, located inside drawables.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#70c656" />
<stroke
android:width="1dp"
android:color="#53933f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#70c656"
android:endColor="#53933f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#53933f" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Thanks
It works fine if u add android:layout_height="wrap_content" android:layout_width="wrap_content" to your button in Android Manifest. minSdkVersion has to do nothing with this as most of the times they are backward compatable.
What "(so actually all I see is just the button text)" means? How can u see a button text when u haven't used android:text attribute? Either there is another button in ur app or u r setting text from code. Do check this.
Related
I'm trying to get my buttons to show 3 states, normal, pressed and selected. Normal and pressed show ok, but the selected state does not. I've tried using state_focused state_activated and state_active and combinations of states set to true and false but without success.
Can buttons show the selected state? and if so what am I doing wrong?
minSdkVersion = 11
targetSdkVersion = 19
Here's the xml for the selector, red_button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
and here's the xml for the button, which is contained within a LinearLayout and loaded as a fragment into mainActivity
<Button
android:background="#drawable/red_button"
android:id="#+id/scene_1_btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:maxWidth="150dp"
android:minWidth="100dp"
android:text="#string/scene_1_btn_text"
android:onClick="sendMessage"
style="#style/button_text" />
Thank you.
Buttons actually behave like keyboard buttons, i.e. they have only two states viz normal and pressed.
If you want to remember/show the seleted state, i got an idea..., try using 'radio group' (if you want only one to belected from a group) or use toggle button/switch (each of them remember their state as ON or OFF) and create their custom UI so that they look like buttons as you want them to.
I'm having an imageview which will navigate to another page once it is clicked. Right now when it is clicked user will not be getting any feel that it is clicked. So what i want is to have some effect (like in normal button) at the time of click on the image....can anyone help me?
use style="?android:borderlessButtonStyle" in the xml file.
It will show android default click effect.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
style="?android:borderlessButtonStyle"
/>
Try a selector like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape>
<solid android:color="#151B8D" />
<stroke android:width="1dp" android:color="#151B8D" />
<corners android:bottomLeftRadius="8dp" android:bottomRightRadius="0dp" android:topLeftRadius="0dp" android:topRightRadius="8dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape></item>
<item><shape>
<gradient android:angle="270" android:endColor="#151B8D" android:startColor="#151B8D" />
<stroke android:width="1px" android:color="#000000" />
<corners android:bottomLeftRadius="8dp" android:bottomRightRadius="0dp" android:topLeftRadius="0dp" android:topRightRadius="8dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape></item>
</selector>
Speaking about xml selector, here is the link which could you help xml selector link
Assuming you are referring to physical not visible feel, use something like this to make a sound and provide haptic feedback:
iv.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
iv.playSoundEffect(SoundEffectConstants.CLICK);
where iv is your imageview.
I want my buttons to be transparent as I have an image on the activity as a background.
If the buttons are not transparent, those buttons are covering the image and image background seems useless.
If I use android:background="#android:color/transparent", it is making my button completely invisible except the text on it. So, I need the button to be transparent provided it should be visible that there is a button. Code snippet would be appreciated.
<Button
android:id="#+id/new_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent" //this line makes the button completely invisible.
android:text="#string/label" />
If you just want white borders, and the text/icons in the button, but the button background transparent create the following drawable (I named it button_border.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke
android:color="#android:color/white"
android:width="1dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
And use it as a background for the button:
<Button
.
.
.
android:background="#drawable/button_border"
/>
I'd guess there is a more elegant way to do it with themes, but I'm not that far yet. In the button_border drawable you can add rounded corners and whatnot...
android:background="#A0FFFFFF"
I've hard coded the colour, but you should store it in colors.xml
Modify the first two characters, A0, to adjust how much transparency you want and the last 6 characters the color you want.
Apply selector for button, like this
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape>
<solid
android:color="#color/color_1_end" />
<stroke
android:width="1dp"
android:color="#android:color/transparent" /> // transparent patametr
<corners
android:radius="4dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape></item>
<item>
<shape>
<gradient android:angle="270"
android:endColor="#color/color_1_start"
android:startColor="#color/color_1_end" /> // maybe transparent
<stroke
android:width="1dp"
android:color="#color/color_1_start" /> //maybe transparent
<corners android:radius="4dp" />
<padding android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
Modify this for you =)
Apply border for button
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#FF000000" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<gradient
android:angle="315"
android:centerColor="#FFFFFFFF"
android:endColor="#FFB0B0B0"
android:startColor="#FFB0B0B0" />
</shape>
</item>
<Button
android:id="#+id/btnLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="7dip"
android:background="#drawable/button_border"
android:scaleType="centerInside"
/>
Just try to use below code in java
<br/>
button.getBackground().setAlpha(int);<br/>
correct range of input parameter is between 1 and 255 and the '1' is more transparent.
common pitfall is using:<br/>
button.setAlpha(float);<br/>
that make all button transparent.
I am trying for repeat for buttons. I am able to get repeat for regular background type. But i was not able to find right, left and center using the repeat xml file.
If you know some solution with the xml file please help me.
Thanks in advance
The repeat xml file i have used is
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<bitmap
android:src="#drawable/barslice"
android:tileMode="repeat"
android:dither="true"/>
</item>
The button i require is:
you may get round-corner gradient buttons without even using images.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
and simply set it as background to your button, textview or whatever you want
This will be nicely handled by 9 patch image.
you will have an image like this
and android will handle it automatically.
Just set it as background of any button.
Note: image for other states like pressed, focused and disabled should also be provided otherwise it will not change buttons state.
You can use 9-patch images. Check the following links.
http://developer.android.com/guide/topics/resources/drawable-resource.html#NinePatch
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
I have a weird problem going on with defining two separate custom XML button definitions. I created a test project solely to replicate the error, so I'll be adding the full code and screenshots of the problem. Basically, I'd like to use 9-patch images to define custom XML button configurations that can be reused.
I've defined two XML files:
z_btn_xml_glossy_blue_lightblue.xml:
<?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/z_btn_glossy_lightblue" >
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</item>
<item
android:state_pressed="true"
android:drawable="#drawable/z_btn_glossy_lightblue" >
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</item>
<item
android:drawable="#drawable/z_btn_glossy_blue" >
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</item>
</selector>
z_btn_xml_glossy_black_white.xml:
<?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/z_btn_glossy_white" >
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</item>
<item
android:state_pressed="true"
android:drawable="#drawable/z_btn_glossy_white" >
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</item>
<item
android:drawable="#drawable/z_btn_glossy_black" >
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</item>
</selector>
As you can see, both of these files are essentially the exact same, but using different drawables. My main.xml layout file is:
<?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:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingTop="0dip"
android:paddingBottom="3dip" >
<Button
android:id="#+id/BTNHostWaitingStartGame"
android:background="#drawable/z_btn_xml_glossy_blue_lightblue"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:layout_marginRight="2dip"
android:layout_width="wrap_content"
android:layout_height="45dip"
android:layout_weight="1.0"
android:text="Start Game" />
<Button
android:id="#+id/BTNHostWaitingCancelGame"
android:background="#drawable/z_btn_xml_glossy_black_white"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:layout_marginLeft="2dip"
android:layout_width="wrap_content"
android:layout_height="45dip"
android:layout_weight="1.0"
android:text="Cancel Game" />
</LinearLayout>
Pretty simplistic, it just creates two buttons. I won't post the test activity file because all it does is set the layout to R.layout.main.
Here is a screenshot of the Graphical Layout within Eclipse, which looks like what I want the buttons to look like:
However, on the emulator, it looks like the following:
As you can see, the second button is not being styled. Can anyone shed light on why this is? It is the same on devices as well. Is there some limitation here that I'm just not aware of or not seeing?
Thanks for the help!
It works on my machine.
I took your code and placed the selector xml's in res/drawable. Assuming drawable references in items are images (for example that z_btn_glossy_lightblue refers to res/drawable-hdpi/z_btn_glossy_lightblue.png), I exchanged these references to some images of my own. Works like a charm.
Try:
Make sure you have placed your xml's
in the right folder, and make sure
there are no copies of these files
mistakenly placed in another folder.
Make sure your the drawables you
refer to in the items do not have any
namesakes, for example res/drawable/z_btn_glossy_lightblue.xml
Test referring to other images that you know work in
other buttons.