I need to draw an empty circle and I know I can have one like this :
<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="2dp"
android:color="#android:color/darker_gray" />
</shape>
and then I just have to set it to any view's background and there it shows on the screen.
However, the view containing the circle as background is a square (or a rectangle) with a defined height and width. Therefore, the circle is drawn inside the view.
But what if I want to clip that said view ?
Let's my view-circle is inside a Layout (Linear or Relative) and fills up the parent (match_parent). Let's say this layout is red. What I want to do, is use the circle to clip the red layout so that only the red is shown inside the circle : the red must not leave the circle bounds.
Somehow, I can manage, with android:clipChildren="true" so that nothing goes further than the view squared borders. But that is not enough because the animated content do leave the circle and are halted at the view borders.
Is there any way to accomplish this ? I would like to remain on the XML level here. No canvas, not code to run at runtime. Is it possible ?
Thanks !
Related
I am trying to make zoomable RoundImageView. I am using this TouchImageView
but I extend it with RoundedImageView not with standard ImageView. This TouchImageView is in some FrameLayouts which have these these backround:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFF"/>
This background also have TouchImageView. When I call on it function setOval(true) everything seems fine, until I start zooming. It's look like it only create rounded bitmap, but ImageView is still rectangle...
PS: I need to have oval not circle.
There are some images:
Before zooming:
After zooming:
Thank you for every answer! ;)
For thoose who have the same issue. I find MaskableFrameLayout which is pretty easy to use. It extends FrameLayout so it's possible to have zoomable view in it. Just create oval or your shape in drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF"/></shape>
and use setMask(drawable). Also you need to setPorterDuffXferMode(...). I used DST_IN.
Hope it helps!
We are making a quiz app as a school project where we are supposed to display a question and show 4 answers. For 8 seconds we are supposed to show 4 buttons with different geometric shapes of different colors(and text for the answer). Then when the timer hits zero the geometric shapes will change colors and switch positions. Then the buttons should be clickable and we can hit the correct answer.
My problem is that I can't find a way to draw these objects on a button, or anything clickable. I could have just used images of triangles, circles etc. on ImageButton, but as the objects need to change colors, it will be difficult. Here is a photo of what it is supposed to look like:
(edit) https://i.stack.imgur.com/05Far.png
Hope someone can help me with this, thanks.
Step 1
For creating geometrical shapes you will have to create a different xml file in the drawable folder for each shape. [for drawing circle you need to oval]. XML file should be like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="any_shape_name*" >
<stroke
//optional: for setting border.
android:dashGap="4dp"
android:dashWidth="10dp"
android:width="6dp"
android:color="#color/black" />
<solid android:color="#color/white" />
<padding
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp" /></shape>
Step 2
Create a button in main layout file and add this xml as the background
android:background = "#drawable/shape_file_name"
This was just a simple 2 step method.
Note:- You can also draw shapes dynamically and set them as the background of the button.
For this way please refer to this beautiful link.
Hope this helps.
--> a number of circles will be drawn over a period of time but only one will be shown on screen at a time.
--> user will click on the circle when the program registers the click, it will show the next circle.
--> the position of each circle is known, only they will appear randomly at different execution.
I have considered a linear layout filled with a lot of imageview(30 of them), every imageview has the same source, a small red dot, generated and stored in the res/drawable folder. code for the dot is:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Large red circle -->
<item>
<shape
android:shape="oval">
<stroke
android:width="0dp"
android:color="#000000" />
<solid android:color="#FF0000" />
<size
android:width="30dp"
android:height="30dp"/>
</shape>
</item>
I am thinking about using isVisible() on these imageviews to hide and show them at different times. this doesn't seem very efficient to me. any suggestions?
The best way to achieve that is to create a single custom View with onDraw overridden.
Then, inside onDraw you can simply draw as many circles as you want on the Canvas object. There are thousands of threads here on StackOverflow describing how to do that. E.g. this one.
Remember that you will have to call setWillNotDraw(false) on your View to cause your custom onDraw to be executed.
When the user clicks on the circle, simply record that even and call invalidate(). onDraw will be called once again and you can draw proper number of circles for the updated state.
I implemented a RecyclerView with rounded corners. For the background of my item in the RecyclerView and the background of my Recyclerview I used this XML:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#color/colour"/>
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
If I initialise the RecyclerView with with no items in it, the RecyclerView has rounded corners and it looks like this:
Then, if I initialise the RecyclerView with 1 item in it, I get a grey coloured rectangular cornered overlap, which looks like this
But when I click on the item, which triggers the method setBackgroundResource(R.drawable.rounded_corner_drawable) to be called on the item, after that method is called the grey corners are gone and the item looks like this:
The problem in a nutshell: Why are these grey rectangular corners appearing over the item when the background XML has rounded corners ? And why do these grey rectangular overlapping corners disappear when I set the same background using a click stimulus ?
Let me know if you need any more code.
Thanks in advance
I need to show a "graphic" with part of the box colored in.
In the box it it will have text, but then I want to be able to put a color on the background to show how high the numbers are. see the graphic I made in excel. (I guess I am not allowed to upload a picture. So not sure how to explain this..
Click here to see the excel picture
Anyone know how to do this?
You can simply make an XML Drawable, something like this (save under res/drawable):
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
<gradient
android:angle="0"
android:type="linear"
android:startColor="#FF00FF00"
android:endColor="#FFFFFFFF"
/>
<stroke
android:width="1dp"
android:color="#FF000000"
/>
/>
then just use a TextView, with this Drawable set as your android:background attribute.
Do you want the colour to dynamically change colour for each value? Or are you okay with just having a few colour "levels" (e.g. red, yellow, green).
The easier route would be to just have a few set colours and create those gradients in photoshop and then apply those textures to the back of an ImageView using the background attribute.
Here are some tutorials on how views work: http://developer.android.com/resources/tutorials/views/index.html