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
Related
I have this ImageButton
<ImageButton
android:id="#+id/imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/crimson_round_button"
android:src="#drawable/play_white"/>
where crimson_round_button.xml drawable is
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#color/hibiscus"/>
<stroke
android:width="4dp"
android:color="#color/crimson"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/crimson"/>
<stroke
android:width="4dp"
android:color="#color/crimson"/>
</shape>
</item>
</selector>
and the play_white.png drawable represents only the white play icon in the button.
My final result is this one
A you can see the inner icon is not centered and you can notice that the right and bottom borders are a little bit cropped.
The reason is that the applied background is not fitting the ImageButton, as you can see in this image where I selected the ImageButton in Android Studio preview
Any idea why this is happening?
EDIT:
Ok, let's try to forget about the white arrow.
This is my new code for the Image button (and its container)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<ImageButton
android:id="#+id/save_record_dialog_play_imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/crimson_round_button"/>
</FrameLayout>
as you can see the circle set as ImageButton background is no more a circle, it's cropped on the left side and at the bottom
and setting a 4dp elevation to the ImageButton the cropped border is much more visible
I think the problem is that the triangle-shaped play button just doesn't look centered.
I tried your layout with my own triangle-shaped button:
It looks like it's too far to the right, but if we picture the bounds of the triangle button (sorry about my paint skills) like so:
the icon itself does seem to be centered.
One solution is to adjust the left padding so it looks better:
<ImageButton
android:id="#+id/imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/crimson_round_button"
android:src="#drawable/play_white"
android:paddingLeft="3dp"/>
Which gives this:
With regard to the second part of your question, have you observed the cropping on the design tab? In an emulator? On a device? For me, I see this issue on the layout design tab:
but not on a device (this is from a screenshot):
I am trying to have the background of the image re-size accordingly to the Image size
I have a simple ImageView
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:background="#drawable/white_bg"
android:scaleType="fitCenter"
android:padding="3dp"
android:layout_height="wrap_content" />
The white_bg is an xml drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/white" />
<corners android:radius="5dp" />
</shape>
The Problem is that there are large white spaces between the image and the background.
The only thing appeared to solve the problem was setting the `ScaleType' attribute to FitXY but it stretches small images and they turn to be ugly.
I have also tried adding a LinearLayout parent to the ImageView with `wrap_content' width and height attributes but there were still large white spaces with some of the images.
Try this
ImageView.setAdjustViewBounds(true);
not sure but it helps you
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 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.
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