Making circular FrameLayout - android

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=""

Related

How to give Round corners and blurred background to a linear layout?

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.

Vector drawable not scaling

I'm trying to set my linearlayout background to a vector drawable, however it is not scaling to fill the entire layout, below is my xml:
<LinearLayout
android:id="#+id/ideaBody"
android:layout_width="220dp"
android:layout_height="229dp"
android:background="#drawable/ic_greenbackground"
android:orientation="horizontal"
android:scaleType="fitXY">
and the following is my vector xml;:
<vector android:height="500dp" android:viewportHeight="297.0"
android:viewportWidth="210.0" android:width="500dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillAlpha="0.42" android:fillColor="#008000"
android:pathData="M1.14,40.02h58.21v60.59h-58.21z"
android:strokeAlpha="0.76" android:strokeWidth="0.26458332"/>
thank you
Why don't you try this if you want to set green background to your layout.
Change your XML code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#73008000" />
<stroke android:width="0.76dp" android:color="#BF008000" />
</shape>
</item>
</selector>

How to make a circular Button?

I'm a new to Android Development. While working on Android Studio 2.2, I tried to create a circular Button. As read from here, I tried to create a new Drawable Resource File. But I was unable to change Root Element to Shape. There was no such options. Could anyone help?
There are two solutions.
Floating Action Button: https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html
else:
You create a oval shape in xml.
and put that shape as background on button and make sure button have equal layout_height and layout_width.
Example:
oval_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="oval">
<solid android:color="#color/colorAccent"/>
</shape>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/oval_shape"/>
</FrameLayout>
No option is needed here. Just use <shape>.
Check this example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorPrimary" />
<corners android:radius="#dimen/btn_radius" />
</shape>
Use xml drawable like this:
Save the following contents as round_button.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#fa09ad"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#c20586"/>
</shape>
</item>
And set it as background of Button in xml like this:
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />
You are probably looking for the FloatingActionButton
It is available in the support-library.
The documation of the class.

shape as drawable is invisible

Given a shape that is defined in drawable/red_ring.xml as
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="0dp"
android:thickness="25dp"
android:useLevel="false">
<solid
android:color="#ff0000"/>
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
and a simple layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/MyButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Hello"
android:drawableLeft="#drawable/red_ring" />
</LinearLayout>
The problem with above: the shape will not show up on the button.
red_ring as android:background works,
any framework drawable bitmap as android:drawableLeft also works.
But custom shape as android:drawableLeft appears to be ignored
API level is 15
I feel that I am missing something really obvious, but what?
red_ring has no bounds set, thats why its invisible

Ring shape in android

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.

Categories

Resources