Creating a custom round button in android - android

Can anyone help me out here. I am trying to create a small round button that would represent a lottery ball using a very simple self created XML class round_button.xml. However I keep getting the error over and over even when Ive put the code through a w3schools validator that " Error parsing XML: junk after document element." I cannot see what the issue is here and maybe I am missing something very clear, I dont know. Could anyone please help me out. Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" />
<solid
android:color="#FF0000"
</shape>

You are just missing a bit of concept of closing the tags. You have extra / over android:shape="oval" />. You are already closing the tag at the end with </shape> so no need to use />.
Secondly you haven't ended <solid tag with />. So try something like:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid
android:color="#FF0000" />
</shape>

You messed up tags. You have closed shape before end and not closed solid tag.
Try this one.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#FF0000" />
</shape>

Related

how to resolve this xml shape tag error in android studio

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/list_row_start_color"
android:endColor="#color/list_row_end_color"
android:angle="270" />
</shape>
Here is showing the error and says Element shape must be declared on shape tag please help and also showing same on select tag so what would be the solution for this

How to make android round buttons

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.

android holo theme background

I would like to know, if I can get the background that is displayed when using android's holo theme, as a drawable? (you know, the dark black and blue background that is displayed for 3.0+) I need to use it as a drawable, so if someone knows if this can be done, please let me know..
Sorry, but I forgot to mention that this is displayed on a tablet device, not sure about phones.
Location of the files
Holo-Dark:
/path_to_sdk/platforms/android-version/data/res/drawable/background_holo_dark.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ff000000"
android:endColor="#ff272d33"
android:angle="270" />
</shape>
Holo-Light:
/path_to_sdk/platforms/android-version/data/res/drawable/background_holo_light.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ffe8e8e8"
android:endColor="#ffffffff"
android:angle="270" />
</shape>
Make your own
Put the following code in res/drawable/background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
>
<gradient
android:angle="270"
android:startColor="#ff020202"
android:endColor="#ff272D33"
android:type="linear" />
</shape>
Add the background reference to your parent viewgroup
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
Play around with the values until you get the desired effect.
If it is possible, your best bet is to look in the android .jar for 3.0 (which can be downloaded using ADT in Eclipse)
The image may be found in /drawable/drawable-hdpi or possibly somewhere within /drawable
If not, it likely is only possible to find in the source.
Here, perhaps this would help: http://developer.android.com/guide/topics/ui/themes.html

Android button styling

I am quite new to Android dev, but not Java dev, so doing the logic behind a button is no issue, but styling it is not as easy as css. I have read a couple tutorials on shapes / styles so I kind of know how to do the custom borders and round corners, but I was hoping to see some really good quality examples, like the buttons on the Twitter app http://i.stack.imgur.com/Gip2s.png or the 'debossed' ones on the facebook app.
What I suppose I am really interested in, are using shadows to create effects. Are these done with images, or can you style this in the app?
thanks
for rounded corners create a shape drawable eg. ronded_corner.xml and the angle must be a multiple of 45 degree
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#SomeGradientBeginColor" android:endColor="#SomeGradientEndColor"
android:angle="225"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>
then set this Background by android:background:#drawable/ronded_corner
Whenever you create the button in the layout just set the background property of the button as XML, Put this XML file in the drawable folder.
sample XML code i will post here. you can modify and learn in that only.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:startColor="#B80000"
android:endColor="#900405"
android:type="linear"
/>
<stroke android:width="1dp" android:color="#900405"/>
</shape>
For rounded corner button, define inset as shown below and adjust radius.
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="4dp"
android:insetTop="6dp"
android:insetRight="4dp"
android:insetBottom="6dp">
<ripple android:color="?attr/colorControlHighlight">
<item>
<shape android:shape="rectangle"
android:tint="#0091ea">
<corners android:radius="10dp" />
<solid android:color="#1a237e" />
<padding android:bottom="6dp" />
</shape>
</item>
</ripple>
</inset>
For more information http://www.zoftino.com/android-button

Android create iphone-like Gradient

I need to create black iphone like gradient in my android application. Please view black gradient at the top in the image below. How to do it? Thanks
Something like this, perhaps?
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#FF000000"
android:endColor="#FF8E8E8E"
android:angle="270"/>
</shape>
I've posted a blog about an Iphone look an Android:
http://www.dibbus.com/2011/06/android-gradient-toolbar/
You can find some examples of gradients and what is possible using xml and/or 9-pacth images.
You can create gradients in XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:type="radial" android:gradientRadius="400"
android:startColor="#88cce7" android:endColor="#075e81"/>
</shape>
This example is a round gradient but by changing type param you can create others.
Include this code in a xml file in your drawable folder and you can refer to that file when you set a background. ie. android:background="your drawable file"
I know this is an old question, but I was messing around to get this same effect for a customer who wants a copy of his iPad app on Android, this is what I came up with:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:centerColor="#FF333333"
android:centerY="2%"
android:endColor="#FF000000"
android:startColor="#FF8E8E8E" />
<corners android:radius="5dp" />
</shape>

Categories

Resources