Here is the problem :
As you can see the black chronological line is messed up, more or less stretched.
I actually tried 9patching, but honestly I don't get the whole thing.
Is it actually possible to solve my problem ? If yes, can 9patching the picture do the job ? If yes, how ?
As an extra, I give you the xml of each rows :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/date"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingLeft="30dp"
android:textSize="20sp" />
<ImageView
android:id="#+id/point"
android:layout_width="40dp"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:textSize="20sp" />
</LinearLayout>
Test 1 :
Test 2 :
With this picture :
I get this result :
Test 3 :
Yes it's possible by using a 9 patch.
Your 9-patch file is wrong. You have inverted the stretchable area, meaning at the moment, the circle will be stretched, and not the other parts.
Just draw the vertical border where you want the image to be stretched, which are the areas below and above the circle in your case.
Also remove the horizontal line as I guess you don't want the image's width to be stretched.
You might find this documentation page interesting.
EDIT: I just quickly tried what I explained, and it worked using this 9-patch:
Please note the circle is not 100% centered, but it should point you in the right direction.
Check the Simple Nine-patch Generator. You load an image, you specify the area that can be stretched, and he automatically generates nine-patch graphics (xxhdpi, xhdpi, hdpi, mdpi) to download as a zip package.
Related
I am using ImageButton in my custom bottom navigation. And I have set icons of 32*32 size as src to them.
here is xml
<ImageButton
android:id="#+id/bottom_nav_profile"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_weight="1"
android:src="#drawable/btm_nav_user_act"
android:text="Profile"
android:adjustViewBounds="true"
android:scaleType="center"
android:background="#drawable/bottom_nav_bg"
android:textColor="#000"/>
When I view it on my phone they look pixelated. I'm fine them being smaller but I dont want them to be pixelated. How can I make adujustment so that they look sharper.
Here are the icons
It seems that your image is very small to begin with, you have 2 options:
Remove the hardcoded height (50dp), your original image may be smaller than this, forcing its height may be reducing its quality on certain devices.
Have the same drawable you're using but for different phone densities. I'm guessing you only have one version of your drawable image in the drawable folder, on certain phones with certain densities, this image may display badly (just as it may be displayed just fine on certain other phones).
Lets make custom Image Button with linear layout and imageview
<LinearLayout
android:id="#+id/id"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/btm_nav_user_act"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:textColor="#000"/>
</LinearLayout>
Now use linear layout as a button.
I am trying to create a sort of progress bar for my Android app, however, I would like it to be an image moving from right to left. The image itself needs to preserve its original size.
Basically, what I am looking for is this (don't have enough rep to post image):
http://postimg.org/image/5e7w5vd7h/
The problem is that the image, which is 2000px wide, will not load when run on my device (Sony Xperia S). If I use an image with width <= device width, it works.
I have tried using HorizontalScrollView and ScrollView inside a RelativeLayout, as well as setting scaleType to center, centerCrop, fitXY and all the others, adjustViewBounds true/false etc., basically every combination there is.
First and foremost, I would just like the image to appear on my device - the animation in itself is not prioritized right now, but I am thinking of a solution where I increment the ImageView's paddingRight regularly.
Below is a snippet of my XML thus far:
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/horizontalScrollView"
android:layout_marginLeft="12.5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/rolling_bar"
android:scaleType="center" />
</HorizontalScrollView>
<TextView
android:id="#+id/countdown_time_text"
android:text="01:22:58"
android:textColor="#color/countdown_color"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:textSize="28sp"
android:typeface="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginLeft="10dp" />
I apologize for any syntactical / semantic errors, I am quite new to Android. Thanks in advance!
i have the a 9 patch image with a magnifying glass icon on the right side for my search box,
the problem is, the image doesn't fit well while i put it as background for my edittext.
(i can't upload the screenshoot yet)
the magnifying glass icon didn't work as expected, the icon got shrunk there. can someone help me fix this?
here my XML code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ListFoodActivity"
android:padding="10dp"
android:background="#drawable/bcground"
android:src="#drawable/bcground" >
<TextView
android:id="#+id/textView1"
android:layout_width="100dp"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:text="Food"
android:textSize="20sp"
android:textStyle="bold" />
<EditText
android:id="#+id/editText1"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/textView1"
android:background="#drawable/search"
android:hint="Search"
android:textSize="20sp"
android:textStyle="bold" />
here the 9 patch image :
and the image of the emulator :
sorry for the bad english :(
The problem is the 9 patch itself: it's malformed.
The black line on the left side is simply WRONG (it "touches" the lens).
It should be a single pixel near the lower part, so that its prolongation doesn't touch the lens.
This is it
Note that the lens will be up-right aligned.
If you want it centered, you have to add another black pixel near the upper left border (but you have to replace some pixels near the upper lens frame, too).
Also not thet you don't need the horizontal part being that wide, you can make it much narrower, to save on the final patch size.
After using 9patch to create a photo, you can a image file which it's file extension is XX.9.png.
For example, search.9.png in drawable folder and you should use "android:background=#drawable/search" in xml.
I am troubled by how the Android OS is handling resizing on an app of mine. Basically I have a background image that is 480x800 (so 480px wide) and an image that goes at the bottom, also 480px wide.
On the Galaxy S (480x800 screen) everything looks fine, as shown below:
On the Galaxy S3 (720x1280), however, the background is getting stretched to 720px wide but the image at the bottom only to 640px wide, as shown below:
I tried to create a xhdpi folder with 640x960 images, but same thing happens (background stretched to 720px, image only to 640px). I also tried to play with "ScaleType", but no luck so far.
Does anyone know why the OS would re-size the two images with a different scale, and how to fix it?
Here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/bg" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/significados"
android:layout_gravity="center"
android:layout_marginTop="216dp"
android:onClick="goToSignificados"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ranking"
android:layout_gravity="center"
android:onClick="goToRanking"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/engracados"
android:layout_gravity="center"
android:onClick="goToEngracados"
/>
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="60dp"
android:clickable="true"
android:contentDescription="#string/image"
android:onClick="goToMarket"
android:src="#drawable/googleplay" />
</LinearLayout>
You'll have to post your XMLs to get a more specific answer but basically all "Views" may handle image scaling differently.
In your example,
You can make your button stretch all the way by using width = match-parent.
"Backgrounds" will stretch by default, but can also tile.
"Buttons" will have a min size of the background size but will stretch when needed (button has too much text)
As a side note, you shouldn't depend on the exact pixels of the images. You should look into nine-patch or making tiled backgrounds and make sure you take advantage of things like "match-parent, gravity, etc."
For some reason, my scrollview, which only contains two TextViews for now, refuses to fill it's parent. The XML for the scrollview is below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/Article"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/article_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="32sp" />
<TextView
android:id="#+id/article_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:text="TextView"
android:textSize="16sp"
android:onClick="onClick"
android:clickable="true" />
</LinearLayout>
</ScrollView>
I've noticed the text in the scrollview will not cover parts of the .9.png #drawable/background. I've tested several backgrounds, and wherever I put a patch, the text will only go in the stretched part. I uploaded a picture here.
In this case, the horizontal patch is nearly on the bottom of the 150x150 image. It's one pixel off. As you can see, the textview cuts off sometime well before the top, and there is a 1 pixel cutoff on the bottom.
If I were to make the patch in the middle of the .png, the cutoff would be split evenly top and bottom. It is doing the same thing horizontally, but that is much more difficult to see since the text does not scroll horizontally.
How do I get rid of this behavior? I want the text to be able to flow from the very top to the very bottom, over the .9.png. Is this possible? If not, the only option I see here is make it a very short narrow 9patch so it doesn't take up much space. I'd like a better solution though.
Edit: the background image (the 9patch, not sure if the patches will come through though)
If they don't, it's got a 1 pixel wide horizontal patch at the bottom, and a a pixel wide vertical patch at the top. See screenshot.
I ended up just using a smaller .9.png. It seems that the textview is only filling the expanded portion of the 9patch. At least on ICS.