This question already has answers here:
How to make the corners of a button round?
(19 answers)
Closed 9 years ago.
Basically, from what I have noticed is that when you add a background color to a button, the rounded corners element disappears, so basically there are no rounded corners. But when I don't have a background color, the corners of the button are round.
I don't understand whats happening.
Please Help
The border is part of the default background drawable so you have to replace it by one that contains borders also if this is what you want.
Take the default background resource and edit it to have some color.
Alternatively you can use
button = (Button) findViewById(R.id.button);
button.getBackground().setColorFilter(color, Mode.SRC_ATOP);
which perhaps gives something closer to what you expect.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="false">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp" android:shape="rectangle">
<solid android:color="#FFb888"/>
<corners android:bottomLeftRadius="15dp" android:bottomRightRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp"/>
</shape>
</item>
<item android:state_enabled="true" android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp" android:shape="rectangle">
<solid android:color="#FFD488"/>
<corners android:bottomLeftRadius="15dp" android:bottomRightRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp"/>
</shape>
</item>
<item android:state_enabled="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp" android:shape="rectangle">
<solid android:color="#FF8C00"/>
<corners android:bottomLeftRadius="15dp" android:bottomRightRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp"/>
</shape>
</item>
</selector>
<Button
android:id="#+id/btn_add_list"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:background="#drawable/rounded_orange_button"
android:text="#string/action_new_list"
android:textColor="#color/white"
android:gravity="center"
android:textSize="18sp"
android:layout_marginTop="20dp"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:onClick="doNewList"/>
You can save the above xml file that will be the background for your button in a file called rounded_orange_button.xml in the res/drawable folder. So it would be res/drawable/rounded_orange_button.xml. This will also give your button feedback to the user when they select it, follows the dsign guidelines from developer.android.com a little more closely but it is your preference. there are a million ways to skin a cat. Then reference what you created in the drawable folder inside your_layout.xml file by the second example. The color values are optional and can also be set from another resource file in the res/values/colors.xml if need be. Use the res/values/strings.xml for any strings you want displayed inside the button. Hope this helps. Also, the amount of the curve on the buttons can be adjusted by playing with the radius values in the
The background of the button is going to give you square corners. For a nice custom background, I would suggest making a background image and using as either the button's background or src. So your xml would look like:
android:src="#drawable/mybuttonimage"
android:bacgkround="#null"
or
android:background="#drawable/mybuttonimage"
I would test out both, as they can stretch your image differently.
Another option is to to create a shape in your res/drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#33DDFF" />
<corners android:radius="4dp" />
</shape>
Related
I have tried to search this a lot however I was not able to make the same buttons as in the picture for android.
I have been trying to use the following code but the button is not transparent and it doesn't have that nice rounding on the sides:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff" />
<corners android:radius="15dp" />
</shape>
Currently it looks like this
I want the EditTexts and the buttons to be transparent with a white border
It would be a great great help if someone could assist me on this.
Defining shape is proper approach. If you want it to be transparent with white border you need to avoid using solid tag and use stroke (that is the border).
So for example you will have this shape (let's call it bg_button.xml under drawable folder):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#android:color/white" android:width="1dp" />
<corners android:radius="15dp" />
</shape>
Apply then this to your views as background. This is an example:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Facebook"
android:background="#drawable/bg_button"/>
Please try this not just on Android Studio editor but also on your emulator / device. Rendering of rounded corners on Android Studio editor can create problems.
Say you have a xml drawable called rounded_button
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#6E6E6E"/>
<corners
android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
</shape>
You then set the background of the button to the #drawable resource you created.
So I have an Android application in which sliders are used to set the value for multiple parameters. I am using a "Google Cards" type of layout for each slider box. Each card is its own relative layout contained within a LinearLayout which is placed within a ScrollView. I would like to change the color of the card based on the value the user sets in the card, however, the problem I have is that the color for the background is defined in the XML for the card design.
How can I change the color in the XML for the card design based on the value the user puts in on the slider? Also, is there a way to have a gradient effect when changing colors. For example, 0 could be a strong red, while 10 is a strong green, 5 would be a yellow and then 2.5 would be a mix between red and yellow and 7.5 would be a mix between yellow and green.
XML for layout background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#android:color/white"/>
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp"/>
</shape>
</item>
</layer-list>
Relative Layout XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_card"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:id="#+id/infoLayout">
</RelativeLayout>
What a Card looks like:
How to create this type of button in android. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.
I want to create This
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/green_circle"
android:textSize="20sp"
android:textColor="#android:color/white"
android:clickable="true"
/>
Here is green_circle.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
When i use this ,Button looks
How can i get my desire button. Any Help Appreciated
You defined 1sp (you should use "dp" btw.) circle and you got it.
I think that the easiest way to achieve what you want is using layer list xml element - just put your current drawing as the first layer and put second layer for the centered dot (just solid oval with some margins)
Here you have documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
Simple usage (it's not your's case but I think that it show you what you should to do):
<layer-list >
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/green_light"/>
</shape>
</item>
</layer-list>
Key is android:bottom="2dp" that causes that the foreground layer is smaller than the background one.
One way to achieve your desired effect is using a Layer List Drawable. To get a Drawable similar to the image you've posted, try the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
</item>
<item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
<shape android:shape="oval">
<solid android:color="#54d66a" />
</shape>
</item>
</layer-list>
1.use two different images of radio on and off actually what you want and make a xml in drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="#drawable/check_off" />
<item android:state_checked="true" android:drawable="#drawable/checkbox_on" />
<item android:drawable="#drawable/checkbox_off" />
</selector>
2.and set this drawable as a background on your radio button.
Use an ImageButton:
<ImageButton android:src="#drawable/green_circle" />
The documentation also states how you can have different images depending on the state of the button.
put an image of green circle in drawable folder. then in xml just set background image for your button
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/yourimage"
/>
this will work :)
I need to implement such button for my Android app. It would be great to do this without using full image as button.
I've done almost the same button using <shape> with <gradient>. The only thing I need is to add bottom blue button shadow and include image.
Is it possible?
Thanks in advance.
You can do this by combining Shape Drawables inside a Layered Drawable. To do so, you'll have 3 xml files as below:
button.xml (the one you already have i guess)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="16dp" />
<gradient
android:angle="270"
android:centerColor="#FFFFFF"
android:endColor="#CAEBF8"
android:startColor="#FFFFFF"
android:type="linear" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
<stroke
android:width="2dp"
android:color="#FFFFFF" />
</shape>
button_bg.xml (to add the blue border below the button)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="16dp" />
<solid android:color="#6FC8F1" />
</shape>
layered_button.xml (to combine the previous xml, and the drawable to use as background on your button)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_bg"/>
<item
android:bottom="2dp"
android:drawable="#drawable/button"/>
</layer-list>
You'll find more information on the Layer List in the Drawables Documentation
Make your button's android:background attribute to point your desired image. Create your image with the text and the little person icon. It's not possible to put a text and an image at the same time inside a button.
For the blue shadow, you can either include it in your image or achieve the same result with the gradient attribute as you already said in your question.
For the image, you should use
android:drawableRight
As for the shadow I'm not sure how this is achieved.
I have a custom drawable in my android project that should be the background of a button. But each button should also support an icon AND a text.
What I tried so far is the following:
I have a drawable called "btn_background.xml"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#ff0000"
android:endColor="#ee1111"
android:type="linear"
android:angle="90"/>
<stroke android:color="#ff0000"
android:width="1dip"/>
<size android:width="80dip"
android:height="40dip" />
</shape>
</item>
<item android:drawable="#drawable/btn_search"/>
</layer-list>
</item>
And in my layout file i use that like this:
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="#drawable/btn_background"
android:textColor="#ffffff"/>
This is getting me somewhere close... but there are two problems:
* The image is stretched across the whole button
* I can't just change the image in the layout file... so i would have to make a seperate btn_whatever.xml file for each icon?!?
The other solution that I tried was to use an ImageButton instead of an Button and set the background to my btn_background.xml .... this would make me able to select the image in the layout file... but then i can't give it a text....
I would be happy to hear about your solutions for my problem :)
Thanks a lot!
Try to use android:drawableLeft (or similar Top, Right, Bottom) attribute.