CODEWITHSUNDEEP
androidandroid-linearlayoutandroid-constraintlayout
Itay Braha
Itay Braha

Reputation: 536

Constraint Layout does'nt constraint nested elements of other layouts

I'm trying to create a layout of a list which starts on the bottom of a button and it's 3/4 of screen's width.

Just like this:

imagine that there is a button instead of a bar

First, I used nested Linear layouts a horizonal and a vertical one, but then I read here that Constraint layouts are more responsive and I was impressed and gave it a try.

So, I tried to replace the outer layout to a constraint layout but now, I can't constraint the list to start at the bottom of the button and it starts at top of the screen. I tried to see what would happen if I replaced the whole linear layout with a button just to see that the attributes are correctly implemented and it worked, so I understood that the Constraint layout does'nt effect the sons of the Linear layout although it should be effecting the whole layout (as I see it).

my code is the following:

<?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=".MainActivity">


    <ImageButton
        android:id="@+id/settings_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#FFFFFF"
        android:src="@drawable/ic_menu_black_32dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <LinearLayout
        android:id="@+id/list_linear_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/settings_button"
        app:layout_constraintTop_toBottomOf="@+id/settings_button">

        <ListView
            android:id="@+id/listview"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3" />
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

My current layout looks like this:

current layout

I really appriciate the helpers!

Upvotes: 0

Views: 797

Answers (2)

Lukas Anda
Lukas Anda

Reputation: 746

You need to change layout height of linear layout to 0dp, I will put here the layout for you. Also consider migrating to androidx :)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">


<ImageButton
    android:id="@+id/settings_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#FFFFFF"
    android:src="@drawable/ic_menu_black_32dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<LinearLayout
    android:id="@+id/list_linear_layout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="4"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/settings_button"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/settings_button">

    <ListView
        android:id="@+id/listview"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />
</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 1

Alex Shiganov
Alex Shiganov

Reputation: 133

I think, that using match_parent as width or height of child and adding any constraint is wrong here. Edited xml (change margins if you want):

<?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=".MainActivity">


<ImageButton
    android:id="@+id/settings_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="24dp"
    android:layout_marginTop="24dp"
    android:backgroundTint="#FFFFFF"
    android:src="@drawable/ic_menu_black_32dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<LinearLayout
    android:id="@+id/list_linear_layout"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="24dp"
    app:layout_constrainedWidth="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="@+id/settings_button"
    app:layout_constraintTop_toBottomOf="@+id/settings_button"
    app:layout_constraintWidth_percent="0.75">

    <ListView
        android:id="@+id/listview"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"/>
</LinearLayout>

Upvotes: 0

Related Questions