hi,
I'm trying to implement something similar to the image attached. I have two textviews one on top of the other and i want their borders to look like the one in the image. I was able to draw rounded corners by setting the cornerradii of the GradientDrawable but i have no clue as in how to draw the slope on the right side of the first textview.
Any help on how to do this is much appreciated!!
thanks.
I would in this case do the graphics in a some graphics editing program (Photshop, GIMP or Inkscape for example). Two different drawings, one for the top part and one for the bottom. Then convert the drawings to NinePatchDrawable to be used as backgrounds for the text views. Since this type of drawable can be made larger or smaller depending on the length of the text in the TextViews.
You can use a transparent background image instead of drawing the background. Else you can use the canvas.
Edit : bad image example :-)
Related
I run into a difficulty in my application.
I have an ImageView that represents a chemistry flask.
I would like that when I click on buttons of various colors, the ImageView is filled with the said color.
I would like a stack of each separate color but if you have a solution for mixing every color (maybe in a gradient ? it will be ok too)
I would have 12 colors at the end in total
The problem is that I don't know how to do it.
Anyone have an idea?
Example:
I click on a button which corresponds to the color blue :
Then I click on a button which corresponds to the color red:
I would go with Canvas.
You can first draw solution, and then add drawing of the flask on top of that.
First, I'd measure the height of the flask in pixels so that I'd be able to calculate how much pixels in height does 1 unit of volume take. After that, you can add separate solutions based on number of units and start drawing at the top of last one.
Once you draw all the solutions, just draw image of flask on the same canvas.
How would I replicate this in Android, my general instinct would be to create a regular layout w/ a border, then have 2 layouts that contain a triangle (one the same color as the border + one that's slightly smaller but white and overlap the two), idk if there's an easier way to do that:
You can use 9patch to achieve something like you wanted.
The Draw 9-patch tool is a WYSIWYG editor that allows you to create
bitmap images that automatically resize to accommodate the contents of
the view and the size of the screen. Selected parts of the image are
scaled horizontally or vertically based indicators drawn within the
image.
A complete guideline can be found here : http://developer.android.com/tools/help/draw9patch.html
The easiest way to reach this, is to set the layout background to that image.
background="#drawable/template"
Probably you want to have the area out of the "bubble" transparent, so you will need to save it as PNG.
The blue rectangle in which test is written, how it is covering ,one full and some portion of lower and upper cell?, ,,, how these cells are made? , this isnt a simple grid. consider this ,what this layout contains, how blue rectangle can cover a specified area.?
help out
This is probably a custom view.
The background texture is a Bitmap , the cells are line drawn on a canvas and the blue area with text is a drawn rectangle.
When you create the view , you know oh many pixel represent an hour , so you should be able to give an exact position to the rectangle.
At least it's how i would do it.
You should have look at Creating Custom Views in android resources and more specificaly read Custom Drawing
To create such view you can:
create your custom view and draw on its canvas
use GridLayout that's available as a support library for android 2.1
I suggest to use the second variant.
Basically What I'd like to try is to have all of my content in an image. I looked up some stuff but what they do is always use an imageView and text. But I'd like to use it as a background image.
Can someone give me an example how this exactly works? And how will the support be for using this with different screensizes, because the content always has to stay in the image?
To clarify what I want, I added an image. The green space is a background drawn in android xml, the white is the actually image and the text should be all of my content. I'd like to keep everything in the white, even if I get more edges.
The easiest way will be to have 3 layers
Top
Mask
Content
Image
Bottom
The mask will be an imageview (in your case only the green parts with the rest transparent).
The base image can be anything, but it would make sense that it complements the masking layer.
The content will be the tricky part. You will need to figure out the bounds of the masking layer so you won't go under the mask. I would suggest centering the content.
Alternatively, if the shape will change in size or is complex I would suggest using a canvas with a clipping pattern. On Android how do I make oddly shaped clipping areas?
I am trying to create a drawable such as this in Android:
I don't think a nine patch will work because there is nowhere that can safety scale vertically. So next I tried a shape drawable but it does not support triangles.
I want to render this image on the fly so there are no artifacts. Also I want to be able to use it in a selector, so I need to be able to represent this image in xml. Maybe I need to extend some class to manually make the shape. If so how do I embed a tag in the xml to tell it where to render? Does anyone know where to start with this or have an example of something similar?
I have read the first 10 pages of hits on stack overflow and google and am not getting anywhere. Thanks very much for any help.
I think a 9-patch would work. For the vertical stretching on the left boundary, fill in the line from top to bottom.