Items appear larger in Android Studio preview?

Question

So I'm designing my views in Android Studio and this happens:

http://puu.sh/it8CF/aaa697a7d2.jpg <-- How it looks in studio preview

http://puu.sh/it8Gk/047a18f276.jpg <-- How it looks in emulator view, of the exact same device being used for preview

This is making it impossible for me to design the UI for my app. The icons are diffeerent that is intentional, but them overlapping is NOT by design at all. They are just supposed to be next to each other... My friend is running exact same emulator/project from his computer and it looks like this in the Android Studio preview.

Here is a screenshot from his android preview:

http://puu.sh/it8OZ/4647e7a966.jpg

So where do I go from here, any idea on how to fix it?

As requested below here is the XML version in pastebin: http://pastebin.com/QxfBy6F9

There is a total of 20 icons in a Relative Layout, however this happens in all different layouts, not just relative. I'm trying to code it to be a linear layout, with 4 icons per row, however the layout due to the size, if changed would put 3 and then cut 75% of the last icon off, even though on the phone it could show up to 5.

Answer 1

There are some solutions you can try.

1. Keep your layout as is and set width, height size for your image button using below code:

int screenWidth = ...; //Calculate your screen width
imageButton1.getLayoutParams().width = screenWidth / 5;
imageButton1.getLayoutParams().height = screenWidth / 5;

You can calculate screen width using below code:

public static int getScreenWidth(Context context) {
   int width;
        
   if (android.os.Build.VERSION.SDK_INT >= 13) {
     WindowManager wm = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
     Display display = wm.getDefaultDisplay();
     Point size = new Point();
     display.getSize(size);
     width = size.x;
   } else {
     WindowManager wm = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
     Display display = wm.getDefaultDisplay();
     width = display.getWidth();  // deprecated
   }

   return width;
}

2. Chang your layout to LinearLayout for each row:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:background="#00BCD4">
 
  
   <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal">
     <ImageButton
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       />
     <ImageButton
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       />
     <ImageButton
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       />
     <ImageButton
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       />
   </LinearLayout>
   <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal">
     <ImageButton
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       />
     <ImageButton
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       />
     <ImageButton
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       />
     <ImageButton
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       />
   </LinearLayout>
   
   // Add more LinearLayout here...
  
  
</LinearLayout>