Contraint layout Adapt for all screens

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.

You can try using **SDP library** for dimensions, https://github.com/intuit/sdp — Jeel Vankhede, Oct 25 '18 at 07:39
@JeelVankhede. Yes. It will useful. But I did not use any dp in my XML. I used bias and DimensionRatio. So any other solution is there? — Vijayadhas Chandrasekaran, Oct 25 '18 at 07:51
@NewDeveloper, you can put constraint layout inside scrollview. — Nirav Bhavsar, Oct 25 '18 at 07:52

score 0 · Answer 1 · answered Oct 25 '18 at 07:53

0

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

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

answered Oct 25 '18 at 07:53

Demigod

5,073
3
31
49

Thanks @Demigod. I will try and let you know. – Vijayadhas Chandrasekaran Oct 25 '18 at 08:05

Contraint layout Adapt for all screens

1 Answers1