CODEWITHSUNDEEP
androidandroid-constraintlayout
Shay Ben-Simon
Shay Ben-Simon

Reputation: 41

How to fill the screen with two view in ConstraintLayout?

I'm trying to put a Button at the top of the screen and under it an ImageView which need to fill the screen (all screen sizes). In RelativeLayout it's seems to be easy to do, but in the ConstraintLayout I don't succeed to get it done.

Here is an example of what it's look like in RelativeLayout:

and the XML Code: 

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Download Image"
    android:id="@+id/button"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:onClick="downloadImage" />

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/imageView"
    android:layout_below="@+id/button"
    android:layout_alignParentStart="true" />

Thanks for your help, Shay.

Upvotes: 3

Views: 3639

Answers (3)

Sumit Jain
Sumit Jain

Reputation: 1150

Actually fill_parent property is deprecated. so use 0dp to fill available space of the ConstraintLayout

For your question use following code to show Button at the top of the screen and under it an ImageView which will definitely fill the screen (for all screen sizes).

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:onClick="downloadImage"
        android:text="Download Image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />
</android.support.constraint.ConstraintLayout>

Note: If you want to add margin/padding then apply to the layout or any view as per your requirement. but when you are adding any margin to the view inside to the ConstraintLayout, that view need to have Constraint for that particulate side.

Upvotes: 3

Vincenzo Strumbo
Vincenzo Strumbo

Reputation: 84

Maybe I've not understod your question completely but this is what I did to recreate the image you gave as example:

<?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/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView27"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.59"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2"
        app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />
</android.support.constraint.ConstraintLayout>

and the result: enter image description here

Upvotes: 4

Vygintas B
Vygintas B

Reputation: 1694

<Button
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="Download Image"
   android:id="@+id/button"
   android:layout_alignParentTop="true"
   android:layout_alignParentStart="true"
   android:onClick="downloadImage"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintTop_toTopOf="parent"/>

<ImageView
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:id="@+id/imageView"
   android:layout_below="@+id/button"
   android:layout_alignParentStart="true"
    app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/button"
   app:layout_constraintBottom_toBottomOf="parent"/>

Button needs to have left, right and top constraints with parent.

And ImageView needs to have left, right , bottom constraints with parent and top constraint with button's bottom.

Upvotes: 0

Related Questions