2

Hi I try to make my homepage for all device resolution and for that I use layout-small,layout-normal,layout-large it's OK for normal device but problem happens when device resolution go high. I post some image of what happen in there:

7inch Device with fullHD resolution:

enter image description here

7inch Device with 480*800 resolution: enter image description here

Ass you see in FullHD the buttons not scale I post my xmls for them now: note: in fullHD you can see 600dpi in whit board under green title it show that it use layout-sw600dp and xml code for this layout is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  android:gravity="center_horizontal|bottom" xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/main_logo_back_draw" >

    <FrameLayout 
        android:layout_width="match_parent"
        android:layout_height="110dp"
        android:background="@drawable/title_background_main" >

        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:gravity="center|left"
             >

            <Button
                android:id="@+id/btn_refresh"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="25dp"
                android:background="@drawable/refresh_main_icon" />

            <Button
                android:id="@+id/img_notification"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="20dp"
                android:text=""
                android:textSize="9sp"
                android:gravity="top|right"
                android:background="@drawable/notification_main_icon" />

            <Button
                android:id="@+id/btn_textsize"
                android:layout_width="20dp"
                android:layout_height="15dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="20dp"
                android:background="@drawable/fontsize_main_icon" />

        </LinearLayout>

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="25dp"
            android:src="@drawable/logo_main_icon" />

    </FrameLayout>

    <LinearLayout  android:gravity="center_horizontal|bottom"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_marginTop="4dp"
        android:orientation="vertical"
        android:background="#c8c8c8"
        android:alpha="0.6" >
    </LinearLayout>

    <LinearLayout  
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:gravity="right"
        android:background="@drawable/time_date_main_draw" >

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:src="@drawable/calender_logo_main_icon" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="Date: "
            android:textSize="8sp"
            android:layout_gravity="center" />

        <TextView
            android:id="@+id/btn_date_milady"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="####/##/##"
            android:textSize="8sp" 
            android:layout_gravity="center"/>

        <LinearLayout  
            android:layout_gravity="center"
            android:layout_width="0.5dip"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:background="#d7d7d7"  >
        </LinearLayout>

        <TextView
            android:id="@+id/btn_date_shamsi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="####/##/##"
            android:textSize="8sp" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="600dpi "
            android:textColor="#aaaaaa"
            android:textSize="10sp"
            android:layout_marginRight="5dp"
            android:layout_gravity="center" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_gravity="center"
            android:layout_marginRight="5dp"
            android:src="@drawable/calender_logo_main_icon" />

        <LinearLayout  
            android:layout_width="0.5dip"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:background="#d7d7d7" >
        </LinearLayout>

        <DigitalClock
            android:id="@+id/digitalClock1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textSize="8sp" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ساعت: "
            android:textColor="#aaaaaa"
            android:textSize="8sp"
            android:layout_marginRight="5dp"
            android:layout_gravity="center" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_gravity="center"
            android:layout_marginRight="3dp"
            android:src="@drawable/clock_logo_main_icon" />

    </LinearLayout>

    <LinearLayout  android:gravity="center_horizontal|bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="2"
        android:background="@drawable/dock_hold_main_icon" >

        <ImageView
            android:id="@+id/btn_oghatshari"
            android:layout_width="200dp"
            android:layout_height="200dp"

            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="fitXY"
            android:paddingBottom="10dp"
            android:src="@drawable/pray_main_icon" />

        <ImageView
            android:id="@+id/btn_abohava"
            android:layout_width="200dp"
            android:layout_height="200dp"

            android:paddingLeft="2dp"
            android:paddingRight="2dp"

            android:scaleType="fitXY"
            android:paddingBottom="10dp"
            android:src="@drawable/air_main_icon" />

        <ImageView
            android:id="@+id/btn_about"
            android:layout_width="200dp"
            android:layout_height="200dp"

            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="fitXY"
            android:paddingBottom="10dp"
            android:src="@drawable/info_main" />

        <ImageView
            android:id="@+id/btn_map"
            android:layout_width="200dp"
            android:layout_height="200dp"

            android:paddingBottom="10dp"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"

            android:scaleType="fitXY"
            android:src="@drawable/map_main_icon" />

    </LinearLayout>

    <LinearLayout  android:gravity="center_horizontal|bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="2"
        android:background="@drawable/dock_hold_main_icon" >

        <ImageView
            android:id="@+id/btn_hire"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/estekhdam_main_icon" />

        <ImageView
            android:id="@+id/btn_second"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/seckala_main_icon" />

        <ImageView
            android:id="@+id/btn_cars"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/car_main_icon" />

        <ImageView
            android:id="@+id/btn_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/house_main_icon" />

    </LinearLayout>

    <LinearLayout  android:gravity="center_horizontal|bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="2"
        android:background="@drawable/dock_hold_main_icon" >

        <ImageView
            android:id="@+id/btn_bus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/bus_main_icon" />

        <ImageView
            android:id="@+id/btn_train"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/train_main_icon" />

        <ImageView
            android:id="@+id/btn_airplan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/airplane_main_icon" />

        <ImageView
            android:id="@+id/btn_ads"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/comericals_main_icon" />

    </LinearLayout>

    <LinearLayout  android:gravity="center_horizontal|bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="2" 
        android:background="@drawable/dock_hold_main_icon">

        <ImageView
            android:id="@+id/btn_contact"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/contact_main_icon" />

        <ImageView
            android:id="@+id/btn_about_us"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/about_main_icon" />

        <ImageView
            android:id="@+id/btn_dlesson"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/digital_question_main_icon" />

        <ImageView
            android:id="@+id/btn_news"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:scaleType="centerInside"
            android:paddingBottom="10dp"
            android:src="@drawable/news_main_icon" />

    </LinearLayout>

