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.
Related
my problem seems to be easy but I have no idea how to solve it.
I have a few buttons and all of them have a background image. The problem is, all images turns into blue color
It looks like this:
Original photo:
Here's a part of my xml code:
<Button
android:id="#+id/memory_button1"
android:layout_weight="1"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:onClick="#{()->viewModel.showTile(1)}"
android:background="#{viewModel.button001}">
</Button>
Icons url:
https://www.flaticon.com/packs/restaurant-225
Better approach to use ImageView as button with ripple click effect would be
<ImageView
android:id="#+id/memory_button1"
android:layout_weight="1"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:background="?selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:onClick="#{()->viewModel.showTile(1)}"
android:src="#{viewModel.button001}"/>
Also you can even wrap it in a CardView
If you want to have the only image in your button. you can replace it with ImageView so that you can have full control of how the image is being drawn.
<ImageView
android:id="#+id/memory_button1"
android:layout_weight="1"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:onClick="#{()->viewModel.showTile(1)}"
android:src="#{viewModel.button001}">
</ImageView>
You will option for scale type for ImageView's so that you can render image without stretching it.
I have a 9-patch image and what I want to do is to use it to "seperate" the adMob ad from the app. I want to draw a light blue line exactly where the ad is.
This is the 9-patch:
I added it to layout as ImageView and this is the XML code:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/adView"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:src="#drawable/ab_transparent_example" />
And this is the result:
But what I want to get is the 9-patch to take the size of the screen, to make a full blue line from left to right of the screen. I've never worked with 9-patch before, what am I doing wrong?
The diagram below is a pretty good visual explanation of what a 9-patch is. As for your specific problem, you should set the 9-patch as the background to the image.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/adView"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#drawable/ab_transparent_example" />
First you need to know is that 9-patch is image as any other, regarding layout placing it. The difference is in way 9- patch image scale.
In this situation, try to set layout_width to "fill_parrent" or "match_ parent"
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/adView"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:src="#drawable/ab_transparent_example" />
Below is how I have designed my xml. Now what I am trying to fit a textview inside the white box shown below. But am being restricted by FrameLayout (at least I think so) that I need to hard code values to make the text view fit in the middle or some where inside the white box. I cannot use Relative or other layouts for this purpose as I have understood by my trials as this whole is a single image.
Here is my layout,
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:visibility="visible" android:layout_marginTop="60dip"
android:layout_gravity="center" android:id="#+id/xxx">
<ImageView android:id="#+id/calloutquizImage"
android:background="#drawable/callout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="fitCenter" />
<ImageView android:id="#+id/triviaImage"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/calloutquizImage" android:layout_gravity="left"
android:src="#drawable/trivia" android:background="#drawable/trivia"
android:layout_marginTop="50dip" android:layout_marginLeft="85dip"></ImageView>
<TextView android:text="TextView" android:id="#+id/triviAnswerText"
android:layout_marginTop="125dip" android:layout_marginLeft="85dip"
android:layout_gravity="left" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#000000"
android:typeface="sans"></TextView>
<ImageButton android:id="#+id/triviaanswercloseButton"
android:src="#drawable/closebtn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="#drawable/closebtn"
android:layout_marginRight="8dip" android:layout_marginTop="43dip"
android:layout_gravity="right" android:onClick="triviaanswerClose"></ImageButton>
<ImageView android:id="#+id/buttontoclose"
android:layout_gravity="left"
android:visibility="visible" android:onClick="triviaanswerClose"
android:layout_marginTop="50dip" android:layout_marginLeft="75dip"
android:layout_width="230dip" android:layout_height="170dip"></ImageView>
</FrameLayout>
Because of this the text view looks in different positions in various handsets.
Any guesses what can be done for this instead?
Below is my image :
I think you are not doing the right thing. If you want a text to appear inside a white box (or even resize it, if there is to many text to fit to it) - you can still avoid any layouts ad do it with only one TextView.
Please have a look what is NinePatch image in Android:
http://developer.android.com/reference/android/graphics/NinePatch.html
http://developer.android.com/tools/help/draw9patch.html - drawing tools
So basically you will need only 1 textView and your image, properly converted to 9-patch with 2nd link. (Basically - just add a few black pixels on image border).
No just set this 9-patch as a background of textView. It will place text right where you need, and will shrink white box if you'll define so in 9-patch.
UPD:
Please find the resulting screenshot:
As you can see, textView not handles
WhiteBox" itself, filling it with text and resizing the box if necessary.
Here is how to make it work:
<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">
<TextView
android:id="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text" />
<TextView
android:layout_below="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Not so many text" />
</RelativeLayout>
And here is your image, converted to 9patch. Just place it to "drawable/" folder. Note: it MUST have "back.9.png" name.
For details of how 9patch works you can check links above. The main idea: by making black dots on left and top border - you specify which part of the image will be stretched when image must be upscaled. By making dots on right/bottom side you tell the View where to place the content. In our case content is a text of the TextView.
Hope it helps, good luck
I think you can use a RelativeLayout within the FrameLayout for the ImageView and the TextView, and by using the parameters, you can navigate the TextView to the white box. Refer to the LayoutParams documentation for details.
for eg. you can add the ImageView block first and then the TextView, so that the TextView will lay over the ImageView, and by using align bottom, and specifying top margin with a negative value, you can make the TextView go over the image. Or rather, if you are using eclipse, you can directly move the text view in the graphic layout.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/xxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="0dp"
android:visibility="visible" >
<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:layout_margintop="0dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/user2" />
<TextView
android:id="#+id/Textviewtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:layout_below="#+id/imageView1"
android:layout_marginTop="-10dp"
app:context=".TestActivity" />
</RelativeLayout>
</FrameLayout>
Similar to above, you can specify margin left and right to properly position your TextView as you want. Check with graphic layout for feedback to know the correct position.
Please reply if this helped.
Use your images and values for the height and width. I just tried for testing.
I am trying to achieve something that on the face of it I thought would be easy but have researched loads and still struggling.
I am setting an ImageView that will act as a background where parts of the image are areas that buttons should sit on top. For example the background looks a bit like this:
This is set to fitCenter so that it scales with the correct aspect ratio on all screen types like this:
Now I am trying to place ImageButtons over the white areas like so:
I am trying this by aligning each Imagebutton to the top left of the background imageView and then setting margins to aset it in the right place. This works for some screen types, but when the background gets resized because the device is smaller than the background image for example I am finding that the buttons on top dont resize with it so I get the effect like the following:
Here is the type of layout I am trying (with just one button here):
<RelativeLayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/outer" xmlns:tools="http://schemas.android.com/tools">
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/imageView1" android:src="#drawable/no_pills_pane" android:scaleType="fitCenter" android:adjustViewBounds="true" android:layout_centerVertical="true" android:layout_centerHorizontal="true"/>
<ImageButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/imageButton1" android:src="#drawable/pill_pink" android:scaleType="fitXY" android:background="#null" android:layout_marginTop="50dp" android:layout_marginLeft="44dp" android:layout_alignTop="#id/imageView1" android:layout_alignLeft="#id/imageView1"/>
</RelativeLayout>
I'm sure there must be an easier way to go about this, any help would be greatly appreciated.
Thanks
Simon
If all you need is to center ImageButton within ImageView, simply set alignBottom, alignLeft, alignRight, alignTop to ImageView
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignRight="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
I have a button where I put a picture ... I must try to resize the image inside the button ... how can I resize it? Can I do it directly from the xml code?
This is the xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:orientation="vertical"
android:layout_width="250dp"
android:layout_height="180dp"
android:paddingLeft="4dip"
android:paddingRight="4dip"
android:background="#color/white_trasparent"
android:weightSum="1">
<TextView
android:layout_height="wrap_content"
android:id="#+id/text"
android:textColor="#color/grey"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_marginLeft="15dp">
</TextView>
<Button
android:layout_width="wrap_content"
android:text="Drawable Top"
android:id="#+id/Button03"
android:drawableTop="#drawable/icon"
android:layout_height="wrap_content"
android:textSize="10dp">
</Button>
</LinearLayout>
if my understanding of the drawableTop/left/bottom/right properties is correct that is not going to place your image inside your button, rather it is going to put it on top (north of) your button.
If you're looking to put an image inside a button check out ImageButton.
I don't think either of these things will let you just set the size of only your image though (they will let you change the size of the whole view, in this case the rectangle button box, and the image inside it.)
In order to change the size of the image without affecting the size of the button box graphic I think you'd have to shrink your resource image in photoshop or something.