Am running into something that I have spent hours trying to get working. I have tried searching but what stumbles me is how to search a resolution for this as it is a strange and apparently not-so-common issue?
All I want is to be able to stretch a 'dash of paint' vertically using the y-axis scalable area marked as a single pixel on the left. My 9patch file is below:
I have gotten this to HALF-work as can be seen (ignore the top horizontal line, this is a separate imageview):
As you can see, I am missing what I call the 'Non-scalable end' which is basically the static part of the 9patch file (unmarked on left y-axis scalable area)
The code in the layout is simple:
<ImageView
android:id="#+id/repeater"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/PlayersList"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/PlayersList"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/repeater" />
(file is named repeater.9.png and stored in res/drawable-xhdpi)
Note: For some reason this works exactly as required in the 9-patch tool, but doesn't seem to work in eclipse (earlier screenshot):
Is this the effect you were looking for ?
I have attached images for all drawables let me know if it worked.
You can use http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
to generate 9 patch images instead of making it form default tools.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_example"
android:scaleType="fitXY"
android:contentDescription="#null"
android:adjustViewBounds="false" />
Related
I am trying to make a chat bubble. So I tried to make a 9 patch image, But it's not getting auto stretched.
So here is my 9 patch image ,
Google Drive Link
And here is my XML file of the chat bubble..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bubblee"
>
<TextView
android:id="#+id/txt_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="300dp"
android:padding="5dp"
android:textColor="#000000"
tools:text="lol" />
</RelativeLayout>
And this is how the current chat bubble looks,
Chat bubble image
I think I never made any 9 patch image before, so the problem is with the 9 patch image, tell me if i made any mistake :(
Thank you :3
You kept already a lot of width for your image so by default it will take that much width.
try to make small image from width and then check it if it works or not
I'm building an app with the Fresco library, by Facebook.
I'm having issues trying to understand how I should implement a view using Fresco, if my App will be usable among different devices. As you can see in the images attached, I have a Nexus6, a NexusOne and a Nexus7.
All of them have the same Fresco Drawee, (200dp x 200dp). As I've read through the documentation of Fresco, it is necessary, and mandatory, to fix the image size. However I'm having trouble understanding how can I achieve something as simple as having an ImageView using 50% of the image width using Fresco.
The desired result would be to have an image that uses half of the screen (in terms of width), and leave the rest of the space for the different texts (title+descriptions shown).
Normally I would do this using weight's, however I'm not sure how to achieve this with the library, or what the best practices would be.
Based on this question (and documentation), I'm not sure if adding a listener is the best option. I'm just failing to understand how Facebook or other applications who use this library, do it for different devices.
Thanks in advance
The code shown of this images is basically the following:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/my_image_view"
android:layout_width="200dp"
android:layout_height="200dp"
fresco:actualImageScaleType="focusCrop"
fresco:backgroundImage="#drawable/user_icon"
fresco:fadeDuration="300"
fresco:placeholderImage="#color/common_action_bar_splitter"
fresco:placeholderImageScaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#+id/my_image_view">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Title 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#color/menu_color"
android:text="Description 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Title 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#color/menu_color"
android:text="Description 2" />
</LinearLayout>
</RelativeLayout>
UPDATE:
I also don't know how to get a full-screen image. If we must either specify the dimensions, or use match_parent, but using match_parent on both would use the whole parent, how can I get something like the image showing the Facebook image?.
I believe #Gueorgui Obregon's is a good idea, however I'm still wondering if the problem is the design pattern of using 50% of the screen for a picture. For instance, take 2 cell phone models with the same dimensions (MDPI for example), but one of them is a little bit wider than the other. Using the dimensions approach I'd get than on one mobile it takes half of the screen, but on the other one, it would take a little bit more/less.
In summary: Where is the problem? Is thinking in percentages a bad idea when designing views? Should I tell my designer that it's a bad design idea for android to use percentages? More importantly, how can Facebook achieve something like the last photo (where the pictures use a ~33% of the screen)?
Your could use dimensions.xml for different values folder for different screens.
res/values/dimensions.xml
res/values-sw600dp/dimensions.xml -> 7+ inches
res/values-sw720dp/dimensions.xml -> 10+ inches
Add on each dimensions the desire value
res/values/dimensions.xml
<dimen name="my_image_view_width">200dp</dimen>
<dimen name="my_image_view_height">200dp</dimen>
res/values-sw720dp/dimensions.xml
<dimen name="my_image_view_width">400dp</dimen>
<dimen name="my_image_view_height">400dp</dimen>
Then simply use #dimen/my_image_view_width and #dimen/my_image_view_height in your SimpleDraweeView like this
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/my_image_view"
android:layout_width="#dimen/my_image_view_width"
android:layout_height="#dimen/my_image_view_height"
fresco:actualImageScaleType="focusCrop"
fresco:backgroundImage="#drawable/user_icon"
fresco:fadeDuration="300"
fresco:placeholderImage="#color/common_action_bar_splitter"
fresco:placeholderImageScaleType="fitCenter" />
Hope this helps!!
I've been trying to create a frame around my imageview using a picture of a wooden frame. I turned the woodenframe picture into a 9patch and its still not wrapping around the imageview.
<RelativeLayout
android:id="#+id/ChosenPic"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="3"
android:orientation="vertical"
android:padding="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:baselineAlignBottom="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical|fill_horizontal"
android:scaleType="fitXY"
android:src="#drawable/woodenframe" >
</ImageView>
</RelativeLayout>
So this is the ninepatch and i want it to fit around a picture of my choosing no matter the size.
EDIT:
This is what i want.
You have two options. I recommended the first one.
First option:
Put each image view in a separate LinearLayout and apply the 9patch to the LinearLayout it self not the image view
Second option:
Use or set the background resource of the image view in Java to the 9patch resource or the background attr in xml to the 9 patch resource and the src to the image it self.
Note that it better to use a Layer-List and add a combination of two shapes or whatever rather than using a 9patch resource.
Reference:
https://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
The "nine-patch" frame image that you upload is not a proper nine-patch.
First, it is a jpg. The extension should be .9.png.
Second, the contents are not correct. Specifically:
You need to have a 1px transparent border around the entire image. I do not see that in your jpg, though that just be an artifact of exporting it as a jpg.
You need to define a stretchable region by drawing black pixels in that 1px border. I see no black pixels defining such a region in the uploaded image.
I highly recommend going back and reading the nine-patch documentation again, and trying the draw 9-patch tool for creating a proper nine-patch.
Your 9-Patch is not configured correctly.
It isn't enough to just rename your file. To get it working properly, you have to define certain areas that should be stretched to fit the dimensions of your view.
You can also define paddings for that 9-Patch to inset the content when applying the 9-Patch to your view.
There's a handy tool called "Draw 9-Patch" in the android SDK that helps you defining these areas:
http://developer.android.com/tools/help/draw9patch.html
To start it, simply run the
draw9patch.bat
located in
...\sdk\tools\
I have a simple 9-patch image as below
My layout code as below
<RelativeLayout
android:background="#DD0000"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:id="#+id/tooltip_shadow"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#drawable/my_shadow"
android:layout_marginTop="0dp" />
</RelativeLayout>
When it get run on Android 4.1.2 (v16), the image is as below
When it get run on Android 4.2.2 (v17) or larger, the image is as below, which is the expected result.
Is this a bug in Android 4.1.2, or it need special handling of 9-patch image? Hopes someone could shed some light.
Note: I could workaround it using values-v17 dimen settings on it. But though would like to understand why. Thanks!!
I'm trying to make a 9-Patch image to use for Android application.
Here is a screenshot from 9-Patch tool with my image:
I'm adding on layout this image:
<Button android:id="#+id/tiny"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:text="Text"
android:textSize="8sp"
android:background="#drawable/arrow_active" />
(Image is located in "drawable" folder and image name is "arrow_active.9.png" )
Here is a screenshot from eclipse:
On real device I also don't see the arrow of image.
I'm tried with ImageView and Button, layout is TableRow.
Also I tried with smaller image:
On real device I see black pixels added by 9Path tool.
Try this tool...
It is graphically well, and auto generate images for all buckets. You can set streatch regions and content padding from it..