im working on a design and testing it on:
Galaxy Nexus 3
Samsung Galaxy S3
It seems like the S3 doesn't behave so well with some relative layout commands such as:
Layout_toStartOf
Layout_toEndOf
Simplified problem down below:
Code
<?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:background="#android:color/white" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button1"
android:layout_toEndOf="#id/button1"
android:text="Button" />
</RelativeLayout>
Images
In editor and on Nexus 3
On Samsung S3
Since im working a lot with scaling and pictures relating to each other, this function is very importaint.
I'd appreciate if someone could share their experiences with me.
Thanks
edit: typos
first of all there is no resource such as android:layout_toEndOf="#id/button1" .
there are only 2 resources for relative layout to arrange according to any widget by its id toLeftOf and toRightOf check your code.
Edit:
toEndOf and toStartOf is added recently in API level 17 i.e. android 4.2 versions so it will not be found in lower versions of android
Have had the same problem:
I used the ToStartOf and toEndOf to align a graphic of fixed size to a 1px wide graphic that was scaled.
[Graphic 1] <-- [Graphic 2 (1px scaled to 20dp)] <-- [Graphic 3]
They wont align correctly when you build it from the right to the left. When you say toLeftOf a scaled graphic it will the new graphic left of the original size of the picture and not at the end of the scaled picture - Thus overlap.
[Grap[hic 1 Gra]phic 2][Graphic 3]
A workarround coud be to build the graphic from Left to the right, put all the elements in a relative layout as a Module and align the different modules to each other.
Thx for the info with the API level with the ToStartOf and ToEndOf functions!
Related
I have one designing in android that images are showing different in 1440 X 2880 screen and 1440 X 2560 screen. How to do this correctly? Specially for the screen 1440 X 2880. I have created hdpi, mdpi,xhdpi,xxhdpi,xxxhdpi images still i am not getting the result.
<?xml version="1.0enter code here" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/view_toolbar_logo"
android:id="#+id/relToolbar">
</include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_below="#+id/relToolbar"
android:layout_marginRight="#dimen/_12sdp"
android:layout_marginLeft="#dimen/_12sdp"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/test"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/im1"
android:background="#drawable/ranking"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/im1"
android:layout_marginTop="#dimen/_10sdp"
android:background="#drawable/coin"/>
</RelativeLayout>
An images are from the .psd to .png with the help of adobe Xd tool I need design like first snap in image
Based on what has been said on the comments I think your problem comes from misunderstanding how to set constraint to views using android layouts and views, and not from the resolution of the screens you're working on. Reading on the topic will surely help you out.
I see two solutions to your problem, both of them include changing the layout you're using. On one hand, you could change your RelativeLayout for a LinearLayout and google some tutorial on view weights, and on the other hand you could use the more modern ConstraintLayout and read a little about how linear groups and chains work.
I'll leave links to the docs here and here to help you get started
I wonder how to make application look the same on different devices. I have read Supporting Multiple Screens many times but I still can't understand how to live.
Here is a sample layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World, MyActivity"
android:textSize="30sp"
/>
</LinearLayout>
There is Galaxy S II (480x800) and Sensation XE (540x960). They are both hdpi, physical screen size is almost the same. I expected to see the same looking on both devices but in fact text on 540x960 is smaller then on 480x800:
(left is 480x800, right is 540x960)
I tried to specify text size as dimension resource and make separate folder values-w540dp but it took no effect.
How do you guys make your application look the same on different hdpi devices?
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAppearance="?android:attr/textAppearanceSmall"
These atributes may solve your problem here.Otherwise you have to setup your layout dynamically with some ratios(or factors you generate like :textSize=factor*height) using your screen height and width.
Have a look at metrics , if you specify your textsize in dp (Density-independent pixels) it should work. The default size for text should be around 14dp. (TextAppearance.small)
2 Sites that might be helpful as there are some nuggets in both related to your problem, however, neither is an exact 1-2-3 how to correct the issue you're seeing:
http://www.pushing-pixels.org/2011/11/08/deep-dive-into-responsive-mobile-design-part-1.html
http://www.alistapart.com/articles/fluidgrids/
So my problem is simple- I want to use XML layouts to precisely control the positioning of widgets on multiple devices. To do this, I thoroughly read the google docs on supporting multiple devices. According to this part, the WVGA854 and HVGA are both considered "Normal screen" size. So theoretically, positioning a widget on WVGA854 should look the same as with HVGA. However, the resultant screenshot shows otherwise.
The widget appears relatively higher placed on the WVGA854 skin. The XML code is shown below, and was placed under the layout-normal/ folder:
<?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:orientation="vertical" >
<ImageButton
android:id="#+id/button1"
android:src="#drawable/icon_unlock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:text="Button" />
</RelativeLayout>
The drawables I constructed are in the proper ratios (3:4:6:8 as recommended). So why does this positioning mismatch happen? I beginning to think that using XML to position things is quite fruitless. My app requires very accurate positioning of widgets so even this slight mismatch is a problem. Any help how I can remedy this?
EDIT:
What I want is for the widget to be placed in a manner such that the ratio of margin from top to the margin from bottom is exactly the same across devices. From the screenshot, you can see that this ratio is not the same for WQVGA854 and HVGA.
"Normal Screen" size does not mean that screens have the exact same number of dip. You need to think of it as a bucket which contains a number of different screen sizes which are all similar in physical size.
so using fixed size margins and paddings is not (easily) going to achieve the effect you need. So please clarify your question and give an example of what you exactly want to achieve.
I have a layout that features six buttons. All of them have the size of 72x72dip, so they appear to be larger on small screens and vice versa.
How can I tackle this problem? I want the buttons to be relatively the same size (eg 10% of the screen's width), but I don't know how to do it.
This is how my layout looks:
The layout's sourcecode can be found here.
1 - Did you fix all you 'image views' to layout_width & height of 72dip ?
2 - Normally 72dip is the same thing on every screen size... But you still can have 3(or 4 if you support XHDPI) resolution of your images...
2 - Add 4 différent fonder for you Drawable :
2.1 drawable
2.2 drawable-ldpi
2.3 drawable-mdpi
2.4 drawable-hdpi
Consider the following ratio for your images :
ldpi is 3
mdpi is 4
hdpi is 6
So make sure to make HDPI images first, so you can isealy resize other images applying ration 1.5 and 2 (just divide by 2 for LDPI for example).
3.By the way, why did you just did it all by yourself ? Seems you are on android 4.0, why don't you just use the new "DashBoard" class from Android ?
I usually do this by setting the width and height to wrap_content and then tweaking the layout_weight on the ImageButton widgets so that each button takes up the same amount of space. I usually do scaleType="center_inside" to make them line up nicely. Then pad around the edges of the TableView with margins as necessary.
Few quick observations:
a. You do not need TableLayout, just use LinearLayout
b. You do not need separate ImageView and TextView, you can use Button and image to it using
android:drawableTop="#drawable/"
c. Never use absolute values in width/height of any views, so use wrap_content.
Sample Layout should be like this:
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical">
<!-- Row 1 -->
<LinearLayout
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1.0"
android:orientation="horizontal">
<Button
android:layout_height="wrap_content"
android:layout_width="0"
android:layout_weight="1.0"
android:text="Preferences"
android:drawableTop="#drawable/Preferences" />
<Button
android:layout_height="wrap_content"
android:layout_width="0"
android:layout_weight="1.0"
android:text="Preferences"
android:drawableTop="#drawable/Preferences" />
</LinearLayout>
.
.
.
</LinearLayout>
</LinearLayout>
I've recently developed an android game using Eclipse. I'm really a newbie at this so forgive me if what I will ask is too simple. >.<
The application runs and looks perfectly in the Android emulator installed in Eclipse. However, when we tried to install it in a Samsung Galaxy tab which obviously has a bigger screen than the emulator, the layout gets messed up. Buttons are not in their right order etc. I do have screens using XML layouts and some are simple canvases with sprites. Any idea how I could retain the original layout in the emulator to the tablet? I've tried using RelativeLayout instead of LinearLayout but it still doesn't work.
Any help would be appreciated. Thank you!
One XML file code and it's corresponding screen from emulator shown below.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/MenuLayout" >
<Button android:id="#+id/btnNew"
android:layout_width="140px"
android:layout_height="65px"
android:layout_marginTop="160px"
android:background="#drawable/newgame"/>
<Button android:id="#+id/btnInst"
android:layout_width="140px"
android:layout_height="65px"
android:background="#drawable/instructions" />
<Button android:id="#+id/btnCredits"
android:layout_width="140px"
android:layout_height="65px"
android:background="#drawable/credits"/>
<Button android:id="#+id/btnExit"
android:layout_width="140px"
android:layout_height="65px"
android:background="#drawable/exit"/> </LinearLayout>
You need to use dpi and not pixels.
Here's a good resource.
http://developer.android.com/guide/practices/screens_support.html
As others have mentioned, you should be using "dp" instead of "px". These are device independent pixels and will scale to match different screen resolutions.
You should also follow this guide on how to use a folder structure to support different screen resolutions and sizes.
Cheers
Based on your edited question, and on the comments, here is a way to change your layout to a relative one:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/MenuLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/btnNew"
android:layout_width="140dip"
android:layout_height="65dip"
android:layout_marginTop="160dip"
android:background="#drawable/newgame"
android:layout_centerHorizontal="true"
android:layout_above="#+id/btnInst" />
<Button android:id="#+id/btnInst"
android:layout_width="140dip"
android:layout_height="65dip"
android:background="#drawable/instructions"
android:layout_centerHorizontal="true"
android:layout_above="#+id/btnCredits"/>
<Button android:id="#+id/btnCredits"
android:layout_width="140dip"
android:layout_height="65dip"
android:background="#drawable/credits"
android:layout_centerHorizontal="true"
android:layout_above="#+id/btnExit"/>
<Button android:id="#+id/btnExit"
android:layout_width="140dip"
android:layout_height="65dip"
android:background="#drawable/exit"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="25dip"/>
</RelativeLayout>
Though, if you want a perfect solution, you need to design the buttons and background pictures in 3 sizes, and put them in the respective folders drawable-hdpi, drawable-mdpi and drawable-ldpi(and for tablets, from 2.2, you can also have drawable-xhdpi!). Read carefully this article and test your layout in emulator for as many screens as possible (from ADT 10.0 it is really easy to preview your layout for different configurations directly from Graphical Layout tab in xml).
Also, android:layout_marginTop="160dip" and android:layout_marginBottom="25dip" are not really useful in a Relative Layout. I would suggest you to try a 9-patch picture for your background, with only the wood board stretchable for the buttons (though I am not sure it's working like that). Alternatively, I would have a separate picture with Main Menu, that I'd place above the buttons, and keep in the background only the trees and everything else.
itz better to provide diffrent layout for diffrent screen size . i also have same issue when developing a game.nw its done.
u may have provided layout ,so u just provide
layout-large,small,and xlarge.and vice verse to ur layouts u must provide drawable folders like hdpi,mdpi,ldpi,xdpi folders and u must save diffrent sized images 58*58,75*75,100*100 for following then u check it u will get it.