Im wondering if its possible to combine both having an image on a button and using a drawable source and having text above that?
I'm currently using this as my button style in drawable/red_btn.xml
<?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="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<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="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
And then my button
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:textColor="#fff"
android:textStyle="bold" />
Which looks like this
Now I would like to add another .png image (arrow.png) above this button to the right like this
Is this possible, and if, how can I do it?
Thanks in advance.
__________________________________________________________________________________________________________________________________________
Edit
After following Luksprog's advice below I now have "red_btn_normal.xml" in drawable
<?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="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<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="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
and red_btn_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right"
android:src="#drawable/arrow" />
</item>
</layer-list>
And then i create my button like this "red_btn.xml"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/red_btn_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/red_btn_normal"></item>
</selector>
And finally my button
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:textColor="#fff"
android:textStyle="bold" />
Problem is that it only shows the white arrows when I click the button and it dosn't show it when its not pressed. What is wrong with the code? =)
Im wondering if its possible to combine both having an image on a
button and using a drawable source and having text above that?
Yes, it's possible. Your selector will become:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/red_btn_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/red_btn_normal"></item>
</selector>
where the two drawables are two layer-list drawables with the first item being the items from your initial selector and the second being the .png image wrapped as a bitmap drawbale. For example for red_btn_pressed.xml you'll have:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right"
android:src="#drawable/arrow" />
</item>
</layer-list>
and the red_btn_normal.xml will be:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#992f2f"
android:startColor="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/allowed" android:gravity="right"/>
</item>
</layer-list>
Keep in mind that the arrow image will be on the right of the text only if the size of the Button allows it(as its part of the Button's background). If you're trying to impose some sort of positioning relation between the text of the Button and that arrow image then you'll need to extend the Button class and do it yourself.
I went with the simple
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:drawableRight="#drawable/arrow"
android:textColor="#fff"
android:textStyle="bold" />
Related
I have defined my button in the xml like this.
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:text="#string/button_node"
android:textColor="#android:color/white"
android:backgroundTint="#color/colorAccent" />
I need to grey out this button in the code. I have used the below line of code to change it.
button.setBackgroundResource(R.drawable.button_grey);
button.setEnabled(false);
button.setClickable(false)
My button_grey.xml file is
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#color/colorGray"
android:startColor="#color/colorGray" />
<corners android:radius="4dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="1.5dp"
android:right="0.5dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#color/cardview_shadow_start_color" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
After changing the buton looks like this
But Actually I need the button to be look like below by changing the color to grey.
Please note:- It should work from API level 18 onwards.
Try this it will work
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#D6D6D6" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270"
android:endColor="#24b8eb" android:startColor="#24b8eb" />
<stroke android:width="1dp" android:color="#BABABA" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp"
android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
http://mobilenext.net/4-material-design-tweaks-pre-lollipop-android-devices/
http://www.techrepublic.com/article/android-lollipop-material-design-trick-offers-a-more-polished-ux/
it gives me error on state_pressed , android:color, android:width is not declared.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<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>
</selector>
I'm not sure in which context that you are using this selector, but apply to a button it works fine:
layout/Main.axml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/myButton"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#drawable/bg_selector"
android:text="StackoverFlow" />
</LinearLayout>
drawable/bg_selector (your axml):
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<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>
Nothing worked for me. But I started a new project and started to copy and paste the same code from the old project and it worked.
Try it may be this is the only possible solution.
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/logout" />
Above is my button xml it have a small corner radius by default now i need to change the radius a little bit how i can change only corner radius?
Use custom style: create the following file into your drawable folder.
button_style.xml
<?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="#9CD0E3" />
<stroke
android:width="7dp"
android:color="#55BDE4" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#55BDE4"
android:endColor="#55BDE4"
android:angle="270" />
<stroke
android:width="7dp"
android:color="#9DD0E2" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
example 2 (button_style.xml): only corner radius.
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<corners
android:radius="15dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<corners
android:radius="15dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
And then use this
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/searchBox"
android:background="#drawable/button_style"
android:text="#string/logout" />
Look at the android:radius="3dp" in button_style.xml.... increase the dp as much as you want..
this is an easy question,
in my xml file i have :
<Button
android:id="#+id/button_8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/Bf"
android:background="#drawable/button_purple"
android:layout_weight="1"
android:textColor="#ffffff"
android:onClick="action"
/>
And in my activity i have that :
public void action (View v)
{
s = "m";
changeCouleur("blue");
v.setPressed(true);
}
When i pressed the button it's working but the button don't stay pressed.
I don't use an image this is what i use for the color :
<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 android:state_focused="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>
Thanks in advance if you noticed something wrong.
Please anyone have any idea ?
From what I understand is that you are trying to use a button to turn a state off/on, also the button's state will clearly indicate the feature's state.
If I am correct then use custom check box. You will have to anyways define selector for different states of checkbox (as mentioned by user1071979).
you have to use two images to do this.
button_normal
button_pressed
then create a xml resource in drawable folder
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="#drawable/button_normal" />
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" />
</selector>
then, set this file as a background for the imageview. here we are using imageview as button. dont forget to include those two buttons in the drawable folder.
I want to remove the font padding from an Android button?
I've tried set includeFontPadding to false, but it has no effect.
How can i change the font padding of the button?
You need to define a seperate drawable resource for the button something like this.
For example this is button_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#F5B800"
android:endColor="#F5B800"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#ffcc00" />
<corners
android:radius="1dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#F5B800"
android:startColor="#F5B800"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#ffcc00" />
<corners
android:radius="1dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#ff9900"
android:startColor="#ffcc00"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#ffcc00" />
<corners
android:radius="1dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Here you can arrange the padding as you want for the button.
And when you are declaring the button use this as the background.
Something like.
<Button android:id="#+id/sample_button" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#FFFFFF"
android:background="#layout/button_layout"
android:text="Sample Button" />
You can try using android:includeFontPadding. set it to false. also set the padding to 0.