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.
Related
I have a fragment that takes up the whole screen, with Buttons and a SeekBar which scale to fit it, as well as fixed size TextViews. I use linear horizontal and vertical layouts with weights to achieve this.
The problem is I can't get the button text large enough without it making the buttons expand in size. For some reason, any text size greater than about 35sp makes the button expand, no matter how big the button is. This screen shot shows the button sizes have plenty of space for the text:
Ideally I would like the "<" and ">" characters to fill the buttons. (I was going to programmatically change the font size according to the button size, e.g. for different screen sizes) but haven't tried since I can't even get the static layout to work.
Edit: I would like to avoid images, since if I had 15 buttons, and 8 buckets, that would be 120 images I need!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/VerticalLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="0dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp" >
<!-- ........ -->
<TextView
android:id="#+id/trackTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2" >
<Button
android:id="#+id/trackPreviousButton"
style="android:buttonBarStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/button_track_previous"
android:textSize="35sp" />
<Button
android:id="#+id/trackNextButton"
style="android:buttonBarStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/button_track_next"
android:textSize="35sp" />
</LinearLayout>
<SeekBar
android:id="#+id/seekBar"
style="#style/tallerBarStyle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!-- ........ -->
</LinearLayout>
I have tried adding the following line to Buttons, but it only makes a small difference, if any:
android:padding="0dp"
Advice on getting the font height to fill the buttons without padding is my primary question. (But if the problem of dynamically sizing the text to fill the buttons for different screen sizes can be solved at the same time, that would be brilliant).
Edit: it turns out that using larger font sizes affects the effect of weighting for the height of the linear layouts, which is why there seemed to be padding - larger font size increased the button size, not because of the padding (which was 0) but because of the weighting
Button is not the right widget for your purpose. Use an ImageButton (or even an ImageView) instead.
I was going to programmatically change the font size according to the button size, e.g. for different screen sizes
Your current approach will land you in a lot of problems regarding proper sizing of your UI components. Given the plethora of android devices out there, screen size is just one aspect of the problem. You will also be dealing with varying screen densities. Best approach would be to put size/density buckets (drawable-mdpi/hdpi/xhdpi) to use. Help android in working for you.
Use drawables to indicate next and previous. If you're worried about the drawables being too small for tablet screens, create appropriate drawable resources/folders:
// Phones - 4 to 7 in
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
// Tablets - 7 to 10 in
drawable-large-mdpi
drawable-large-hdpi
// Tablets - 10 in
drawable-xlarge-mdpi
This list may not be exhaustive. Consider doing some research before finalizing your size/density buckets.
Output:
# drawable size 32dp:
# drawable size 64dp
Now it becomes quite straightforward - finalize drawable size by visual inspection on a phone, on a 7 inch tablet, and on a 10 inch tablet. Then use density scales to create and store appropriately sized drawable in the folders I mentioned above. Let android deal with what bucket to pick from.
The problem is by default buttons include a minHeight attribute. I had the same problem and solved it with just a single line of code in my XML file:
android:minHeight="0dp"
There is a quick and easy solution to your problem!
Auto-sizing text in Android is fiendishly difficult in my experience, especially when padding is involved. I would advise that instead of using an angle bracket character, you use a drawable - there are plenty of arrow icons available online - and an ImageButton. For example:
<ImageButton
android:id="#+id/trackNextButton"
style="android:buttonBarStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/left_arrow"
android:scaleType="fitXY"
android:padding="0dp"
android:textSize="35sp" />
By using different ScaleTypes you can alter the stretching of the image. Even better, the screen sizes problem is solved because you can add different drawables for different densities.
Use minWidth="0" or "1" to reduce the horizontal padding on a text Button.
I have used dip(eg: width = 30dip, scroll bar till the middle of screen) , as parameter But in 3.5 inches phone it looks fine, in 5 inches screen phones its not at all coming till middle, here goes below middle. why?
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="450dip"
android:paddingLeft="10dip">
<ImageView
android:id="#+id/gdi_arrow_up"
android:layout_width="27dip"
android:layout_height="27dip"
android:layout_marginLeft="10dip"
android:scaleType="fitCenter"
android:layout_marginBottom="-8dip"
android:src="?attr/asListArrowUp" />
<include layout="#layout/main_menu"/>
<ImageView
android:id="#+id/gdi_arrow_down"
android:layout_width="27dip"
android:layout_height="27dip"
android:scaleType="fitCenter"
android:layout_marginBottom="-8dip"
android:layout_below="#android:id/list"/>
</RelativeLayout>
dip stands for density independent pixel, this means 2 screens with the same size but different density will treat that value the same, however 2 screens of different size (large vs normal) will treat the value differently.
your 5 inch phone may be reported as large and your 3.5 inch phone as normal causing the issue but I'm not sure.
also in your realative layout I'd recommend using match_parent for the height, you usually will not use set widths for viewGroups.
Set the LayoutParameters of the RelativeLayout dynamically as screenWidth/2..it will work on all devices..
In your onCreate do something like this:-
RelativeLayout rel = (RelativeLayout) findViewById(R.id.rel1);
int screenHeight = getWindowManager()
.getDefaultDisplay().getHeight();
rel.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, screenHeight/2));
Hope this helps.
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.
It seems like that for me, on my virtual android device.
If this isn't the case, then how can I specify eg. 35% of the screen width, without using 360*.35 = 126dp?
Is it true that when coding for android 360dp = the whole screen width?
No.
It seems like that for me, on my virtual android device.
It is not "the whole screen width" for any standard Android screen resolution that I can think of. For example, 360dp = 360px for medium density screens and 540px for high-density screens, and I know of precisely zero Android devices with 360px or 540px in either dimension.
Also, bear in mind that "the whole screen width" will vary depending upon whether the device is in portrait or landscape mode.
If this isn't the case, then how can I specify eg. 35% of the screen width, without using 360*.35 = 126dp?
Use a LinearLayout and android:layout_weight. Here is a sample project demonstrating this. The key is in the 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"
>
<Button
android:text="Fifty Percent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="50"
/>
<Button
android:text="Thirty Percent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="30"
/>
<Button
android:text="Twenty Percent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="20"
/>
</LinearLayout>
Each widget is denoted as having no intrinsic height, so the total height is divided up among the widgets based on their relative weights.
I am using WVGA800 skin in Android emulator, so the density (hw.lcd.density) is 240. I have to put 4 image buttons (72 pixels per inch) at the bottom of activities view. As the resolution is 480X800, I asummed that the width of image must be 120 pixels. The problem is when application is launched, the 3 buttons take all width and there is no place for 4th button... Then I created button image in Fireworks with resolution 240 pixels per inch and in 120px width, but problem remains. Could somebody explain how to make correct drawables (sizes and dpi) so that they can be displayed pixel in pixel on Android?
If you put your images in res/drawable, Android assumes they're for 160dpi and scales them accordingly for different resolutions.
Your options are either to put the button images into res/drawable-hdpi signaling that they're intended for densities around 240dpi, or into res/drawable-nodpi to make them never scale regardless of the current screen density.
You still reference them as #drawable/whatever in layouts, the engine picks the best match automatically.
Disregard the image DPI entirely. It's irrelevant, all you need to know is the pixel size. What I would actually suggest is to create a NinePatch image to use as your button background. You'll actually need a few to put into a StateListDrawable, as this is how the different focus states are defined (e.g. Pressed, Focused). Once you have your NinePatch, just create a LinearLayout like so:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_nine_patch"
android:text="button 1"
android:layout_weight="1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_nine_patch"
android:text="button 2"
android:layout_weight="1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_nine_patch"
android:text="button 3"
android:layout_weight="1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_nine_patch"
android:text="button 4"
android:layout_weight="1"
/>
</LinearLayout>
Set all the buttons to fill_parent and give them all an equal weight. They'll stretch to fit evenly to the parent, and you don't have to worry at all about specifying a constant pixel or dip size. Also, it'll evenly split onto any Android device, no matter the resolution.
The width is actually 320 pixels, so for 4 buttons across the entire screen set each to 80dip. Android will then adjust your density independent pixels to the proper screen size of 480 pixels.