0

I'm trying to fill a section of my app with 3 imageViews. I want them to fill the constraint equally. When I set the height to a set number, such as 150dp, on smaller screens the view obtrudes the layout. I have tried setting the width to 0dp, match_parent and wrap_content. Nothing seems to work. I also tried adding a linear layout to place the imageViews in but that doesn't help. Here's my XMl. I've also included a picture of how the view looks on a 3.7 inch display.

   <?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:fancy="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.fume.ali.getrequests.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="124dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:adjustViewBounds="true"
        android:gravity="center_vertical"
        android:paddingTop="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toTopOf="@+id/imageView3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progress"
        app:layout_constraintVertical_bias="1.0"
        app:srcCompat="@drawable/pc" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="125dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:adjustViewBounds="true"
        android:gravity="center_vertical"
        android:paddingTop="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toTopOf="@+id/btn_spotify"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView3"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/ps" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="125dp"
        android:layout_marginBottom="164dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:adjustViewBounds="true"
        android:gravity="center_vertical"
        android:paddingTop="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toTopOf="@+id/btn_spotify"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.6"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/xbox" />

    <com.github.florent37.awesomebar.AwesomeBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="@android:color/white"
        android:elevation="4dp"
        android:paddingLeft="0dp"
        app:bar_primaryColor="#000000"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <mehdi.sakout.fancybuttons.FancyButton
        android:id="@+id/btn_spotify"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="36dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        app:fb_text="Search"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintVertical_bias="1.0"
        fancy:fb_borderColor="#FFFFFF"
        fancy:fb_borderWidth="1dp"
        fancy:fb_defaultColor="#7ab800"
        fancy:fb_focusColor="#9bd823"
        fancy:fb_iconPosition="left"
        fancy:fb_radius="30dp"
        fancy:fb_textColor="#FFFFFF" />


    <fr.castorflex.android.smoothprogressbar.SmoothProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="14dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="168dp"
        android:indeterminate="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:spb_color="#FF0000"
        app:spb_mirror_mode="false"
        app:spb_progressiveStart_activated="true"
        app:spb_progressiveStart_speed="1.5"
        app:spb_progressiveStop_speed="3.4"
        app:spb_reversed="false"
        app:spb_sections_count="4"
        app:spb_speed="2.0"
        app:spb_stroke_separator_length="4dp"
        app:spb_stroke_width="4dp" />

    <studio.carbonylgroup.textfieldboxes.TextFieldBoxes
        android:id="@+id/text_field_boxes"
        android:layout_width="0dp"
        android:layout_height="88dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:enabled="true"
        app:hasClearButton="true"
        app:helperText="Helper is here"
        app:iconSignifier="@drawable/finder"
        app:labelText="Username"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/bar"
        app:maxCharacters="16"
        app:minCharacters="3"
        app:primaryColor="@android:color/holo_green_dark">


        <studio.carbonylgroup.textfieldboxes.ExtendedEditText
            android:id="@+id/extended_edit_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="EpicUsername" />

    </studio.carbonylgroup.textfieldboxes.TextFieldBoxes>


</android.support.constraint.ConstraintLayout>

My app on a 3.7 inch screen

Ali
  • 1
  • 2
  • DPs are relative to a 160 dpi screen, so they will always vary depending on the screen size, you have to completely wrap your mind about that because you seem still haven't. As for your issue, I'd try wrapping the images on a LinearLayout and use the `android:weightSum` and `android:weight` on the children to achieve what you want. ConstraintLayout is not made for this use case. – Chisko Apr 10 '18 at 22:31

2 Answers2

0

This pretty much answers this question: LinearLayout with two children of equal width which is using the linearlayout to solve similar problem.

Sujit Poudel
  • 541
  • 7
  • 19
0

If you want to set 3 images equally in the screen using ConstraintLayout You can use Guideline as below

Here I set vertical Guideline as 80% of the screen You can customize according to your requirement.

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

    <android.support.constraint.Guideline
            android:id="@+id/guideline"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.8"/>

    <ImageView
            android:id="@+id/image1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher_background"
            app:layout_constraintVertical_chainStyle="packed"
            app:layout_constraintBottom_toTopOf="@id/image2"
            app:layout_constraintTop_toTopOf="parent"/>

    <ImageView
            android:id="@+id/image2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher_background"
            android:layout_marginTop="8dp"
            app:layout_constraintVertical_chainStyle="packed"
            app:layout_constraintBottom_toBottomOf="@id/image3"
            app:layout_constraintTop_toBottomOf="@id/image1"/>

    <ImageView
            android:id="@+id/image3"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher_background"
            android:layout_marginTop="8dp"
            app:layout_constraintVertical_chainStyle="packed"
            app:layout_constraintBottom_toBottomOf="@id/guideline"
            app:layout_constraintTop_toBottomOf="@id/image2"/>

</android.support.constraint.ConstraintLayout>
Mittal Varsani
  • 5,601
  • 2
  • 15
  • 27