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.
Related
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.
For some reason, I need to use a button with both icon and text. So I can't use ImageButton and thus I go for a solution to set the drawableTop of a normal Button.
The Button size is 140dp in square shape (please refer to the screenshot below)
The I was planning to use was 125x125 px and the asset itself is clear and crisp.
However, this 125px asset somehow being enlarged by the button, like the screenshot shown below.
The device is an xhdpi device.
As you can see, the icon inside the square button is blurry which looks like being somehow enlarged
Here I pasted my button XML
<Button
android:id="#+id/button_call_us"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_margin="#dimen/main_menu_button_margin"
android:adjustViewBounds="true"
android:background="#drawable/custom_button"
android:drawablePadding="-20dp"
android:drawableTop="#drawable/button_call_us_icon"
android:lines="2"
android:paddingTop="0dp"
android:scaleType="fitXY"
android:text="CALL US"
android:textColor="#color/white"
android:textSize="6pt" />
The android:background="#drawable/custom_button" is the purple colour background without any patterns.
The android:drawableTop="#drawable/button_call_us_icon" is the icon.
Except android:scaleType="fitXY", I have also tried centerInside and other options, still not getting the ideal result.
My question is:
Why the drawable inside a Button being enlarged? Is there any way to stop it?
Thanks
Since it's a button, and you want a drawable inside the button. Your probable solution would be to use an ImageButton which actually implements drawable properties. You can then call android:scaleType="fitCenter" and set some padding too
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/android_button" />
However, to get more freedom in terms of desing, you could use a simple layout instead of the button, something on the lines of this, just treat the LinearLayout as you would with a button, in terms of adding the onclicklistener:
<LinearLayout android:orientations="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:background="#CCC"
android:padding="8dp"
android:gravity="center">
<ImageView android:src='#drawable/ic_launcher'
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="Lorem Ipsum"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
Try this code
Drawable img = getResources().getDrawable( R.drawable.img );
img.setBounds( 0, 0, (int)(img.getIntrinsicWidth()),
(int)(img.getIntrinsicHeight()) );
button.setCompoundDrawables(null, img, null, null);
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 wanted to make two equally-sized radio buttons with a custom background, text, and an image to the right of the text. Because of how different these are from a standard "Button", I made them using a clickable "RelativeLayout".
The text and the image are of different heights, but I want each one to be centered vertically in the button. I also want the combination of the text+image to be centered horizontally in the button. This second part is what I'm having trouble with; it's off-center, close to the left side. In the image below, the left side is what I want, but the right side is what's happening. The image on one of the buttons (the one with the longer text) is resized to be smaller, too... Though there is still plenty of space on the right side of the button.
Here is my code:
<LinearLayout
android:baselineAligned="false"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/my_button"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/button_textview"
android:text="#string/button_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/button_imageview"
android:layout_centerVertical="true"
android:src="#drawable/my_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_textview">
</ImageView>
</RelativeLayout>
<RelativeLayout
... same thing for the second button ...
</RelativeLayout>
</LinearLayout>
What am I doing wrong?
Use this as your button:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="MyButton"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/my_image"/>
</LinearLayout>
Now, you can place it in other parent views. To apply layout attributes to above button, place those attributes in the outer <LinearLayout> tag of above button.
Alternative:
You can set custom images to be drawn on sides(Left,Right,Top,Bottom) of a TextView using attributes like:
android:drawableLeft="#drawable/my_image"
Turns out the solution was adding
android:paddingRight="0dip"
strangely enough, even though I didn't put any padding there in the first place.
I Have scoured the site and several others and I am having a problem finding a way to make a clarity nice icon styled image button. The image buttons I keep using fill the content and look just distorted, I want very nice looking icons styled image buttons, and instead its smudged stamps with little clarity. I want them spaced enough you can see the background behind them, Do i need to somehow make the src the image and the background clear?
heres some of my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/debface"
>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="4"
android:gravity="bottom"
>
<!-- Images coming out Blurry, I need to compress like a hires icon file -->
<TableRow>
<ImageButton
android:id="#+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/debraidcard"
android:layout_weight="1"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
<ImageButton
android:id="#+id/button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/debraidcard"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
<ImageButton
android:id="#+id/button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/debraidcard"
android:layout_weight="1"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
</TableRow>
I have used several different sizes on my images, i have switched between .jpg and .png. I follwed several tutorials, didn't like the outcomes. Any help pointing me in the right direction is greatly appreciated
Instead of setting your image to the background set it to src:
android:src="#drawable/cool_drawable"
that will give you your bitmap in the center of what looks like the default button.
If you don't like the button in the back set the background to #00000000 (transparent) and you will end up with only your Drawable as the button.