CODEWITHSUNDEEP
androidandroid-layout
iappmaker
iappmaker

Reputation: 3005

Filling the layout of different size

In my app I am adding some images. I am using dp for all the measurements. When I see test this in different sizes available in eclipse, I could see that it is shown different in different devices.

enter image description here

(see the lollipop is filled for different length).

Please let me know avoid this and to create a similar look-and-feel in all devices

Following is the layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="15" 
android:orientation="vertical">  

<LinearLayout
    android:id="@+id/ll0"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="5"  
    android:orientation="horizontal" > 

                <LinearLayout
                android:id="@+id/ll1"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="4"  
                android:orientation="vertical" > 

                    <LinearLayout
                    android:id="@+id/ll1A" 
                    android:layout_weight="3" 
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >
                        <ImageButton
                        android:id="@+id/imOption1"
                        android:layout_width="90dp"
                        android:layout_height="90dp" 
                        android:layout_gravity="center"
                        android:background="@drawable/repeat" />
                    </LinearLayout>


                    <LinearLayout
                    android:id="@+id/ll1B" 
                    android:layout_weight="3" 
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >
                        <ImageButton
                         android:id="@+id/imOption2"
                        android:layout_width="90dp"
                        android:layout_height="90dp"
                        android:layout_gravity="center" 
                         android:background="@drawable/repeat"/> 
                     </LinearLayout>

                    <LinearLayout
                        android:id="@+id/ll1C" 
                        android:layout_weight="3" 
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical" >

                        <ImageButton
                        android:id="@+id/imOption3"
                        android:layout_width="90dp"
                        android:layout_height="90dp"
                        android:layout_gravity="center" 
                        android:background="@drawable/repeat"/>
                    </LinearLayout>
            </LinearLayout> 

                <LinearLayout
                android:id="@+id/ll2"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="4"  
                android:orientation="vertical" > 

                    <LinearLayout
                    android:id="@+id/ll2A" 
                    android:layout_weight="3" 
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >
                        <ImageButton
                        android:id="@+id/imOption4"
                        android:layout_width="90dp"
                        android:layout_height="90dp" 
                        android:layout_gravity="center"
                        android:background="@drawable/repeat" />
                    </LinearLayout>


                    <LinearLayout
                    android:id="@+id/ll2B" 
                    android:layout_weight="3" 
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >
                        <ImageButton
                         android:id="@+id/imOption5"
                        android:layout_width="90dp"
                        android:layout_height="90dp"
                        android:layout_gravity="center" 
                         android:background="@drawable/repeat"/> 
                     </LinearLayout>

                    <LinearLayout
                        android:id="@+id/ll2C" 
                        android:layout_weight="3" 
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical" >

                        <ImageButton
                        android:id="@+id/imOption6"
                        android:layout_width="90dp"
                        android:layout_height="90dp"
                        android:layout_gravity="center" 
                        android:background="@drawable/repeat"/>
                    </LinearLayout>
            </LinearLayout>


            <LinearLayout
                android:id="@+id/ll3"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="4"  
                android:orientation="vertical" > 

                    <LinearLayout
                    android:id="@+id/ll3A" 
                    android:layout_weight="3" 
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >
                        <ImageButton
                        android:id="@+id/imOption7"
                        android:layout_width="90dp"
                        android:layout_height="90dp" 
                        android:layout_gravity="center"
                        android:background="@drawable/repeat" />
                    </LinearLayout>


                    <LinearLayout
                    android:id="@+id/ll3B" 
                    android:layout_weight="3" 
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >
                        <ImageButton
                         android:id="@+id/imOption8"
                        android:layout_width="90dp"
                        android:layout_height="90dp"
                        android:layout_gravity="center" 
                         android:background="@drawable/repeat"/> 
                     </LinearLayout>

                    <LinearLayout
                        android:id="@+id/ll3C" 
                        android:layout_weight="3" 
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical" >

                        <ImageButton
                        android:id="@+id/imOption9"
                        android:layout_width="90dp"
                        android:layout_height="90dp"
                        android:layout_gravity="center" 
                        android:background="@drawable/repeat"/>
                    </LinearLayout>
            </LinearLayout>  

            <LinearLayout
                android:id="@+id/ll4"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="3"
                android:weightSum="9"
                android:background="#FFFF99" 
                android:orientation="vertical" >  


             <LinearLayout
              android:id="@+id/ll4A"
              android:layout_alignParentLeft="true" 
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical" >
                  <ImageView
                      android:id="@+id/ivDisplayArea"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:scaleType="centerCrop" 
                      android:layout_gravity="center"
                      android:background="@drawable/repeat"/>
                   </LinearLayout>  
            </LinearLayout>
</LinearLayout>
 <LinearLayout
    android:id="@+id/ll5"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="10"  
    android:orientation="horizontal"> 
             <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:gravity="center"
             android:background="#FF6633"
             android:text="Reward Account "
             android:textColor="#FFFFFF"
             android:textStyle="bold" />

            <ImageButton
                 android:id="@+id/bReward1"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="10dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward2"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward3"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward4"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward5"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward6"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward7"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward8"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward9"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 

            <ImageButton
                 android:id="@+id/bReward10"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_gravity="center" 
                 android:layout_marginLeft="7dp"
                 android:background="@drawable/lollipop" /> 


</LinearLayout>




</LinearLayout>

Upvotes: 1

Views: 163

Answers (1)

David Manpearl
David Manpearl

Reputation: 12656

This is actually correct behavior. Android works to make sure that the graphics items remain the same physical size regardless of screen density or screen size.

So, if you choose a button graphics image that is intended to be the size of a person's fingertip, that graphic should always be displayed the exact same physical size (i.e. size in inches) regardless of device characteristics.

If you prefer for your screen to be laid out in such a way that it looks the same on all devices, and is scaled so that the same look is bigger or smaller depending on screen size, then there are two ways to do this:

  1. Instead of using Density-Independent-Pixels "dip" (or the equivalent "dp"), use Scale-Independent-Pixels "sip" (or the equivalent "sp" - which scale with system font size) or "px" (for pixels) to define your graphics component sizes.
  2. Instead of adding all image to your "res/drawable" folder, add different size images with the same filenames to the various "res/drawable-ldpi", "res/drawable-mdpi", "res/drawable-hdpi", and "res/drawable-xhdpi" folders.

You will have to experiment with image sizes to get it right, but the ratios are defined here: Launcher Icons: Size and Format

Upvotes: 1

Related Questions