I am having some weired problem with 9-patch image in my android app.
I want to make a line across a screen with a simple png. After creating 9-patch from it I've simply added it as a drawable to ImageView container. Unfortunatelly it doesn't want to stretch and still has this same dimmensions. Because I've never used 9-patch png I have no idea what am I doing wrong and also searching in Google is not so helpful, because there are only info, how you can make one, now how you can use it.
This is my code fragment from xml file:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/testpng" />
and this is a image I want to add:
Well, if it's just a simple line,you wouldn't need a 9 patch...
Just use a View, give it a color as a background and give it a 1 px dimension:
<!-- Horizontal line -->
<View
android_layout_width="match_parent"
android_layout_height="1px"
android:background="#ffff"
/>
<!-- Vertical line -->
<View
android_layout_width="1px"
android_layout_height="match_parent"
android:background="#ffff"
/>
For the Shadowed line:
I'm using it so:
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:layout_centerVertical="true"
android:background="#drawable/line_h"
/>
and this is line_h.9png, as small as I could make it (6*4 px) ;)
Now, this doesn't show in my graphical layout editor, but it does at run time!
Check that the extension of your file is .9.png. If it isn't, it's not recognized as a 9-patch.
I found an answer to my question. The missing thing was one line of code android:scaleType="fitXY".
Now it looks like this
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/testpng" />
Related
I want to use a list separator in my .xml file, but everytime i do that, the text style changes, it becomes bigger and bolder.
Below are links of the screenshots. The picture on the left is what shows up from my code, and on the right is what i really want.
Picture for output
I only want to know how to stop the text from getting bigger and bolder, and at the same time how to put a horizontal line below the <TextView>.
Below is the link for the code
Code
Building from #John Kalimeris' answer, i have a better way, in which no foriegn resource will be needed. This should work for you.
<TextView
android:layout_width="match_parent"
android:layout_height="5dp"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_marginBottom="3dp"/>
for the horizontal line you can use this code:
<TextView
android:id="#+id/tevi_divide"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_margin="3dp"
android:background="#color/detail_line_divider"
android:text="#string/str_empty" />
you put this below your textview. You change the values of height and margin according to your needs.
I have the following XML:
<ImageButton
android:id="#+id/SwapTextButton"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_weight="0.5"
android:background="#drawable/my_gradient_button"
android:scaleType="fitCenter"
android:src="#drawable/extended_text" />
And it outputs a button which looks like this:
Is there any way to increase the size which the src resource takes up? By that I mean maintain the src within the area of the button, but make it larger than it is now.
I have tried changing the scaleType, but any other setting causes the src resource to display parts of itself outside the button boundary (aka it becomes too large).
I've had a research and there seems to be solutions based in java, but ideally I'd like to keep the solution in xml too.
Can someone suggest a fix/point me in the right direction?
Thanks
<ImageButton
android:id="#+id/SwapTextButton"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_weight="0.5"
android:background="#drawable/my_gradient_button"
android:scaleType="fitXY"
android:src="#drawable/extended_text" />
Try this, fitXY for scaletype should "fill" your ImageButton
This worked for me:
android:padding="0dp";
In my application, I want to set bubbles to a text view, in the text view I add the setBackgroundResource() as you can see in the code.
With this code i'm getting an image like this:
I want a bubble shape image like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#EDF5E4" />
<corners android:bottomLeftRadius="#dimen/corner_radius"
android:bottomRightRadius="#dimen/corner_radius"
android:topLeftRadius="#dimen/corner_radius"
id:topRightRadius="#dimen/corner_radius" />
Please tell me how to make this in my setBackgroundResource() XML.
What you need to use is essentially a 9-patch image (As already pointed out by Ken Wolf in this comment).
To get you started, I am including a set of 9-patch images from one of my apps along with a brief piece of code on how to use it when creating a layout XMl. ;-)
The 9-patch Image Set:
(These are named: bubble_white_normal_mdpi.9, bubble_white_normal_hdpi.9 and bubble_white_normal_xhdpi.9 respectively. Remove the _mdpi, _hdpi and _xhdpi from the file names after placing them in their respective drawable folders.
The XML:
<LinearLayout
android:id="#+id/linlaUserOther"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:padding="2dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgvwProfileOther"
android:layout_width="42dp"
android:layout_height="42dp"
android:adjustViewBounds="true"
android:contentDescription="#string/content_desc_user_profile"
android:scaleType="centerCrop"
android:src="#drawable/ic_contact_picture" >
</ImageView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/bubble_white_normal"
android:gravity="top|center"
android:orientation="vertical" >
.... // OTHER STUFF HERE THAT IS NOT NECESSARY IN THIS CODE SNIPPET ON SO
</LinearLayout>
</LinearLayout>
NOTE 1:
Although, I am including a working set of Images (almost spoon feeding, if you will), I would strongly urge you to create your own set of images that fit in your scheme of things. Plus, this will also equip you to build your own resources in the future. The only reason I am going the extra mile is because I personally lost 3 days getting the speech bubble looking and working right. :-(
NOTE 2:
I am setting the image as a background to a LinearLayout. You, however, will need to set it to the TextView you need looking like a Speech Bubble.
Additional Sites (Tutorials):
http://blog.booleanbites.com/2012/12/android-listview-with-speech-bubble.html
https://github.com/AdilSoomro/Android-Speech-Bubble
http://developer.android.com/reference/android/graphics/NinePatch.html
http://developer.android.com/tools/help/draw9patch.html
I think you are going to have a hard time trying to do it using just shape drawables.
I would use a 9-patch png.
http://developer.android.com/reference/android/graphics/NinePatch.html
Basically you either find/buy an image or create one in your favourite drawing program. Then you define the stretchable regions using the draw9patch tool which allow it to scale properly in your View.
Here is a tutorial, it's even specific to speech bubbles!
http://adilsoomro.blogspot.co.uk/2012/11/android-how-to-use-9-patch-png.html
It takes a bit of time but it is a crucial technique in making more designed visual interfaces.
How can I achieve this (or something like this)?
Looking for some 'underlines' that will be the width of the element.
Was thinking a drawable but I'm not too sure how that would work with stretching and what not. Thanks.
Edit
Made a new XML file and included it under every title, works great.
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<View
android:id="#+id/layout_underline"
android:layout_width="match_parent"
android:layout_height="3dip"
android:background="#color/layout_underline" />
</merge>
you can get it by create view in XML as below :
<View
android:layout_width="fill_parent"
android:layout_height="2dp" />
and you can customize it as you need,
hope help you
Create a 9-patch image and set it as the background of your TextViews.
Here's the 9-patch resource page: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
I am trying to have an image be fitted, and have a layout below it with some black background and whit text. My problem is that the layout ends up leaving space between the image and the text itself, and I don't understand why:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="15dp"
android:layout_below="#+id/image" >
<TextView
style="#style/text_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Couple more elements -->
</RelativeLayout>
</RelativeLayout>
I would want this second RelativeLayout of 15dp touch the bottom of the image, but unless I change the image height to something small, it leaves some space. This layout specifies how to display an image + some text below it, but I have a total of 4 images that use this layout to get loaded on the screen, in a 2x2 display. (Each image takes 25% of the screen).
Any idea how to make the RelativeLayout align exactly with the bottom of the image please?
I do not fully understand your question though I think you might have a look at the launcher layout for my Newspaper Puzzles app...
http://code.google.com/p/newspaper-puzzles/source/browse/np/res/layout/launcher_layout.xml
or perhaps from the Open Sudoku Game look at the number pad layout found here:
http://code.google.com/p/newspaper-puzzles/source/browse/np/res/layout/s_im_numpad.xml
Use the ADT tools to get the right layout is probably best if possible but I know sometimes it is difficult to use to get specific results I still recommend using the xml tools included in the Android Development Tools.
http://developer.android.com/tools/help/adt.html#graphical-editor
I would recomend using a compound drawable if you're trying to put text directly below an ImageView.
See the following question for more details: How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView