If you set your target SDK version in the Android manifest file to "3", then your layout on large-screen devices will be just a scaled up version of what it is on small-screen devices. Once you set the target SDK to a higher SDK, you can create separate layouts for each screen density, which provides a much better user experience.
However, my layout is mainly made up of images, that are high enough resolution that they display just fine on all screen sizes, even when scaled up, because they're big enough that they don't need to be stretched. Now, it would be much easier for me to just create a small-screen layout and have it scaled up, because it would still look nice on large screens. Is there any way I can get that effect without going back to API level 3?
You can use weight parameter.
“weight” is a term that's used to specify how much of the screen a particular view should occupy if there’s any room left after it’s drawn.
Simply make a LinearLayout and place two TextViews within it as such:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="small"
android:layout_weight="0.2"
android:background="#123" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:text="huge"
android:background="#456"
/>
</LinearLayout>
You will notice how views occupy space accordingly. You can create any layout you want for smaller screen and specify weight attribute and every thing will be adjusted beautifully
Just don't specify a layout for larger screens. By default it uses the same one for all screens unless a more specific layout is available. If you're using match_parent for the width and height and the images to scaleType="fitCenter" or "centerCrop" -- things like that, it should fill whatever screen size that it is run on.
Dont'f forget making your app compaible with tablets. You must add
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true" />
in your app manifest.
Hm. I thought Android already did this as long as you aren't using something like AbsoluteLayout. There's a few tricks that can help with the transition. Not entirely sure what the question is asking, but I'll give it a shot. Does API level 3 scale with aspect ratio or something?
I found that most of the UI ugliness going from phone to tablet deals with width. There's logic you can put in to fix the width at a certain res. Otherwise, the layout looks and acts fine. There other tricks like having assets sized using different dimens.xml, and having different sets of dimens.xml for different screen sizes and densities.
You don't have to have every single dimension in each version. You just have to have the base version of each value set, and you can set the different dimension in the other files.
Only way to resize images through different screen size is to use nine patch. Here is more resource on that subject : http://developer.android.com/tools/help/draw9patch.html
I believe this is only thing that you can do is in layout use relative width/height (weight) and images formatted in ninepath.
Related
I add the picture for 48*48 , 72*72 and 96*96 to mdpi , ldpi and hdpi respective.
And add the following code in AndroidManifest.xml
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:anyDensity="true"/>
First Question:
The app will capture the suitable picture by itself when I do the above operation ?
Second Question:
But how to setup the Button in the xml file ?
If app will capture the suitable picture by itself , so I have set the width and the height to match_parent like the following code?
<LinearLayout
android:id="#+id/ImageBtulayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:background="#000000"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/BackButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="center_vertical"
android:background="#drawable/back"/>
<ImageButton
android:id="#+id/recordButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center_vertical"
android:background="#drawable/no_delete" />
<ImageButton
android:id="#+id/download_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:background="#drawable/download"/>
</RelativeLayout>
</LinearLayout>
I modify the code like the above.
And I install the APP to the device which the size is 4.7 inch.
But the icon seem too small.
It like the following picture
How to remove the part of gray on imageButton ?
Does there has any wrong ??
You are confusing two different concepts. One is a screen's pixel density or DPI and another is a screen's size. In general, phones are considered normal size and tablets are considered large size.
I recommend you read through this entire article which highlights a lot of valuable points regarding supporting different screen sizes and screen densities:
http://developer.android.com/guide/practices/screens_support.html
In general though, Android allows the user to define different resources for different device configurations (including screen size and screen density, among others). This is done through the use of (resource/configuration) qualifiers. These are defined by a hiphen, and then the qualifier name on certain folders inside your /res/ directory.
For example, if you wanted to define different images for different screen densities, you would create a new drawable directory for each supported screen density and put the appropriate resources in each.
/res/drawable-mdpi/
/res/drawable-ldpi/
/res/drawable-hdpi/
Then, when Android goes to look for a resource, it will first look for a directory which matches the device's screen density qualifier and get's the resource from there. The resources will share the same name, but will be in different folders, which allows you to define the different resources but also allows Android to resolve them into their different configurations.
So let's look at your questions:
The app will capture the suitable picture by itself when I do the above operation?
As described above, as long as you have arranged yor resources with the appropriate qualifiers, then yes, Android will be able to resolve them correctly. However, note that this has nothing to do with the tag in your manifest.
But how to setup the Button in the xml file ?
Your current XML setup is correct.
If app will capture the suitable picture by itself , so I have set the width and the height to match_parent like the following code?
Setting your width and height to match_parent will make the views width and height the same as the parent layout, which is incorrect. You want the width and height to wrap the internal content of the view, therefore wrap_content is correct.
Edit: Regarding your question about removing the border, if you want to use ImageButtons, then the documentation (first paragraph) suggests setting the android:background attribute to transparent.
android:background="#00000000"
You might also want to try setting the padding to
android:padding="0dp"
http://developer.android.com/reference/android/widget/ImageButton.html
Answer for the first question:
Android system will choose the image in drawable folder according to device screen density.
Answer for the second question:
If the previous code, you set the height and width of the ImageButton to be wrap_content, so the width and height of the ImageButton will be as the size of the captured image from drawable folder, so if you run on device hdpi then the image size (72*72) and the ImageButton dimensions will be also (72*72) px.
In image button Set Android:src="#drawable/your image"
and set android:background="#null"
it will definatily work for you
Learning some Android development through trial and error, however I'm having a slight issue with the rendering of buttons on top of an image view depending on the resolution of the phone.
I have an imageview with two imagebuttons (at the moment) on top. They are relative to the imageview. I will post the xml markup below. The issue is when I run this on the "Nexus 4" in Android studio, everything looks correct. When I debug through my Samsung Galaxy S4, the imagebuttons are off slightly, and I'm not sure why this would be a problem if everything is truly relative to the imageview. I understand that the resolutions are different, but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
I can post pictures if need be, but I feel that the xml will provide adequate information on the issue.
Any help is appreciated. Thanks in advance!
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/SRMap"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="false"
android:background="#drawable/sr_map"
android:layout_columnSpan="2"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_row="0"
android:contentDescription="Map of Summoners Rift"
android:cropToPadding="false"
android:layout_marginBottom="177dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_BlueBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="90dp"
android:layout_marginTop="128dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_RedBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="180dp"
android:layout_marginTop="215dp"/>
but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
See the Docs here about supporting different screen sizes/resolutions. You create separate layout files adjusted to what you need. Simply use different qualifiers for the layout folder name according to the docs and the correct one will be used according to the device that loads it.
You can try and adjust one file to work on different screens but you are a lot better off using different layouts if it will be ran on different screen sizes and resolutions.
For example: you can have a default res/layout folder and a res/layout-large to be used on larger screens
I handled this in a fairly ugly way, but it works across all screen sizes now. Basically say the primary image was 800x800 dp (the image view). The buttons would be smaller than this (20x20 dp), however through transparency, i created 800x800 dp imageviews (note: no longer buttons) with everything transparent but the "icon" (still 20x20 dp). Although slightly larger in terms of file size, it's negligible in my case. Now no matter what the size of the screen, the imageviews all stretch the same amount, thus removing any guesswork from using the different pixel densities.
I realize that this wasn't the most graceful solution, but I cannot see any drawback aside from making some of the layout development more difficult, and the image files are slightly larger. I used Paint.NET in order to create the .png's that I used.
I am creating an app that is relevant to me, and that I figured would be easy to implement using some of the core functionality already provided in android. My idea is a simple League of Legends Jungle Timer Application. This is important to know as I link the pictures so people can understand the context.
Note that both images are the same resolution, there is just no border on the second one.
http://i.stack.imgur.com/Ad3LZ.jpg
http://i.stack.imgur.com/NfhRM.png
Additional details:
For this app I have disabled the "landscape" orientation, I plan on doing this using some of the details that were provided on this page (layouts).
All of these icon ImageViews are relative to the map, which is the first link, so they will always resize correctly. There are 12 of them also, if it matters.
Thanks all for your help!
The problem I am running into related to supporting multiple screen sizes - a fairly common one I believe. I have searched a lot, but have not found something helpful.
I have my project laid out traditionally, with folders to support the various sizes called layout, layout-small, layout-large, layout-xlarge.
So as I have found out, even within each of these size regimes, there screens are not all the same size. For example, my 320x480 screen qualifies for the normal size layout, but so does someone's 480x800. As you can imagine, the content of my app will not fill up the whole screen of a 480x800 device because there is more area. Here are examples of what it looks like:
On 320x480 (what I designed for):
On 480x800 (notice the extra space at the bottom):
Now, I have done a lot of research and applied lots of techniques in an effort to make my app look nice on all screen, but I feel like I am missing something fundamental. I have taken all the basic steps to use dp instead of px, use RelativeLayout everywhere, stuff like that. But I need some way for my app to re-size itself to better fit the larger screens. For example, the margins between the various components could increase a little to occupy more of the empty vertical space.
Any advice, or help? In the worst case, is there a way to design a layout which would fire up specifically for 480x800 screens (because they seem to be most common)? Thanks.
If I were you I'd use a layout like this:
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- Your first form line -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- Your second form line -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- Your third form line -->
</LinearLayout>
<!-- .... -->
</LinearLayout>
This layout will produce this (without colors, of course :) ). The ratio of the lines (colored boxes) is fix, but it's size is dinamically fit to the screen height. The fill_parent and layout_weight do the trick.
If you want to use RelativeLayout, you have to set the whitespaces and heights programatically from JAVA (some explanation here)
320 : 480 has a different ratio than 480 : 800. So the latter simply has more vertical space in relation to the horizontal space than the former. So there is nothing wrong with your layout.
You need to design screens so that you always think about how the Views you define behave when the screen's size shrinks or grows. As you saw, screens may be varying greatly even in the same size-category.
In the case of the screen that you showed, you need to give the width of the EditText components by using weights, not exact dp amounts. You can find many articles on how you might do this, here's one for a start.
So my problem is simple- I want to use XML layouts to precisely control the positioning of widgets on multiple devices. To do this, I thoroughly read the google docs on supporting multiple devices. According to this part, the WVGA854 and HVGA are both considered "Normal screen" size. So theoretically, positioning a widget on WVGA854 should look the same as with HVGA. However, the resultant screenshot shows otherwise.
The widget appears relatively higher placed on the WVGA854 skin. The XML code is shown below, and was placed under the layout-normal/ folder:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button1"
android:src="#drawable/icon_unlock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:text="Button" />
</RelativeLayout>
The drawables I constructed are in the proper ratios (3:4:6:8 as recommended). So why does this positioning mismatch happen? I beginning to think that using XML to position things is quite fruitless. My app requires very accurate positioning of widgets so even this slight mismatch is a problem. Any help how I can remedy this?
EDIT:
What I want is for the widget to be placed in a manner such that the ratio of margin from top to the margin from bottom is exactly the same across devices. From the screenshot, you can see that this ratio is not the same for WQVGA854 and HVGA.
"Normal Screen" size does not mean that screens have the exact same number of dip. You need to think of it as a bucket which contains a number of different screen sizes which are all similar in physical size.
so using fixed size margins and paddings is not (easily) going to achieve the effect you need. So please clarify your question and give an example of what you exactly want to achieve.
I'm using the Photostream example app to learn Android.
One thing I've noticed is that on my 800x480 4.0 phone the 6 photos in the grid fill the screen. However, on the 1024x768 pixel display of my 2.3 running touchpad they do not fill the screen, and are instead constrained to a tight grid towards the top-centre of the screen.
I want to adjust the app so it sizes itself appropriate to the screen size but I can't figure out why it's sizing the way it is.
Looking at the layouts in the res/ directory most of them specify fill_parent etc. The only explicit sizing I can see is the 150x128dip in grid_item_photo, but if I double this it seems to make no difference.
I tried changing the code in PhotostreamActivity.java to download SMALL instead of THUMBNAIL sized photos and it indeed seems to do that. However, it doesn't change the overall layout or sizing as they are cropped. This happens even with the above change.
I notice some sizing code in GridLayout.onMeasure() but this all seems to be driven by the existing size of the screen/widgets -- I don't see it enforcing an arbitrarily small size.
Another thing which occurred to me was that maybe it's to do with the resolution, but I don't see any hvga specific layouts or values in the res directory, just some overrides for landscape vs. portrait.
Why is the current code sizing things the way it does, and what is the best way to modify this so it works on physically larger, perhaps lower density screens?
I needed to add this to AndroidManifest.xml:
<supports-screens android:largeScreens="true" />
Apparently, it is not default on for all devices, unlike the other similar settings.