I'm trying to use a 9 patch background around an image to add a shadow around it.
What I have done so far is the following layout:
<LinearLayout
android:id="#+id/film_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:background="#drawable/movie_shadow"
android:drawingCacheQuality="auto" >
<ImageView
android:id="#+id/img_avatar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:src="#drawable/film_test" >
</ImageView>
</LinearLayout>
Whit the following "movie_shadow.9.png":
I defined the content area (right and bottom edge) to be the white rectangle.
But the result is not what I expect. The content area is not what I define and the ImaveView is larger than the content area set in the 9 patch.
You see the red circle on the screenshot?
Why does the ImageView do not respect the content area of 9.png image?
Related
I have an XML file in my Android application. The first two linear layouts look like the image below.
Layout 1 - Semi Circle
Layout 2 - Rectangle
Note : There is NO gap between the semi circle and rectangle. This gap is the problem that I'm addressing now.
Actually Layout 1(horizontal) has three sub layouts (vertical) and the middle sub layout contains an image view which is the semi cirlce.
When I dont use a 9 patch image, there is no gap and it blends perfectly with the Layout 2. But I am required to use a 9 patch image because of the possibility of incorrect stretching of the semi circle.
But when I do use a 9patch image, there is this weird partition created between the two layouts.
it must be a 9patch problem. but how can it be solved?
I just require a method to use a 9patch image of this semi circle without this gap because it may look odd.
Note : the 9patch dots are ONLY on the right and left empty side, not anywhere at the top and bottom.
This is the excerpt from the XMl file :
<LinearLayout
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="2" >
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1.98"
android:gravity="center_horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/semicircle" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="2" >
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0"
android:background="#drawable/rectangle" >
</RelativeLayout>
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
When I set 9.PNG image as RelativeLayout's background, all elements inside it gets shrunken to the middle. Here is the XML and the snapshot.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Just a simple white text which does not show up"
android:textColor="#ffffff"
/>
</RelativeLayout>
If I change background to a color or a normal image, I get the text.
android:background="#drawable/bg2" //normal image
Can anyone explain why is this happening?
Did you define the content area of your nine-patch? Because it looks like the content area is the little pixel in the middle.
The content area is defined by the bottom and right sides of your nine patch. You can for example make it as big as your patch.
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.
I would like to place an image into the background of my activities. This image is effectively a circle shaped logo which will be semi-transparent, and should sit behind any other content on the UI. I will also offset it into the bottom corner.
What is the best way I can place this image without it become "squashed" (egg shaped) under varying screen dimensions? My app will operate in portrait mode only.
This is what I'm trying to achieve:
So far, I've placed my circle image onto 3 white rectangle canvases for the popular sized screens 480x854, 320x480 and 240x320 which seems to work, but I don't think its very solid.
Any tips?
This probably is not the perfect solution, and will require a bit of maintenance on the UI, but here's my thought:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="-15dp"
android:layout_marginBottom="-15dp"
android:src="#drawable/circle"
/>
<!--Rest of Layout goes here-->
</FrameLayout>
Just wrap this around your current layout, and adjust the right and bottom margins to whatever negative margins you wish for the offsetting. This should work for any screen size, assuming you have drawables for each density.
EDIT: Yeah, you also shouldn't have to worry about a white rectangle this way, either. Just add the android:background tag to the FrameLayout with whatever color you want for the background, and save the logo as a transparent PNG.
I would do it like this, use a relative layout to have an ImageView in the background with on top of that a relative layout containing the rest of your layout
This way the image is as big as it can be keeping the correct dimensions
<?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">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:scaleType="centerInside"
android:src="#drawable/splash_picture"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<!-- rest of your layout -->
</LinearLayout>
</RelativeLayout>