How do I create an XML ressource shape that looks like a perfect circle no matter which object it is applied to? When I try to add it as a background to a button, it becomes a oval in stead of a circle.
try this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadiusRatio="5"
android:visible="true" android:thickness="4dp"
>
<stroke android:color="#654321"
android:width="2dp"/>
<solid android:color="#123456"/>
</shape>
Related
I am trying to make something like this:
using the following code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#00c2a8"
android:width="2dp"/>
<corners
android:radius="#dimen/_5sdp"/>
</shape>
But it seems we can't change color of corners so please tell me a way to do this.
I'm trying to create a hollow circle in xml, using the ring shape in xml. However I end up getting a line that seems to showcase the radius of the circle, starting from the middle of the ring and going to the right.
xml code for the shape I'm trying to achieve:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false">
<solid android:color="#android:color/transparent"/>
<stroke
android:width="5dp"
android:color="#FFFFFF"/>
<size
android:width="75dp"
android:height="75dp"/>
</shape>
Again, the problem is that I am getting a clear and distinct line starting in the middle of the shape and going right to the edge of the hollow circle I have, the transparency works but I have no idea what is causing the line in the middle. Any help is appreciated.
You can use a ring shape, but you should use solid instead of stroke. You can experiment with android:innerRadius and android:thicknessRatio until the shape looks the way you want.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="10dp"
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<solid android:color="#android:color/holo_red_dark"/>
<size
android:width="75dp"
android:height="75dp"/>
</shape>
stroke looks weird on rings because the shape is created as an area of which the edge is described by an uninterrupted path. The solid color is used to fill the area, the stroke color is applied to the edge.
Just Replace the shape="ring" by shape="oval"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="oval"
android:thicknessRatio="2"
android:useLevel="false">
<solid android:color="#android:color/transparent"/>
<stroke
android:width="5dp"
android:color="#FFFFFF"/>
<size
android:width="75dp"
android:height="75dp"/>
</shape>
You can use android:shape="oval" instead of android:shape="ring".
Can any please help me to create a drawable which create a semi circle around imageView?
I tried using clip drawable
<?xml version="1.0" encoding="utf-8"?>
<clip
xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="vertical"
android:gravity="bottom"
android:drawable="#color/cardview_dark_background"
>
<shape android:shape="oval" android:thickness="10dp">
<solid android:color="#444"/>
</shape>
</clip>
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.
I have developed a listView for my app. My UI is simple flat UI, here is a snapshot:
when I searched internet for better interfaces I found this for example:
As you see in this sample, background colors have shadows at the bottom. Is there a way that I can color my Layout background like this? Thanks in advanced.
In order to achieve a shadow effect I'd guess that it's better to use a layer-list with two items, one with the solid color and the second item would be a gradient coming from transparent to a black color with an alpha value.
Here's how this would look like (needs to be placed in res/drawable/):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ff33b5e5" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#90000000"
android:startColor="#android:color/transparent" />
</shape>
</item>
</layer-list>
Doing it this way, you won't need to "search" for a darker color of your solid color all the time.
Output would look like this:
Create an XML file and named it as "gradient_effect" in Res -> Drawable folder and put below code in it
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#a0a0a0"
android:endColor="#f5f5f5"
android:angle="0"
/>
Now use this file as a background in any of your layout as you can get is like
android:Background= "#Drawable/gradient_effect"
Set above line as an attribute for any of you view or layout in xml file
This can help too!
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#A2000000"
android:startColor="#android:color/transparent" />
</shape>
</item>