CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-linearlayoutandroid-constraintlayout
Babbara
Babbara

Reputation: 488

How to align a Linear Layout in a Constraint Layout

I'm trying to add a Linear Layout inside my Constraint Layout. I know this shouldn't be done, but I'm gonna explain the reason: I wanna make that linear layout as "invisible" by default. As soon as a user press on the checkbox over it, I'm gonna be making this layout visible to the user. Th problem is that I don't know how to set it between the checkbox and the recycle view. I tried with the command like app:layout_constraintTop_toBottomOf, but this is the result: enter image description here

It is anchored to the top of the layout even if the arrow to the checkbox is correct. This is my code, how can I improve it?

<?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:id="@+id/linearLayout2"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="49dp"
        android:layout_marginLeft="49dp"
        android:layout_marginEnd="49dp"
        android:layout_marginRight="49dp"
        android:text="Search"
        android:textColor="#ffffff"
        android:textSize="@dimen/_20ssp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <EditText
        android:id="@+id/search_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="20dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/search_layout"
        android:ems="10"
        android:fontFamily="@font/nunito_bold"
        android:hint="Search here"
        android:inputType="textPersonName"
        android:paddingLeft="20dp"
        android:paddingTop="10dp"
        android:paddingRight="20dp"
        android:paddingBottom="10dp"
        android:textColor="@color/colorPrimary"
        android:textColorHint="@color/colorPrimary"
        android:textSize="16sp"
        app:layout_constraintEnd_toStartOf="@+id/search_btn"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/search_btn" />

    <ImageButton
        android:id="@+id/search_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:background="@color/cardview_shadow_end_color"
        android:paddingTop="17dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/search_field"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:srcCompat="@mipmap/search_button" />


    <CheckBox
        android:id="@+id/checkbox_adv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Advanced search"
        android:textColor="@color/colorPrimary"
        android:layout_marginLeft="@dimen/_15sdp"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="@+id/search_field"
        app:layout_constraintTop_toBottomOf="@+id/search_field"/>

    <LinearLayout
        android:id="@+id/hiddenTab"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toBottomOf="@+id/checkbox_adv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
        <TextView
            android:id="@+id/textCountry"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="" />
        <EditText
            android:id="@+id/editCustom"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            android:inputType="text"
            android:textSize="18sp" />
    </LinearLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/popular_rc_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkbox_adv">
    </androidx.recyclerview.widget.RecyclerView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:scaleType="center"
        android:src="@drawable/recent_icon"
        android:visibility="invisible"
        android:text="Most Recent"
        app:backgroundTint="@color/design_default_color_on_primary"
        app:elevation="6dp"
        app:maxImageSize="35dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/fab2"
        app:pressedTranslationZ="12dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:scaleType="center"
        android:text="Most Rated"
        android:src="@drawable/rated_icon"
        android:visibility="invisible"
        app:backgroundTint="@color/design_default_color_background"
        app:elevation="6dp"
        app:maxImageSize="35dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/fab1"
        app:pressedTranslationZ="12dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:scaleType="center"
        android:src="@drawable/pop_icon"
        android:visibility="invisible"
        app:backgroundTint="@color/design_default_color_background"
        app:elevation="6dp"
        app:maxImageSize="35dp"
        android:text="Most Popular"
        app:layout_constraintBottom_toTopOf="@+id/fab"
        app:layout_constraintEnd_toEndOf="parent"
        app:pressedTranslationZ="12dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="@dimen/_23sdp"
        android:layout_marginBottom="@dimen/_20sdp"
        android:scaleType="centerInside"
        android:src="@drawable/filter"
        app:backgroundTint="@color/colorPrimary"
        app:elevation="6dp"
        app:maxImageSize="35dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:pressedTranslationZ="12dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Views: 4188

Answers (2)

CyberShark
CyberShark

Reputation: 440

Try This:

