Create custom layout for tablet and phone - android

I need to create a custom layout that will contain two rows on tablet that will show featured and regular items(no scrolling needed), and listview on a phone that shows only the featured items. Is it possible to create a layout like this, is there some library that someone can share with me that will help me create this kind of layout?
Here is how it should look on the tablet:
And here is how it should look on the phone:

Create layouts in following folders
res/layout-w1280dp - for 10 inch devices
res/layout-w820dp - for 7 inch devices
res/layout - for everything else
Do not use:
res/layout-large may be not correctly detected. Rely on dp size shown above

First detect the device is a phone or a tablet. You can do it by calculating the device screen size.
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
double x = Math.pow(metrics.widthPixels/metrics.xdpi,2);
double y = Math.pow(metrics.heightPixels/metrics.ydpi,2);
double screenInches = Math.sqrt(x+y);
Log.d("debugging","Screen inches : " + screenInches);
And also use different layouts in res folder. In your code decide whether to initiate a ListView or a LinearLayout.

Related

Selecting a different layout directory based on screen Height

In my application, the layout must have a certain look but this is hard to achieve in many different screen resolutions and densities. I've read the developers article and tried my best to support many different screens by creating the following layout files :
However, 4.7" phones(1920x1080) and 5.8" phones(like my s8 : 1080x2220) use the same layout-sw360dp directory. Due to their difference in screen height resolution, the ui elements don't show up correctly for both phones. I want to know how i should go about solving this problem, can i use another qualifier to make android studio select the appropriate layout directory based on the phone's height or something? I'm starting to get lost here. Any help is welcome
After digging even deeper, i found out that you can choose different layouts inside the onCreate() method based on info from DisplayMetrics like so:
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int width=dm.widthPixels;
int height=dm.heightPixels;
if (...) {
setContentView(R.layout.ex1);
} else {
// .....
}
By using the height and width variables as the conditions inside the if statement , i managed to select the appropriate layout files for each screen size!

Differentiate tablet with phone in manifest

Is it possible to differentiate tablet with a phone in manifest: I would like to say if tablet open tablet.class Java file or else open phone.class as the main screen.
I know I can do a setcontentview according to the tablet or phone but the problem is that the layout names and other things are different in both phone and tablet.
For example:
TabletActivity.xml
Layout 1 and Layout 2 with two buttons.
But for PhoneActivity.xml
Layout 1, Layout 2, Layout 3, Layout 4 with 4 buttons.
So If I use same JAVA file - I will end up having long code with conditions - instead if I could differentiate this in the beginning like If tablet just open tablet.class if not open phone.class - It would be easier for me?
AGAIN: I am able to differentiate tablet with phone in my mainactivity.java file. I try ing to know will I be able to do it in manifest reason because I have 20 different theme so I have 20 different xml file for tablet and phone and one java file (right now, Oncreate of my mainactivity - before setcontent I am checking if phone or tablet and then theme value and setting the content accordingly). I am wondering is there any easier way than this method???
Or shall I use two different APK's that works only for phone or tablet?
Is this possible?
Let me know!
Thanks!
Try this code. You can get the screen inches
String inputSystem;
inputSystem = android.os.Build.ID;
Log.d("hai",inputSystem);
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth(); // deprecated
int height = display.getHeight(); // deprecated
Log.d("hai",width+"");
Log.d("hai",height+"");
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
double x = Math.pow(width/dm.xdpi,2);
double y = Math.pow(height/dm.ydpi,2);
double screenInches = Math.sqrt(x+y);
Log.d("hai","Screen inches : " + screenInches+"");
after that you just decide what is tablet and what is phone by screenInches
Screen inches alone won't do it. Lots of devices are in the "muddy" middle ground and could be called "phablet".
We use layouts to set our device. We use res/layout-sw600dp and res/layout-sw720dp folders. they correspond to devices of the smallest width of 600 or 720 display pixels which makes a nice determinant for 7" or 10" tablet sizes
You will be better served by following the Android guidelines for determining the device size with this link
http://developer.android.com/guide/practices/screens-distribution.html

Actual Image size for 7 inch tablets and mobiles

