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.
Related
How it works, that android show me all boxes on display, whatever I have a 4" Display or a 7" Display? It's okay, that android show the boxes a little bit smalls, but I must have all the boxes on display.
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:background="#drawable/box_ressourcen">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/box"
android:id="#+id/box1"
android:showDividers="beginning"
android:layout_gravity="top"
android:layout_alignParentStart="true"
android:layout_alignParentTop="false"
android:layout_below="#+id/imageView"
android:layout_marginTop="-20dp"
android:layout_alignParentEnd="false"
android:gravity="center">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/myimage1"
android:src="#drawable/inventar"/>
</LinearLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_alignParentStart="false"
android:src="#drawable/inventar_ressourcen"
android:layout_marginTop="-25dp" />
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/box"
android:id="#+id/box2"
android:showDividers="beginning"
android:layout_gravity="top"
android:layout_alignTop="#+id/box1"
android:layout_toEndOf="#+id/box1"
android:gravity="center">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/inventar" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/box"
android:id="#+id/box3"
android:showDividers="beginning"
android:layout_gravity="top"
android:layout_alignTop="#+id/box2"
android:layout_toEndOf="#+id/box2"
android:gravity="center">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/imageView3"
android:src="#drawable/inventar" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/box"
android:id="#+id/box4"
android:showDividers="beginning"
android:layout_gravity="top"
android:gravity="center"
android:layout_alignTop="#+id/box3"
android:layout_toEndOf="#+id/box3">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/imageView4"
android:src="#drawable/inventar" />
</LinearLayout>
</RelativeLayout>
And how I can change it, that the boxes was show in a line and break on the end of the line and go to the next line?
Example:
MyBoxes:
B1 B2 B3 B4 B5 B6 B7 B8 B9 B10
Display:
B1 B2 B3 B4
B5 B6 B7 B8
B9 B10
It depends with the sizes of your Views.
Its up to you to decide that you are going to show everything in the screen size or you let it to scroll in the screen.
You can divide your screen using XML , code or using both.
If you want you can go for flexed sizes (width / height) or wrap it and when you wrap it ,it will take the height of its child/children or you can separate layouts with a ratio again using XML ,code or both.
read about weight_sum and layout_weight
also how to give sizes to layouts based on the screen size
What is android:weightSum in android, and how does it work?
https://developer.android.com/training/multiscreen/screensizes.html
https://developer.android.com/guide/practices/screens_support.html
https://developer.android.com/training/multiscreen/screendensities.html
easiest one for you at this stage will be this
https://stackoverflow.com/a/12302811/5188159
also read about how to set sizes based on screen size which will display your XML in the same way in any screen
simple math - allocate my layout height 10% from the screen so the size will keep the ratio in any kind of a screen
as a code snippet this will give you the screen size height and width for the latest visions of android
DisplayMetrics displaymetrics = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
now you can set a size problematically using the ratios
To learn it you can search ;) i'm not telling you that :) and good luck!
For each size you should make a different layout, in order to do that you create another layout with the same name that the one you already have but you add a qualifier like this :
You click on size and choose the one you want. Do this for each size (sall, normal, large, X-Large) and it should be ok.
From the way you speak it is clear that you miss the theorical part.
Basically you have to do different layout for the major configurations you could need, in your case one basic one like you did it and then if I well understand one for smaller screens, in your case 4 inches. To understand how you should name them i would warmly recommend you to go trought he documentation for inches is considered a normal screen that are at least 470dp x 320dp
In particular I suggest you this passage, where is explained also why is not best practice to call the four inches screen as normal
Provide different layouts for different screen sizes
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.
This is a basic skill every Android developer should know, so I would highly recommend you to learn how it works.
I am making a Tic Tac Toe application for fun in Android Studio and have a problem.If i use nexus5x for preview in layout editor my app is oriented perfect.If i change this to nexus4 or a tablet the orientation is messed up.
This is a picture of what i mean.
Nexus 5x as preview and Nexus 4 as preview
A sample from my xml code is the below:
<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: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="com.example.mpampis.tictactoe2.MainActivity">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background="#drawable/board"
android:columnCount="3"
android:rowCount="4">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:layout_row="0"
android:layout_column="2"
android:src="#drawable/kokkinov3"
android:layout_marginTop="25dp"
android:layout_marginLeft="20dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:layout_row="0"
android:layout_column="1"
android:src="#drawable/kokkinov3"
android:layout_marginTop="25dp"
android:layout_marginLeft="30dp"/>
As I saw your images they are receiving wrong margins, i.e. smaller screen receiving the larger margins which are suitable for nexus 5. As you have hardcoded the margins for every screen size, which is not recommended. try to put your margins in dimension.xml and make another for smaller screen.
Well the whole point of using DP is so that you don't have to worry about this. Margins will be roughly the same across devices, but if you're relying on lining things up on one particular device resolution/density combination, you'll definitely be in for a surprise when you test on other devices.
That said, if you do need to specify different margins for different screen sizes, simply add an XML file in res/values -- something like dimens.xml:
<resources
xmlns:android="http://schemas.android.com/apk/res/android"
>
<dimen name="my_view_margin">10dip</dimen>
</resources>
Then add one of these XMLs for every specific device qualifier that you need to (e.g. values-large, values-sw600dp, values-xlarge, etc.) and modify the value as you see fit. When you want to use these dimensions in a layout, just use:
android:layout_margin="#dimen/my_view_margin"
And Android will pick the correct value for whatever device it happens to be running on.
Nexus 4 is 384dp wide, and Nexus 5X is 411dp wide, according to this.
When I had to make app with grid layout, I manually calculated each item's dimensions and added some padding for spacing.
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
int itemWidth = width / 3;
Perhaps the Percent Support Library could assist you in this.
It allows you to set LayoutParams as percentages instead of as hard values.
Am a newbie to Android UI...
I got the layout below which is basically a image view, a image button (that is hidden until a certain logic is met) and another image view at the bottom.
This layout works fine in ldpi devices but look bad on other devices... I also had to resize the image by changing its height so it influence the quality of the image.
How can I resolve this by having a standard view that will work?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/welcomeTutorialImage"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:contentDescription="#string/welcome_tutorial"
android:src="#drawable/welcome_tutorial_browse" />
<ImageButton
android:id="#+id/welcome_tutorial_start_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/welcomeTutorialImage"
android:layout_centerInParent="true"
android:layout_centerVertical="false"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#null"
android:src="#drawable/btn_startsavingstatic" />
<ImageView
android:id="#+id/welcomeTutorialProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/welcome_tutorial_start_btn"
android:layout_centerInParent="true"
android:contentDescription="#string/welcome_tutorial"
android:src="#drawable/welcome_tutorial_bar1" />
</RelativeLayout>
You might want to look at android:fitXY property of ImageView. Also, post screenshots that could explain the issue further. There might be a need to have different sized images for different screen sizes/resolutions (ldpi, mdpi, hdpi, xhdpi)
most of the time, you have to adjust the layout and the image resolution for your application to make it flexible with other devices by placing them to the right folder like:
-drawable
-drawable-1280x752
-drawable-800x480
-drawable-hdpi
-drawable-ldpi
-drawable-mdpi etc.
-layout
-layout-land-1280x752
-layout-800x480
-layout-land
etc.
by placing your layout and image to there designated folder, you have to change each layout and image sizes that will much the requirement of each folder.
and if you need further reference you can check this out
http://developer.android.com/guide/practices/screens_support.html
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.
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. :)