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.
Related
I created custom triangle button, from code which was given by wonderful user so, here :
How to create layout with buttons like on this picture? ( BUTTON THAT HAVE ACTUALLY SHAPE OF TRIANGLE, NOT MASK )
And i came in level, for adjusting design. I tried to make 9-patch img, also with normal, but it looks for inner button like this:
And then bump into finding way for adjusting that image into triangle custom button, and found this solution:
Android - Image Button Scale
But what i got is not good for me. Here what i tried :
<FrameLayout
android:layout_width="270dp"
android:layout_height="270dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/custom_border" >
<custom_button.TriangleButton
android:id="#+id/btn_bottom"
android:layout_width="250dp"
android:layout_height="200dp"
android:text="Second Button"
android:textColor="#000"
android:layout_gravity="center_horizontal"
android:gravity="bottom|center_horizontal"
android:padding="13dp"/>
<custom_button.TriangleButton
android:id="#+id/btn_top"
android:layout_width="130dp"
android:layout_height="110dp"
android:text="First Button"
android:textColor="#000"
android:layout_gravity="center_horizontal"
android:gravity="bottom|center_horizontal"
android:layout_margin="55dp"
android:padding="30dp"
android:onClick="callAdditionActivityButton"
android:src="#drawable/triangle"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
</FrameLayout>
I have on mind to create triangle (with my art) in rectangle (normal image) to fit center of rectangle, in way, down_left_corner, center_top, down_right_corner, respectivly created in code. And around triangle make transparent. How to achieve this? Main issue how to adjust picture, second is transparent background...
EDIT: My image's size is: 502 x 302, bit depth 32
MY desired picture for adjusting, i want this circle to be in center in custom button :
I have an ImageButton that is the child to a RelativeLayout that uses a mipmap resource for it's source. However I'm having an issue with the mipmap stretching to fill the ImageButton.
In all of the threads I've read people have recommended "android:scaleType="fitXY"" yet this does not seem to work for me. The XML is listed below.
<RelativeLayout
android:layout_width="330dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp">
<EditText
android:id="#+id/search_edit_text"
android:layout_width="280dp"
android:layout_height="50dp"
android:hint="#string/search_hint"
android:background="#EAEAEA"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_margin="0dp"
android:textColorHint="#C9C9C9"/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_toRightOf="#id/search_edit_text"
android:layout_margin="0dp"
android:scaleType="fitXY"
android:padding="0dp"
android:stateListAnimator="#null"
android:src="#mipmap/search_button_icon"
android:background="#null"/>
</RelativeLayout>
The image below is the result of the above XML, however the search button (to the right of the edittext element) should be the same height, and be attached to the edittext.
Any help is appreciated.
I just copy/pasted your code, and the image below is what I get (I used default android:src="#mipmap/ic_launcher")
And I get a visual similar to yours.
Where it looks like the image isn't "stretching"
However if you click on the image you see that image's boarder perfect matches the EditText to its Left.
So my guess is that your input Image 'search_button_icon' Has built in padding in the Image itself and would need to be cropped if you want it to be 'exact' visually as the EditText.
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!
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.
I want to make a layout as given in the image below, but I am unable to make same as it is showing in the image. I have to align the buttons exactly same as that they are given in the image attached. Here is my code how I am making it and I am not able to get the alignment exact as displayed.
I have added my resources also (buttons and background)
<Button
android:id="#+id/button_home_driver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="60dp"
android:layout_marginLeft="38dp"
android:background="#drawable/driverbtn" />
<Button
android:id="#+id/buttonPassengerHomeScreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button_home_driver"
android:layout_marginBottom="10dp"
android:layout_marginLeft="70dp"
android:background="#drawable/passengerbtn" />
</RelativeLayout>
I am not able to align the buttons along the Tilted Black Divider Screen.
Anyone please help me in the same. (Both the buttons should start from the Black Boundary as shown in the image)