</LinearLayout>

all layout is the same code except in this layout i set size to first column to see if it's worked but it's not:( can any one tell me what do I wrong ???

Edit: I have all layout folder in my project layout-small, medium , large ,xlarge ... and even layout-sw600dp.

enter image description here

Ali
  • 37
  • 6
  • I forgot to say both device is 4.4.2 – Ali Jul 22 '15 at 05:12
  • you can use 9patch png – Sushrita Jul 22 '15 at 05:29
  • Thanks but what is 9patch png ??? – Ali Jul 22 '15 at 06:37
  • http://developer.android.com/tools/help/draw9patch.html go to this link you will undersatnd – Sushrita Jul 22 '15 at 07:06
  • Put your icons in xhdpi and xxhdpi resolution in drawable-xhdpi and drawable-xxhdpi folder respectively, http://developer.android.com/guide/practices/screens_support.html link will help you. – avinash Jul 22 '15 at 07:37
  • Thanks for comment I Already have them not chance of working :( – Ali Jul 23 '15 at 04:46
  • and for 9patch png it's not change any thing I'm wonder in xml show in eclispe it's complicity show the changes but in device nothing change. – Ali Jul 23 '15 at 04:47
  • Make sure your icons in following dimensions 48 × 48 (mdpi) 72 × 72 (hdpi) 96 × 96 (xhdpi) 144 × 144 (xxhdpi) 192 × 192 (xxxhdpi) – avinash Jul 23 '15 at 11:09
  • the icons have different dimensions but not what you say I read android developer guide: 36x36 (0.75x) for low-density 48x48 (1.0x baseline) for medium-density 72x72 (1.5x) for high-density 96x96 (2.0x) for extra-high-density 180x180 (3.0x) for extra-extra-high-density 192x192 (4.0x) for extra-extra-extra-high-density (launcher icon only; see note above) – Ali Jul 24 '15 at 03:01
  • I don't use the exact same density but what ever my low-density is the medium is1.5x and so on. – Ali Jul 24 '15 at 03:02

2 Answers2

0

Did you tried this in your <ImageView>?

android:scaleType = "fitCenter"
android:adjustViewBounds = "true"

Btw, I suggest you to change your approach. Try to change the image size with <dimen>, its a lot more easy to use and maintain rather than creating one xml file for each display type.

See this article for more information, this may help you as well.

EDIT

Maybe your display doens't fit the requirements to be considered as a "large" layout, so Android won't load your files in layout-large folder but in layout folder instead since it is the default one. Try to create a folder called layout-xlarge and see if you have any difference, but I still recommend you to use <dimen> in a separate xml file instead of creating one layout for each screen size. Check this article for multiple screen support for more information.

Community
  • 1
  • 1
Murillo Ferreira
  • 1,423
  • 1
  • 16
  • 31
  • many thanks @Murillo Henrique but I try adjustViewBounds and it's not working :( – Ali Jul 22 '15 at 06:43
  • @Ali maybe your display doens't fit the requirements to be considered as a "large" layout, so Android won't load your files in layout-large folder but in layout folder instead since it is the default one. Try to create a folder called layout-xlarge and see if you have any difference. If yes, I'll update this answer. Check this: http://developer.android.com/intl/ru/guide/practices/screens_support.html – Murillo Ferreira Jul 22 '15 at 07:00
  • Sorry for late but I have it already and as I say before in layout-sw600dp you can see this: – Ali Jul 23 '15 at 04:44
  • and actually I read all android articles for multi screen documents.I don't know why but non of them are work :( – Ali Jul 23 '15 at 04:52
0

You should increase your ImageView size for value-sw600dp. The normal value (200dp) and your provide images size is convert to around 100px in this case.
You can set layout_weight and and weightSum like this:

<LinearLayout  android:gravity="center_horizontal|bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:layout_weight="2"
    android:weightSum="9"
    android:background="@drawable/dock_hold_main_icon" >


    <ImageView
        android:id="@+id/btn_bus"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
        android:scaleType="fitCenter"
        android:paddingBottom="10dp"
        android:src="@drawable/bus_main_icon" />
     ....
</LinearLayout>

Layout like above can make image scale by width size.
Or you can change to use GridView or TableLayout

But I think it's better to calculate the size and set by code.

justHooman
  • 3,044
  • 2
  • 17
  • 15
  • thanks for your help but can you tell me what different between weight and weightSum ? – Ali Jul 23 '15 at 04:49
  • @Ali Basiclly, weightSum is size of parent view, layout_weight is the ratio of child views with parent. For exp: if parent's weightSum = 9, child's layout_weight = 2, so the child size will be 2/9 of the parent. You can read https://developer.android.com/reference/android/widget/LinearLayout.html#attr_android:weightSum , http://stackoverflow.com/questions/15696920/android-layout-layoutweight-and-weightsum for more detail – justHooman Jul 23 '15 at 04:54
  • GOD NO. I change one of Linearlayout as you say nothing changed. I can't even understand why it's just for this one all other device is work perfect. actually it use 600dp layout is can be cause for the problem ? – Ali Jul 23 '15 at 05:12
  • @Ali, It's weird if nothing changed, you changed as I post above android:layout_width="0dp"? Also try to change scaleType="fitXy" if it can be better. It's not because of the 600dp layout, it's because for this device, screen density and screen resolution is high, while 200dp = 100px, and screen width is around 1000px so it's look small, you can try to increased to size of image( I think 400dp can be enough for this device but it's maybe too big for other). So I prefer to calculate and set the size by code base on screen's pixel witdh. – justHooman Jul 23 '15 at 05:40
  • change size to 400dp in xml not work again !!!! I go for calculate and set the size by code . – Ali Jul 23 '15 at 06:06
  • Why increased size to 400dp not work? at least it's will increase the distance between your images. – justHooman Jul 23 '15 at 06:45
  • It's not even make any change. I'm confusing too. I can't understand what happen !!! it's not scale or making space nothing but in xml showing in eclipse it's show the changes. actually I send it to my friend to test it on his device and send me the result. I say the result here. – Ali Jul 23 '15 at 06:51
  • my friend say his device is not make change any too. every think is the same. – Ali Jul 24 '15 at 02:22
  • Have you double-checked to make sure that you don't set textview3 in another folder is 600dpi too by accident? Change the text in textview3 to another value to check it. – justHooman Jul 24 '15 at 02:41
  • Then from current state, I don't have any other guess to fix this. – justHooman Jul 24 '15 at 03:50
  • I appreciated your help many thanks. I try to calculate in code and see the result. again many thanks. – Ali Jul 24 '15 at 04:46