0

I am a beginner this is what it looks when i run my app . i am using latest version of Android studio. having constraint Layout as default here are the screenshots

This is what it shows

https://drive.google.com/file/d/0B-ydaOiOKnYnOG1oODVoZEtwRzA/view?usp=drivesdk

This is what im trying to design

https://drive.google.com/file/d/0B-ydaOiOKnYnQ2NKSXdZencxYk0/view?usp=drivesdk

Help would be appreciable.

OneCricketeer
  • 179,855
  • 19
  • 132
  • 245
Ashish
  • 31
  • 1
  • 1
  • 6
  • please include the XML which includes the constraints you've added to the elements. if you have not added any constraints, that's why your elements are all in the upper left. Add constraints to place them correctly. – David Jeske Apr 15 '17 at 06:41

1 Answers1

4

Here's what you want to achieve using ConstraintLayout

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/email_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="EMAIL"
        android:textSize="22sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.2" />

    <EditText
        android:id="@+id/email_input"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_margin="16dp"
        android:background="@android:color/white"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/email_label" />

    <TextView
        android:id="@+id/pwd_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="PWD"
        android:textSize="22sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/email_input" />

    <EditText
        android:id="@+id/pwd_input"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_margin="16dp"
        android:background="@android:color/white"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pwd_label" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LOGIN"
        android:textSize="16sp"
        android:layout_margin="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pwd_input" />

</android.support.constraint.ConstraintLayout>

In the email label's widget, You can also remove the "layout_constraintVertical_bias" and "layout_constraintBottom_toBottomOf" attributes and fix a top margin.
This can be done using Chains too.
Make sure you are using ConstraintLayout 1.0.2.

You can read this great tutorial about ConstraintLayout
Building interfaces with ConstraintLayout

Hope this helps!

Rami Jemli
  • 2,550
  • 18
  • 31