Scale images in different Devices Android Studio

Question

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"/>

Are you doing anything to scale your image to fit the amount of space that will be available in your grid at runtime? — Doug Stevenson, Feb 29 '16 at 18:26
I have a .png file in drawables and when i use it in GridLayout i place it with margins to orient it. — kanelloc, Feb 29 '16 at 18:28
sometimes you need to build the xml for each res. res/layout/main_activity.xml # For handsets (smaller than 600dp available width) res/layout-sw600dp/main_activity.xml # For 7” tablets (600dp wide and bigger) res/layout-sw720dp/main_activity.xml # For 10” tablets (720dp wide and bigger) - http://developer.android.com/guide/practices/screens_support.html — Michael D., Feb 29 '16 at 18:34

UMESH0492 · Accepted Answer · 2016-02-29T18:54:22.777

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.

With this way i sould make one margin set for every xh xxh etc. devices? — kanelloc, Feb 29 '16 at 18:50
Thnx you dude...Do u have any idea on how to make xml files for different values?LIke an xml for large screens , an xml for small screen etc — kanelloc, Feb 29 '16 at 21:39

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

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;

edited May 23 '17 at 12:31

Community

1
1

answered Feb 29 '16 at 18:33

Marius

810
7
20

score 0 · Answer 3 · answered Feb 29 '16 at 18:36

0

Perhaps the Percent Support Library could assist you in this.

It allows you to set LayoutParams as percentages instead of as hard values.

answered Feb 29 '16 at 18:36

Kuffs

35,581
10
79
92

Scale images in different Devices Android Studio

3 Answers3