Schaltflächen mit videoView unter Verwendung von Constraint-Layout ausrichten

Question

Ich habe versucht, einen ähnlichen Anmeldebildschirm wie Snapchat zu machen, wo die beiden Tasten unten sind und ein kleines Video auf der Hintergrundebene abgespielt wird. Wenn ich alles mache, positionieren sich die Tasten nicht wo sie sind, sondern sie laufen über den ganzen Emulator, und der Videoplayer ist ebenfalls falsch ausgerichtet.

Der Code für die Login-Seite unter

<?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

Sie verwenden ConstraintLayout als Root-Element, aber sie haben keine Einschränkungen für Ihre Subviews gegeben. Wenn Sie ConstraintLayout so etwas wie dies versuchen:

<?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 ist mehr voraus und flexable aus RelativeLayout. Versuchen erfahren Sie mehr über sie hier:

Build a Responsive UI with ConstraintLayout

Answer 2

gegeben Ich glaube, Sie stattdessen eine RelativeLayout verwenden sollten. Siehe Beispielimplementierung unter:

<?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>