So I'm trying to overlay a map image with a transparent ninepatch Drawable using layer-list. Like this:
target http://f.cl.ly/items/2b1x3c3o0w3t1z0b2o2s/Screen%20Shot%202012-06-20%20at%2010.34.18%20AM.png
But all I get is this (notice that the map image is cropped by the edges of the ninepatch, even though it is supposed to be transparent):
problem http://f.cl.ly/items/380j3E2w452Y2D2d1K0a/Screen%20Shot%202012-06-20%20at%2010.29.45%20AM.png
Here's my layer-list code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<nine-patch android:src="#drawable/myninepatch" />
</item>
<item android:drawable="#drawable/detail_map"/>
</layer-list>
and here's my layout ImageView:
<ImageView
android:layout_width="298dp"
android:layout_height="106dp"
android:layout_gravity="center"
android:layout_marginBottom="11dp"
android:src="#drawable/detail_map_overlay" />
Edit: Here's the ninepatch .png:
ninepatch http://f.cl.ly/items/0X3N0d331Q15380D093n/myninepatch.9.png
Any ideas how to achieve this? Not necessarily using ninepatch but I want to make it stretchable depending on the size of the image. Or if you have an idea how to do inner glow, that would be swell too.
To recap the comments and make it more clear for further reading
You 9 patch is not valid:
the top and left part only define the stretchable area.
the bottom and right, the position of the content.
With your example, it will do something like this(based on your but without the useless parts):
Then set it as background of your ImageView:
<ImageView
android:layout_width="298dp"
android:layout_height="106dp"
android:layout_gravity="center"
android:layout_marginBottom="11dp"
android:src="#drawable/detail_map"
android:background="#drawable/myninepatch">
</ImageView>
Like this you can get rid of the Layer List
Related
I have a shape. I am using a random color to fill the shape.
I have an image which needs to be set for the background of this shape. (I am just thinking it should be background. May be I am using wrong words. )
Result should be something like this (note the image at the background).
I recommend you that library which you can custom corners , shape and other things and then you can put your image view inside it and then you'll have your view
here is the link
https://github.com/florent37/ShapeOfView
You can set src of your image view to those white things you have, then you will have your shape as background and this pattern on it as well.
use android:src
If you want to show an image within a shape, Try this,
shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark"/>
<corners android:bottomLeftRadius="56dp"/>
</shape>
Now set the shape for a layout, then add the image that you want in image view then adjust the alpha value to show both shape and image,
layout.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#drawable/shape">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/blue_image"
android:alpha=".2"/>
</RelativeLayout>
Output will be like this
Hope this will help.
I came across with this library. RoundedImageView Github link
All I needed to do was:
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="0dp"
android:layout_height="200dp"
android:src="#drawable/add_card_head_bg"
android:scaleType="centerCrop"
app:riv_corner_radius="90dip"
app:riv_mutate_background="true"
app:riv_corner_radius_bottom_left="50dp"/>
I have a rectangular image that I want to appear circular in an ImageView? I tried the following to no avail.
I create a circular xml shape and apply it as the background of my ImageView. Then I add the png image as the src of the ImageView. But the image still appears rectangular in a circular view. When I try to scale the image in the view, it simply fills the view and forces the view to look rectangular. Of course I just want to effectively get a circular cross-section of the image, losing all four straight edges. I welcome any help.
<ImageView android:id="#+id/circular_content"
android:background="#drawable/bkg_circle_shape"
android:src="#drawable/img_1"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="oval" >
<solid android:color="#CCFFFFFF" />
<size
android:height="300dp"
android:width="300dp" />
</shape>
try it splitTrack=-false in api21 or higher
for SeekBar, i test it work correctly.
I am trying to create a ImageButton for my user portrait.
<ImageButton
android:id="#+id/new_question_user_portrait"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/oler_login_submit_button_bg"
android:src="#drawable/oler_portrait"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"/>
This is the background xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp" />
</shape>
My src image is 200*200 px. Round Corner still not working for these code.
Could anyone show me the correct way to create a rounded Image Button with fixed height and width regardless of image source?
You are expecting the background drawable to work as a mask, which it does not. The drawable is drawn behind the bitmap (after all, it's a background), so it's invisible.
What you are looking for is a mask, have a look at this question and its answers: Mask ImageView with round corner background
My current approach:
I create Rectangle in separate file:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid>#color/red</solid>
</shape>
And later I reference it in my layout like this:
<ImageView
android:id="#+id/rectimage"
android:layout_width="17dp"
android:layout_height="17dp"
android:src="#drawable/rectangle">
</ImageView>
How to change the color in xml layout? I'd like to have different color for each rectangle, but I don't want to create separate drawable files for each of them.
The answer is very simple.
<ImageView
android:id="#+id/rectimage"
android:layout_width="17dp"
android:layout_height="17dp"
android:src="#drawable/rectangle">
android:background="#color/blue"
</ImageView>
All is needed is to set background color. My failure was to set unsupported in 2.3 colors, so the rectangles were black.
You cannot change the value of drawable xmls. All you can do is to create the rectangles using ShapeDrawables.
I want to draw an image with gradient background. I've created a drawable bitmap resource like below
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/bg"
android:tileMode="repeat"
android:gravity="bottom"
/>
As you know, gravity is ignored when tileMode is defined. I tried creating my own class which is inherited from BitmapDrawable, but I couldn't achieve success with that.
Please help me to apply both properties: tileMode and gravity.
I did not understand the question clearly. What is the goal here?
Is it using a gradient image (like .png .jpg) with tileMode?
Or is it using a transparent icon and making it's background gradient?
Also why would you need gravity when you are using tileMode? tileMode means tile the whole area of bitmap with the same image. Since it will do it to the whole image no point giving gravity on that image since all of it will be filled.
If the goal is to use this drawable bitmap in the some part of the screen add this to your layout:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/mydrawablebitmap"
android:id="#+id/imageview1" />
You can put it to your layout.xml and set your own width and height and align whichever you like.
If the goal is using an image and making its background here is how you go with it:
Create a gradient.xml in your drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#E0E0E0"
android:endColor="#FFFFFF"
android:angle="-90"/>
</shape>
Then add this imageview to your layout:
<ImageView
android:id="#+id/myimagewithgradientbackground"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#drawable/gradient"
android:src="#drawable/foregroundimage" />
If you give me some more details about the question I'll go ahead and edit my answer accordingly.