CODEWITHSUNDEEP
javaandroid
Manish Joshi
Manish Joshi

Reputation: 95

Nesting within Constraint Layout

I am new to android app development and trying to build a simple employee management app. The aim is reuse as many activities as possible. Now, I basically have four activities - a registration form, a list of all the employees (which basically uses multiple instances of a single employee record layout), one to update a record and one to delete a record. I plan to use a single activity for update (which will use the layout of the registration form) and delete (which will use the single record layout) operations. To achieve this, I want to enable the registration form layout for update and the disable it and enable the single record layout with an additional 'delete' button to delete a record, and vice - versa. Since I am using a constraint layout, I want to include a container which holds the necessary layout.

I tried using a constraint layout as the container inside a constraint layout, but it is causing problems when I try to constraint the inner layout with the objects int the outer layout. I tried to code the constraints in xml as well as via mouse click and drag. Basically I am unable to constraint the inner constraint layout with objects in the outer constraint layout.

Xml for update/delete activity which I intend to reuse:

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

   <TextView
       android:id="@+id/textView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginStart="8dp"
       android:layout_marginLeft="8dp"
       android:layout_marginEnd="8dp"
       android:layout_marginRight="8dp"
       android:text="Enter ID"
       android:textColor="#000"
       app:layout_constraintBaseline_toBaselineOf="@+id/editText"
       app:layout_constraintEnd_toStartOf="@+id/editText"
       app:layout_constraintStart_toStartOf="parent" />

   <EditText
       android:id="@+id/editText"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="16dp"
       android:layout_marginEnd="44dp"
       android:layout_marginRight="44dp"
       android:ems="10"
       android:inputType="number"
       android:text="Name"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       android:background="@drawable/form_drawable"
       android:paddingEnd="8dp"
       android:paddingStart="8dp"
       android:paddingLeft="8dp"
       android:paddingRight="8dp"
       android:textColor="#FFF"/>



</android.support.constraint.ConstraintLayout>

Xml for a single employee record:

<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.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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="match_parent">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:text="Name"
                android:textColor="#000"
                app:layout_constraintBaseline_toBaselineOf="@+id/editText2"
                app:layout_constraintEnd_toStartOf="@+id/editText2"
                app:layout_constraintStart_toEndOf="@+id/textView6" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="64dp"
                android:layout_marginRight="64dp"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPersonName"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:paddingRight="8dp"
                android:textColor="#FFF"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:text="Designation"
                android:textColor="#000"
                app:layout_constraintBaseline_toBaselineOf="@+id/editText3"
                app:layout_constraintEnd_toStartOf="@+id/editText3"
                app:layout_constraintStart_toEndOf="@+id/textView6" />

            <EditText
                android:id="@+id/editText3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="64dp"
                android:layout_marginRight="64dp"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPersonName"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:paddingRight="8dp"
                android:textColor="#FFF"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText2" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:text="Address"
                android:textColor="#000"
                app:layout_constraintBaseline_toBaselineOf="@+id/editText4"
                app:layout_constraintEnd_toStartOf="@+id/editText4"
                app:layout_constraintStart_toEndOf="@+id/textView6" />

            <EditText
                android:id="@+id/editText4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="64dp"
                android:layout_marginRight="64dp"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPersonName"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:paddingRight="8dp"
                android:textColor="#FFF"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText3" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:text="Phone
"

                android:textColor="#000"
                app:layout_constraintBaseline_toBaselineOf="@+id/editText5"
                app:layout_constraintEnd_toStartOf="@+id/editText5"
                app:layout_constraintStart_toEndOf="@+id/textView6" />

            <EditText
                android:id="@+id/editText5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="64dp"
                android:layout_marginRight="64dp"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPersonName"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:paddingRight="8dp"
                android:textColor="#FFF"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText4" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="20dp"
                android:text="ID"
                android:textColor="#000"
                app:layout_constraintEnd_toStartOf="@+id/textView2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

Xml for registration form:

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


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Fields marked with * are compulsory." />

            <TextView
                android:id="@+id/tvFirstName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="First Name *"
                android:textColor="@android:color/secondary_text_light"
                android:textSize="18sp" />

            <EditText
                android:id="@+id/etFirstName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPersonName"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:text="MAnish"
                android:textColor="#FFF"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/tvMiddleName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Middle Name"
                android:textColor="@android:color/secondary_text_light"
                android:textSize="18sp" />
            <EditText
                android:id="@+id/etMiddleName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPersonName"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:text="JOshi"
                android:textColor="#FFF"
                android:textSize="24sp"  />

            <TextView
                android:id="@+id/tvLastName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Last Name *"
                android:textColor="@android:color/secondary_text_light"
                android:textSize="18sp" />
            <EditText
                android:id="@+id/etLastName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPersonName"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:textColor="#FFF"
                android:textSize="24sp" />

            <TextView

                android:id="@+id/tvAddress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Address *"
                android:textColor="@android:color/secondary_text_light"
                android:textSize="18sp" />
            <EditText
                android:id="@+id/etAddress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPostalAddress"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:textColor="#FFF"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/tvPhone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Phone *"
                android:textColor="@android:color/secondary_text_light"
                android:textSize="18sp" />
            <EditText
                android:id="@+id/etPhone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="phone"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:textColor="#FFF"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/tvDesignation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Designation *"
                android:textColor="@android:color/secondary_text_light"
                android:textSize="18sp" />
            <EditText
                android:id="@+id/etDesignation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/form_drawable"
                android:ems="10"
                android:inputType="textPersonName"
                android:paddingStart="8dp"
                android:paddingLeft="8dp"
                android:paddingEnd="8dp"
                android:textColor="#FFF"
                android:textSize="24sp" />

            <Button
                android:id="@+id/button5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="SAVE"
                android:layout_marginTop="32dp"
                android:background="@drawable/crud_btns"
                android:textColor="#FFF"
                android:textSize="30sp"/>
        </LinearLayout>
    </ScrollView>
</android.support.constraint.ConstraintLayout>

Within the update/delete layout I want to input an id permanently. Then, according to the required operation, I want to display the registration form with all the fields filled in with the previous data so as to update it. If the operation is to delete, then I just want to show the details of the employee with the given ID (so the user doesn't delete the wrong record) as well as a delete button. Any inputs would be appreciated.

Upvotes: 0

Views: 53

Answers (1)

Aniket Jadhav
Aniket Jadhav

Reputation: 578

you are not using nested constraint layout here. you are using three different constraint layout rather. you have to create one main constraint layout and inside that main layout you have to design your three constraint layouts.

Your code will be like 

#1st constraint-layout start(main-layout)# 

    #2nd constraint-layout start# 
        //xml code here 
     #2nd constraint-layout End# 

     #3rd constraint-layout start# 
        //xml code here 
     #3rd constraint-layout End# 

      #4th constraint-layout start# 
         //xml code here 
       #4th constraint-layout End# 

  #1st constraint-layout End(main-layout)#

So basically include your all three constraint layouts in one Main constraint-Layout

Upvotes: 1

Related Questions