Imagebutton with arrow border - android

i want to make a breadcrumb for my android app.
In breadcrumb on the left there is an imagebutton with arrow border. On the right there is a text title. When user tap on imagebutton, application performs specific task.
So, can you help me to create imagebutton with arrow border like in attach image?
Thank you.

I'm not 100% sure what you mean by an Arrow Border, but you cannot (as far as I know) set borders to any views in Android.
There are two options you could go for:
Make an outer View to surround the View you want a border on. Then set the background of the outer border to an arrow background.
Use a Nine Patch.
I would recommend a nine patch for this personally.
Edit: I noticed you wanted a border on an image. That could be an issue with nine patch unless you integrate the border into the image, which defeats the purpose.

Related

Customising top of DialogFragment

Maybe some kind of simple question to those who are skilled at android layouts, but what is the best approach to draw smth like this (maybe what widget to use) for positioning rounded area which spreads out of top border of dialogFragment and is horizontally centered like this:
You will have to create a custom layout for Dialogs.
In this case, you have all the control you want for defining dialogs layout, same as for any view.
If heart icon is all you have, create an xml for white circle and use it as a background for the heart, set it to top of parent, center it horizontally.
As you will have exact height of circle, you can set half of it as top margin for the rest of the layout below to make circle look like a hump (as on screenshot).
You can use a 9 patch as the background of you dialog. Define the stretch areas and the content area and you should be good :
And for exemple use this 9 patch file:

Layered button with transparent icon in Android

Is it possible to make layered button in Android with transparent icon throgh first layer? It looks tricky, I could make different assets but is it possible to achieve it programmatically? Example below
EDIT: Icon has no background, only border.
Seems easy enough. Save the icon as a .png file, such that anything besides the arrow outline is transparent. Then it's a simple matter of drawing one ImageView on top of another ImageView, depending on what you want.
In order to tint the arrow, use a TintableImageView as described here.

NinePatch images does not stretch

I've created this nine patch image.
I've used it as button background. In the button I've also put a text "back", but here is the result.
How can I put a text to the right of the arrow and let the image stretches in order to fit it?
(Don't worry about it's pixelated)
First of all as I can see you are creating the image in the wrong way. You can use this tool link . It's very useful at first steps.
Second of all in my opinion just remove that arrow from the background image. Leave it only
the yellow color with the gradient and add thet arrow as
android:drawableLeft="#drawable/my_arrow"
as element to your button in xml. That's the best option which I can think of.

How to 9-patch so icon always stick with centered text

Basically, I wanted to have a button where text and icon stay in the middle of the button at all times. The Button has match_parent width and center gravity. I tried to use drawableLeft but that put icon on the left most of the Button and not next to the text.
So I'm trying to create 9-patch image as shown in the image above. Basically, I want all the text to stay in blue box with the cyan rounded rectangle (icon) next to it. The stretchable area is in red. However I just can't make it as the content area always overlap the icon.
Is this possible with 9-patch? Or should I wrap Layout around the TextView and use that as a button instead?
By the way, the included image is just to show what I plan to do. The actual image will be in other colors and without all the red.
When you create a nine-patch image, you put some black lines on the right and bottom of the image. These lines define the region that will be use to place the content inside of your image.
Here is an example :
It will look like this :

EditText background image - align right

I'm trying to create an EditText that has the following background images (aligned right) when a user inputs valid/invalid text:
How can I achieve this in Android? I've tried setting the background image using:
editText.setBackgroundResource(R.id.icon_tick), but when I do this, the whole image gets stretched to fit the EditText.
editText.setCompoundDrawables(left, top, right, bottom) where left, top, right and bottom are either drawables or null.
Why does it have to be a background image? Just make it a standard image and position it accordingly in your layout. Otherwise, you'll need to make a large image that actually takes up the entire background of your view (with your icons positioned where you want them). You'll also need to size this image accordingly for the various screen resolutions.
An alternative approach can also be found here:
Background Image Placement
Possible duplicate post.
You can make the drawable as nine patch image. Have some transparent area to the left of the tick mark and define it as stretchable area. That should do the trick.

Categories

Resources