Develop Reference

Custom ImageView with custom styling (How-To, Name)

I'd like to know the name of such effect to the following screenshot. For example, the image is full loaded as a Rec, then it has an extra space with an angled white/dark space.
I literally have no idea how to better explain this.
I don't want a code sample, just hints so i can know how to do such custom styles.

The first and second screenshot: you can use Relative Layout
Firstly, insert the imageView, then insert the white layout with needed dimensions and margins, so it will overlap the imageView.

How to create 9patch from image with icon on one side

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 :-)

Is this normal 9patch behaviour? and how can I avoid it?

I'm working on a search bar that's supposed to stretch full width of the screen, so I'm thinking 9patch rather than 5 different assets, right?
This is what it looks like
9patch asset:
I tried settting android:padding=0dp, also dynamically with setpadding(0,0,0,0);
I've updated the 9patch to allow content all over the image (the bottom and right lines - at max length)
Does anyone have any idea why this behaviour?

If you means that your EditText gets extra padding.
Please set it in Java , not in layout.
EditText text = (EditText)findViewByid(R.id.myedittext);
text.setPadding(0,0,0,0);
View will get extra padding if you set a 9patch background to it.

Eventually I resized my 9patch asset like so:
And my theory is that the 9patch gets split in the middle(horizontally) and the content is inserted, rather than simply surround the content.
So if you have a 10px 9patch and a 10px content, you would get a 20px result, instead of my former belief that it would be something like 12px.
Hope this helps :)
P.S. I will vote the correct answer to whomever comes with something more than a "theory"

How to have images go to the next line if they dont fit

I am using Linear layout with horizontal orientation to put images beside each other. However, is there way that the images can automatically go to the next line incase they dont fit due to screen size?
I just dont want small screen (or small densities) to truncate my images
Thank you

Use RelativeLayout and reorder images via code according to image sizes and space.
OR
Extend GridLayout and make your own implementation of it.
This is not possible in LinearLayout as it is.

Adjusting center of nine-patch png

I have a nine-patch png that I'm using as a popup bubble. It looks like this:
I'm putting it in an TextView of width fill_parent so the bubble expands the width of the screen. As one might expect, the pointer at the top is then centered horizontally in the middle of the screen.
What is the easiest way to adjust the location of the pointer so that it's, say, 5/8ths of the way over from the left instead of centered?
I can re-cut the png if necessary.
UPDATE: Cubic has a very simple solution to the problem that I can't believe I missed. It works very effectively for my current problem. However, one downside with this solution is that it can't be adjusted on the fly. If I need to put the pointer in one place for one view, but a different place for another view, I need to cut two different PNGs. Is there a solution that can be adjusted at runtime?

You have a balanced stretch at the moment with one dot on each side. Can you try adding more to the left or right?