I created a layout with the prebased (480x800) density. I have been using this since I started learning android (9 mths) and now it was time to test my app on other phones. I tested it on three phones with 480x800 resolution and was fine, until I tested it on one with 320x480 and 240x320. I have used px-s as width and height, paddingTop etc. everywhere.
I checked the app in the emulator (created different avd-s for different resolutions) and I cannot see the whole layout, as it is bigger than the screen (testing it only in eclipse). It has 4 images with "wrap_content" width and height settings.
So I checked the android documentation. I have not created other layouts or anything else, but replaced the px-s with dp-s. It is the same.
I created smaller buttons (see below) with 190x60px resolution and put them into the ldpi folder, but there was no big advance. Maybe because the textsizes of the textviews are the same and the 2 textviews takes 1/3 of the place of the display in case of the 240x320 resolution (while only 1/6 in case of the 480x800). (So the texts look huge in the small resolution compared to the large resolution)
Please tell me what should I do to make the layout look in this 320x480 resolution like in the 480x800.
Size of gradientbg: this is an .xml file for a shape, so no physical size.
Size of buttons (images): 380x150px hdpi (or 190x60px in ldpi folder)
<?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"
android:background="#drawable/gradientbg"
>
<TextView
android:id="#+id/TextView00"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#E30000"
android:textColor="#FFFFFF"
android:gravity="center_horizontal|center_vertical"
android:textSize="26dp"
android:height="40dp"
android:textStyle="bold"
android:text="Main menu"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App"
android:textSize="30dp"
android:textStyle="bold"
android:paddingTop="20dp"
android:layout_gravity="center_horizontal"
android:textColor="#FFB300"
/>
<Button android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dip"
/>
<Button android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_2"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
<Button android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_3"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
<Button android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainbutton_4"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
/>
</LinearLayout>
When you normally define layouts in dp units, you ensure that the layout stays the same on devices in the same density bucket. But when you try it on a tablet (xlarge) or a small screen, it won't scale right. This tool is made to have your app work with the whole range of devices (small/normal/large/xlarge). It scales your layout xml-files from the baseline density you were originally designing for.
http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html
Related
I'm trying to support different screen sizes as shown on guide: https://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts.
I have 5 different drawable folders:
drawable(image size 40x48png)
drawable-mdpi(image size 80x96png)
drawable-hdpi(image size 120x144png)
drawable-xhdpi(image size 160x192png)
drawable-xxhdpi(image size 210x252png)
My project includes 5 different layout folders for each size:
300dp, 330dp, 480dp, 600dp, 720dp. Every folder has the same layout.xml file.
My layout code:
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_margin="15dp"
android:text="Truuuuu"
android:textColor="#000000"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.39"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/textView2"
android:layout_marginTop="60dp"
android:background="#ffffff"
android:orientation="horizontal"
android:id="#+id/relativeLayout">
<ImageView
android:id="#+id/off50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:src="#drawable/off50" />
<TextView
android:id="#+id/akcija"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="pewpew!"
android:textSize="20sp"
android:layout_alignTop="#+id/off50"
android:layout_alignParentEnd="true"
android:layout_toEndOf="#+id/off50"
android:textColor="#000000"/>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/off50"
android:layout_alignParentEnd="true"
android:text="pewpew"
android:textColor="#000000"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:layout_alignStart="#+id/relativeLayout"
android:layout_below="#+id/relativeLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/idk"/>
</RelativeLayout>
My question is.. I do have different image folders and image files right? I made layout folders as well. My text isn't scaling either, on layout-sw720dp, for example, I can almost read the text.
What should I do to support text scaling? Why the image isn't being scaled on different screen sizes?
Ok, you're confused.
If you have the same layout file in each sw folder- don't. You only write a new layout file if you have different screen layouts for that size. Note that means entirely new or deleted elements, or changed positions. If you're just changing values, you use values files.
Remember that page you linked, while a good resource, mentions multiple things you can do. You're not supposed to do all of them, in fact some of them are contradictory. The right thing to do depends on how you want things to look.
For your image scaling- you're scaling based on screen density. That means all devices with the same density will use the same drawable, which will make it look the same physical size, but not scale relative tot he size of the device. That may or may not be what you want. If it isn't, you probably want to define a fixed size in dp of the image or make it match_parent and use a scaleType to scale it.
For text size- you're putting a fixed text size of 20sp everywhere. That will make it the same height on all devices. Generally making text bigger on different screen sizes isn't done much. If you want it, make the 20sp a dimension and set different values for it in dimen.xml files based on the size.
Helping you more than this really requires more info- what is it you're trying to achieve and what is it you're getting.
I have some problems with supporting my layouts for different phone/tablet screensizes. My layouts dosn't fit or scale on all screens probably. Some screen sizes give too much space and other dosn't have room for all views.
I have tried to generate different layouts with different qualifiers like: densities, dimensions and sizes in PX and with large/small/x-large qualifiers.
But I can't really figure out what qualiferes I should use to completely fit all screens.
This is a description of how my layouts behave with different screens (tested with genymotion emulator)
480px x 800px 240dpi (S3 Mini): Views dosn't fit in heights.
480px x 800px 120dpi: (Emulator): Views dosn't fit in heights
480px x 800px 320dpi: Too much free space around the views.
600px x 1024px 240dpi: Perfect fit!
600px x 1024px 420dpi: There is almost no space to show anything. maybe 2-3 views at max
1440px x 2560px 560dpi: a little bit of free space
1440px x 2560px 640DPI: Perfect fit!
1440px x 2560px 320DPI: Too much free space around the views
Here is screenshots examples of how the layout Stats scale with different screens:
Samsung S3 MINI: 480px x 800px 240dpi: https://www.dropbox.com/s/kvxggql80ivcmlp/galaxys3mini.png?dl=0
Samsung Galaxy S7: 1440px x 2560px 640DPI: https://www.dropbox.com/s/ivjd6a0zgc81oqy/galaxys7.png?dl=0
Nexus 9 API 23 2048x1536 xhdpi:https://www.dropbox.com/s/r70h4da1xcf2lhi/nexus9.PNG?dl=0
What qualifiers should I use?'
The layouts xml:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/arion_darkblue">
<TextView
android:id="#+id/stats_title"
style="#style/fragment_titles_style"
android:layout_alignParentTop="true"
android:text="Stats" />
<RelativeLayout
android:id="#+id/statsgroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/stats_title"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp">
<ImageView
android:id="#+id/stats_distance_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/ic_stats_distance" />
<TextView
android:id="#+id/stats_distance_txt"
style="#style/fragments_textstyles"
android:layout_below="#id/stats_distance_img"
android:text="0,0 Km" />
<ImageView
android:id="#+id/stats_jump_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="35dp"
android:layout_toRightOf="#id/stats_distance_txt"
android:background="#drawable/ic_stats_jump" />
<TextView
android:id="#+id/stats_jump_txt"
style="#style/fragments_textstyles"
android:layout_below="#id/stats_distance_img"
android:layout_marginLeft="35dp"
android:layout_toRightOf="#id/stats_distance_txt"
android:text="00" />
<ImageView
android:id="#+id/stats_transition_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="65dp"
android:layout_toRightOf="#id/stats_jump_txt"
android:background="#drawable/ic_stats_transition" />
<TextView
android:id="#+id/stats_transition_txt"
style="#style/fragments_textstyles"
android:layout_below="#id/stats_distance_img"
android:layout_marginLeft="80dp"
android:layout_toRightOf="#id/stats_jump_txt"
android:text="00" />
<ImageView
android:id="#+id/stats_intensity_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_toRightOf="#id/stats_transition_img"
android:background="#drawable/ic_stats_intensity" />
<TextView
android:id="#+id/stats_intensity_txt"
style="#style/fragments_textstyles"
android:layout_below="#id/stats_distance_img"
android:layout_marginLeft="55dp"
android:layout_toRightOf="#id/stats_transition_txt"
android:text="0000" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/stats_symmetric_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/statsgroup1"
android:layout_marginTop="50dp"
android:paddingLeft="30dp"
android:paddingRight="30dp">
<TextView
android:id="#+id/stats_sym_txt1"
style="#style/fragments_textstyles"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:text="50%" />
<ImageView
android:id="#+id/stats_symmertic_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/stats_sym_txt1"
android:background="#drawable/ic_stats_symmetric" />
<TextView
style="#style/fragments_textstyles"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/stats_symmertic_img"
android:text="50%" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true">
<TextView
android:id="#+id/stats_rotation_txt1"
style="#style/fragments_textstyles"
android:layout_alignParentLeft="true"
android:layout_marginRight="10dp"
android:text="50%" />
<ImageView
android:id="#+id/stats_rotation_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/stats_rotation_txt1"
android:background="#drawable/ic_stats_rotation" />
<TextView
android:id="#+id/stats_rotation_txt2"
style="#style/fragments_textstyles"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/stats_rotation_img"
android:text="50%" />
</RelativeLayout>
</RelativeLayout>
Have you heard about using several dimens.xml file?
Having different dimens but one layout
That way you could have one layout, but could define sizes of elements from different dimens.xml-s which are describing dp sizes separately for each size you'd like to support.
Example from the offical android page:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textview_height">25dp</dimen>
<dimen name="textview_width">150dp</dimen>
<dimen name="ball_radius">30dp</dimen>
<dimen name="font_size">16sp</dimen>
</resources>
Then you can use these values from the layout:
<TextView
android:layout_height="#dimen/textview_height"
android:layout_width="#dimen/textview_width"
android:textSize="#dimen/font_size"/>
If you have several dimens.xml but only one layout.xml for a page, it's easier to change them consistently.
Design layout for tablet sizes
Also, consider checking the smallestWidth resource using for tablet sizes, you can handle larger screens easily width this, adding dimens.xml and/or layout to folders like layout-sw600dp/ and values-sw600dp/.
More info here
I have a listView and in the row of listView I have 2 TextViews side by side.
First TextView has layout_width of 180dp and second of 5dp
It works fine on large screens but on small screens text goes off screen.
I was thinking that dp would itself adjust properly on all screen sizes but it is not the case.
Below are the Examples from Large and Small screens
On Larger screen
This is a msg from TextView1 Small msg from TextView2
On Small screen
This is a msg Small msg
If you observe here, the last 2 words from TextView1 and from TextView2 are missing on small screens.
I want everything to come in 1 line without scroll.
How to resolve this?
Please find my xml below
<TextView
android:id="#+id/tv1"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/tv2"
android:layout_width="5dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/tv1"
android:layout_toRightOf="#+id/tv1"
android:layout_alignParentRight="true"
android:textColor="#ff0000"
android:gravity="right"
android:layout_marginRight="5dp"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall" />
That's not how dp works. They are useful when you have screens with different pixel densities, not with different absolute sizes.
A screen can have dimensions of 960x540 pixels, with a hdpi density. This means that the screen has a total width of 360dp, since the base reference for dp is mdpi and hdpi=1.5*mdpi.
So in this case, if you define a view to be 400dp wide, it will go off screen.
Would it be an option to express those widths in terms of percentage instead? Your example sounds pretty extreme, but here goes:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="36"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/tv2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignBaseline="#+id/tv1"
android:layout_toRightOf="#+id/tv1"
android:layout_alignParentRight="true"
android:textColor="#ff0000"
android:gravity="right"
android:layout_marginRight="5dp"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
But seriously, what kind of text can you possibly fit into 5dp?
I am able to solve it now by creating different styles for different screens. I have now values-ldpi, mdpi, hdpi, xhdpi and xxhdpi folders and in each of them I have given different styles and now the UI looks better even on smaller screens.
Im trying to write app witch will look similar on all (or most) android phones. I have a problem with two phones: Samsung Galaxy Ace 2 and Samsung Galaxy mini 2. Layout that takes whole screen in galaxy ace is too large for galaxy mini.
First I tried to specify different dimens for ldpi and mdpi, but it appeared that both phones used mdpi values. Then I was trying too distinguish them by screen sizes and made folder values-normal-mdpi. I thought that ace should be "large", it has 480x800 resolution and should be large accordinng to documentation: Supporting Multiple Screens.
However both phones take values from the "normal-mdpi" folder. On the other hand I have seen application that look identical on both phones, how can I do this?
Edit:
imagine I have a very simple layout only with simple views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" /></LinearLayout>
The last button is not visible on smaller phone. What shoud I do if I want this to look identical on both?
Well, it turns out that none of the two is an mdpi device:
Samsung Galaxy Ace 2: WVGA (480x800) resolution (about 244 dpi) = hdpi
Samsung Galaxy Mini 2: QVGA (240×320) resolution (about 127 dpi) = ldpi
So, the drawable folders for your graphics should be:
res/drawable-ldpi
res/drawable-hdpi
Please note that you should provide pngs at the proper resolutions (120 and 240 dpi).You can choose to provide a normal resolution graphics (160 dpi, which is mdpi) and it will be scaled to 120 dpi (0.75x) for ldpi devices and to 240dpi (2.0x) for hdpi devices
I think is a very good practice the use of dimensions but you must choose your classifiers properly. You must know that ldpi, mdpi, hdpi, xhdpi and xxhdpi stand for the density of pixels in the screen of devices.
In this case you're exposing, you may wanna try the "smallest width" classifier. For example, if you have 2 screens, both mdpi, but one of them is 240 dips width and the other is 320 dips, you should place dimensions under the folders "values-sw240dp" and "values-sw320dp".
Hope it helps.
You shouldn't really need to use different dimensions for different screen sizes, except in special cases. Instead, use the attributes in your layout.xml to define how the elements in your layout should scale. For instance, android:layout_width = "match_parent" will always match that element's width to the width of the parent, no matter what the screen size. Check out this link about xml layouts to get started.
I put 2 buttons, with wrap_content size, but as device is bigger, buttons are upper, I cannot figure how to fix them, so on all devices to have the same position. Is there a solution not to cover the head of this guy, as example.
Layout.xml
<RelativeLayout 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:background="#drawable/background"
tools:context=".BasicScreenActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="102dp"
android:background="#drawable/custom_button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:background="#drawable/custom_button2" />
</RelativeLayout>
//try like this below one
#remove the margin top 102dp
#don't use button background image use color with white stroke
#make your button width as match parent and minheight= 100dp as ur need.
#add android:gravity="center" to your parent layout
<RelativeLayout 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:background="#drawable/background"
android:gravity="center"
tools:context=".BasicScreenActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/holo_green_dark" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:background="#android:color/holo_green_dark" />
</RelativeLayout>
Android is running on multiple devices with different screen resolutions, here is how to support them all: Supporting Multiple Screens
Basically we have following screens resolution:
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
to support them all, in Res folder we have to create folders depending what screens we want to support.
layout-xlarge
layout-large
layout-normal
layout-small
after, copy the your final layout_file.xml to all of them, open it in Graphical mode, and rearrange the buttons to look good on the screen. Depending on the resolution screen android will choose layout which is closer to device resolution . Just test it on different devices, or virtual devices to make sure it looks good.
If you want all of your views to cover the whole screen of the device when the app is launched, you need LinearLayout's weight
<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:background="#drawable/background"
android:orientation="vertical"
tools:context=".BasicScreenActivity">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="0 dip" //this is important!
android:layout_weight="5" //<-- add this
android:layout_marginTop="102dp"
android:background="#drawable/custom_button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="0 dip" //this is important!
android:layout_weight="5" //<-- add this
android:background="#drawable/custom_button2" />
</LinearLayout>
I usually have the weight total equal to 10 so its easier to compute and visualize the UI