I have an Activity with Grid View with 4 images. My Application focus on above Android version 3 and both Tablets and mobile. I want to know what is the actual image size i want to design to fit all screens. For example,What is the best image size for 7 inch tablet? In developer document said, based on dip , but i need actual each image size to fit on grid view(4 images) in 7 inch tablet.
in this case you have to create different layouts of your mainlayout. for an example . for 5.1 phones such as Galaxy Note you have to create new folder name it as layout-large and for 7.0 to 10.1 tablets you have to create new folder called layout-xlarge after creating these both folder paste your main xml inside them , and you'll see how your layout will look at 5.1 and tablets. this is the best way i came cross to make my images , layouts fits on all the screens. hope that helps you.
Dip x screen density = pixels (actual image size)
dp to px formula
displayMetrics = context.getResources().getDisplayMetrics();
return (int)((dp * displayMetrics.density) + 0.5);
As answered by Bram.

Can I change device DPI programmatically?

I was wondering if I can change device which decides which layout it should choose or which graphic it should choose/scale. This change should only affect my application of course. Can I set somehow device DPI?
The reason why I'm doing that is this phone: http://www.gsmarena.com/samsung_p1000_galaxy_tab-3370.php it has very bad DPI od 240DPI while it's only 170PPI and should be recognized as 160DPI device.
I have quite big graphic for layout-large which looks great on mdpi, but on hdpi they doesn't fit, they are just to big.
Maybe you have another solution than changing device DPI?
Yes it is possible.
The following will set the dpi to 240. Although you have to refresh the activity somehow e.g. restart application.
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
metrics.density = 1.5f;
metrics.densityDpi = 240;
metrics.heightPixels = 1104;
metrics.widthPixels = 1920;
metrics.scaledDensity = 1.5f;
metrics.xdpi = 254.0f;
metrics.ydpi = 254.0f;
getResources().getDisplayMetrics().setTo(metrics);
you should create your application
to support with multiple screens.take a look at documentation
and hope these links helps you
Designing for Multiple Screens
Working with Multiple Android Screens
Samsung Galaxy Tab GT-P1000 take layout from layout-xhdpi if this not there then it will look for large.
Try to support multiples screen resolution for your app based on that documentation
you have to Design alternative layouts and drawables for your app

Android align ImageViews in different resolutions/densities

I have received a PSD layout from my client, and I it contains some fixed background images, and below those images there should be some Buttons, TextViews, etc.
The problem is, that for example the Game Over screen has a background, then there should be image with "You win" or "You lose", above the background in specific offset from top left corner.
If I design the interface for 480x800 phones, and specify the offset in pixels, everything's OK. But if I deploy it into 320x480 phone, it of course doesn't fit, because pixel offsets are different now and the background is scaled.
Using dip units doesn't help, because the smaller phones have physically smaller screens too.
here is a sketch of what I'd like to do. All and it should look similar on phones from 240x320 do 540x960. Is it possible to somehow do this in single XML layout file or do I have to hand-code offsets for every resolution that comes to my mind?
The main problem is that on the picture, the red frame around "you win" is a place where it fits into the orange background, because that's the way the graphics is designed. And when the app is run on phone with smaller resolution, I don't exactly know how to align the "you win" picture on the orange one. .
create different size images from provided PSD for different screen size layout, and create different layout xml file for different screen size, in different layout file you can provide reference of images which fit for layout.
For better aprroach you should go here and also this
#Axarydax if you want want your application to support different screen sizes you will have design them .
I had the same issue
placed images in drawable-hdpi for high density device , in drawable-ldpi for low density device and in drawable-mdpi for medium density device and then
what i did that i created three diffrent layout folders
like for 320x480
layout folder
for screen size 240x320
layout-port-320x240
for screen size 480x800
layout-port-480x800
and created the respective layout with same name
Once you have done compilation for all
android will automatically will pick the respective layout
for that i created emulators of the resolution and then adjusted the layouts as per my requirement
I managed the multi-resolution by getting offset of screen size.
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
height = displaymetrics.heightPixels;
width = displaymetrics.widthPixels;
getDensityName(displaymetrics.density);
int dens=displaymetrics.densityDpi;
double wi=(double)width;
double hi=(double)height;
double x = Math.pow(wi,2);
double y = Math.pow(hi,2);
double screenInches = Math.sqrt(x+y)/(double)dens;
if(screenInches<3.7)
{
offset = 0.7f;
}
else if(screenInches<4.2)
{
offset = 1.1f;
}
else if(screenInches<5.0)
{
offset = 1.5f;
}
else if(screenInches<6.0)
{
offset = 1.7f;
}
else
{
offset = 2f;
}
I hope this may help others.Thanks!

Categories

Resources