I want to use precise layout on Nexus One, my code is like this:
<?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">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="90dp">
<ImageView
android:layout_width="5dp"
android:layout_height="fill_parent"
android:src="#drawable/d10" />
<ImageView
android:layout_width="94dp"
android:layout_height="fill_parent"
android:src="#drawable/d5" />
<ImageView
android:layout_width="94dp"
android:layout_height="fill_parent"
android:src="#drawable/d6" />
<ImageView
android:layout_width="94dp"
android:layout_height="fill_parent"
android:src="#drawable/d7" />
<ImageView
android:layout_width="94dp"
android:layout_height="fill_parent"
android:src="#drawable/d8" />
<ImageView
android:layout_width="94dp"
android:layout_height="fill_parent"
android:src="#drawable/d9" />
<ImageView
android:layout_width="5dp"
android:layout_height="fill_parent"
android:src="#drawable/d10" />
</LinearLayout>
</LinearLayout>
But it turns out on Nexus One, the screen width is not 480 px. So this LinearLayout will exceed the screen width.
How should I fix this?
Several things
1) It's not recommended to use px when designing android GUI
check available resources or this question to learn the differences between px, dp and sp.
2) If you are using drawables, which I presume are images, use
android:layout_width="wrap_content"
android:layout_height="wrap_content"
instead of trying to adjust the container (ImageView) to the content (the image). Android will take care of the rest. Learning when to use wrap_content or fill_parent is key to GUI design.
3) Nexus One IS 480 px wide. The problem lays in your layout design, just keep on working and you'll learn the tricks that make UI design much easier in Android than most of other platforms.
Also, I asume this code snippet is contained in a View, you've not declared the namespace. Maybe you have something wrong in the rest of the layout.
I hope this helps.
Related
I have created a layout and define following Xml in layout file.
<LinearLayout 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"
tools:context="com.example.kirmani.myapplication.MainActivity"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorPrimary"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#color/colorPrimaryDark"
/>
<ImageView
android:layout_width="405dp"
android:layout_height="260dp"
android:background="#color/colorAccent"
/>
</LinearLayout>
This is filling my whole screen perfectly in Nexus 4 screen. but when i preview all screens, its giving very weird look in some screens.
I am using DP, it should maintain same display according all screens, but it is not working like that. Kindly guide me..
Actually dp maintains same display according all screens. It's because every device are not supposed to be same width in dp. Some devices has 480dp, some of them 360dp etc.
If you want to your image fit your width, you must use
<ImageView
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#color/colorAccent"
/>
do not use fixed dp.
EDIT:
If you want to height fill up, use this:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
/>
Your 3rd imageview width should be match parent. Like this
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
/>
instead of
<ImageView
android:layout_width="405dp"
android:layout_height="260dp"
android:background="#color/colorAccent"
/>
We are talking Android ABC here. You need to understand how this works instead of looking for concrete answers to concrete problems, as I already recommend you here.
Every device has an specific dimension in DPs. Nexus 4 is 384x640 but is the only one in your image with those dimensions. Please realize that is not that "is looking weird on some screens", in fact is gonna look weird on all screens that are not 384x640. For instance, the Nexus One in your image (which is 533dp x 320dp) is not working as expected, but is more difficult to realize because what is wrong is outside your view, but the views are bigger than the screen. Same with the Nexus S.
If you are trying to get a view from edge to edge (all the screen width), then use match_parent. Do not specify a size in DPs.
If you are trying to distribute views horizontally or vertically, please use an specific ViewGroup and/or weights, or you can use the Percent Support Library for doing things like this or this. Take a look at this tutorial for more.
Anyway, here you have your copy&paste code.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:background="#color/colorPrimaryDark"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.6"
android:background="#color/colorAccent"/>
</LinearLayout>
I am pretty new to android programming and i was hoping you could help me out with something. I have set a background in an xml file and i am trying to align a image button to a specific area of my background. I have tried using density pixels however it is not precise enough and the button now covers an area of the background i would like to be visible. Any ideas on how i could fix this?
Many thanks,
Alex
My code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/home_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="93dp" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="341dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/workbench" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</LinearLayout>
You can always try using px instead of dp, however the whole point of dp is that they will scale automatically for any screen. If you use px I suspect that it will only work well on the current screen resolution that you're testing on. You would have to define px values for numerous screen resolutions/densities to ensure that your app displayed correctly across different devices.
For a game I have six buttons which look good on mdpi. The 4 left buttons are 100x100px:
If I switch to hdpi, it looks like this:
The xml looks like this (I omitted all but one button to keep it simple):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gameContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:orientation="vertical" >
<com.mydomain.mygame.game.GameSurface
android:id="#+id/gameSurface"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_game" >
</com.mydomain.mygame.game.GameSurface>
<RelativeLayout
android:id="#+id/controlButtonContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button_left"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"
android:contentDescription="#string/button_left"
android:background="#drawable/control_button" />
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:id="#+id/emptyBar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
These attempts didn't work:
I tried to use 100dp instead of wrap_content. I tried src instead of background as well as I tried different scaleType attributes.
Probably I could calculate the scaling factor in code, but I can't imagine that this is the proper way to do that. Why does it not scaled automatically, because what are dp then for? So how can I configure the right ratio in xml?
Please avoid use of specific size like 100dp . Try to use WRAP_CONTENT or MATCH_PARENT . and for different different screen sizes please use drawable-folders like drawable-hdpi and drawable-mdpi etc . And Put corrosponding images of android:background="#drawable/control_button" in all its specific folders .
Refer these linkes for multiple screen sizes :
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
I have this (simplified) layout.-
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_pattern" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/dimen5"
android:layout_marginTop="#dimen/dimen15"
android:background="#drawable/background_grey" >
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:contentDescription="#string/app_logo"
android:src="#drawable/app_logo" />
</RelativeLayout>
</RelativeLayout>
Which renders good in eclipse layout editor: my app_logo image over background_grey, which is over background_pattern image. But when I run on device, background_grey renders over background_pattern as expected, but also over its child app_logo.
Am I doing something wrong or is this some kind of bug when nesting several layouts with background attribute?
As a workaround, I suppose I can replace background attributes for ImageViews, but I'm pretty sure this may work and I'm missing something obvious.
Notes
Working with the latest ADT and deploying on Nexus 4, 4.2.2
background_grey is a 9-patch image
My android app currently has two layouts for its splash screen, portrait and landscape. Both use the same simple format - an image that's the same size as the screen, held in a simple linear 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"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/splash_p"
/>
</LinearLayout>
The image used is 320w x 480h and Android automatically resizes it to fit the screen, irrespective of the screen size of the device. Obviously, the image isn't as sharp when resized for a tablet for example.
I should point out here that my goal is to reduce the installed size of the final application as much as possible, and I'm aware that I could include different layouts and sizes of the same images for each differing screen size.
My splash screen is made up of the app's name in the top third of the screen, and then an image in the bottom two thirds of the screen. In order to save memory, I want to crop the app name and the image into two seperate images, and then display them in a linear vertical layout for devices held in portrait mode. I'll then use a linear horizontal layout of image and then app name for landscape mode.
For the portrait layout I've got this:
<?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">
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
<View android:layout_height="45dp" android:layout_width="45dp" />
<ImageView android:layout_height="fill_parent"
android:src="#drawable/splashtext"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_width="fill_parent"></ImageView>
<View
android:layout_height="35dp"
android:layout_width="35dp" />
<ImageView
android:scaleType="fitCenter"
android:src="#drawable/splashpic"
android:layout_height="fill_parent" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
When I display the above in eclipse, it looks ok for smart phones, but the images are not scaled up when displayed on a tablet, although I'm using the android:scaleType="fitCenter" argument. I've tried using dips instead of fill_parent in the imageview layout_width and layout_height but that doesn't work either.
What am I doing wrong? Is there another way to do this?
Thanks
I've edited the question to include this revised XML based on #KaHa6u 's help below. So now I have:
<?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">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView android:layout_height="wrap_content"
android:src="#drawable/splashtext"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_weight="1">
</ImageView>
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView
android:scaleType="fitXY"
android:src="#drawable/splashpic"
android:adjustViewBounds="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="4"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
Which scales up vertically, but not horizontally, so I end up with tall thin images when the screen size increases.
#basinbasin
I just encountered a situation very similar to the one you explained. I needed to have an ImageView on top of the layout, which had to be stretched ONLY HORIZONTALLY and retain its height when the phone gets into landscape orientation. I succeeded with just this:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/main_header"
android:scaleType="fitXY"
/>
and, of course, with activity's attribute:
<activity android:configChanges="keyboardHidden|orientation">
Hope this helps. Thank you.
The fitCenter scaleType maintains the original aspect ratio. Have you tried the fitXY scaleType? Matrix.ScaleToFit Documentation
Did you try "fill_parent" as the android:layout_height and android:layout_width values for the ImageView you want stretched?
I guess that the "wrap_content" setting does not let the system know the bounds to which to resize the image. Please try that and let me know of the results.