约束布局适用于所有屏幕

Question

I am learning constraint layout. I am new to constraint layout. I read some tutorials and got good idea about the layout. But when I try to implement the layout I am struggling to fit for all the screens. Here with I attached my sample screen. I am designing a login screen. I want to fit this design for all the screens.

<?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.admin1.constraintlayoutsample.MainActivity"
    android:background="#E0E0E0">

    <ImageView
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageView"
        app:layout_constraintVertical_bias="0.128" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Email"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/textView6"
        app:layout_constraintVertical_bias="0.10" />


    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="44dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:alpha="0.23"
        android:background="@drawable/textviewshape"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />


    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Password"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        app:layout_constraintVertical_bias="0.100" />


    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="0.23"
        android:background="@drawable/textviewshape"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/textView4"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />


    <Button
        android:id="@+id/button3"
        android:layout_width="175dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/buttonshape"
        android:text="Login"
        android:textColor="@android:color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText2"
        app:layout_constraintVertical_bias="0.20"/>


</android.support.constraint.ConstraintLayout>

When I see this design in 5'inch or 6'inch screen it's looking good. But when I see in 4.7 or below screen size it is not fit into the screen. Please let me know how to use constraint layout for all screen sizes. And please suggest some samples/tutorial for the this.

Answer 1

I think in order to make your screen adjustable, you can use one of several solutions:

1. Make your view's height or margin in between in percents. Using Guideline or use weight (eg layout_constraintHorizontal_weight ). For more info check this thread . And this about weight.
2. Make your image and/or text inputs, button to use different scale for different screen size.
3. Make your screen scrollable if none from above is applies to your solution.