ConstraintLayout not showing last child

I've defined a ConstraintLayout which consists of 3 parts

a chart
a block containing informations relative to the chart
a refresh rate

defined as follow:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/graph_frame"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/chartBackgroundColor"
        android:paddingBottom="8dp"
        app:layout_constraintDimensionRatio="5:4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/graph"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/chartBackgroundColor" />
    </FrameLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/information"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#F21F2124"
        android:padding="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/graph_frame">

        <!-- title -->
        <TextView
            android:id="@+id/current_voltage_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="150dp"
            android:text="Current Volt. (3s)"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/average_voltage_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Average Volt."
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/current_voltage_title" />

        <TextView
            android:id="@+id/range_min_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Range min. (3s)"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/average_voltage_title" />

        <TextView
            android:id="@+id/range_max_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Range max. (3s)"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/range_min_title" />

        <TextView
            android:id="@+id/auto_focus_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Auto Focus"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/range_max_title" />

        <TextView
            android:id="@+id/lecture_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Lecture"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/auto_focus_title" />

        <!-- value -->
        <TextView
            android:id="@+id/current_voltage_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.currentVoltageLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toRightOf="@+id/current_voltage_title"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/average_voltage_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.averageVoltageLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/current_voltage_value" />

        <TextView
            android:id="@+id/range_min_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.rangeMinVoltageLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/average_voltage_value" />

        <TextView
            android:id="@+id/range_max_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.rangeMaxVoltageLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/range_min_value" />

        <TextView
            android:id="@+id/auto_focus_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.autoFocusLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/range_max_value" />

        <TextView
            android:id="@+id/lecture_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.autoPlayLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/auto_focus_value" />

        <!-- pause -->
        <ImageButton
            android:id="@+id/pause_button"
            android:onClick="@{() -> viewModel.pauseButtonPressed()}"
            android:src="@drawable/ic_pause_white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/auto_focus_button"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="spread" />

        <!-- auto-focus -->
        <ImageButton
            android:id="@+id/auto_focus_button"
            android:onClick="@{() -> viewModel.autoFocusButtonPressed()}"
            android:src="@drawable/ic_pause_white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/pause_button" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/warning"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#CC1F2124"
        android:gravity="center"
        android:text="@{viewModel.refreshRateLabelValue}"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/information"
        tools:text="Refresh rate = 125ms" />
</androidx.constraintlayout.widget.ConstraintLayout>

<data>

    <variable
        name="viewModel"
        type="com.imihydronic.hytune.features.oscilloscope.OscilloscopeViewModel" />
</data>

Everything is showing as expected in the preview from Android Studio:

But unfortunately the last block (the refresh rate one) does not appear on a real device:

What am I missing here?

Update: The layout given above was used for a Fragment. This Fragment was inflated inside a FrameLayout container which in turns was wrapped by a ScrollView. Removing the ScrollView and using Taslim Oseni solution did the work.

Upvotes: 3

Answers (3)

Taslim Oseni

Reputation: 6263

I can see that you have three views lined up linearly with id: graph_frame, information and warning. A quick fix would be to constrain each of these three views at both vertical ends (top and bottom). This way all three views would always fit the screen no matter what.

Therefore your code would look this way (I truncated the code to improve readability):

<androidx.constraintlayout.widget.ConstraintLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">


<FrameLayout
    android:id="@+id/graph_frame"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/chartBackgroundColor"
    android:paddingBottom="8dp"
    app:layout_constraintDimensionRatio="5:4"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/information">
    ...
</FrameLayout>


<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/information"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#F21F2124"
    android:padding="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/graph_frame"
    app:layout_constraintBottom_toTopOf="@+id/warning">
    ...
</androidx.constraintlayout.widget.ConstraintLayout>


<TextView
    android:id="@+id/warning"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#CC1F2124"
    android:gravity="center"
    android:text="@{viewModel.refreshRateLabelValue}"
    android:textColor="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/information"
    tools:text="Refresh rate = 125ms" />


</androidx.constraintlayout.widget.ConstraintLayout>

