CODEWITHSUNDEEP
androidandroid-layoutandroid-studio
Linkandzelda
Linkandzelda

Reputation: 611

Android Studio: distances shown on layout preview appear larger on device

I'm currently learning Android Development following a book and using Android Studio to do the creating and a Nexus 4 device for testing. I've been using the layout previewer to test my layout for whether it's good to go or not.

Here is a screenshot of the layout and how it appears in the Android Studio previewer. Sorry for the large size.

enter image description here

Here is a screenshot taken from my Nexus 4 device to show the differences.

enter image description here

As you can see the EditText fields are showing as in line on the preview but out of line on the device. I compared the 2 images and the rest of the elements are in place as they should be, except for the EditTexts. The layout is using 2 nested LinearLayout one left one right.

Here's how one of my EditText's are defined in the XML. All the others are copies of this with different IDs.

<EditText android:id="@+id/editTextColonies"
          android:inputType="number"
          android:ems="12"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="12dp"/>

I'm wondering if this is caused by my code, my device or simple the Android Studio. Thanks in advance for a solution.

Upvotes: 1

Views: 1021

Answers (2)

yiati
yiati

Reputation: 1025

Make rows of Buttons next to EditTexts. Each row should be a LinearLayout or RelativeLayout, and you should set the android:height="wrap_content" for each of those rows. Put your button edittext pairs into each of those.

<LinearLayout
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom" >

         <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/button_name_colonists"
           android:id="@+id/colonistsButton"/>

         <EditText android:id="@+id/editTextColonists"
                android:inputType="number"
                android:ems="12"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"/>

    </LinearLayout>

</LinearLayout>

Something to look at for re-using layouts such as the commonly repeated rows is this link by Google about include.

Upvotes: 0

Steven
Steven

Reputation: 177

Switch to a RelativeLayout if you can, you can then define android:layout_toRightOf and android:layout_below XML tags. I don't recommend using the GUI to place objects with RelativeLayout as it is quite annoying. It's easier to just place it with XML.

Upvotes: 2

Related Questions