Align Buttons with videoView using Constraint layout

Question

I've been trying to make a similar login screen like Snapchat where the two buttons are at the bottom and theres a small video playing on the background layer. When I did everything the buttons do not position themselves where they are rather they go all over the emulator, and the video player is also misaligned.

The code for the login page is given below

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.test.test.Login">

<Button
    android:id="@+id/btnSignUp"
    android:layout_width="414dp"
    android:layout_height="89dp"
    android:text="SIGN UP"
    android:textSize="40sp"
    android:textStyle="bold"
    android:background="#FFD54F"
    android:textColor="#FAFAFA"
    tools:layout_editor_absoluteX="-24dp"
    tools:layout_editor_absoluteY="397dp" />

<Button
    android:id="@+id/btnLogin"
    android:layout_width="414dp"
    android:layout_height="89dp"
    android:fontFamily="sans-serif"
    android:lineSpacingExtra="10sp"
    android:text="Login"
    android:textSize="40sp"
    android:textStyle="bold"
    android:background="#80DEEA"
    android:textColor="#FAFAFA"
    tools:layout_editor_absoluteX="-15dp"
    tools:layout_editor_absoluteY="486dp" />

<VideoView
    android:id="@+id/bgVideoView"
    android:layout_width="394dp"
    android:layout_height="410dp"
    tools:layout_editor_absoluteX="-5dp"
    tools:layout_editor_absoluteY="0dp" />
</android.support.constraint.ConstraintLayout>

What I want it to look like

Emulator Capture

Answer 1

You are using ConstraintLayout as root element but you have given no constraints for your subviews. When you use ConstraintLayout try something like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btnSignUp"
        android:layout_width="0dp"
        android:layout_height="89dp"
        android:background="#FFD54F"
        android:text="SIGN UP"
        android:textColor="#FAFAFA"
        android:textSize="40sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/btnLogin"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText"
        tools:layout_editor_absoluteX="-24dp"
        tools:layout_editor_absoluteY="397dp" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="414dp"
        android:layout_height="89dp"
        android:background="#80DEEA"
        android:lineSpacingExtra="10sp"
        android:text="Login"
        android:textColor="#FAFAFA"
        android:textSize="40sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText"
        tools:layout_editor_absoluteX="-15dp"
        tools:layout_editor_absoluteY="486dp" />

    <VideoView
        android:id="@+id/bgVideoView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="visible"
        app:layout_constraintBottom_toTopOf="@+id/btnSignUp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

ConstraintLayout is more advance and flexable from RelativeLayout. Try learn more about it from here:

Build a Responsive UI with ConstraintLayout

Answer 2

I think you should use a RelativeLayout instead. See sample implementation below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.test.test.Login">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <VideoView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/btnSignUp"
            android:layout_width="414dp"
            android:layout_height="89dp"
            android:text="SIGN UP"
            android:textSize="40sp"
            android:textStyle="bold"
            android:background="#FFD54F"
            android:textColor="#FAFAFA" />

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="414dp"
            android:layout_height="89dp"
            android:fontFamily="sans-serif"
            android:lineSpacingExtra="10sp"
            android:text="Login"
            android:textSize="40sp"
            android:textStyle="bold"
            android:background="#80DEEA"
            android:textColor="#FAFAFA"
            />
    </LinearLayout>

</RelativeLayout>