Screenshot of first image
Screenshot of other phoneI have a LinearLayout ,RelativeLayout,LinearLayout and a ImageView in it.This is basically a landing page of my app,inspite of using the dp my output is not same on the all device. There is the screenshot of two different phones. Thanks in advance
<LinearLayout
android:id="#+id/lb_LinearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/lb_Relative_HomeScreen"
android:layout_width="match_parent"
android:layout_height="450dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="350dp">
`` <ImageView
android:id="#+id/lb_Background_Image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</LinearLayout>
<TextView
android:id="#+id/lb_Welcome"
android:text="#string/welcome"
android:gravity="start"
style="#style/Heading2.yellow"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="start|center_vertical"
android:layout_above="#+id/lb_Descrption"
android:layout_marginLeft="20dp"
/>
...
</RelativeLayout>
</LinearLayout>
You need to create different layout files for the major screen density buckets and screen sizes. This way you will be able to fine tune your layout to look consistent across multiple displays.
You can easily create a new layout for a specific bucket from the preview window:
Click on this icon in the left corner.
Then select Create Other....
A popup window will appear then select from the Available Qualifiers the size item for the different screen sizes of Density for the different density buckets.
After you selected the desired item press the >> key, and you can select the appropriate bucket for witch you wish to create a new layout file.
After this you press ok and the android studio creates for you a copy of the current layout and places it in the appropriate folder for you, all that you need to do is to edit it so that it look the way you want it to look on the specific layout.
You should use ScrollView like this :
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/lb_LinearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/lb_Relative_HomeScreen"
android:layout_width="match_parent"
android:layout_height="450dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="350dp">
`` <ImageView
android:id="#+id/lb_Background_Image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</LinearLayout>
<TextView
android:id="#+id/lb_Welcome"
android:text="#string/welcome"
android:gravity="start"
style="#style/Heading2.yellow"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="start|center_vertical"
android:layout_above="#+id/lb_Descrption"
android:layout_marginLeft="20dp"
/>
...
</RelativeLayout>
</LinearLayout>
And to be more compatible with all the devices, try to use "wrap_content" or "match_parent" for height and width. If images are making you to declare dp in your code, then please go through this link :
https://developer.android.com/guide/practices/screens_support.html
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 read everything I can find, and I just can't figure this out. I have an XML with a heading, then a listview, and then 2 buttons on the bottom row. In order to make the layout look perfect, I have "hardcoded" the size (467dp) of the listview. This is fine on my Samsung Galaxy S4, but I'm not sure it will look appropriate on other phones of slightly different sizes. I tested it on a Galaxy 8" tab and it did not look right. I then tested it on a 10.1" tab and it (again) did not look right. Basically the bottom buttons were up in the middle of the screen. I got around this by creating layouts for sw600dp and sw720dp. For each of those I had to hardcode a different size for the listview. It would seem to me that there is a better way to have a heading-listview-button XML that would display (relatively) the same on any device. Can anyone please tell me how to to alter my XML so I don't have to hardcode the size of the listview?
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/title_line"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="#string/workout_locations">
</TextView>
<ListView
android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="467dp"
android:longClickable="true" >
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/help_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="#string/help_description"
/>
<ImageButton
android:id="#+id/add_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="#string/add_description"
/>
</LinearLayout>
</LinearLayout>
android:layout_weight="1 add this in the buttons
I wonder if this might help:
ensure that the entire layout is a relativeLayout, and inside it, put the listview
<ListView
android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp" // the size of the buttons height
android:longClickable="true" >
</ListView>
and below it another relativelayout with the buttons inside it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/help_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/help_description"
/>
<ImageButton
android:id="#+id/add_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/add_description"
/>
If this still causes an issue, then you could write :
android:layout_above="#+id/relButtonLayout"
inside the listview.
Use layout_weight to take up as much room that can be afforded.
<ListView android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:longClickable="true" >
</ListView>
If you've hardcoded some sizes, you can bet it won't look good in most of the devices. In order to do that, it's always better using layout_height and layout_weight set to wrap_content or match_parent depending on what you need.
There's another important tool for the case you describe: layout_weight, as you might have already used. Messing with a ListView to fit the design you want can be hard at the first time, but once you discover how to set up its layout it's easy for the rest of them.
In my case, this definition always work as should:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ListView
android:id="#+id/mylistview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical" >
</ListView>
</LinearLayout>
Take a look at it: I've set a singular LinearLayout (in this case because it has more views than just the ListView I'm showing), but I'm setting the weight of that ListView to 1, being the sumWeights of that LinearLayout 1. This way you assure yourself the ListView will expand as long as it can, without the needing of hardcoding values.
It's just a matter of playing around with it for a while, but the less values you hardcode, the more adaptable will be on other devices.
I am using android2.2.I have created drawable-mdpi,drawable-hdpi,res/drawable-xhdpi.
I created layout folder for large,medium,small screen size.I used in the manifest file.Still i am unable to get support for multiple screen size.For example image size and layout margin remain same for large,medium,small screen size.Can anyone help me?
name layout folders with layout-small,layout-normal,layout-large,layout-xlarge.It works according to mobile dpi.It doesnot depend on screen size.
if u want to create layout for all screen, u can use weightsum for manage them.
this sample code may help u.
<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"
android:orientation="vertical"
android:weightSum="1.0" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.3"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:orientation="vertical"
android:weightSum="1.0">
</LinearLayout>
</LinearLayout>