<?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:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="49dp"
    android:layout_marginLeft="49dp"
    android:layout_marginEnd="49dp"
    android:layout_marginRight="49dp"
    android:text="Search"
    android:textColor="#ffffff"
    android:textSize="@dimen/_20ssp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<EditText
    android:id="@+id/search_field"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="1dp"
    android:layout_marginTop="12dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/search_layout"
    android:ems="10"
    android:fontFamily="@font/nunito_bold"
    android:hint="Search here"
    android:inputType="textPersonName"
    android:paddingLeft="20dp"
    android:paddingTop="10dp"
    android:paddingRight="20dp"
    android:paddingBottom="10dp"
    android:textColor="@color/colorPrimary"
    android:textColorHint="@color/colorPrimary"
    android:textSize="16sp"
    app:layout_constraintEnd_toStartOf="@id/search_btn"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="@id/textView2"
    app:layout_constraintTop_toBottomOf="@+id/textView2" />

<ImageButton
    android:id="@+id/search_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:background="@color/cardview_shadow_end_color"
    android:paddingTop="17dp"
    app:layout_constraintBottom_toTopOf="@id/checkbox_adv"
    app:layout_constraintEnd_toEndOf="@id/textView2"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toEndOf="@+id/search_field"
    app:layout_constraintTop_toBottomOf="@+id/textView2"
    app:srcCompat="@mipmap/search_button" />


<CheckBox
    android:id="@+id/checkbox_adv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Advanced search"
    android:textColor="@color/colorPrimary"
    app:layout_constraintBottom_toTopOf="@id/hiddenTab"
    app:layout_constraintEnd_toEndOf="@+id/search_btn"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="@+id/search_field"
    app:layout_constraintTop_toBottomOf="@+id/search_field" />

<LinearLayout
    android:id="@+id/hiddenTab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:visibility="gone"
    app:layout_constraintBottom_toTopOf="@id/popular_rc_view"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/checkbox_adv"
    tools:visibility="visible">

    <TextView
        android:id="@+id/textCountry"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text=""
        android:textAlignment="gravity" />

    <EditText
        android:id="@+id/editCustom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:inputType="text"
        android:textSize="18sp" />
</LinearLayout>

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/popular_rc_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginTop="20dp"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/hiddenTab" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:scaleType="center"
    android:src="@drawable/recent_icon"
    android:text="Most Recent"
    android:visibility="invisible"
    app:backgroundTint="@color/design_default_color_on_primary"
    app:elevation="6dp"
    app:layout_constraintBottom_toTopOf="@+id/fab2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1"
    app:maxImageSize="35dp"
    app:pressedTranslationZ="12dp" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="18dp"
    android:layout_marginEnd="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:scaleType="center"
    android:src="@drawable/rated_icon"
    android:text="Most Rated"
    android:visibility="invisible"
    app:backgroundTint="@color/design_default_color_background"
    app:elevation="6dp"
    app:layout_constraintBottom_toTopOf="@+id/fab1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1"
    app:maxImageSize="35dp"
    app:pressedTranslationZ="12dp" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:scaleType="center"
    android:src="@drawable/pop_icon"
    android:text="Most Popular"
    android:visibility="invisible"
    app:backgroundTint="@color/design_default_color_background"
    app:elevation="6dp"
    app:layout_constraintBottom_toTopOf="@+id/fab"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1"
    app:maxImageSize="35dp"
    app:pressedTranslationZ="12dp" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="20dp"
    android:scaleType="centerInside"
    android:src="@drawable/filter"
    app:backgroundTint="@color/colorPrimary"
    app:elevation="6dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1"
    app:maxImageSize="35dp"
    app:pressedTranslationZ="12dp" />

Set visibility to gone and the recycler view adjusts automatically to the constraint.

Upvotes: 2

Debarshi Bhattacharjee
Debarshi Bhattacharjee

Reputation: 830

As you said you want to put it in between the checkbox and RecyclerView, add bottom constraint to your linear layout and change the height 

app:layout_constraintBottom_toTopOf="@+id/popular_rc_view
android:layout_height to wrap_content

Also in your RecyclerView Change this

app:layout_constraintTop_toBottomOf="@+id/checkbox_adv"

To

app:layout_constraintTop_toBottomOf="@+id/hiddenTab"

Upvotes: 0

Related Questions