When I tested the font size with different density settings using the Eclipse Emulator, I get different size fonts even though I am using "dp" to specific the size. I would have thought the size may decrease with higher density, but I found the higher the density, the bigger the font is. I tried using "in" and "mm" and the same behavior occurs, in that the higher density, the bigger the fonts. This is based on android:minSdkVersion="10".
Is there any way I can set the font sizes to scale to the same size for the different density?
Here is the xml file:
<?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="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:layout_gravity="center"
android:textColor="#color/orange"
android:textStyle="bold"
android:text="THIS IS A TEST"
android:background="#color/white"/>
</LinearLayout>
Unfortunately I cannot post the images of the font size for the three Emulator settings due to lack of reputation.
Thank you.
I had the same problem... And did't found anything, but making folders:layout-small...large, xlarge, and folders with drawable images for high, mid and small densities with resolutios of images according to it... So, everything works well on different droids with different screens... For every display size there is layout with different meanings of dp...((
Use sp instead of dp
<?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="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_gravity="center"
android:textColor="#color/orange"
android:textStyle="bold"
android:text="THIS IS A TEST"
android:background="#color/white"/>
</LinearLayout>
I guess one way is this:
When you make new layout file there is next button in eclipse. Press that and there is a list where to pick layout's density. You can pick x-high density, high density, medium density etc.. When you press finish it makes layout folder like "layout-hdpi" (depends what density you pick). And then make text fit good with that density.
Hope that helps. :)
Related
I am currently trying to adjust my Android App so it will look and feel similar on multiple screens/devices.
I know by now that a major part in this is to provide multiple image sizes for every image file according to the x1, x1.5, x2, x3, x4 ratios for mdpi, hdpi, xhpi, xxhdpi and xxxhdpi respectively, and I have finished doing so today.
After doing this, I have defined Density independent Pixel dimensions in the #dimen.xml values resource that correspond with the actual image sizes in pixels of the MDPI resources. Subsequently, i have set the imageviews in question's layout_width and layout_height to this dimension.
I am currently at a loss, however, as to why my application still looks significantly different on an MDPI emulator than it does on an HDPI emulator. To highlight what I mean, I'll provide the following screenshot showing the HDPI and MPDI emulator next to one another (left is HDPI (4" WVGA Nexus S) and right is MDPI (5.4" FWVGA)). I want both of them to look like the MPDI version, but what I've done so far apparently isn't working.
I have three theories of my own as to why this is not working the way I intend it to:
1. I am not supposed to set ImageView layout_width and layout_height to a dp value, but rather match_parent or wrap_content (?) (and change the structure of my .xml layouts in the process).
2. I am not only supposed to define multiple drawable resources, but also multiple layout resources for different screen sizes (?).
3. I have misunderstood the entire idea behind how this is supposed to work (?).
I will also give you an example of one of the list items that can be seen in the first screenshot (#drawable/phone_speed_icon is a 64 x64 pixel resource in MPDI and a 96x96 resource in HDPI, and #dimen/icon_attribute_size is 64dp):
<LinearLayout
android:id="#+id/llSpeed_PreSession"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:weightSum="100">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="#dimen/icon_attribute_size"
android:layout_weight="20"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="70"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="#dimen/icon_attribute_size"
android:layout_height="#dimen/icon_attribute_size"
android:src="#drawable/phone_speed_icon" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="30"
android:gravity="center_vertical"
android:paddingStart="10dp"
android:text="Speed"
android:textAppearance="#android:style/TextAppearance.Large"
android:textColor="#878787"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="80"
android:gravity="center">
<android.support.v7.widget.SwitchCompat
android:id="#+id/swSpeed_PreSession"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
In the end, I have four questions that I'd like answered:
1. How do I make the list items in screenshot 1 look the same on MDPI devices as HDPI devices? Does this have anything to do with one of the three theories I mentioned earlier?
2. Why is the header text ("What do you want to measure?") wrapped on one device, but not on the other? They use the sp unit (via android:style/TextApperance.TextApperance.Large)?
3. Shouldn't everything be more spaced out on an HDPI device (if anything) rather than less spaced out? The HDPI emulator looks as if it "has got way less pixels available", if you can understand what I'm saying even a little.
4. How do I make the Fragments on the second screenshot look the same? Or should i not even want this, because the HDPI is (for some reason) physically smaller, which is why the layout is less spread out?
Anyway, I have been at this all day and the more I read the more thouroughly confused I get, so any help is greatly appreciated!
You have the option to create multiple dimens.xml files depending on a variety of factors. Here you'll see what my current project looks like with the various dimens.xml files in Android Studio based on screen width.
However, you can have different requirements for each dimens file you want. For example, you can create dimens files for each density:
Here's an example 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"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/hello_world" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
On a handset(480x800) and a tablet(1280x800) the layout has different amount of space left from the imageview to the bottom. The image isn't scaled on the tablet and dp values result in relatively same physical values.
Is there a way/tool to save handset proportions for tablets so that images, spaces(dp) get scaled? I guess, I could use values-xlarge/dimen.xml, values-720dp/dimen.xml, but it's a lot of mechanical job to. Any better solution ?
If you want to adjust scaling of ImageView
add
android:scaleType="fitXY"
Here are the ImageView Scale types
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Try this:
<LinearLayout
:
:
android:focusable="true"
:
/>
If you want your app to be 2 times bigger (all dimentions and font sizes x2) on 2 times larger dispay you can manually change display density (reduce it in a half). Android wont mind and will work as usual. I use this trik when I want my app to be the same and only change scale depending on screen size. Read about Configuration/DisplayMetrics/updateConfiguration. Here is draft code you should run in activity's onCreate. I give you exact code later.
DisplayMetrics dm = context.getResources().getDisplayMetrics();
// fix display density here to scale all activity's dimentions
context.getResources().updateConfiguration(null, dm);
But it isn't proper android way. You should provide different resources for different screen sizes using appropriate resourse folders.
I have a imagebutton placed inside a RelativeLayout.
However I can't seem to figure out what I need to do in order for the button to scale according to different resolutions.
Here's the content of my activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/background" android:scaleType="fitCenter" android:gravity="center"/>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#null"
android:onClick="startVideo"
android:scaleType="fitCenter"
android:src="#drawable/button" android:layout_marginBottom="50dp"/>
</RelativeLayout>
background.png is an image placed in the mdpi folder (1280x800px), button.png is also placed in the mdpi folder (757x271px).
If I run my app on a 1280x800px resolution (galaxy tab) it looks fine, however when I try to run the app on my phone the ImageButton doesn't scale down - it keeps the original size (757x271px).
Does anyone know a solution for this?
Did you create alternative layout resources with modifiers like layout-large, layout-small and so on? If you only have one layout it's not guaranteed to scale properly on any screen. Also consider specifying dimensions in dp for the related view
I gave up on solving this by only using one big image that were scaled down like I wanted to.
So in the end I had to create different versions of the image for the imagebutton, and place them in the correct folders, ie:
drawable-large-hdpi
drawable-large-mdpi
drawable-normal-hdpi
drawable-normal-mdpi
etc.
I then get the desired result from the ImageButton.
Thanks anyway for the help Maver1ck and talhakosen, your comments helped me understand how the different resource folders work for images and layouts.
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/
I read the
http://developer.android.com/guide/practices/screens_support.html.com?
but couldn't get how to apply this, can anyone give me example with buttons and textview that how would it fit on different devices?
It's not as complicated as you might think. First remember that your basic layout is always designed for mdpi, for a normal screen size with with a medium density (about 160 dpi).
So when you design your layout the important part is that you don't use px as unit when you define your layout. Instead always use dp (Density-independent pixel) as unit as they are automatically scaled to the correct number of px for the current density.
Til this moment you only have one file (e.g. myLayout.xml) for all the different layout sizes (small, normal, large and xlarge). If you think that your layout should be different on a device with a xlarge display, like a tablet then you simply create another folder called layout-xlarge in the same level as layout and another layout file named myLayout.xml. You can now make changes to this file to let the layout look different on devices with a xlarge display. Perhaps you want a larger text box you you want to rearrange
the button and text box.
So as you see, it's not that hard. Just use dp as the unit for dimensions and Android will do the rest for you.
The simplest way to support multiple screens is to place your resources in the different density folders, and layouts in different layout size folders.
For example, have the following folder structure:
AppRoot/
res/
drawable/
drawable-hdpi/
layout/
layout-large/
You can place your bitmaps in the different drawable directories based on their densities and sizes. That sorts out different bitmaps for different density screens.
For different layouts according to screen size, in the layout and layout-large directories put the different layouts to support how you want to display your screen.
Lets take a simple example of a simple list filling screen for a small device, versus a large screen where you may want your list in the 40% of screen, and information to right of this:
layout/main_layout.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
>
<ListView
android:id="#+id/main_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
layout-large/main_layout.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1.0"
>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="0.4"
android:layout_width="0dp"
android:layout_height="fill_parent"
>
<ListView
android:id="#+id/main_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/details_large"
android:layout_weight="0.6"
android:layout_width="0dp"
android:layout_height="fill_parent"
>
<include layout="#layout/detail_information" />
</LinearLayout>
Now your application can just use "main_layout", and the device will pick the one according to the screen size, which gives you your multiple screen support.
The important point being that the layouts are the same named file main_layout.xml, and android picks the one from the correct folder itself. The same is true of the bitmaps for buttons etc; place the same named bitmap in multiple directories and android sorts out which to use according to the screen density.
I've refrained from putting text views and buttons in these examples, because they're just layout elements that you can fill in as needed.