Android : Alignment bug in making/showing 9patch image -

-

ninepatch:

trash can icon ninepatch image

screenshot:

screenshot of ninepatch misalignment

layout xml:

<?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:orientation="vertical"     android:background="#ffffff">      <linearlayout         android:id="@+id/edit_tray"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_alignparentbottom="true">          <view             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:background="@drawable/trash"/>      </linearlayout>  </relativelayout>

desired results:

the "edit_tray" represents ui element toggleable. when edit mode off, "edit_tray" (and therefore trash can icon) "gone". when edit mode on "edit_tray" visible , overlaid on scrollview contents.

there 2 elements trash can icon: icon , linear gradient behind it. ninepatch image contains 3 stretchable areas , 1 static area accommodate these elements. trash can icon in middle of graphic static , should appear directly in horizontal center , on bottom of screen. gradient should stretch across bottom of screen 1 side other.

the bug?

the ninepatch image contains 1 pixel of stretchable area on either side of image horizontally. effect of should trash can icon appears directly in center (1 pixel on left side == 1 pixel on right side). however, can see in screenshot above not case. note: screenshot taken test phone, t-mobile g2. same effect can seen in emulator. however, in draw9patch preview , eclipse graphical layout view image distributed.

i've tried several different methods try find out bug , try fix or work around it. including: using imageviews instead of views (same effect), using android:scaletype="fitxy" (same issue), checking @ runtime width of screen , width of "edit_tray" same (they are), using 2 different images gradient (as edit_tray background) , icon (as imageview src) (create problem 2 images not overlayed on each other. fixed setting absolute height on both), etc.

the answer, workaround, , real question

i did testing using simple ninepatch images 6 stretchable areas per side. noticed there issues displaying them in @ least 1 of testing cases (phone, emulator, draw9patch, graphical layout in eclipse).

i decided try expand image horizontally there more of linear gradient showing on edges of trash can icon. made image 128x64 (previously 64x64). made more of edges part of stretchable part try curb bad math (?) happening image. draw9patch reported bad sections put 2 pixels, 1 on either side. worked! icon directly in center of screen now! don't know why, without changing actual stretchable portion of image, changing width of image 128, works now.

i tried resizing image down around 100px wide remove of redundant pixels , error came back! not did come back, icon placed @ same spot offset center of screen. can't figure out why happen way.

anyone have ideas? bug?

i have working given workarounds described above, if has suggestions i'm listening.

make 9 patch image using 4 points have done in this..and work.

enter image description here

tips creating 9 patch image.(not designer,telling funda)

  • put points on left , top
  • if have text or image in between ..then put point on left , right of image , top , bottom of image or text.
  • always see no of space left , no of points on both sides(left-right , top-bottom) equal.
  • always check once preview or right side before using check in 2x 6x

Comments

Post a Comment

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

-
how set z-index drawing object when using drawingcontext.drawxxx() methods? the object drawn last have higher z index. can't change index of drawn objects. way draw in order. if using wpf (as placed tag), can use, example, canvas control. create shapes need like polyline obj = new polyline(); //... // ... set properties of obj and add them canvas uielementcollection: yourcanvasname.children.add(obj); //or yourcanvasname.children.insert(i, obj); first items of collection have higher z index. advantages in way: no need redraw on window changes, can anytime move objects , change order.
Read more

razor - Is this a bug in WebMatrix PageData? -

-
i think may have found bug in webmatrix's pagedata, not sure. concerns how pass data partial page calling page. in webmatrix documentation (tutorials, e.g. " 3 - creating consistent look ", , example code), pagedata recommended mechanism pass data between pages (e.g. content page layout page, or partial page). however have found not work other way, pass data partial page calling page. modifying or adding entries in pagedata in partial page, not seem calling page. cutting right down simplest possible example, in test page may have this: @{ pagedata["test"] = "initial entry"; } <p>before calling partial page, test value @pagedata["test"]</p> @renderpage("_testpartial.cshtml") <p>after returning calling page, test value @pagedata["test"]</p> and in _testpartial.cshtml page might have this: @{ pagedata["test"] = "modified entry"; } <p>in partial page...
Read more

visual c++ - Using relative values in array sorting ( asm ) -

-
i need sort through array , sort each individual row in array in ascending order. doesn't seem going (surprise!) keep getting hit 2 errors: a2101: cannot add 2 relocatable labels , a2026: constant expected here's sort, makes sense me, think i'm still trying implement high-lvl language techniqes assembly. there way around not being able use relative values? (the array 7 rows 9 columns, btw). mov cx, 7; cx = number of rows outer: ; outer loop walk through rows push cx mov cx, 9 mov row, cx ;rows middle: ; middle-loop walk through columns push cx sub cx, 1 ;cx = cx-1 mov column, cx ;columns inner: ;inner loop - compare , exchange column values cmp marray[row*9 + column], marray[row*9 + column+1] xchg marray[row*9 + column+1], marray[row*9 + column] ; compare , exchange values marray table inc column loop inner pop cx loop mid...
Read more