Ring shape android as TextView background - android

I want to dynamically create TextViews inside a circle background. I used this but top and bottom edges of the ring shape gets cut off.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring">
<corners android:radius="10dip"/>
<stroke
android:width="1dp"
android:color="#color/blue_new"/>
<solid android:color="#android:color/transparent"/>
I use this as the background for my TextView
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_keyword"
/>
Ring shape background gets cutoff. What am I doing wrong? Any clue will be appreciated.
I want to achieve something like this but Radius should be text size

Try this:-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#color/red" android:width="2dip"/>
<solid android:color="#android:color/transparent"/>
</shape>

Related

Android: Elevation missing on button when setting a gradient drawable as background

I have a Button and I am setting as background a gradient drawable.
The buttons with the gradient drawable are missing the elevation whereas all other buttons have the elevation.
Why is the elevation missing on the buttons with the gradient drawable? And is there any easy way to fix this?
My code looks like this:
gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="radial"
android:gradientRadius="250dp"
android:startColor="#color/blue"
android:endColor="#color/red"/>
<corners android:radius="#dimen/round_corner_radius"/>
<stroke
android:width="5dp"
android:color="#android:color/transparent"/>
</shape>
</item>
<item android:top="7dp"
android:left="7dp"
android:right="7dp"
android:bottom="7dp">
<shape android:shape="rectangle" >
<solid android:color="#88ffffff"/>
<corners android:radius="#dimen/round_corner_radius"/>
</shape>
</item>
</layer-list>
activity.xml
...
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button"
android:background="#drawable/gradient"/>
...
I solved my problem. I had to remove the
<stroke
android:width="5dp"
android:color="#android:color/transparent"/>
The problem was probably the color that was set. Without the stroke the button behaves like a normal raised button.

How to create this particular shape with xml in Android?

I want create one shape such as below image, but I want create this with XML codes (in drawable) and I do not want create this with 9.patch images!
How can I create this shape with xml code?
Here is a work- around
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
Tweak the corner radius to get your upper part curved!
or overlap this oval shape to get the desired output
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!--circle filling color-->
<solid android:color="#ffffff" />
<stroke
<!--radious can define in here-->
android:width="1dp"
android:color="#ffffff" />
<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
But basically, this is not the correct way to do this! Use another way around, use 9 patch

How to create Rectangle Shape with inside round corners

I want to create Drawable like the White Shape shown in above Image.
I tries it using following code
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="40dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="3dp"
android:color="#android:color/white" />
<size
android:height="150dp"
android:width="150dp" /></shape>
But I'm getting Output like this..
I also tried layer-list with multiple Shapes but not able to get the desired output..
Also my ImageView's height and width are calculated in code..so I also don't want to pass size in drawable. Is it possible??
You can draw the shape with the following 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="#fff" ></solid>
<size
android:width="100dp"
android:height="100dp"/>
</shape>
</item>
<item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#000" ></solid>
<size
android:width="90dp"
android:height="90dp"/>
</shape>
</item>
</layer-list>
We draw two items upon each other. A white square on first layer and put another black square with 10dp radius and 5dp padding inside white square.
Also you can control width and height of the imageView which your drawable assigned, it scales accordingly.

ImageView with rouded corners, solid border and glow effect

I want to put rounded corners and border to an ImageView, with custom border color. Also, I would like to achieve a glowing effect with the color of the border. Attached sample image. Note that the source image has square borders.
I suppose this is achievable only by using Canvas? Any ideas and sample code?
this is what i have done for my ImageView to make same changes as you want.
made one image_shape.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
/>
<corners
android:radius="50dp" />
<padding
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp"/>
<solid android:color="#10151D"/>
</shape>
Now, put this xml as the background of your imageView then you will get effect as you want.
Right now i have set my own color. you can put your desire color and get effect as rounded glow border effect.
try using the following code in a new xml file named roundCorners in your drawable folder:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#DDDDDD" />
<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
And then set it as a background to your ImageView in the layout file by:
android:background="#drawable/roundCorners"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:thickness="0dp" >
<stroke android:color="#ff5febe7" android:width="2dp" />
<solid android:color="#601E3232"/>
<corners android:radius="5dp" />
</shape>

Android draw circle around Text

I have a textView with a single character in it (all single digit, numbers 0-9). I'd like to draw a circle or a square around the number. I saw a thread mention using a nine-patch to style around it, but I'm unsure of how to do this (or if it is the best way to do it). How can I have a circle around the number?
Thanks
Just need to create a round drawable like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#color/red" android:width="2dip"/>
<solid android:color="#android:color/transparent"/>
</shape>
And set this drawable as your TextView background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/teal_200" android:width="2dip"/>
<solid android:color="#android:color/transparent"/>
<size
android:width="10dp"
android:height="10dp"
/>
</shape>
You should be able to just give that TextView a Shape drawable that is a circle as a background.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Categories

Resources