Android Studio layout for phones

Question

Getting nearly crazy in creating the layout XML for phones. Maybe I was too long with Xcode or simply don't understand yet how to do it in the right way on Android.

I have played around with creating layouts for Size (small, normal, large, xlarge) and density, but nothing works.

I have a background for my screen, attached, and like to position the two input fields and the button over the layout. That works fine, using relative layout. But when running on devices, real or simulator, the fields are never right over the background. What am I doing wrong?

The XML for normal layout:

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView3"
        android:src="@drawable/login2"
        android:scaleType="fitXY" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/tfPass"
        android:hint="CONTRASEÑA"
        android:inputType="textPassword"
        android:textColor="#000000"
        android:background="#00000000"
        android:singleLine="true"
        android:layout_weight="1"
        android:layout_x="3dp"
        android:layout_y="342dp"
        android:layout_alignTop="@+id/tfMail"
        android:layout_marginTop="76dp"
        android:layout_alignLeft="@+id/tfMail"
        android:layout_alignStart="@+id/tfMail"
        android:layout_alignRight="@+id/tfMail"
        android:layout_alignEnd="@+id/tfMail" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/tfMail"
        android:hint="EMAIL large"
        android:textColor="#000000"
        android:background="#00000000"
        android:singleLine="true"
        android:inputType="textEmailAddress"
        android:layout_weight="1"
        android:layout_x="3dp"
        android:layout_y="287dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="353dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp" />

    <ImageButton
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:id="@+id/btnLogin"
        android:background="#00000000"
        android:onClick="sel_Login2_login"
        android:layout_weight="1"
        android:layout_x="2dp"
        android:layout_y="413dp"
        android:layout_below="@+id/tfPass"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="48dp" />

</RelativeLayout>

I preview witout action bar and in fullscreen. Also this i have in the manifest for the activity:

   <activity
        android:name=".Login2View"
        android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
        android:configChanges="orientation"
        android:screenOrientation="portrait" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

and finally the background

UPDATE - full XML layout

<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="@drawable/login2">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/tfPass"
        android:hint="CONTRASEÑA"
        android:inputType="textPassword"
        android:textColor="#000000"
        android:background="#00000000"
        android:singleLine="true"
        android:layout_weight="1"
        android:layout_x="3dp"
        android:layout_y="342dp"
        android:layout_alignTop="@+id/tfMail"
        android:layout_marginTop="55dp"
        android:layout_alignLeft="@+id/tfMail"
        android:layout_alignStart="@+id/tfMail"
        android:layout_alignRight="@+id/tfMail"
        android:layout_alignEnd="@+id/tfMail" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/tfMail"
        android:hint="EMAIL normal"
        android:textColor="#000000"
        android:background="#00000000"
        android:singleLine="true"
        android:inputType="textEmailAddress"
        android:layout_weight="1"
        android:layout_x="3dp"
        android:layout_y="287dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="255dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp" />

    <ImageButton
        android:layout_width="215dp"
        android:layout_height="50dp"
        android:id="@+id/btnLogin"
        android:background="#00000000"
        android:onClick="sel_Login2_login"
        android:layout_weight="1"
        android:layout_x="2dp"
        android:layout_y="413dp"
        android:layout_below="@+id/tfPass"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />

</RelativeLayout>

UPDATE 03.11.2015

I will attach a screen shot from Android Studio. When using the same XML layout on different devices, the EditText and Button are misplaced. I have put a different background color for each. This is the result as shown in Android Studio and it looks the same on devices:

What's your background ? "imageView3" with @drawable/login2 ? — LaurentY, Oct 27 '15 at 08:54
you should use dimens "@dimen/fourtyeight" instead of dimens "48dp" — Rajesh, Oct 28 '15 at 09:43

LaurentY · Answer 1 · 2015-11-05T10:06:49.230

You have to put background on your top parent view.

for instance if parent view is a RelativeLayout you have to do this:

<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="@drawable/login2">

<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/tfPass"
    android:hint="CONTRASEÑA"
    android:inputType="textPassword"
    android:textColor="#000000"
    android:background="#00000000"
    android:singleLine="true"
    android:layout_weight="1"
    android:layout_x="3dp"
    android:layout_y="342dp"
    android:layout_alignTop="@+id/tfMail"
    android:layout_marginTop="76dp"
    android:layout_alignLeft="@+id/tfMail"
    android:layout_alignStart="@+id/tfMail"
    android:layout_alignRight="@+id/tfMail"
    android:layout_alignEnd="@+id/tfMail" />

<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/tfMail"
    android:hint="EMAIL large"
    android:textColor="#000000"
    android:background="#00000000"
    android:singleLine="true"
    android:inputType="textEmailAddress"
    android:layout_weight="1"
    android:layout_x="3dp"
    android:layout_y="287dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="353dp"
    android:layout_marginLeft="60dp"
    android:layout_marginRight="60dp" />

<ImageButton
    android:layout_width="250dp"
    android:layout_height="50dp"
    android:id="@+id/btnLogin"
    android:background="#00000000"
    android:onClick="sel_Login2_login"
    android:layout_weight="1"
    android:layout_x="2dp"
    android:layout_y="413dp"
    android:layout_below="@+id/tfPass"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="48dp" />

</RelativeLayout>

UPDATE 2015/11/05

So you want to place components on an background image at exact same place for different screen sizes.

You have calculate percentages. For instance, if your image have a size of 480 width / 640 height, if your EditText tfPass left-top corner must be place at 60 left / 240 top.

Percentages are: Left is 60/480=12.5% Top is 210/640=32.8%

Next in your onCreate method find layout with background and create and place EditText with percentages as this:

RelativeLayout headerLayout = (RelativeLayout)findviewbyid(R.id.headerLayout);
EditText tfPass = new EditText(this);
ViewTreeObserver observer = headerLayout.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            int width  = headerLayout.getMeasuredWidth();
            int height = headerLayout.getMeasuredHeight();
            headerLayout .getViewTreeObserver().removeGlobalOnLayoutListener(
                this);

            //add + places components
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(WITH_CALCULATED_WITH_PERCENTAGES, HEIGHT_WITH_CALCULATED_WITH_PERCENTAGES);
            params.leftMargin = (int)(width*12.5);
            params.topMargin = (int)(height*32.8);
            headerLayout.addView(tfPass, params);
        }
});

Thanks. Did it, but still the same effect. On Nexus 5 it looks like designed, but on Galaxy S4, using the same layout (normal as on Nexus 5) the EditText are moved around 15px down. Using Fullscreen and NoActionBar, did this maybe affect the layout? — Dietmar Schwarz Webers, Oct 27 '15 at 15:29
LaurentY, I have the full layout XML added as update to my post — Dietmar Schwarz Webers, Oct 27 '15 at 21:55
you need to specify margin in different folders according to device resolution.In your xml static margins seams to be the culprit. Here is something about dimes:- http://stackoverflow.com/questions/21280277/different-values-folders-in-android @LaurentY — Payal, Oct 28 '15 at 09:12
@DietmarSchwarzWebers, your full layout seems OK, what's the result with this layout ? What are difference between result obtained and result expected ? — LaurentY, Oct 29 '15 at 08:38
@Payal, please read the post before add a comment. This code come from the user posting question ! — LaurentY, Oct 29 '15 at 08:40
I got confused with the name. My solution was intended for user only. I am sorry if it offended you .@LaurentY — Payal, Oct 29 '15 at 10:03
LaurentY, please have a look at my update from today. Hope that this makes my issue more clear. — Dietmar Schwarz Webers, Nov 03 '15 at 21:03

Android Studio layout for phones

1 Answers1