0

I have my Android activity using the XML file below. It shows up fine on the Nexus 7 as the image attached shows but on a smaller screen like Galaxy Nexus, it isn't that good. Can someone please give me a step by step answer of how to solve this issue its very annoying. I know about multiple screen size support using the XDHPI, HDPI .... resource folders. If I put the right image sizes in the folders, will the image correct itself and what are the dimensions I should use to resize the images?

An example of what I am talking about is shown here:

Example

At the moment, all the files are in drawable HDPI at 125 x 125 sizes please help is very appreciated.

<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:background="@color/textbody"
android:orientation="vertical"
tools:context=".MainActivity" >

<Button
    android:id="@+id/Appts"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="267dp"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/stock_appointment_reminder"
    android:padding="10dp"
    android:text="APPTS"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Sputum"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_below="@+id/Appts"
    android:layout_toLeftOf="@+id/Data"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/micro"
    android:padding="10dp"
    android:text="SPUTUM"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Blood_Sugars"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/Sputum"
    android:layout_toRightOf="@+id/Sputum"

    android:background="?android:attr/selectableItemBackground"
    android:drawablePadding="2dp"
    android:drawableTop="@drawable/magnifying_glass"
    android:padding="10dp"
    android:text="FEV1%"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Meds"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_alignBaseline="@+id/Blood_Sugars"
    android:layout_alignBottom="@+id/Blood_Sugars"
    android:layout_alignParentLeft="true"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/therapist"
    android:fadingEdge="horizontal"
    android:padding="10dp"
    android:text="MEDICINE"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Settings"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_alignLeft="@+id/Excercise"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/Excercise"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/application_x_desktop"
    android:padding="10dp"
    android:text="SETTINGS"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Events"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_above="@+id/Meds"
    android:layout_toRightOf="@+id/Appts"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/events"
    android:padding="10dp"
    android:text="EVENTS"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Data"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_above="@+id/Settings"
    android:layout_alignParentRight="true"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/hitchhikeguidetogalaxy3_info"
    android:padding="10dp"
    android:text="MY DATA"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Contacts"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_above="@+id/Meds"
    android:layout_alignParentRight="true"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/contacts_1"
    android:padding="10dp"
    android:text="CONTACTS"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Excercise"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/Meds"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/symptom"
    android:padding="10dp"
    android:text="SYMPTOMS"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/Meals_Snacks"
    android:layout_width="201dp"
    android:layout_height="123dp"
    android:layout_above="@+id/Settings"
    android:layout_alignLeft="@+id/Events"

    android:background="?android:attr/selectableItemBackground"
    android:drawableTop="@drawable/apple"
    android:padding="10dp"
    android:text="NUTRITION"
    android:textColor="@android:color/primary_text_dark"
    android:textSize="14sp"
    android:textStyle="bold" />

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_below="@+id/textView1"
    android:layout_centerHorizontal="true"
    android:src="@drawable/icon" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="18dp"
    android:text="myCF Home"
  android:fontFamily="sans-serif-thin" 
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="@android:color/white"
    android:textSize="50sp"
    android:textStyle="bold" />

</RelativeLayout>
4
  • what you actully want??
    – User11
    May 28, 2014 at 5:03
  • this because, you are using a hardcoded value for width and height, So avoid it and always use wrap content and match parent. May 28, 2014 at 5:04
  • o woops soory here let me attach the images i was referring to
    – zaid kazi
    May 28, 2014 at 5:04
  • images have been attached please see hyperlink in beginning of original questions
    – zaid kazi
    May 28, 2014 at 5:09

2 Answers 2

0

If you want to support multiple screen or want to make your app compatible to all screen size then first thing that you have keep in mind, never use hard-coded value for width and height.

Avoid this:

android:layout_width="201dp"

android:layout_height="123dp"

Use:

        android:layout_width="wrap_content"  or "match_parent"

        android:layout_height="wrap_content"  or "match_parent"

For more details see here: read this

In order to support all screen size you have to read support multiple screen size

Android provides different layout designs for different screen sizes and different bitmap drawables for small, medium, high, and extra high density screens.

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_image.png        // bitmap for medium density
res/drawable-hdpi/my_image.png        // bitmap for high density
res/drawable-xhdpi/my_image.png       // bitmap for extra high density

Use this in android manifest file in order to support multiple screen:

<supports-screens android:smallScreens="true" 
          android:normalScreens="true" 
          android:largeScreens="true"
          android:xlargeScreens="true"
          android:anyDensity="true" />
0

In android you have the option hdpi, mdpi, xdpi,etc..

folders for that , you have to create different images according your device resolution and put your images at there after confirming your device resolution and density category.

for the more reference why it'll happen you can see here

here i explain some chart may be helpful to you.

Low density Small screens QVGA 240x320 (120dpi):

layout-small-ldpi (240x320)  
layout-small-land-ldpi (320x240)

Low density Normal screens WVGA400 240x400 (x432) (120dpi):

layout-ldpi  (240 x 400 )
layout-land-ldpi  (400 x 240 )

Medium density Normal screens HVGA 320x480 (160dpi):

layout-mdpi (320 x 480 )
layout-land-mdpi (480 x 320 )

Medium density Large screens HVGA 320x480 (160dpi):

layout-large-mdpi (320 x 480 )
layout-large-land-mdpi (480 x 320)

Galaxy Tab ( 240 dpi ):

layout-large  (600 x 1024) 
layout-large-land  (1024 x 600)

High density Normal screens WVGA800 480x800 (x854) (240 dpi):

layout-hdpi (480 x 800)
layout-land-hdpi (800 x 480)

Xoom (medium density large but 1280x800 res) (160 dpi):

layout-xlarge (800 x 1280)
layout-xlarge-land (1280 x 800)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.