I hope this helps. Merry coding!

Upvotes: 2

Mehul Kabaria

Reputation: 6622

Use GuideLine Constraint to get this.

I added two horizontal guideline to divide screen in three section.

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/graph_frame"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/chartBackgroundColor"
            app:layout_constraintBottom_toTopOf="@+id/guideline"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.github.mikephil.charting.charts.LineChart
                android:id="@+id/graph"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/chartBackgroundColor" />
        </FrameLayout>

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_begin="16dp"
            app:layout_constraintGuide_percent="0.4" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/information"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#F21F2124"
            android:padding="16dp"
            app:layout_constraintBottom_toTopOf="@+id/guideline1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/guideline">

            <!-- title -->
            <TextView
                android:id="@+id/current_voltage_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:minWidth="150dp"
                android:text="Current Volt. (3s)"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/average_voltage_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:minWidth="150dp"
                android:text="Average Volt."
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
                app:layout_constraintTop_toBottomOf="@+id/current_voltage_title" />

            <TextView
                android:id="@+id/range_min_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:minWidth="150dp"
                android:text="Range min. (3s)"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
                app:layout_constraintTop_toBottomOf="@+id/average_voltage_title" />

            <TextView
                android:id="@+id/range_max_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:minWidth="150dp"
                android:text="Range max. (3s)"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
                app:layout_constraintTop_toBottomOf="@+id/range_min_title" />

            <TextView
                android:id="@+id/auto_focus_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:minWidth="150dp"
                android:text="Auto Focus"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
                app:layout_constraintTop_toBottomOf="@+id/range_max_title" />

            <TextView
                android:id="@+id/lecture_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:minWidth="150dp"
                android:text="Lecture"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
                app:layout_constraintTop_toBottomOf="@+id/auto_focus_title" />

            <!-- value -->
            <TextView
                android:id="@+id/current_voltage_value"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{viewModel.currentVoltageLabelValue}"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toRightOf="@+id/current_voltage_title"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/average_voltage_value"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="@{viewModel.averageVoltageLabelValue}"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
                app:layout_constraintTop_toBottomOf="@+id/current_voltage_value" />

            <TextView
                android:id="@+id/range_min_value"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="@{viewModel.rangeMinVoltageLabelValue}"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
                app:layout_constraintTop_toBottomOf="@+id/average_voltage_value" />

            <TextView
                android:id="@+id/range_max_value"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="@{viewModel.rangeMaxVoltageLabelValue}"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
                app:layout_constraintTop_toBottomOf="@+id/range_min_value" />

            <TextView
                android:id="@+id/auto_focus_value"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="@{viewModel.autoFocusLabelValue}"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
                app:layout_constraintTop_toBottomOf="@+id/range_max_value" />

            <TextView
                android:id="@+id/lecture_value"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="@{viewModel.autoPlayLabelValue}"
                android:textColor="@android:color/white"
                app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
                app:layout_constraintTop_toBottomOf="@+id/auto_focus_value" />

            <!-- pause -->
            <ImageButton
                android:id="@+id/pause_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="@{() -> viewModel.pauseButtonPressed()}"
                android:src="@drawable/ic_pause_white"
                app:layout_constraintBottom_toTopOf="@+id/auto_focus_button"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="spread" />

            <!-- auto-focus -->
            <ImageButton
                android:id="@+id/auto_focus_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="@{() -> viewModel.autoFocusButtonPressed()}"
                android:src="@drawable/ic_pause_white"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/pause_button" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_begin="16dp"
            app:layout_constraintGuide_percent="0.7" />

        <TextView
            android:id="@+id/warning"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#CC1F2124"
            android:gravity="center"
            android:text="@{viewModel.refreshRateLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/guideline1"
            tools:text="Refresh rate = 125ms" />
    </androidx.constraintlayout.widget.ConstraintLayout>

Output :

Upvotes: 0

Ashok Kumar

Reputation: 1271

Use guidelines and constraint children between them.

Upvotes: 0

ConstraintLayout not showing last child

Answers (3)

Related Questions