I have the following xml in drawable folder (circle_status.xml) to create a ring:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="15dp"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#ababf2" />
</shape>
And insert the drawable like a background of a relativeLayout, as next:
<RelativeLayout
android:id="#+id/RelativeLayout_Status"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/circle_status" >
</RelativeLayout>
The problem, is in the relativeLayout appear a circle not a ring.
Note that a ring is an oval without a fill. Just with a stroke. And the view holding it, should be a perfect square.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="#color/blue" />
</shape>
And the view holding it
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/ring" />
I answer myself.
It seems the problem is in the Graphical Layout Editor of Eclipse, the code works fine in a real device.
This hack shows a ring on both device and Android Studio:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring" android:innerRadius="23dp" android:thickness="0dp">
<stroke android:width="2dp" android:color="#ababf2" />
</shape>
You must use <stroke> tag instead of <solid> tag for ring in a <shape> tag.
Using <solid> tag in a <shape> tag results a circle not a ring.
<solid> tag can be used for ring background color and <stroke> for ring body color.
Related
I am trying to add a linear layout with rounded corners and blurred background in my app. So far ive managed to give the layout rounded corners but i cant figure out how to give it a blurred background.Ive tried setting an alpha attribute in the xml file but it dosent work.
Heres what i want to achieve:
The Drawable resource file:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<stroke android:width="0.5dp" android:color="#B1BCBE" />
<corners android:radius="160dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
The Xml code of the layout:
<LinearLayout
android:id="#+id/team_lay"
android:layout_width="match_parent"
android:layout_height="95dp"
android:layout_marginTop="40dp"
android:background="#drawable/layout_bg"
android:orientation="horizontal">
</LinearLayout>
What i have achieved so far:
How can i achieve the desired results?
TIA..!!!
You can achieve it by create a blur background as a xml file and then set background of your container view to it.
Try my example:
blur_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<solid android:color="#4CAF50" />
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<solid android:color="#AA000000" />
</shape>
</item>
</layer-list>
And your container layout:
<LinearLayout
android:id="#+id/team_lay"
android:layout_width="match_parent"
android:layout_height="95dp"
android:layout_marginTop="40dp"
android:background="#drawable/blur_background"
android:orientation="horizontal">
</LinearLayout>
Hope it help. ^^
So i fount the solution myself. I changed the transparency of the solid color in the drawable resouce file(as mentioned here https://stackoverflow.com/a/41865518/8175719 ) and it worked.
What is the purpose of android shape xml tag useLevel attribute ? This is in respect to a layer-list but should not matter.
From the docs i found the meanging of the useLevel tag:
Indicates whether the drawable's level affects the way the gradient is drawn.
So if i have the following xml snippet:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="15dp"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#ababf2" />
<size
android:height="50dp"
android:width="50dp" />
</shape>
then with the useLevel=true, the ring is disabled. It must be false for the ring to appear. But what is the purpose of this attribute ? The docs are not clear.
It is for ProgressBars. For example this gist uses a ring shape as a progress drawable.
res/drawable/github_232_circular.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="3.8sp"
android:useLevel="true">
<solid android:color="#ff0000" />
</shape>
In your layout:
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="top|end"
android:max="100"
android:progress="0"
android:progressDrawable="#drawable/github_232_circular"
/>
Basically, useLevel makes it so the drawable can be drawn partially. For example there is a method ImageView.setImageLevel() that lets you set a "level," e.g. 25% progress, so the ring drawable would be drawn as a quarter-circle. And ProgressBar.setProgress() does the same thing, updating the "level" of the drawable you've set on the ProgressBar.
I'm working on making Framelayout circular. When I google I got some suggestion of making xml file of it. I did it and in background to FrameLayout as my xml file. But it has no effect. My xml file for ring shape is
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="15dp"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#ababf2" />
</shape>
I tried all ring and oval shape. None worked. Please help me on this.
New drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#6a000000" />
<size android:height="25dp"
android:width="25dp"/>
</shape>
In your frame layout:
<FrameLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/your_new_drawable" />
Have you actually set the background attribute in your layout, just making the shape is not enough, you have to apply it to the FrameLayout as well using,
android:background=""
I need to design button for android app to be rectangle, and to be half one color, half other. In XML of course.
I have tried this:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:left="7dp"
android:top="15dp"
android:right="7dp"
android:bottom="15dp" />
<gradient
android:startColor="#a241cb"
android:endColor="#a241cb"
android:type="linear"
android:angle="90"/>
<stroke>
android:width="1dip"
android:color="#a241cb" />
<corners android:radius="0dp" />
</shape>
Any help is appreciated
Using a 9 patch like this (save it in your drawable folder as bw_bg.9.png):
You can get a result like this:
Example layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f00f"
>
<Button
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:background="#drawable/bw_bg"
/>
</RelativeLayout>
Don't mind the size (it's running on a Froyo 2.8 inch screen).
Also don't mind the notification (it's from another running app).
Try this:
frist create background.xml in drwable folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#4A225E"
android:endColor="#4C4064"
android:centerColor="#B4AFC5"/>
</shape>
and then set button backgrond its work for me
you can achieve this by using gradients as background. use this
create a new XML file under res/drawable folder and name it as button_bg.xml.
button_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#D5DDE0"
android:centerColor="#e7e7e8"
android:endColor="#CFCFCF"
android:angle="270" />
</shape>
now use it for your Button like this:
android:background="#drawable/button_bg"
Hope it helps. :)
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#EAEAEA"/>
<corners android:bottomLeftRadius="5dip"
android:topRightRadius="5dip"
android:topLeftRadius="5dip"
android:bottomRightRadius="5dip"
/>
</shape>
How can i set my gradient image as background for my button. I see a property gradient, but cannot see any attributes holding background in it.
Note: I am Very new Android development.
I am not sure what the XML you showed us has to do with gradients. You can define a gradient in an XML file in your drawable folder:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FFFFFFFF"
android:endColor="#FFD9D9D9"
android:angle="270"
/>
<corners android:bottomLeftRadius="5dip"
android:topRightRadius="5dip"
android:topLeftRadius="5dip"
android:bottomRightRadius="5dip"
/>
</shape>
(for example, save this as my_gradient.xml)
Then in your layout xml file you can have:
<Button android:id="#+id/ButtonStart"
android:layout_width="100dp" android:layout_height="wrap_content"
android:background="#drawable/my_gradient"
android:textColor="#color/white" android:textSize="14sp"
android:textStyle="bold" android:text="#string/game_start"/>
You should either define the gradient in XML or use an image (which will include the rounded corners). You can't easily mix both an XML shape with an image (at least, as you are a beginner, I would recommend to go with simple stuff first).
For instance:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#474946"
android:endColor="#181818"
android:angle="270"/>
<corners android:radius="5dp" />
</shape>
Then you can define your button's background using the android:background="#drawable/bg_custom_button"
You should learn about nine-patches, they allow you to define strechable images for your backgrounds and will save you when the design is not feasible with XML.
Your shape is in the right direction, but instead of a solid you can use a gradient
<?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:endColor="#color/gradient_bottom"
android:startColor="#color/gradient_top" />
<corners android:bottomLeftRadius="5dip"
android:topRightRadius="5dip"
android:topLeftRadius="5dip"
android:bottomRightRadius="5dip"
/>
</shape>
Assuming the above shape is saved as gradient_background.xml and you saved it in the drawable folder (where it should be). You can now use this drawable as a background for your button
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/gradient_background"
android:text="Button" />