I still have problems with the correct view for the images in my Application. So on my first device (5,2 inches & 480 density) it looks good.
On the second device (5,5 inches & 420 density) the image doesn't fit and it shows white borders.
This is the ImageView in my layout:
<ImageView
android:id="#+id/iv_image"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#id/tv_topic" />
I placed all my Images in the drawable folder after reading this on a Android Blog:
There are commonly two ways to target all screen DPIs.
1. Easiest way - Make all images to Extra High or Extra Extra High DPI.
Android auto-scales the drawables if the device does not match the drawable DPI. If the only drawables are created in high density, lower DPI screens will down-scale a resource to fit in a layout.
So I implemented all Images in the highest possible resolution ONCE in the drawable folder. Is it necessary to place them all in the specific folders (drawable-ldpi, drawable-mdpi ...)? It would mean that there will be multiple copies of my Image with always the same size.
And yes I read the official documentation of supporting multiple screens a couple times. However I have some problems understanding it.
I advice you to use the layout_weight attribute to keep the constant ratio between the ImageView and the question layout.
Change your layout to something like this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3" />
</LinearLayout>
Related
I set a single image (640x960) as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.imagetest.MainActivity"
tools:showIn="#layout/activity_main">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/launch_image"
android:scaleType="center"/>
</RelativeLayout>
Notice the scaleType is "center" which according to documentation means no scaling. When running on Nexus 5x, this image looks a lot bigger than the screen and is only partially displayed.
I read about android not using resolution directly. Then the question is how to calculate the size of an image that should fit the screen of a particular android device without scaling.
I understand Nine Patch image can be used to create splash images that will not distort the portion of image that should not be scaled. This question is partly for myself to better understand how image pixels relate to the screen of an actual device, and if using Nine Patch image is the only way to guarantee that the splash images will work on android devices of any screen dimensions.
Many thanks
scaleType centerInside should do the trick without having to make calculations in code
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/launch_image"
android:scaleType="centerInside"/>
I'm a little confused after reading Designing for Multiple Screens in the Android documentation. There is a tool in Eclipse to preview the layout in different screens. And I can see from there that certain images are out of place and too big or too small. For example in this screenshot the big one is how it should look like and all the others are what it would look like in other screens. As you can see the jar with brain is out of place in all screens screens(except for Galaxy Nexus).
Throughout my application I've used all the best practices:
I have multiple versions of all the images located in drawable-xhdpi, hdpi, mdpi and ldpi, xxhdpi
I've used wrap-content and fill-parent wherever possible
I've used RelativeLayout
I've used dp for margins and paddings
layout xml for this particular layout in the screenshot:
<?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:background="#drawable/wall_nobrainjar"
android:orientation="vertical" >
<ImageButton
android:id="#+id/brainjar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginRight="129dp"
android:layout_marginTop="215dp"
android:layout_toLeftOf="#+id/red_paint"
android:background="#drawable/brainjar"
android:onClick="zoomImage" />
<Button
android:id="#+id/riddle_book"
android:layout_width="70dp"
android:layout_height="30dp"
android:layout_alignBottom="#+id/red_paint"
android:layout_alignParentLeft="true"
android:layout_marginLeft="83dp"
android:background="#android:color/transparent"
android:onClick="zoomImage" />
<ImageView
android:id="#+id/zoomed_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<FrameLayout
android:id="#+id/brainjar_zoomed"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/brainjar_zoomed_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/brain_grey"
android:visibility="gone" />
<ImageView
android:id="#+id/riddleBook_zoomed_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/riddle_zoomed"
android:visibility="gone" />
</FrameLayout>
<Button
android:id="#+id/red_paint"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/brainjar"
android:layout_marginRight="14dp"
android:background="#android:color/transparent"
android:onClick="zoomImage" />
</RelativeLayout>
What is my problem? the only thing I haven't followed is having multiple versions of layouts (-large, -small,etc). Is that the problem? If it is there a way to solve it without having many layout files. Currently I have only one layout folder, where I've put all my layout files.
Create different folders of name layout-small,
layout-large,
layout-xlarge
in res folder
Copy-paste all ur .xml's from ur layout to thes folder
Open all the xml's & set the margins with using different screen sizes one by one
Then u can run & see the app in different size emulators
It is the simplest way !
Short answer: Don't be lazy.
More detailed answer: Your background is scaled to fit the screen, but your other images are are not, so the ratio between the background and other images are different on different devices, if you look carefully you will see that the brain jar is not only in different places, but with different sizes. To solve this, you simply, or not that simply ;) need to add layouts for different screen sizes, to layout and scale your brain jar probably.
I am new to android development. I am making a UI for my android app. Now, mdpi screen's height is 480px. So I designed my UI to have a height of 480px on mdpi's screens. But because the status bar takes some space at the top of the devices, some of my ImageViews in RelativeLayout are overlapping. How to compensate for the space the status bar takes? Because for different screens, the status bar will be of different sizes and in tablets the status bar might not even be at the top. I am confused, help!
EDIT: The XML :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:theme="#android:style/Theme.Black.NoTitleBar" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:clickable="false"
android:contentDescription="#string/p"
android:scaleType="center"
android:src="#drawable/volbar" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:clickable="false"
android:contentDescription="#string/p"
android:scaleType="center"
android:src="#drawable/base" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:contentDescription="#string/p"
android:scaleType="center"
android:src="#drawable/head" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_marginBottom="33dp"
android:layout_marginRight="19dp"
android:text="#string/press_to_update" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:clickable="false"
android:contentDescription="#string/p"
android:scaleType="center"
android:src="#drawable/frag1"
/>
</RelativeLayout>
In Relativelayout , you have used match_parent / wrap_content. So it will fit to the screen. But you have specified that you have designed the ui for 480px on mdpi's screens.
Since it is not clear how you designed the ui to 480px on mdpi screen. I guess , might have used drawables used in Image View which fits the 480 px for mdpi screens.
drawables should be placed in the ratio of 3:4:6:8
for example
lpdi:mdpi:hdpi:xhdpi = 3:4:6:8
for example if you keep an image for mdpi as 40px
Then,for ldpi = 30 px , hdpi = 60px , xhdpi = 80px.
Per the Supporting Multiple Screens Best Practices, you should design your layouts to expand or contract to fill the space available. On a phone, the most important part is making sure your content fits horizontally and (if needed) scrolls vertically. You can add a ScrollView if you need to fit more vertical content in a layout than your device has room.
Don't try to set the height to a specific size. Use "wrap_content" or "match_parent" as the value for "layout_height" whenever possible.
If you feel like the content will be taller than the available screen height you will want to use a ScrollView as the container for the content.
If you feel like the content will always fit in the available screen height then you can simply use a container (like a RelativeLayout) with layout_height="match_parent".
If you have a specific layout you need help with you could post the XML.
As other users suggested, you should not hard code the specific heights but use wrap_content or match_parent.
If you still want to follow this way, why don't you reduce the height of your RelativeLayout by the dimension of the ActionBar? In Android 4.0+ the default height is 48dip, in landscape is 40dp, in sw600dp is 56dp. You can also get height programmatically calling getActionBar().getHeight() in your activity. For more infos about ActionBar appearance, see this link.
I have a screen with 4 ImageButton in a 2x2 Grid (using TableLayout).
I need to give support to all the different screen sizes. So I created the 4 layout folders (small, medium, large and extralarge).
It worked ok for the position of the ImageButton. But on large and extralarge screens the ImageButton's size are too small.
I tried to solve this problem using the 4 folders for diferents density (drawable-ldpi, drawable-mdpi, drawable-hdpi and drawable-xhdpi) using the x0.75, x1, x1.5 and x2 relation between mdpi and the others folders.
But I thinks that is not working or is not the right way to resolve this.
It is that the right way to resolved?
I worry about small screen but with Hight Density. Or Medium screen with low density. In those cases maybe is not working, right?
Other idea that I have, is to force the ImageButton's size (measure in dips) on every layout of every sizes folder. It that a better way to resolved?
I really lost with this. I want to apply the best/correct solution.
Can somebody help me?
Thanks and sorry for my poor english
Update:
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<TableRow
android:gravity="center"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_marginTop="60dip" >
<ImageButton
android:id="#+id/newCard_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_new_card_button"/>
<ImageButton
android:id="#+id/showLastTicket_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_show_last_ticket_button"/>
</TableRow>
<TableRow
android:gravity="center"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<ImageButton
android:id="#+id/cancelLastTransaction_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_anulla_button"/>
<ImageButton
android:id="#+id/searchCustomer_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_search_customer_button"/>
</TableRow>
</TableLayout>
Okay, so what I would suggest for this is to use the relatively new qualifiers sw600dp and sw720dp (shortest width: 600dp or 720dp) to define larger sizes for those screens -- those are basically 7" and 10" tablets. You could either define a specific dimen variable and have a larger value in a values-sw600dp resource folder, or actually create a different layout altogether in a layout-sw600dp resource folder, depending on how much needs to change.
You could try to adjust ImageButton's width and height values in your layout by giving exact values like 50dip instead of wrap content. dip value is going to appear in different sizes in different screens as dip means Density Independent Pixels.
I'm trying to draw a button with an image as background.
Here's my xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="13dp"
android:background="#drawable/button_bg"
android:text="Break Record"
android:textColor="#2c4417"
android:textSize="19dp"
android:textStyle="bold" >
</Button>
</LinearLayout>
On the graphical layout view, it looks as I intended:
But on the emulator, the button takes the entire width of the screen:
I've read the specification more than once, but couldn't get what my mistake is,
How do I write the button xml so that the button will look on the emulator (and all devices..) as in the Eclipse's Graphical Layout?
Thanks.
The width of button is due to #drawable/button_bg. If the background image is constant for different densities then hdpi would should button small in size, on the other hand, mdpi and ldpi devices would take more width to show the same button. Confirm that you have different background images and they are relative to their densities.
P.S. Run three different emulators with hdpi, mdpi and ldpi densities respectively and observe the layout.