I am setting up images for different devices as per official google docs.As per google docs we should always use dp(density independent pixels) because pixels may varies for different devices.
So i have managed images as per dp(density independent pixels).
I have put images in drawable xhdpi,hdpi,mdpi and ldpi. it works well for most of devices but for different devices ppi pixels may varies from device to device so dp(density independent pixels) is not fixed so my all calculations according to dp(density independent pixels) goes wrong and cannot be set properly.
Let me explain me with example.
here is my xml i am setting up :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
when i see this layout in Micromax canvas 4(294 ppi pixels) it seems perfect.
but in Google Nexus 4(318 ppi pixels) it leaves more space from right side(you can see it in images i have attached.).
i tried to get following details
density :
dpHeight :
dpWidth :
using below java code :
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics ();
display.getMetrics(outMetrics);
float density = getResources().getDisplayMetrics().density;
float dpHeight = outMetrics.heightPixels / density;
float dpWidth = outMetrics.widthPixels / density;
i get following results for nexus 4 and canvas 4 :
(canvas 4)
density : 2.0
dpHeight : 640
dpWidth : 360
(nexus 4)
density : 2.0
dpHeight : 592
dpWidth : 384
as you can see here dp(density independent pixels) varies for these devices
i think it is because of different ppi pixels so all my calculations according to dp(density independent pixels) goes wrong.
so how can i manage images if dp is not fixed.??
i have also attached screen shot of the images how layout looks in canvas 4 and nexus 4.
I have also referred this question How do I convert ppi into dpi for Android images?
i know i can adjust layouts using the layout weight but i think there must be another solution to this problem.
Please see and help me to solve the problem.
You just cannot support all the devices, Either you can create different layouts or different drawables to target each device.
The best thing you can do is make a flexible UI that divides the view in proportions and for doing this WEIGHT come into existence . Just use weight to divide the UI into proportion like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal"
android:weightSum="6">
<ImageView
android:layout_weight="1"
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
The dp pixels are density independent, not proportion independent. The difference in proportion of height to width between the two devices is the issue you are having, not an occurrence of non-standard dp. The only proper solution is to adjust the weight based on difference in proportion.
If density independent pixels were dependent on the pixels per inch, a density dependent unit, then they would also be density dependent.
Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
I do in such a way
Display display = getWindowManager().getDefaultDisplay();
int screenWidth = display.getWidth()/6; //number of buttons
button.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
button2.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
....
make it as for each buttons in same way..
or
Tabbar concept works in anotherway..
For your problem as seen in your screenshot your background have repeatable texture. Crop the image for texture and use repeatable background in place of single image. You can use following XML for repeatable background bg_repeat.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat" />
background.png
give your cropped image as src here and put this XML file in your drawable. Now, in your layout do this -
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_repeat"/>
</LinearLayout>
IMO this will serve your purpose and it will also save you some bites.
I think you need to work with weight here.Just put the same code in your XML and see the difference:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
You just cannot support all the devices, Either you can create different layouts or different drawables to target each device.
Instead of linear layout use Relative layout that will be better for all devices.
Related
I defined this layout:
<?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/ivSmartphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/intro_smartphone_data" />
<ImageView
android:id="#+id/ivData1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/ivSmartphone"
android:layout_centerHorizontal="true"
android:layout_marginTop="90dp"
android:src="#drawable/intro_data_1" />
<ImageView
android:id="#+id/ivData2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_2" />
<ImageView
android:id="#+id/ivData3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_3" />
<ImageView
android:id="#+id/ivData4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_4" />
</RelativeLayout>
It should looks like this one according to the android studio preview window:
On a Nexus5X it looks exactly like this, but on a Nexus5 i get
I thought Nexus5X and Nexus5 have the same density and take the images from the same xxhdpi directory? So what's missing?
Thanks in advance.
The size of the Nexus 5 is 360x640dp while the one of the Nexus 5X is 411x731dp while having the same density.
So when you define you layout like this
<ImageView
android:id="#+id/ivSmartphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/intro_smartphone_data" />
you're using the same image for every screen width without scaling. Instead you need to make sure to fit your images to the screen width.
<ImageView
android:id="#+id/ivSmartphone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:scaleType="fitCentered"
android:src="#drawable/intro_smartphone_data" />
fitCentered might also upscale the image. If you're fine with a bigger spacing consider using centerInside instead.
How to edit xml file layout. All display screen is the same.
screen size 4.7", 5.0" display accuracy. But screen other than this. Display Distortion. Except screen tablet.
Help me fix it.
screen_main.xml
<FrameLayout 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="jp.vertice.test.MainScreenFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#51c8fc">
<ImageView
android:layout_width="200dp"
android:layout_height="195dp"
android:id="#+id/imageView2"
android:src="#mipmap/ic_launcher"
android:background="#fc0c0c"
android:layout_marginLeft="18dp"
android:layout_marginStart="18dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn1"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/btn3"
android:layout_alignStart="#+id/btn3" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn2"
android:layout_below="#+id/btn1"
android:layout_alignLeft="#+id/btn1"
android:layout_alignStart="#+id/btn1" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn5"
android:layout_below="#+id/btn2"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignStart="#+id/imageView2"
android:layout_marginTop="5dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn4"
android:layout_alignTop="#+id/btn5"
android:layout_toRightOf="#+id/btn5"
android:layout_toEndOf="#+id/btn5"
android:layout_marginLeft="9dp"
android:layout_marginStart="9dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn3"
android:layout_alignTop="#+id/btn4"
android:layout_toRightOf="#+id/btn4"
android:layout_toEndOf="#+id/btn4"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="205dp"
android:background="#F4F4F4"
android:layout_gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="YYYY.MM.DD"
android:id="#+id/txt1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="22dp"
android:layout_marginStart="22dp"
android:layout_marginBottom="173dp" />
<TextView
android:layout_width="230dp"
android:layout_height="50dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
android:id="#+id/text2"
android:layout_alignTop="#+id/txt1"
android:layout_alignLeft="#+id/txt1"
android:layout_alignStart="#+id/txt1"
android:layout_marginTop="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON"
android:id="#+id/btn6"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:layout_alignTop="#+id/text2"
android:layout_toRightOf="#+id/text2"
android:layout_toEndOf="#+id/text2" />
<TextView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="FOOTER"
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="10sp"
android:textStyle="bold"
android:textAlignment="center"
android:gravity="center_vertical"
android:background="#FFFFFF" />
</RelativeLayout>
</FrameLayout>
Don't use Frame Layout here because Frame Layout used to show single view.
I see you are using fixed dp values for layout_width and layout_height.
dp means density independent pixel. It is not a size independent pixel.
The dp makes sure your layout looks the same on devices with the same size, but different pixel density. It will not look the same on bigger devices.
If you want it to scale to larger devices you will have to use match_parent and wrap_content.
Use the power of the relative layout to place items on the right side of the screen also.
You can also make separate layout files for differently sized devices. So you can customise it depending on the size.
You do this by making a new layout folder named for example layout-sw600dp/ (or any number you want) which will only be used on devices that have at least the width you specified (so 600dp in this example).
Make sure your layout file has the same name in this folder as in the normal folder.
You can find very useful information about this in the documentation:
here and here.
You can try using a GridLayout. This way, the image columns will fill the whole screen.
you can't work with dp and expect the same result on different
if you want same display for all the devices you can work with weightSum and weight here is a little example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
I read quite a few of the questions posted here but I didnt get a clear answer to my question. Will using the unit dp take care of physical screen size? I have used the unit dp for all my Views and I have tried to make the sizes of them relative.But even then i had to give absolute sizes to some of them. Will the app run the same in a 4 inch as well as a 5 inch screen.Here is the structure :
Here is My XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="400dp" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_above="#+id/relativeLayout2"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/left" />
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton6"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/right" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:id="#+id/rel2"
android:layout_height="350dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout1" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/lc" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="280dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/linearLayout1"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="120dp"
android:layout_marginTop="140dp"
android:src="#drawable/untitled" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/linearLayout2"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="64dp"
android:src="#drawable/lc" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/left" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignBottom="#+id/imageButton1"
android:layout_alignParentRight="true"
android:src="#drawable/right" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</LinearLayout>
Thanks in advance....
You can use values/dimens.xml
Like following (for example: 3dp for all device)
Create values/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="three">3dp</dimen>
</resources>
Create values-sw360dp/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="three">3.375dp</dimen>
</resources>
Create values-sw480dp/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="three">4.5dp</dimen>
</resources>
Create values-sw600dp/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="three">5.625dp</dimen>
</resources>
Create values-sw720dp/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="three">6.75dp</dimen>
</resources>
Ratio of dp
for default values folder its 1
for 360dp - 1.125
for 480dp - 1.5
for 600dp - 1.875
for 720dp - 2.25
How to use? example: #dimen/three
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="#dimen/three"
android:layout_above="#+id/relativeLayout2"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
No using dp we cant take care of diffrent screen size.
for that you need to use difftent strategy
You can use
android:layout_weight=".5"
this will cover half of screen if you set android:layout_width="0dp"
and two views are ina row
if you set height= 0dp it will cover half of the total height of screen
Note
complete weight = 1 ; you can divide according ly like 0.5 0.3 etc
We don't know how your drawable sizes are, so its hard to answear your question. But as mentioned here
dp is not about screen size its about it's density. You could have 2x 5 inch screen. One with hdpi and second with xxhdpi and your layout will rescale to pixels available.
ldpi is 0.75x dimensions of mdpi
hdpi is 1.5x dimensions of mdpi
xhdpi is 2x dimensinons of mdpi
You might need to employ a different tactic. First of all you can use the dimens files to define layout for different screen densities or use layout_weight.
I recommend that you take a look at the Android developers guide for designing layout for different screen sizes: https://developer.android.com/training/multiscreen/index.html
I am using some .png images for my Android app's UI. I have kept the images in the 'res/drawable' directory. I read in some tutorials that Android automatically scales up the images when the screen resolution is bigger than mdpi. But when I run my app on big screened devices, the images are displayed as their original sizes, and not scaled up. Rest of the space is empty( black). What am I doing wrong here? Below is the XML for my layout, if it helps:
<?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"
android:theme="#android:style/Theme.Black.NoTitleBar"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/volbar" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/head" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_marginBottom="33dp"
android:layout_marginRight="19dp"
android:text="#string/press_to_update" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/frag11"
/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView9"
android:layout_alignParentLeft="true"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/base" />
</RelativeLayout>
I'm guessing that you want your image to scale up to fill the space. If that is the case, you will need to specify scaledType for your ImageView:
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="cropInside" />
Experiment with different values from ImageView.ScaleType to get the effect you want.
FYI, when you put an image in res/drawable, it is scaled according to device density. For instance, if your png is 200x150, it will be scaled to 300x225 on a device with 1.5 density. This scaling happens independent of the scaleType.
I have done a lot of reading on SO and googling all over the place but still cannot get my answer...I have this code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/welcomeRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/graph_paper" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/first"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Blue" />
<TextView
android:id="#+id/second"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Cyan" />
<TextView
android:id="#+id/third"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Brown" />
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="203dp"
android:background="#color/Black"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/Yellow" >
<ImageView
android:id="#+id/welcomeWImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="16dp"
android:src="#drawable/w" />
<ImageView
android:id="#+id/WelcomeOImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/o" />
<ImageView
android:id="#+id/welcomeRImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/r" />
<ImageView
android:id="#+id/welcomeDImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/d" />
</LinearLayout>
<TextView
android:id="#+id/welcomeTextView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/lime" />
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/Pink" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="16dp"
android:src="#drawable/w" />
<ImageView
android:id="#+id/ImageView04"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/o" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/r" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/d" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
As stated in the answers from different threads I have used dp as a scaling unit but I still get these images as a result when moving from different screen size and resolution.
here are the different images I get on different screen sizes and resolutions:
why arent the textboxes growing proportionally to the screen size and resolution? As they are textviews without graphics and dp is used for the unit.
Thank you guys ahead of time.
I cant really tell you the exact xml code to fix this, but as an idea, you need to make use of following properties to equally distribute the screen area among your views:
android:weightSum //for your LinearLayout
android:layout_weight //for your child views
and depending on the orientation of your LinearLayout, you need to set either of the following to your child views.
android:layout_height="0dp"
android:layout_width="0dp"
For examples, read this and this.
you have to create three different layouts for your application .
1- layout folder ( basically its for small screens)
2- layout-large ( basically its for large screens such as 5.0)
3- layout-xlarge ( its used for Large screens "Tablets" )
in order for your application to fit in every screen perfectly you have to create these folders. below steps shows how to work with it
1- create new two foldesr in res folder layout-large and layout-xlarge.
2- copy your layout.xml from the layout folder and paste it on each folders u created now.
3- open them and you'll see how they look on bigger screens , then simply you'll have to change a bit on your layout.xml on each folder.
hope that what you seek for. its that simple . two extra folders