I want to draw ImageView with text over a relative layout with 9patch background.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_last" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/appnameimg" >
</ImageView>
</RelativeLayout>
In editor i have this:
On the phone :
It seems that I have just 3 character from string.
Where is my mistake?
UPD
there background and text image. Can it be because of "bad" 9patch?
link to images
I am able to reproduce the issue. It looks like the way you are trying to define the 9 patch is the issue. You want one corner to be un-stretchable which is not possible. According to this doc, the area to be stretched is intersection of left and top one pixel black lines. Using that definition it is not possible to define corner as un-stretchable. If I remove the 9 patch the both images looks fine.
You need to define how your image will scale inside of the ImageView container.
Set android:scaleType="fitCenter" in your XML to center the image in the list view and fit it inside of the container.
Ex.
<ImageView
android:id="#+id/imageView2"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/appnameimg" >
</ImageView>
or one of the other options that might suit you better from here
ImageView.ScaleType
Related
I just want to make a simple image view but when I run that app the unnecessary white background comes. I don't want to need that part. any solution.
and here is my xml file for that image view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:src="#drawable/pot1"/>
</LinearLayout>
In code use -
imgview.setScaleType(ScaleType.FIT_XY);
Or in xml Image view -
android:scaleType="fitXY"
remove the gravity attribute if you want to make it stick to the top of screen or add scaleType attribute fitCenter, cropCenter or fitXY if you want to make it fill the screen.
I am working on a android card view. Here is the code that I have now:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:orientation="vertical"
android:background="#drawable/drawable_card_bg">
<ImageView
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/test_img" />
....
and the UI looks like:
However this is not what I am looking for. I want the image to be placed on top of the card, with the top, right, left margins to be 10dip from the background card boarder.
Meanwhile, I want to keep the ratio of the image, so don't want to hard-code the width/height of the image view. I want the image width to fit the width of the background card, and the height should be adjusted according to the width.
How should I change the layout parameters to achieve this?
Thank you
Add android:adjustViewBounds="true" to your ImageView in xml in order to let the ImageView adjust its bounds.
It's very easy......... please do this thing. Replace your imageview code using this one
<ImageView
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/test_img" />
If my answer will help you then support this.
Thanks!!!
I have i weird problem. Or maybe i got it wrong. But my ImageView has somewhat like a padding. It looks like this:
So the "MyImage" is supposed to align to the topmost. But instead when I check the Graphical Layout the image is adjusted lower. So it's like my whole image is the green broken line.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/master_background">
<ImageView
android:id="#+id/topPage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/image" />
</RelativeLayout>
this is my code. I tried to change src to background but my image was adjusted.
How can i adjust the image. This application doesn't have window title.
Use android:adjustViewBounds="true" in your image view.
<ImageView
android:id="#+id/topPage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/image" />
I have two images - 1)a rectangular one, displaying the actual content and 2)a white image with rounded transparent corners
Is it possible to place image 1 inside image 2, keeping its size but making it to be the same shape as 2?
Basically I want Image 2 be the container of image 1.
I've tried layer and inset drawables but all the time image 1 overlapped image 2.
Thanks in advance!
UPDATE 1:
Here's my ImageView xml part:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="72dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/avatar"
android:src="#drawable/mainImg"
android:background="#drawable/backgroundImg"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="center"
android:contentDescription="#string/desc" />
</LinearLayout>
UPDATE 2:
Below is the link to three images
1) background
2) main image
3) expected result (with rounded corners)
ImageShack upload
I have had to deal with this issue with an app I recently made. Notice how, in the first and second screenshot, the thumbnails are all framed.
To accomplish this, I'm stacking the image and the frame on top of each other in a FrameLayout. First I layout the actual image (#id/thumbnail), followed by the frame (#id/frame).
Important things to note are that the thumbnail is using a scaleType of "fitXY", and has a slight margin so the corners don't stick out behind the frame's rounded corners.
This really only works if your frame border is opaque, so you may have to make your frame edges the same color as your background.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="#dimen/thumbnail_size"
android:layout_height="#dimen/thumbnail_size"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="4dp"
android:scaleType="fitXY" />
<ImageView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/pixel_frame"
android:scaleType="fitXY" />
</FrameLayout>
One easy solution would be to use just one ImageView with android:background for your image2, which you say is the container, andr android:src for image1, which is the actual image :
<ImageView
...
android:background="#drawable/image2"
android:src="#drawable/image1"
android:padding="2dp" />
Just add a padding, to specify how much empty space you want to leave between the "frame" and your actual "picture".
Use ImageButton.. Set Background as Image1 and Image src as Image2
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/image2"
android:src="#drawable/image1" />
I have a Button with a custom android:background and an EditText above it (in a LinearLayout). I want the Button to take up about 30% of the available screen, with the EditText taking up the rest. I'm using layoutHowever, my custom image for my button needs the width to scaled at the same ratio as it's height, so it doesn't get stretched. How do I do that?
So far I have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/woodbackground">
<EditText
android:id="#+id/editText1"
android:layout_height="0dip"
android:layout_weight="2"
android:layout_width="fill_parent"
android:layout_margin="10dip">
</EditText>
<Button
android:layout_height="0dip"
android:background="#drawable/sayit_button"
android:layout_width="wrap_content"
android:id="#+id/button1"
android:layout_weight="1"
android:layout_gravity="center">
</Button>
</LinearLayout>
Thanks for any help,
Phil.
A very similar question was asked, where the accepted solution was basically to layer the background behind your view with a FrameLayout. Less than ideal, but might be your only option: Android: Scale a Drawable or background image?
And this may be of no help at all- but you might explore what you can do with 9 patch drawable. A 9 patch drawable is basically a drawable (such as your background graphic) that has a special invisible border specifying if/where it will stretch. More info on 9 patch and the 9 patch tool.