I am currently working on an app where the UI is really important. So, I need to create a Button with a particular shape. I'd like to create one so my UI could look like this :
I saw several tutorials about creating your own drawables, but here my problem is the particular shape of my input. The "L" form bothers me ..
Any idea ?
I keep looking for a solution, and if I find one I will post it here as an answer.
You can either use an image of the shape you required or you can use 2 views places horizontally to each other. The first view will contain the yellow color as background with rect footstep image and another view with half of the height of first one having yellow background will be on the right of the first view.
P.S :
You can always use canvas to create your own views.
___________
|.....|.B....|B...|
| G.|____|.....|
|.....|........|.....|
|.....|.G__|.....|
You can't create a view like this BUT you can create a rectangle View like an ImagView that contains drawable like L. All you have to do is use VectorDrawables. create an SVG Image and then Convert it to a VectorDrawable by using Plugins like SVGVectorDrawable.
here is how to add plugin to your AndroidStudio
After All set the drawable to your Views Background.
Related
Is there any solutions for this problem :
I want these two shapes with blue and pink colors to be separate buttons so whenever the pink space is clicked something happened and the same for the blue space.
PS: i can slice the two portions and create an ImageButton for each but the problem is the button doesn't take the same shape of a portion it is always rectangular so i can't place the other button next to it
I'd suppose to recommend you to write a custom View, that draw this picture itself, depending on some kind of formulae.
Or use an old method of game development when you define color of pixel that was touched or focused.
Define color of pixel touched
PS: i can slice the two portions and create an ImageButton for each but the problem is they don't fit good on the activity
Try to use 9 patch resources or svg drawables instead.
If they are defined well it should work.
Then you will have to write you're own custom button the uses them.
You can read more about it here:
http://www.vogella.com/tutorials/AndroidDrawables/article.html#9-patch-drawables
http://www.vogella.com/tutorials/AndroidDrawables/article.html#vector-drawables
I'd like to 9patch this image, but I can't seem to
I've tried understanding the things mentioned here https://software.intel.com/en-us/xdk/articles/android-splash-screens-using-nine-patch-png but I can't seem to apply them to my image
Any ideas? And yes, it doesn't help that the icon is rounded ...
According to the linked page you "draw lines that define the stretchable patches.". In your case, the stretchable part seems to be left of the logo until the left half-circle starts.
I added an image with an oversized stretch-line to mark the horizontally stretchable part.
There is no way, to use your image only with 9 path. Best practices for your task - using several images with 9 path. Maybe creating custom view.
1) As you can see, first image, parent with blue color, should include 9 path (it's easy to make without internal image).
2) For best looking in any device you need to create another thing for second image (with facebook char). 9 path for circle - not best idea. So I advice you use holder, with xml canvas background and char "f" in foreground.
3) Now you need to put this all in one FrameLayout, which you will use anywhere. All structure will be as example below:
<FrameLayout> // You may create custom view instead of FrameLayout
// for more flexible and understanding
<BlueImageBackground.9path
gravity=center>
</BlueImageBackground.9path>
<WhiteImageFacebokChar
gravity= center_vertical | left>
</WhiteImageFacebokChar>
</ FrameLayout>
As a result, in any screen, this image will appear identically...
The source image you provided should be edited first, my version:
in sdk/tools folder there is draw9patch tool, so you can use it to edit it. You would see something like this:
Hi it is preferable to create an empty 9 patch image "without the logo" and then setting it as the background of a relative layout and then add an image view to the relative layout and add to the ImageView:
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
Moreover you have to adjust the margin of the image view to achieve the desired result.
Note that this method will not stretch the icon & it requires some fine tuning to the image size and padding to achieve the desired results :-)
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.
I am having four piece of image.
Here I attached one sample image.
How can I create the round shaped image using these type of images?
Which layout is best for creating the UI for android?
Thanks in advance.
are you talking about something like this..
http://www.baijs.nl/tinycircleslider/
And for designing the UI for Android is depends on our requirement.it means whether you want to design something looks like rows and columns then GridLayout and tableLayout will be better,depends on requirement and look the layout will changes once try it your self and choose the best suited for your applicaiton.All the best Mate
inside relative layout add four imageview with attrs ParentTop, ParentRight, ParentBottom and ParentLeft. every image is rectangular with transparent extra area.
i can understand it is little hard to visualize on first attempt.
now come to click area. so a runtime decision about ignore transparent area click will be right thing.
more tricky way will be manage flags for all listeners and if two listener get calls its transparent area .
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.