I have a layout problem, I want an image to be in the middle of two buttons. So I created the two buttons and defined a weightSum of 1. I then set the weight of the two buttons to .40 and the image to .20 so that the image would be a small logo in the middle of the two buttons. The problem is the image is stretched out and the buttons are pushed aside.
<Button
android:id="#+id/buttonClear"
style="#style/ButtonText"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".40"
android:background="#drawable/custombuttonred"
android:text="#string/clear"
android:textSize="50sp" />
<ImageView
android:id="#+id/myimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".20"
android:src="#drawable/imageid" />
<Button
android:id="#+id/buttonBackspace"
style="#style/ButtonText"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".40"
android:background="#drawable/custombuttonred"
android:text="#string/backspace"
android:textSize="20sp" />
I had also faced the same issue. I used the button insted of ImageView and set background image to it.
This code: http://pastebin.com/3P9BWEcQ
Works well for me
I think you could use dp for resizing the image for both height & width.Say if you ar image is in original size of 400px width & 200 px height,just resize according to the screen size i.e if you are device in which you are testing currently could only hold half of the image size then android:layout_width="200dp" android:layout_height="100dp".If you follow resizing using dp image will get resized to both the smaller & larger device you are using.Make sure that when you have any larger devices screen than the one currently you are testing,just try to have the image as large as possible to get the best results.
Related
I am using ImageButton in my custom bottom navigation. And I have set icons of 32*32 size as src to them.
here is xml
<ImageButton
android:id="#+id/bottom_nav_profile"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_weight="1"
android:src="#drawable/btm_nav_user_act"
android:text="Profile"
android:adjustViewBounds="true"
android:scaleType="center"
android:background="#drawable/bottom_nav_bg"
android:textColor="#000"/>
When I view it on my phone they look pixelated. I'm fine them being smaller but I dont want them to be pixelated. How can I make adujustment so that they look sharper.
Here are the icons
It seems that your image is very small to begin with, you have 2 options:
Remove the hardcoded height (50dp), your original image may be smaller than this, forcing its height may be reducing its quality on certain devices.
Have the same drawable you're using but for different phone densities. I'm guessing you only have one version of your drawable image in the drawable folder, on certain phones with certain densities, this image may display badly (just as it may be displayed just fine on certain other phones).
Lets make custom Image Button with linear layout and imageview
<LinearLayout
android:id="#+id/id"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/btm_nav_user_act"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:textColor="#000"/>
</LinearLayout>
Now use linear layout as a button.
I've read the android support multiple screen tutorial.
when i try to see how my layout fit on different screen, something gone wrong. In my case i have only one tipe of image (970x174) for test copyed into all drawable folder.
By see my layout on different screen, in most cases, layout is not as i would. I paste code of my layout (that it fits well into nexus 4 screens)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/TEMPORARY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="128dp"
android:src="#drawable/button" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="64dp"
android:src="#drawable/button" />
<ImageView
android:id="#+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/button" />
</RelativeLayout>
Maybe i should do a different density image for each screen type?
RelativeLayout doesn't have a orientation tag, so remove it.
Since you put the same image on all the drawable types, the image will have a fixed pixel size, which will decrease the size of the image on the screen as the screen density increases. But you used dp as unit on the layout, so the 128dp will increase in size as the density increases, to make the size on screen appear the same on different devices.
So if you want to have the same layout with the same size on screen regardless of screen density, delete the other copies of the image and leave only one drawable folder, and android will handle scaling for you on different screen density phones.
Starting in Android development, i wonder how to do this layout in XML (using Android Studio), targeting 4.x Android devices.
How to precisely position 4 buttons on a bitmap background? Should work despite bitmap scaling.
Scenario:
My application main screen should consist of 4 buttons placed on a bitmap. Button positioning should always look exactly like this, and the whole should scale up/down (proportional width/height) to match the screen space. A layout sketch:
Tried solutions:
4 Buttons in a GridLayout with background:
<GridLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:columnCount="2"
android:rowCount="2">
<Button android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button1" />
<Button android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button2" />
<Button android:id="#+id/button3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button3" />
<Button android:id="#+id/button4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button4" />
</GridLayout>
4 Buttons in a GridLayout, above a ImageView in a RelativeLayout.
One ImageView with onTouch() that checks a colorcoded bitmap. (source here)
The only solution that worked ok regarding scaling is the onTouch(), but i'd rather keep using actual buttons so keyboard navigation and press/hover effects work as expected.
How is it possible to position buttons, to have them always match scale with the bitmap?
Thanks for any insights.
Due to the title this question looks like a dupe but i havent found any that demonstrate how this can be accomplished.
I had this problem and I mathed my way around it. It's pretty horrible but let's say that your background image is 500x500px and on an image like that your button is supposed to be at (100, 100) with a size of 50x50px relative to that background image. When you lay it out you have to get the size of the current device, let's say it's 700x800px in size (these devices most likely do not exist). In this case you would have to set the width of your button to (700/500)*50px and the height would be (800/500)*50px . The position of the button would then be at (700/500)*100 and (800/500)*100 .
You are pretty much scaling the button with the background image. Hopefully I'm making myself clear :)
you can try this, hope will help
<ImageButton
android:id="#+id/notificationform_btn_Approve"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/btn_approve"
android:onClick="btnApprove_Click" />
and take a look here
and why don't you use ImageButton instead:
<ImageButton android:src="#drawable/greybutton"
android:scaleType="fitCenter" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
then you can adjust the scaling with the scaleType attribute. The only downside is you can't set any text.
good luck
This is what I want to do: customize the image size because it's just a little too big.
I am creating an Android application and in a button, I have the image and text. Now I want to customize the size of the image to fit on the screen. However, I have a difficulty manipulating the image. If I adjust the width and height, it is of the button's. I wanted to adjust the image size. Is this possible?
Here's the code snippet of the button:
<Button
android:id="#+id/marketBtn"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="#drawable/unselected_button"
android:drawableTop="#drawable/market_icon_0"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:paddingTop="5dp"
android:text="#string/task_bar_lbl_market"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFFFFF"
android:textSize="10sp" />
Do you have any idea how to do it? Or what are the possible approaches to fulfill this task?
Use nine-patch.
you can set stretchable area and padding area.
http://developer.android.com/tools/help/draw9patch.html
I am troubled by how the Android OS is handling resizing on an app of mine. Basically I have a background image that is 480x800 (so 480px wide) and an image that goes at the bottom, also 480px wide.
On the Galaxy S (480x800 screen) everything looks fine, as shown below:
On the Galaxy S3 (720x1280), however, the background is getting stretched to 720px wide but the image at the bottom only to 640px wide, as shown below:
I tried to create a xhdpi folder with 640x960 images, but same thing happens (background stretched to 720px, image only to 640px). I also tried to play with "ScaleType", but no luck so far.
Does anyone know why the OS would re-size the two images with a different scale, and how to fix it?
Here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/bg" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/significados"
android:layout_gravity="center"
android:layout_marginTop="216dp"
android:onClick="goToSignificados"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ranking"
android:layout_gravity="center"
android:onClick="goToRanking"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/engracados"
android:layout_gravity="center"
android:onClick="goToEngracados"
/>
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="60dp"
android:clickable="true"
android:contentDescription="#string/image"
android:onClick="goToMarket"
android:src="#drawable/googleplay" />
</LinearLayout>
You'll have to post your XMLs to get a more specific answer but basically all "Views" may handle image scaling differently.
In your example,
You can make your button stretch all the way by using width = match-parent.
"Backgrounds" will stretch by default, but can also tile.
"Buttons" will have a min size of the background size but will stretch when needed (button has too much text)
As a side note, you shouldn't depend on the exact pixels of the images. You should look into nine-patch or making tiled backgrounds and make sure you take advantage of things like "match-parent, gravity, etc."