Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Android Build an Interactive Story App Tuning the User Interface Handling Different Screen Sizes

Posted by Elsa Marie W.
Elsa Marie W.
337 Points

ConstraintLayout within LinearLayout

Hello!

I had the problem that two big, single elements within a constraint Layout overlaped in small screen sizes. I tried to solve the problem with creating a constraint layout, containing two linear layouts (so they wont overlap) and those are each containing a constraint layout, so I can still handle objects within. I tried it, and it works, but I'm still worried that it could cause problems later on, because it doesn't seem like the usual way. Maybe there are better suggestions?

for better understanding:

Constraint ( -Linear ( --Constraint ( ---ImageView )) -Linear ( --Constraint ( ---TextView ---Button )))

Thanks for bothering :)

Ben Deitch
Ben Deitch
Treehouse Teacher
Ben Deitch
Ben Deitch
Treehouse Teacher

Hey Elsa! I'd think you could get away without the LinearLayouts, but it's hard to be sure. Could you post your layout's XML file? I can take a look and maybe make a suggestion.

1 Answer

Elsa Marie W.
Elsa Marie W.
337 Points
Elsa Marie W.
Elsa Marie W.
337 Points

Well actually you were right, I was able to build it without linear layouts. Still I'm keen why the linear layout is the default setting for a scroll view? Does my Scroll View also work fine with a constraint layout? Tests went fine. So I have a constraint layout, within a scroll view, within a constraint layout -

Still, here is my layout file:

<?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" android:background="@drawable/background_text" tools:context=".ui.grey.textMain">

<ScrollView
    android:id="@+id/scrollView2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="55dp"
    android:layout_marginLeft="35dp"
    android:layout_marginRight="55dp"
    android:layout_marginStart="35dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageStory"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:contentDescription="scene 3 reese + roman on lake"
            android:cropToPadding="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@mipmap/picture_1_x" />

        <TextView
            android:id="@+id/textMain1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/s3_1.0"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageStory"
            tools:textColor="@color/TextGrau" />

        <TextView
            android:id="@+id/textMain2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:contentDescription="Alternatives Textfeld"
            android:text="PLATZHALTERTEXT"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textMain1"
            tools:textColor="@color/TextGrau" />

        <Button
            android:id="@+id/bNextText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="65dp"
            android:layout_marginTop="35dp"
            android:background="@mipmap/button_text"
            android:text="NÄCHSTE SEITE"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textMain2"
            tools:textColor="@color/TextGrau" />

    </android.support.constraint.ConstraintLayout>
</ScrollView>

<Button
    android:id="@+id/bFAQ"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="0dp"
    android:layout_height="70dp"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="45dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/scrollView2"
    app:layout_constraintTop_toTopOf="@+id/scrollView2" />

<Button
    android:id="@+id/bCharacters"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="0dp"
    android:layout_height="70dp"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="260dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/scrollView2"
    app:layout_constraintTop_toBottomOf="@+id/bFAQ" />

<Button
    android:id="@+id/bSetting"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="0dp"
    android:layout_height="70dp"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="15dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/scrollView2"
    app:layout_constraintTop_toBottomOf="@+id/bCharacters" />

</android.support.constraint.ConstraintLayout>