Search code examples
androidandroid-linearlayoutandroid-constraintlayout

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!


Solution

  • 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>