What is the most efficient way to accomplish two panel layout with elevation?

Question

So, I've tried different variations using ConstraintLayout to keep it flat as possible but the code below was the best I could accomplish. Plus on top of that I'll need to add a ScrollView as a layout parent. I'd appreciate if someone can help me out. Thanks in advance!

This is the xml I currently have:

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="hardCodedText, contentDescription">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingBottom="20dp"
    android:elevation="@dimen/elevation">

    <TextView
        android:id="@+id/tv_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        style="@style/NDL.Typography.Standard02"
        android:text="Hello there, help us fill out this information"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/name_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@id/tv_header"
        app:layout_constraintStart_toStartOf="@id/tv_header"
        android:hint="Name">

        <EditText
            android:id="@+id/name_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text"
            android:paddingBottom="16dp"
            style="NDL.Typography.Large01"/>

    </android.support.design.widget.TextInputLayout>

    <ImageView
        android:id="@+id/name_info_icon"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_marginEnd="20dp"
        android:src="@drawable/ic_icon_info"
        android:tint="@color/blue_02"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/name_layout"
        app:layout_constraintBottom_toBottomOf="@+id/name_layout"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/address_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@+id/name_layout"
        app:layout_constraintStart_toStartOf="@+id/name_layout"
        android:hint="Address">

        <EditText
            android:id="@+id/address_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textMultiLine"
            android:paddingBottom="16dp"
            style="NDL.Typography.Large01"/>

    </android.support.design.widget.TextInputLayout>

    <ImageView
        android:id="@+id/address_icon_info"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_marginEnd="20dp"
        android:src="@drawable/ic_icon_info"
        android:tint="@color/blue_02"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/address_layout"
        app:layout_constraintBottom_toBottomOf="@+id/address_layout"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/phone_number_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:layout_marginTop="16dp"
        android:elevation="@dimen/elevation"
        app:layout_constraintTop_toBottomOf="@+id/address_layout"
        app:layout_constraintStart_toStartOf="@+id/address_layout"
        android:hint="Phone number">

        <EditText
            android:id="@+id/phone_number_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="phone"
            android:paddingBottom="20dp"
            style="NDL.Typography.Large01"/>

    </android.support.design.widget.TextInputLayout>

    <ImageView
        android:id="@+id/phone_number_icon"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_marginEnd="20dp"
        android:tint="@color/blue_02"
        android:src="@drawable/ic_icon_info"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/phone_number_layout"
    app:layout_constraintBottom_toBottomOf="@+id/phone_number_layout"/>

</android.support.constraint.ConstraintLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/gray_02">

    <TextView
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:layout_margin="16dp"
        style="NDL.Typography.Standard01"
        android:text="Make sure to keep your information up to date."/>

    <Button
        style="@style/NDL.Button.Primary"
        android:id="@+id/bt_confirm_button"
        android:layout_weight="0"
        android:layout_height="36dp"
        android:layout_width="match_parent"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="20dp"
        android:text="CONFIRM"/>

</LinearLayout>
</LinearLayout>

and this is what I'm trying to accomplish:

So you want the upper part of your layout will look like he is having some elevation? — Tamir Abutbul, Mar 15 '19 at 21:24
Yes, the code above accomplish the same but is not efficient because contains nested viewgroups — devB78, Mar 15 '19 at 21:40

score 0 · Answer 1 · answered Mar 15 '19 at 21:57

You can use this code:

<ScrollView 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:orientation="vertical">

<LinearLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="222dp"
    android:orientation="vertical">

    <androidx.constraintlayout.widget.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_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="8dp"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>

You can put your existing code to a ScrollView, but the problem is you won't be able to set LinearLayout height="match_parent", so I suggest to set it with an any default value, and then within your activity set it's height grammatically as a height of current user phone screen multiplied with 3, use a code like this:

LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
DisplayMetrics metrics = new DisplayMetrics();
linearLayout.getLayoutParams().height = metrics.heightPixels * 3;

Yes, it's a kind of hardCode ))) I'm sure your layout won't stretch more than for 3 screen sizes... Just try, it must work )))

the solution for that is to keep LinearLayout's height = `wrap_content` and set the `android:fillViewport="true"`. :-) — devB78, Mar 15 '19 at 22:42
Your layout is not so smart - you have ConstraintLayout inside LinearLayout inside ScrollView, have a look at my answer above -I only used 1 layout and it is also responsive. This is the magic of ConstraintLayout - powerful tool to use without having nested layouts(its better for preformence) — Tamir Abutbul, Mar 15 '19 at 22:43

Tamir Abutbul · Answer 2 · 2019-03-15T22:39:57.353

You can try to use constaintLayout with guidelines and cardView like this :

<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"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
android:id="@+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color"
tools:context=".Fragments.MenusDesign.ExpandableCategoriesMenu.ExpandableCategoriesMenu"
xsi:schemaLocation="http://schemas.android.com/apk/res/android ">


<androidx.cardview.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@color/colorAccent"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0" />

<TextView
    android:id="@+id/tv_header"
    android:layout_width="342dp"
    android:layout_height="30dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:elevation="2dp"
    android:text="Hello there, help us fill out this information"
    app:layout_constraintEnd_toEndOf="@+id/cardView"
    app:layout_constraintStart_toStartOf="@+id/button4"
    app:layout_constraintTop_toTopOf="@+id/cardView" />







<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5" />


<Button
    android:id="@+id/bt_confirm_button"
    android:layout_width="272dp"
    android:layout_height="48dp"
    android:layout_marginStart="28dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="16dp"
    android:layout_weight="0"
    android:elevation="2dp"
    android:text="CONFIRM"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Make sure to keep all your info private"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/cardView" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:elevation="2dp"
    android:text="phone number"
    app:layout_constraintBottom_toBottomOf="@+id/cardView"
    app:layout_constraintEnd_toEndOf="@+id/button4"
    app:layout_constraintStart_toStartOf="@+id/button4" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:elevation="2dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintEnd_toEndOf="@+id/cardView"
    app:layout_constraintStart_toStartOf="@+id/cardView"
    app:layout_constraintTop_toBottomOf="@+id/button5" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Name"
    app:layout_constraintEnd_toEndOf="@+id/button4"
    app:layout_constraintStart_toStartOf="@+id/button4"
    app:layout_constraintTop_toBottomOf="@+id/tv_header" />

Now all you need to do is to give your cardView your design (shadow, color etc...) and you have your top half of the screen nicely elevated without using any nested layouts inside.

Your layout will look like this:

What is the most efficient way to accomplish two panel layout with elevation?

2 Answers2