I have the following shapes :
1)quizgeneralanswershape.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners android:radius="100dp"/>
<gradient
android:angle="45"
android:centerX="35%"
android:startColor="#E8E8E8"
android:centerColor="#7995A8"
android:endColor="#000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
2)quizrightanswer.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners android:radius="100dp"/>
<gradient
android:angle="45"
android:centerX="35%"
android:startColor="#00FF80"
android:centerColor="#66FFB2"
android:endColor="#000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
there are also 2 more xml files in layout folder that I have created in order to describe my wanted layout using the shape I want. Here is one: quizrightanswer.xml:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/quizButton"
android:text="Button"
android:textColor="#FFFFFF"
android:textSize="13sp"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="#drawable/quizrightanswershape"
android:clickable="true"
/>
I have no problem inflating one specific shape and use it. However, i wanted to know if there is any way to give a new shape to a already existed object. To be more clear, I want on the OnClick event to change the shape of my button. Here is some code of my activity that works fine:
quizTableLayout = (TableLayout) findViewById(R.id.quizTableLayout);
view = LayoutInflater.from(this).inflate(R.layout.quizquestion, null);//works fine
I want in the view object to give a quizrightanswershape shape on click. How is this possible? A solution I thinked of is deleting old shape and inflate new one with using specific parameters of my old view (like text), but I think that's not right and not fast at all.
It's pretty easy. You're setting the general shape as the background to the button right? Yeah so, use findViewById to find your button in your layout and then attach an OnClickListener, in which you will use setBackground or setBackgroundDrawable to the button to change the background shape.
why you are not change background of your button simply?
in easy way you can change it like this:
mButton.setBackground(getResources().getDrawable(R.drawable.yourShape));
if you want button shape change if user click on it and if not press again have old shape so
you can use shape like this:
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" >
<item android:state_pressed="true" android:state_focused="true">
<shape>
<gradient
android:startColor="#f00"
android:endColor="#f00"
android:angle="270"/>
<stroke
android:width="2dp"
android:color="#eee"/>
<corners
android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ccc"
android:endColor="#ccc"
android:angle="270"/>
<stroke
android:width="2dp"
android:color="#ccc"/>
<corners
android:radius="3dp" />
</shape>
</item>
</selector>
Related
I want to have a glow effect on button (in android studio) as shown in image:
I didn't want an image for the background, so to get this effect, I have tried to do in xml file. I have added a stroke for the button and provide a shadow to the button (with same color as stroke).
I have used a linear gradient with 90 degree angle with start and end color same as the stroke, center color same as background color. Please see the code:
<?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="0dp">
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="45"
android:startColor="#8008c3fa"
android:endColor="#8008c3fa"
android:type="linear"
/>
</shape>
</item>
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="90"
android:centerX="50%"
android:centerColor="#color/trans_parent"
android:startColor="#8008c3fa"
android:endColor="#8008c3fa"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="2.5dp"
android:color="#08c3fa"
/>
</shape>
</item>
</layer-list>
</item>
</selector>
For the above xml, I got the below result:
Though the design and the result images look totally different, I think if we increase the center color height and keep a fadeout effect to the shadow, it can work. But I'm not able to do the same.
you can increase the center color height and keep a fadeout effect to the shadow by adding a nother item to the layer-list.
The first item makes the gradient for the upper bound, the rest is transparent and the second item makes the gradient for the lower bound the same way.
I added two more items to fill the left and the right semicircle.
I changed a few colours to enhance the effect but didnt trie too long, i think one could do alot more with more items and better colours :)
Cheers, Josh
the final result:
<?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="0dp">
<shape>
<corners android:radius="50dp" />
<gradient
android:centerX="70%"
android:startColor="#804CD6FF"
android:centerColor="#8004485C"
android:endColor="#804CD6FF"
android:type="linear"
/>
</shape>
</item>
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="90"
android:centerX="30%"
android:centerColor="#color/transparent"
android:startColor="#8008c3fa"
android:endColor="#color/transparent"
android:type="linear"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="2.5dp"
android:color="#08c3fa"
/>
</shape>
</item>
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="90"
android:centerX="70%"
android:centerColor="#color/transparent"
android:startColor="#color/transparent"
android:endColor="#8008c3fa"
android:type="linear"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
</item>
<!-- the glow for the half circles, possible with radius as well. I liked
android:type="sweep" better because radius tends to fade out.-->
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="360"
android:centerX="5%"
android:centerColor="#8008c3fa"
android:startColor="#color/transparent"
android:endColor="#color/transparent"
android:gradientRadius="360"
android:type="sweep"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
</item>
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="360"
android:centerX="95%"
android:centerColor="#color/transparent"
android:startColor="#8008c3fa"
android:endColor="#8008c3fa"
android:gradientRadius="360"
android:type="sweep"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
</item>
</layer-list>
</item>
</selector>
I know it has been a while but if anyone is still interested in this effect, here is a custom view library I made which was inspired by this question:
Glowing and Neon Button
It also has animated disable and enable methods as seen in the photo.
It's MIT Licensed, so do whatever you want with it. hope this helps someone.
If you want to have improved neon Buttons with a solid that has different gradients too. Take a look on this related post I answered. I used the suggested library from "#Mehran B" and combined it with a custom drawable and a transparent stroke to make it more modifiable. As you can see in the samples below the gradients from the solids and shadows are separated and thus more flexible:
Hello I am designing this page in android (style only)
.
First 3 buttons has been designed by taking the reference from this.
But DONATE NOW button which I have designed is become transparent like this
as well as click event (statepreseed = "true")is also transparent like
.
and here is my code of background for DONATE NOW button
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners
android:radius="0dp" />
<solid android:color="#33e7d283"></solid>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<stroke
android:width="4dp"
android:color="#00e9ca30"
/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<gradient
android:angle="225"
android:centerX="23%"
android:centerColor="#33f4c40e"
android:startColor="#ffdab605"
android:endColor="#ffdab605"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
</shape>
</item>
</selector>
If any one is having the solution.please help
You are using ARGB instead of RGB. Because of this you are creating image with transparent background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="0dp" />
<gradient
android:angle="225"
android:centerColor="#e7d283"
android:centerX="23%"
android:endColor="#ffdab605"
android:startColor="#ffdab605"
android:type="linear" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
Using e7d283 or ffe7d283 color-code instead of 33e7d283 might solve your problem for yellow image background.
Using 33 as alpha means you are giving only 20% opacity to your center color. That is the reason you can see background color in middle of your image.
Here you go..
Your button element should look like below.
<Button
android:id="#+id/angry_btn"
android:text="Button"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="#drawable/buttonshape"
android:shadowColor="#474747"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="3"
/>
ButtonShape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="65%"
android:centerColor="#F5FAF9"
android:startColor="#F39C12"
android:endColor="##F39C12"
android:type="linear"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
Output will look like below.
I am making a background shape for EditText - xml below:
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/WhiteSmoke"/>
<stroke android:width="1dp" android:color="#color/aadhaar_logo_brown" />
<padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" />
<corners android:topRightRadius="10dp" />
<gradient android:startColor="#color/White"
android:centerColor="#color/White"
android:endColor="#color/White"
android:angle="0"/>
</shape>
However I require an image on the right hand side of the EditText to indicate mandatory field. I tried adding the image programmatically but the image does not show up in the runtime
((EditText) findViewById(R.id.txt_enduser_name)).setCompoundDrawables(null, null, getResources().getDrawable(R.drawable.ic_mandatory_text_field), null);
Please help
You need to provide an "intrinsic size" to the shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
...
<size android:height="20dp" android:width="20dp"/>
</shape>
Then, you can just set it as the drawableRight:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableRight="#drawable/ic_mandatory_text_field"/>
I'm trying to use a background color for a listview. But i cannot find the RGB color codes that i need.
I'm using this xml code to put a background color .And it works correctly but it's not the color i want.
I'm trying to use a background like this for my listview
My xml code for listview background color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<solid android:color="#58857e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />
</shape>
</item>
</selector>
First thing the color which your using is gradient effect you can achieve it through coding as i am mentioning below
in your case
<gradient
android:angle="270"
android:startColor="#808080"
android:endColor="#363636"
android:type="linear"
/>
angle will be 270, type will be linear and color as i mentioned above
SAMPLE SNIPPEST HOW TO USE
code in your XML file for Button (this is sample snippest for your understanding)
<Button
android:id="#+id/button1"
android:text=""
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="#drawable/buttonshape"
/>
and save below code in file buttonshape.xml and put that file in drawable folder under res folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="7dp"
/>
<gradient
android:angle="270"
android:startColor="#808080"
android:endColor="#363636"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
for reference you can use this online tool it will help you lot
please click here for online tool
hope this will help you happy coding
In Color code, #RRGGBB, R is the code for red, G is the code for green while B is the code for blue.
To get grey color, the RR, GG, and BB values have to be of same value e.g. #454545.
Smaller values give you darker shade of grey while larger values give you lighter shade of grey. For example #222222 is darker than #AAAAAA.
The code that is similar to the image you post is #454545.
Hope that helps.
Using Android Shapes in xml I have defined a gradient which I use as the background for a button.
This all works nice, but there's no edge surrounding the button. I would like it to look similar to the normal Android button but I need more flexibility to control the color and look.
The shape is defined as follows:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#00FF00"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" color="#000000" />
</shape>
I would expect the border to be set in the xml. Why doesn't "stroke" fix it? Stroke doesn't seem to do anything.
I checked the Android Developer spec, but couldn't find the answer there:
http://developer.android.com/guide/topics/resources/drawable-resource.html
I have also looked through all the properties of the Android Button, but as expected there's no such parameter, probably since it's built into the normal Android button. Btw, I checked ImageButton properties too.
Can someone please help?
I know there's the alternative to make an image with proper edges and use an ImageButton, but there really should be a way to fix this programmatically.
Thanks!
Anna
I had this problem a while ago. While I don't quite remember why I made each decision, the way I solved it was to use a a shape layer-list. This lets you stack one shape on top of another. For example, the following XML creates a shape with a solid black outline 2px wide, with a 'grey to white to grey' gradient across the middle:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<solid android:color="#FF000000"/>
<corners android:radius="3dp"/>
</shape>
</item>
<item>
<shape>
<padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"/>
<gradient android:startColor="#FFB0B0B0"
android:centerColor="#FFFFFFFF"
android:endColor="#FFB0B0B0"
android:angle="315"/>
</shape>
</item>
</layer-list>
If you want to be able to change that color dynamically at runtime, then things get a lot messier. Again, the details of why I had to do things a certain way are hazy, but I ended up having to create a custom view class which contained a custom ShapeDrawable. I started off looking at the examples from the ApiDemos app which comes with the SDK - it's a very good resource.
EDIT: Another reason your stroke might not be appearing is that you forgot the android: before the color="...." bit.
I've had the same problem, what i observed is stroke is not applying to button as border at design time but at run time i see the border.
I jst used the following same code
<?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="#color/black" />
<stroke android:width="1px" android:color="#color/red" />
</shape>
as steve hanley said abvoe you miss the android: for the color attribute.
Hope this helps somebody....
Probably much to late, but you have to add an extra ff before the color.
<stroke android:width="5px" color="#ff000000" />
Greets
Use ImageButton
<ImageButton
android:layout_width="40dp"
android:layout_height="30dp"
android:src="#drawable/left_arrow"
android:background="#drawable/button_selector"
android:gravity="center"/>
Use drawable selector to ImageButton and define your properties
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#color/startColor"
android:endColor="#color/endColor"
android:angle="270" />
<stroke
android:width="0.5dp"
android:color="#color/borderColor" />
<corners
android:topLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>
<item android:state_focused="true" >
<shape>
<gradient
android:startColor="#color/startColor"
android:endColor="#color/endColor"
android:angle="270" />
<stroke
android:width="0.5dp"
android:color="#color/borderColor" />
<corners
android:topLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#color/startColor"
android:endColor="#color/endColor"
android:angle="270" />
<stroke
android:width="0.5dp"
android:color="#color/borderColor" />
<corners
android:topLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>
<item android:state_enabled="false" android:drawable="#drawable/button_disabled" />
<item android:state_focused="true" android:drawable="#drawable/button_highlighted"/>
<item android:state_pressed="true" android:drawable="#drawable/button_highlighted"/>
<item>
<shape>
<gradient android:startColor="#fdfdfd" android:endColor="#f0f0f0" android:angle="270" />
<stroke android:width="1dp" android:color="#56390a" />
<corners android:radius="3dp" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
</shape>
</item>
Adding stroke color #56390a will solve the problem.