We are developing an android app. The text displaying properly on 5" devices. But getting cropped on smaller devices (4", 3.5"). why is it happening? Any help welcome. Please see screenshots below. "Credit" "Debit" and "Net" displayed instead of "Credit Card" "Debit Card" and "Net Banking" in screenshot below.
<?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="#ffffff" >
<include android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/sdk_header"
/>
<RelativeLayout
android:id="#+id/topLogoLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="0dp"
android:layout_marginRight="0dp"
android:layout_marginLeft="0dp"
android:layout_marginBottom="-11dp"
android:background="#e5e5e5"
android:paddingTop="10dp"
android:paddingBottom="20dp">
<TextView
android:id="#+id/youtxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="right"
android:layout_marginTop="5dp"
android:text="You"
android:textSize="40sp"
android:textColor="#727272"
android:layout_marginLeft="10dp" />
<RelativeLayout
android:id="#+id/arrowLayout"
android:layout_toRightOf="#+id/youtxt"
android:layout_toLeftOf="#+id/companyLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/txt_amount"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Rs. 10"
android:textColor="#727272"
android:textSize="18sp" />
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:src="#drawable/arrow"
android:layout_below="#+id/txt_amount" />
</RelativeLayout>
<ImageView
android:id="#+id/companyLogo"
android:layout_marginTop="5dp"
android:layout_marginRight="30dp"
android:layout_width="70dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:src="#drawable/wallet_logo"
android:scaleType="fitXY" />
</RelativeLayout>
<ImageView
android:id="#+id/orange_line"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/orange_line"
/>
<com.viewpagerindicator.TabPageIndicator
android:layout_marginTop="0dp"
android:id="#+id/indicator" android:layout_height="wrap_content" android:layout_width="fill_parent" />
<android.support.v4.view.ViewPager android:id="#+id/pager" android:layout_width="wrap_content" android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
</LinearLayout>
This is a complex topic on which a book could be written (and probably has). I'll focus on the only problem I can see: text size.
It seems that your fonts are too big on the small screen. This affects what appear to be tabs and buttons, although the EditText has the problem too (it just doesn't overflow).
The useful way of measuring screen size is the sw-dp (shortest width device independent pixel). The dp density is adjusted so that it is around 160dpi on all devices. For a 5" tablet that will be around a 3" width and it should be an sw480dp device. The 3"-3.5" screen has around a 2" width and should be an sw320dp device.
To make this work at the simplest level, you need to place some text size settings in your value-sw240dp folder that are about 3/4 of the text size for your default sw480dp device.
For example, this might appear in your dimen file in that folder.
<dimen name="view_field_text_size">14sp</dimen>
I can't give you a cookbook because I have no info about your other use of styles or dimensions. Perhaps in a layout you might have:
<EditText
<android:textSize="#dimen/view_field_text_size"
/>
It's better to put it in a style, but that's outside the scope here.
Different devices may have different pixel density, screen size, Orientation, Resolution and Density-independent pixel (dp).
Solution -
Define different layout files for different screen sizes.
Ensuring your layout can be adequately resized to fit the screen
Providing appropriate UI layout according to screen configuration
Ensuring the correct layout is applied to the correct screen
By default, Android resizes your application layout to fit the current device screen. In most cases, this works fine. In other cases, your UI might not look as good and might need adjustments for different screen sizes. For example, on a larger screen, you might want to adjust the position and size of some elements to take advantage of the additional screen space, or on a smaller screen, you might need to adjust sizes so that everything can fit on the screen.
The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra large screen should go in layout-xlarge/.
Beginning with Android 3.2 (API level 13), the above size groups are deprecated and you should instead use the swdp configuration qualifier to define the smallest available width required by your layout resources. For example, if your multi-pane tablet layout requires at least 600dp of screen width, you should place it in layout-sw600dp/. Using the new techniques for declaring layout resources is discussed further in the section about Declaring Tablet Layouts for Android 3.2.
Look - Multiple Screen Support and Support Screen training docs.
you just need to create different folders related to density or screen size like
Option 1.
values-large
values-small
values-normal
For more explanation check this link...
Multiple Screen Support
Option 2.
mTextView.setTextSize(16 * getResources().getDisplayMetrics().density);
this will give TextSize depending on density..
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 feel like I'm the only one lost here. Everyone seems to be fine with using DP to make apps work across multiple screen sizes. For me, whenever I load up another screen, the alignment will never be the scale properly.
However, if I use android:weight everything will scale fine across all devices. The problem I have with android weight for everything is that it doesn't always want to resize images well into layouts, not to mention the warnings I'll get for using nested weights.
One solution I see is creating a new screen size for each possible screen sizes out there. Is this what everyone else does? At first I thought we'd have to only create the x-large, small, etc layouts only to find that even these don't cope for various screen sizes (even the nexus 7 doesn't fall well into any of these categories).
Sample code
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#drawable/layout_border"
android:padding="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:contentDescription="#string/app_name"
android:src="#drawable/yg" />
<ProgressBar
android:id="#+id/progressBar2"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/imageView1"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:progress="50" />
<TextView
android:id="#+id/textView1"
style="#style/NormalFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/progressBar2"
android:layout_alignLeft="#+id/progressBar2"
android:layout_marginLeft="36dp"
android:text="#string/exercise_percent" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_above="#+id/textView1"
android:layout_toRightOf="#+id/imageView1"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:background="#drawable/start"
android:onClick="meditateTask" />
</RelativeLayout>
For example, here the imagebutton I have will be out of place on every new screen size.
You can create same layout for all screen sizes, small, normal, large and x large.
How can you do that: Make new XML layout file in layout folder, make it so it has same name as the layout you want to modify to fit for all screen sizes. Click next, and there will be some options shown, find Size and insert it. Then you will be able to chose which screen size you want.
And when launched, system will chose best screen size for device.
Repeat for all 4 screen sizes. Hope this helps
I've read the android support multiple screen tutorial.
when i try to see how my layout fit on different screen, something gone wrong. In my case i have only one tipe of image (970x174) for test copyed into all drawable folder.
By see my layout on different screen, in most cases, layout is not as i would. I paste code of my layout (that it fits well into nexus 4 screens)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/TEMPORARY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="128dp"
android:src="#drawable/button" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="64dp"
android:src="#drawable/button" />
<ImageView
android:id="#+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/button" />
</RelativeLayout>
Maybe i should do a different density image for each screen type?
RelativeLayout doesn't have a orientation tag, so remove it.
Since you put the same image on all the drawable types, the image will have a fixed pixel size, which will decrease the size of the image on the screen as the screen density increases. But you used dp as unit on the layout, so the 128dp will increase in size as the density increases, to make the size on screen appear the same on different devices.
So if you want to have the same layout with the same size on screen regardless of screen density, delete the other copies of the image and leave only one drawable folder, and android will handle scaling for you on different screen density phones.
I've been working on a Memory Game for Android and I'm having a litle problem with tha layout.
I have 3 diferent layouts for every type of game (easy, medium and hard) where I have 4x4, 5x5 or 6x6 images on the screen that need to be matched.
I'm using an ImageAdapter to get the images and fill the GridView that I'm using for displaying the iamges on the screen.
Here's the XML file for the Easy game (4x4 images):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/mainBar"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center">
<TextView
android:id="#+id/player1"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Player1 - "
/>
<TextView
android:id="#+id/player1Score"
android:layout_toRightOf="#+id/player1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00 "
/>
<TextView
android:id="#+id/player2Score"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00"
/>
<TextView
android:id="#+id/player2"
android:layout_toLeftOf="#+id/player2Score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Player2 - "
/>
<Chronometer
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="02:00" />
</RelativeLayout>
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_below="#id/mainBar"
android:gravity="center_vertical|center_horizontal"
android:numColumns="4">
</GridView>
</RelativeLayout>
The only problem is that when I'm running the app on an emulator with a small screen size it the images look streched....(see IMG#1)..when I would really want to look something like this..(see IMG#2), on every screen no matter of the size!
I'm using different resources (different images for ldpi, mdpi, hdpi).
The problem you are having is that while you are supporting multiple screen densities you are not supporting multiple physical screen sizes. That is why on the smaller screen your images look bigger and begin to distort.
To solve this you can make a seperate layout for each phone size: small, normal, large and xlarge.
However as that is quite tedious I tend to lean towards using a linear layout and weights so that the layout xml scales on all phone sizes.
In this case you would want to make one vertical linear layout with 4 horizontal linear layouts inside.
Use this to find the correct physical screen size:
if ((getResources().getConfiguration().screenLayout &
Configuration.SCREENLAYOUT_SIZE_MASK) ==
Configuration.SCREENLAYOUT_SIZE_LARGE) {
// on a large screen device ...
}
Source: How to determine device screen size category (small, normal, large, xlarge) using code?
I'm struggling to finish my Android app, but I'm having some problems with the UI. My problem is very basic, I've developed the UI using the default AVD when using AVD manager in Eclipse (HVGA, with a density of 160 dpi), and when I execute the app I see it as I designed, but if I change the target device (i.e. WVGA or QVGA) all the components in the layout are in a different position than the original. As far as I saw in the recommendations for support multiple screens, I should not use AbsoluteLayouts, in fact I'm using RelativeLayouts, I'm not using "px" for the dimensions (or positions), just "wrap_content" or "fill_parent", and in case I need an specific position I'm using "dp" (tested too with "sp"), also I've scaled the images for ldpi (0.75x), and still have the issue (not a particular screen, the hole app) ...so, my question is, is there any other UI tip that I'm missing?.
I'm putting a sample code and the results that I observe when testing it with a HVGA AVD (bigger image) and with a QVGA AVD. As you can see, the position of the yellow/green squares is different, as well as the size of the last row of images.
PS: I'm using a TabLayout also, so the background is loaded through code (tabHost.setBackgroundDrawable(getResources().getDrawable(R.drawable.background1)))
Any help will be appreciated.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/row1"
android:layout_centerHorizontal="true"
android:layout_marginTop="140dp"
>
<ImageView
android:id="#+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button1"
/>
<ImageView
android:id="#+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button2"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#id/row1"
android:layout_centerHorizontal="true"
>
<ImageView
android:id="#+id/btn3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button3"
/>
<ImageView
android:id="#+id/btn4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button4"
/>
</LinearLayout>
</RelativeLayout>
Your layout looks fine to me, except for having that white box title on the background as it will make more difficult to put things in their position. Also, RelativeLayout does not have orientation but that is ignored.
In the bigger screenshot it looks like there is more space between the white box and the top of the screen. What it does not make sense to me is the different size in the second row. Are you 100% sure you are loading the correct images in the smaller screenshot?
You need to create different layout for diff. resolution i.e for large screen use layout-large folder..
I hope this link help to you.
Did you follow the steps given on the developer site to make ur app to support multiple screens?