Im developing an app and have situation like this:
I have 2 buttons from images and they have to fit whole screen.
So ive used linear layout and gave layout_weight to 1 to both.
However as u can see from my sketch theyre not rectngular so the one on right has to have negative left margin to look like on sketch. But images are dynamically scaled so margin amount depends in screen size. I tried to create multiplied dimen files for ldpi, mdpi, hdpi etc but only looking in preview 2 hdpi screens it doesnt look the same. Knowing orginal size margin is there any way to scale it properly on all screens?
Regards
Edit:
Ofc I'm using dp units. But like I said it's not the same for all screens with the same dpi.
For example:
values-xhdpi/dimens.xml:
<resources>
<dimen name="button_margin">-23dp</dimen>
</resources>
Nexus 10 2560x1600 xhdpi:
Galaxy Nexus 720x1280 xhdpi:
And my layout:
<LinearLayout 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:background="#android:color/transparent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/riderstabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:checked="true"
android:layout_weight="1"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/btn1" />
<ImageView
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:layout_marginLeft="#dimen/button_margin"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/btn2" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/list"
android:background="#android:color/transparent"
android:layout_weight="7"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
</LinearLayout>
Edit:
I've discovered that there's another category of screen sizes.
As documenatation says:
sizes: small, normal, large, and xlarge
densities: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high) [i think there's xxhdpi, xxxhdpi and tvhdpi too].
So I have 2 buttons: 262x46 first and 404x46 second. -26 pixels is the orginal margin for the second button to perfect match. (so sum is 404+262-26=640).
I've found some factors for densities:
ldpi - 0.75
mdpi - 1.0
hdpi - 1.5
xhdpi - 2.0
xxhdpi - 3.0
xxxhdpi - 4.0
But when I for example guessed right margin for mdpi and multiplied it by 1.5 for hdpi it's not scaled properly (as for looking in preview in eclipse). And there comes screen sizes so it's even more complicated.
Using the density-independent points (dp) unit of your margin and your padding is the best way to maintain an absolute dimintion on all device sizes as following:
android:layout_margin="20dp"
Make sure you are using dp for all XML elements and sp for all texts
Related
I still have problems with the correct view for the images in my Application. So on my first device (5,2 inches & 480 density) it looks good.
On the second device (5,5 inches & 420 density) the image doesn't fit and it shows white borders.
This is the ImageView in my layout:
<ImageView
android:id="#+id/iv_image"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#id/tv_topic" />
I placed all my Images in the drawable folder after reading this on a Android Blog:
There are commonly two ways to target all screen DPIs.
1. Easiest way - Make all images to Extra High or Extra Extra High DPI.
Android auto-scales the drawables if the device does not match the drawable DPI. If the only drawables are created in high density, lower DPI screens will down-scale a resource to fit in a layout.
So I implemented all Images in the highest possible resolution ONCE in the drawable folder. Is it necessary to place them all in the specific folders (drawable-ldpi, drawable-mdpi ...)? It would mean that there will be multiple copies of my Image with always the same size.
And yes I read the official documentation of supporting multiple screens a couple times. However I have some problems understanding it.
I advice you to use the layout_weight attribute to keep the constant ratio between the ImageView and the question layout.
Change your layout to something like this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3" />
</LinearLayout>
I have a good understanding of the difference between px, dp and sp.
The problem is, when I put a TextView ( or ImageView ) on the screen, the dpi is irrelevant.
On a 3 inch high screen with 160 dpi, a text size of 80px will be 1/2 an inch, or 1/6th the height. On a 7 inch high screen with 160 dpi, it's still 1/2 inch, but that is now 1/14th of the height.
The problem is, using dp (or sp), what looks good on a phone disappears on a tablet.
Is there a way to specify fractional screen size, like percent?
I not sure if you can specify size in percent, but why you dont define different dimensions for screen in dimen.xml file. It is very hard to use the same values dp and sp for all screen sizes.
You need to create different dimens.xml different resource folders
res/values-ldpi/dimens.xml
res/values-mdpi/dimens.xml
res/values-hdpi/dimens.xml
Next add some values to these files
<!-- in values-ldpi/dimens.xml -->
<dimen name="textSize">25dip</dimen>
<!-- in values-mdpi/dimens.xml -->
<dimen name="textSize">20dip</dimen>
Finaly reference to dimensions in your layout file:
<TextView
android:layout_toRightOf="#id/at"
android:layout_below="#id/hw"
android:textSize="#dimen/textSize"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
EDIT:
If you want set height of image to 1/10 of screen size you need to use android:layout_weight attribute in your view containers. Check the example below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:weightSum="1"
android:layout_weight="9"
>
</LinearLayout>
</LinearLayout>
This will give textSize depending upon the density.
TextView text = new TextView(this);
text.setText("text");
TextView.setTextSize(16 * getResources().getDisplayMetrics().density);
OR
Create dimens.xml in values-ldpi,mdpi and hdpi.
<dimen name="textSize">30dip</dimen>
<dimen name="textSize">10dip</dimen>
and then add this in your layout.
<TextView
android:textSize="#dimen/textSize"
//rest code here
/>
I have create android layout in layout folder my device inch is from 3.2 to 5 inch which comes under normal screen,targeting only this device only but my layout differ from each other in 3.2 and 4 inch.
You can get the screen size problematically in java and make checks
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
res/drawable-mdpi/my_icon.png // bitmap for medium density
res/drawable-hdpi/my_icon.png // bitmap for high density
res/drawable-xhdpi/my_icon.png // bitmap for extra high density
Follow that: Supporting multiple screen size - Android
Define your dimen values like that
res/values-sw600dp/dimen.xml -> 7+ inches
res/values-sw720dp/dimen.xml -> 10+ inches
values-w360dp
values-w500dp
values-w480dp
values-xlarge
values-v11
values-v14
Sherlock Bar check there
You need to create different folder for that
for example
layout folder/main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
android:orientation="vertical" >
<Button
android:id="#+id/rate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Rate us"
android:textColor="#color/black_font" />
</RelativeLayout>
layout-large/main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
android:orientation="vertical" >
<Button
android:id="#+id/rate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Rate us"
android:textColor="#color/black_font"
android:textSize="30sp" />
</RelativeLayout>
layout-xlarge/main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
android:orientation="vertical" >
<Button
android:id="#+id/rate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Rate us"
android:textColor="#color/black_font"
android:textSize="60sp" />
</RelativeLayout>
For further information see this link
For your problem you need to create it by Density
ldpi Resources for low-density (ldpi) screens (~120dpi).
mdpi Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi Resources for high-density (hdpi) screens (~240dpi).
xhdpi Resources for extra high-density (xhdpi) screens (~320dpi).
nodpi Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density.
tvdpi Resources for screens somewhere between mdpi and hdpi; approximately 213dpi. This is not considered a "primary" density group. It is mostly intended for televisions and most apps shouldn't need it—providing mdpi and hdpi resources is sufficient for most apps and the system will scale them as appropriate. If you find it necessary to provide tvdpi resources, you should size them at a factor of 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x 133px for tvdpi.
I have a screen with 4 ImageButton in a 2x2 Grid (using TableLayout).
I need to give support to all the different screen sizes. So I created the 4 layout folders (small, medium, large and extralarge).
It worked ok for the position of the ImageButton. But on large and extralarge screens the ImageButton's size are too small.
I tried to solve this problem using the 4 folders for diferents density (drawable-ldpi, drawable-mdpi, drawable-hdpi and drawable-xhdpi) using the x0.75, x1, x1.5 and x2 relation between mdpi and the others folders.
But I thinks that is not working or is not the right way to resolve this.
It is that the right way to resolved?
I worry about small screen but with Hight Density. Or Medium screen with low density. In those cases maybe is not working, right?
Other idea that I have, is to force the ImageButton's size (measure in dips) on every layout of every sizes folder. It that a better way to resolved?
I really lost with this. I want to apply the best/correct solution.
Can somebody help me?
Thanks and sorry for my poor english
Update:
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<TableRow
android:gravity="center"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_marginTop="60dip" >
<ImageButton
android:id="#+id/newCard_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_new_card_button"/>
<ImageButton
android:id="#+id/showLastTicket_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_show_last_ticket_button"/>
</TableRow>
<TableRow
android:gravity="center"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<ImageButton
android:id="#+id/cancelLastTransaction_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_anulla_button"/>
<ImageButton
android:id="#+id/searchCustomer_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_search_customer_button"/>
</TableRow>
</TableLayout>
Okay, so what I would suggest for this is to use the relatively new qualifiers sw600dp and sw720dp (shortest width: 600dp or 720dp) to define larger sizes for those screens -- those are basically 7" and 10" tablets. You could either define a specific dimen variable and have a larger value in a values-sw600dp resource folder, or actually create a different layout altogether in a layout-sw600dp resource folder, depending on how much needs to change.
You could try to adjust ImageButton's width and height values in your layout by giving exact values like 50dip instead of wrap content. dip value is going to appear in different sizes in different screens as dip means Density Independent Pixels.
I'm trying to draw a button with an image as background.
Here's my xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="13dp"
android:background="#drawable/button_bg"
android:text="Break Record"
android:textColor="#2c4417"
android:textSize="19dp"
android:textStyle="bold" >
</Button>
</LinearLayout>
On the graphical layout view, it looks as I intended:
But on the emulator, the button takes the entire width of the screen:
I've read the specification more than once, but couldn't get what my mistake is,
How do I write the button xml so that the button will look on the emulator (and all devices..) as in the Eclipse's Graphical Layout?
Thanks.
The width of button is due to #drawable/button_bg. If the background image is constant for different densities then hdpi would should button small in size, on the other hand, mdpi and ldpi devices would take more width to show the same button. Confirm that you have different background images and they are relative to their densities.
P.S. Run three different emulators with hdpi, mdpi and ldpi densities respectively and observe the layout.