Develop Reference

Make ConstraintLayout responsive in Android

I am working on a UI, in which I have to take email and number from user, buttons should must be at bottom, after button, there is a footer too on bottom. I have to make it responsive. I am using scroll view for this purpose. I am stuck on a point.
I am using wrap_content as height for a view, and giving its top to bottom of upper view, and its bottom to top of lower view's top. On small screens, it is working fine, but due to these constraints, on large screens, it is in the centre of screen.
Please have a look on 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<ScrollView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/footer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="6dp"
android:scrollbars="none"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon_img"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="18dp"
android:src="#drawable/ic_sample"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/loginTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/icon_img"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:fontFamily="#font/exo_light"
android:gravity="start"
android:text="Login"
android:textColor="#color/charcol_blue"
android:textSize="22sp"
app:layout_constraintTop_toBottomOf="#id/icon_img" />
<TextView
android:id="#+id/login_Desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/loginTxt"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/exo_regular"
android:gravity="start"
android:text="Enter your credentials"
android:textColor="#color/charcol_blue"
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="#id/loginTxt" />
<EditText
android:id="#+id/loginEditTextEmail"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/login_Desc"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#drawable/rounded_input_shape"
android:fontFamily="#font/exo_regular"
android:hint="Email"
android:inputType="textEmailAddress"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:textSize="17sp"
app:layout_constraintTop_toBottomOf="#id/login_Desc" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/btnLayout"
app:layout_constraintTop_toBottomOf="#id/loginEditTextEmail">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginHorizontal="20dp"
android:background="#drawable/rounded_input_shape"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="50dp">
<com.hbb20.CountryCodePicker
android:id="#+id/ccp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#F5F5F5"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:ccp_autoDetectCountry="true"
app:ccp_defaultPhoneCode="41" />
<EditText
android:id="#+id/editText_carrierNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint=" Ph Number"
app:layout_constraintLeft_toRightOf="#+id/ccp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/ccp"
app:layout_constraintBottom_toBottomOf="#+id/ccp"
android:fontFamily="#font/exo_regular"
android:inputType="phone"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:textSize="15sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/btnLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="#+id/loginBtnSubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/blue_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="#string/login"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/imageView1"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toLeftOf="#id/loginBtnSubmit"
app:layout_constraintRight_toLeftOf="#id/orText"
app:layout_constraintTop_toTopOf="#+id/orText" />
<TextView
android:id="#+id/orText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:fontFamily="#font/exo_regular"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="OR"
android:textColor="#color/black"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/loginBtnSubmit" />
<View
android:id="#+id/imageView2"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toRightOf="#id/orText"
app:layout_constraintRight_toRightOf="#id/loginBtnSubmit"
app:layout_constraintTop_toTopOf="#+id/orText" />
<Button
android:id="#+id/guestContinue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/white_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="Sign Up"
android:textAllCaps="false"
android:textColor="#color/instruction_black_color"
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="#+id/orText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:fontFamily="#font/exo_regular"
android:text="App "
app:layout_constraintTop_toTopOf="#+id/txt2"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintRight_toLeftOf="#+id/txt2"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:fontFamily="#font/exo_regular"
android:gravity="center_vertical"
android:text="Footer"
app:layout_constraintTop_toTopOf="#+id/footerImg"
app:layout_constraintBottom_toBottomOf="#+id/footerImg"
app:layout_constraintRight_toLeftOf="#+id/footerImg"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<ImageView
android:id="#+id/footerImg"
android:layout_width="30dp"
android:layout_height="22dp"
android:layout_marginLeft="2dp"
android:scaleType="fitCenter"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/logout" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am facing issue agains a constraint layout whose id is: "phone_layout"
If I will use its height as 0dp, it will works fine on large screens, but on small screens (when scroll view will be used to scroll screen), this layout will not be shown because of 0dp height.
I want this phone_layout to be below of email layout on every screen(small/large).

I resolved it by using
app:layout_constraintVertical_bias="0"

inner recyclerview inside holder cuts cut

I have the following XML layout -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/shopping_cart_holder_root_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/very_light_grey"
android:paddingBottom="#dimen/marketplace_15dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:background="#drawable/shopping_cart_image_border"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/activity_checkout_cart_imageView"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/shopping_cart_holder_item_quantity_tv"
android:layout_width="35dp"
android:layout_height="25dp"
android:layout_gravity="end"
android:alpha="0.6"
android:background="#color/color_black"
android:elevation="1dp"
android:gravity="center"
android:maxLines="1"
android:textAlignment="center"
android:textColor="#color/white"
android:textStyle="bold"
app:autoSizeMaxTextSize="16sp"
app:autoSizeMinTextSize="10sp"
app:autoSizeStepGranularity="2sp"
app:layout_constraintStart_toEndOf="#+id/activity_checkout_cart_imageView"
app:layout_constraintTop_toTopOf="parent"
tools:text="1" />
</FrameLayout>
<LinearLayout
android:id="#+id/shopping_cart_holder_infobox_viewgroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:layout_marginTop="#dimen/marketplace_15dp"
android:layout_marginEnd="0dp"
android:orientation="vertical">
<TextView
android:id="#+id/shopping_cart_holder_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="#font/noto_sans"
android:lines="1"
android:textSize="16sp"
android:textStyle="bold"
app:autoSizeMaxTextSize="16sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeStepGranularity="2sp"
tools:text="Unavailable Name" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/marketplace_cart_holder_by" />
<TextView
android:id="#+id/shopping_cart_holder_vendor_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:fontFamily="#font/noto_sans"
android:text="#string/activity_shopping_cart_vendor_name" />
</LinearLayout>
<TextView
android:id="#+id/shopping_cart_holder_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/noto_sans"
android:text="#string/marketplace_cart_holder_0_price"
android:textSize="16sp"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/marketplace_cart_holder_attribute_recyclerview"
tools:itemCount="2"
android:orientation="vertical"
tools:listitem="#layout/marketplace_cart_attribute_holder"
tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/shopping_cart_holder_quantity_viewgroup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_marginTop="#dimen/marketplace_15dp"
android:orientation="horizontal"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/shopping_cart_holder_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/noto_sans"
android:text="#string/activity_shopping_cart_qty"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="#+id/shopping_cart_holder_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/shopping_cart_holder_quantity_picker_viewgroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/shopping_cart_holder_delete"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_qty"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/shopping_cart_holder_imgMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/minus"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/shopping_cart_holder_product_quantity_picked_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:text="#string/shopping_cart_holder_0"
android:textColor="#android:color/black"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#id/shopping_cart_holder_imgMinus"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_imgMinus"
app:layout_constraintTop_toTopOf="#+id/shopping_cart_holder_imgMinus" />
<ImageView
android:id="#+id/shopping_cart_holder_imgPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:src="#drawable/plus"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_product_quantity_picked_tv"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/shopping_cart_holder_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/noto_sans"
android:src="#drawable/remove3x"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have inside this holder a ConstraitLayout that is disabled from view in a certain stage in my app.
As you can see, once I disable the ConstraintLayout from sight the inner RecyclerView gets cut in half.
here is the layout of the inner RV -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/very_light_grey"
android:orientation="horizontal">
<TextView
android:id="#+id/marketplace_cart_attribute_holder_attribute_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:textSize="16sp"
tools:text="Attribute Name:" />
<TextView
android:id="#+id/marketplace_cart_attribute_holder_attribute_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:textSize="16sp"
tools:text="Value" />
</LinearLayout>
What am I missing the causes the RV to get cut in half that does not happen when I have the bottom layout visible?

Add margin bottom -
android:layout_marginBottom="15dp"
to your LinearLayout to avoid the issue for a number of different screen sizes:
<LinearLayout
android:id="#+id/shopping_cart_holder_infobox_viewgroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginEnd="0dp"
android:orientation="vertical">

Solved - I have a redundant marginTop in my LinearLayout.

How to eliminate white spaces at the bottom of the screen while using RecyclerView

I am using RecyclerView and Constraint layout for RecyclerView Item.
I am using two Views in RecyclerView.
1) ItemViewHolder
2) FooterViewHolder
Below is my code for FooterViewHolder layout,
<?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"
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/world_credits_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textColor="#color/black"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/description_1_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#color/black"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="#id/world_credits_description"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="#+id/description_2_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/description_1_text_view"/>
<Button
android:id="#+id/cost_1_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$10"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.226"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/description_2_text_view" />
<Button
android:id="#+id/cost_2_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$20"
android:layout_marginTop="20dp"
app:layout_constraintStart_toEndOf="#id/cost_1_button"
app:layout_constraintTop_toBottomOf="#id/description_2_text_view"/>
<Button
android:id="#+id/cost_3_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$30"
android:layout_marginTop="20dp"
app:layout_constraintStart_toEndOf="#id/cost_2_button"
app:layout_constraintTop_toBottomOf="#id/description_2_text_view"/>
<Button
android:id="#+id/add_credits_button"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Credits"
app:layout_constraintTop_toBottomOf="#id/cost_1_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ListView
android:id="#+id/rate_category_details_list_view"
android:layout_width="wrap_content"
android:divider="#null"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/add_credits_button"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Below is a code for ItemViewHolder layout,
<?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"
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/package_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="20sp"
android:text="Package Name"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/start_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/start_guideline"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.05"/>
<TextView
android:id="#+id/subscription_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="14sp"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#id/package_name_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="#+id/package_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="15sp"
android:layout_marginTop="15dp"
app:layout_constraintTop_toBottomOf="#id/subscription_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<ImageView
android:id="#+id/flag_1"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="fitXY"
android:layout_marginStart="152dp"
android:layout_marginTop="15dp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/package_description" />
<ImageView
android:id="#+id/flag_2"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="fitXY"
android:layout_marginTop="15dp"
app:layout_constraintStart_toEndOf="#id/flag_1"
app:layout_constraintTop_toBottomOf="#id/package_description"/>
<ImageView
android:id="#+id/flag_3"
android:scaleType="fitXY"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="15dp"
app:layout_constraintStart_toEndOf="#id/flag_2"
app:layout_constraintTop_toBottomOf="#id/package_description"/>
<ImageView
android:id="#+id/show_multiple_countries"
android:scaleType="fitXY"
android:layout_width="25dp"
android:layout_height="25dp"
android:src="#drawable/right"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#id/package_description"
app:layout_constraintStart_toEndOf="#id/flag_3"
/>
<TextView
android:id="#+id/validity_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="25sp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/flag_1"
app:layout_constraintVertical_bias="0.028" />
<Button
android:id="#+id/activate_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#color/nexge_blue"
android:textColor="#color/color_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/validity_text_view"
app:layout_constraintVertical_bias="0.038" />
<View
android:id="#+id/first_divider"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="15dp"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="#id/or_text_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/or_text_view"/>
<TextView
android:id="#+id/or_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Or"
android:background="#color/white"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="5dp"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/activate_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
Below code is for RecyclerView,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/show_offer_details_relative_layout"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/no_record_text_view"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:textSize="25sp"
android:layout_height="wrap_content" />
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<include
android:id="#+id/header"
layout="#layout/header_view" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/header" />
</RelativeLayout>
Sometime if I one or two rows are displayed, then while scrolling half of the screen is scrolling.
1) When setting FooterView of RecyclerView, constraint layout height to wrap content, Listview displays only one item.
That's really very bad. Please Anybody help me.Thanks in advance.

change your Recyclerview constraint layout height match_parent to wrap_content

Change FooterViewHolder layout height to wrap contents.
The "match parent" makes it fill the whole display.

How to show image in the place of creating message in androidX..?

I am creating an offlline SMS app.In that I have to place the option of selecting an image button and after selecting image I want to place it at the position of sending image.But do not understand how to adjust the imageView button to get desired layout.Someone can help me..?
I have searched a lot but found nothing.
XML FILE
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:padding="5dp"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="horizontal" tools:ignore="MissingConstraints" android:id="#+id/linearLayout">
<ImageView
android:id="#+id/inbox_thumb"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/circle"/>
<TextView
android:hint="Phone Number"
android:layout_width="5dp"
android:layout_marginTop="6dp"
android:padding="10dp"
android:textStyle="bold"
android:textSize="15dp"
android:gravity="left"
android:layout_height="wrap_content" android:id="#+id/phone" android:layout_weight="1"/>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView android:layout_width="384dp"
android:layout_height="661dp"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:id="#+id/reyclerview_message_list"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
</androidx.recyclerview.widget.RecyclerView>
<View android:layout_width="0dp"
android:layout_height="2dp"
tools:ignore="MissingConstraints"
android:background="#color/colorPrimaryDark"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/message_area"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</View>
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content"
android:id="#+id/message_area"
android:orientation="horizontal"
android:minHeight="48dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
tools:ignore="MissingConstraints">
<Button
android:text="attach img"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/btn1"
/>
<EditText
android:id="#+id/txtMessage"
android:hint="Enter message"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:maxLines="6"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" app:srcCompat="#mipmap/ic_launcher" android:id="#+id/imageView2"
android:layout_weight="1"/>
<Button
android:id="#+id/btnSend"
android:text="SEND"
android:textSize="14dp"
android:clickable="true"
android:layout_width="64dp"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="bottom" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Expected
Actual

I have created a basic template using your Layout in AndroidX. You can beautify it using your style, icons and colors accordingly. Please copy it and look at it in your Android Studio.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="horizontal"
android:padding="5dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/inbox_thumb"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/ic_launcher" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/phone"
android:layout_width="5dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:layout_weight="1"
android:gravity="left"
android:hint="Phone Number"
android:padding="10dp"
android:textSize="15dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/message_area"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#drawable/rounded_rect_shape"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<androidx.appcompat.widget.AppCompatImageButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/ic_launcher" />
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:cardBackgroundColor="#android:color/darker_gray"
app:cardCornerRadius="6dp"
app:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/txtMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="#android:color/transparent"
android:hint="Enter message"
android:maxLines="6" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnSend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="SEND"
android:textSize="14dp" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="2dp"
android:layout_marginBottom="0dp"
android:background="#color/colorPrimaryDark"
app:layout_constraintBottom_toTopOf="#+id/message_area"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/reyclerview_message_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:scrollbarAlwaysDrawVerticalTrack="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/message_area"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"/>

If I understand correctly, you're trying to place the "imageView2" ImageView on top of the "txtMessage" EditText, is that right?
If that's how it is, what you need to do is wrap both of them in a vertical LinearLayout, like so:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="#+id/txtMessage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:hint="Enter message"
android:maxLines="6" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#mipmap/ic_launcher" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal"
android:padding="8dp">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_drawable"
android:backgroundTint="#android:color/black"
android:padding="8dp"
android:layout_margin="8dp"
android:src="#drawable/ic_add_black_24dp"
android:tint="#android:color/white" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#android:color/darker_gray"
app:cardCornerRadius="6dp"
app:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="#mipmap/ic_launcher" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom"
android:weightSum="1">
<EditText
android:id="#+id/et1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/ib2"
android:layout_margin="8dp"
android:text="Hello" />
<ImageButton
android:id="#+id/ib2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_drawable"
android:backgroundTint="#android:color/black"
android:padding="8dp"
android:layout_margin="8dp"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_send_black_24dp"
android:tint="#android:color/white" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I have used background drawable, you can replace with your add and send image.
Hope it solves your problem.

How do I place one relative layout below another in a constraint layout?

I am looking at placing one relativelayout right below another in constraint layout and another button container overlaying the container at the bottom. How do I go about it?
Here's the code :
<?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"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/activeSpeakerContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/groupCallerList"
app:layout_constraintTop_toBottomOf="#+id/callStatusContainer"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<FrameLayout
android:id="#+id/activeSpeakerVideo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black" />
<ImageView
android:id="#+id/activeSpeakerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="48dp"
android:src="#drawable/call_default_profile" />
<ImageView
android:id="#+id/beta_calling_watermark"
android:layout_width="130dp"
android:layout_height="28dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="36dp"
android:layout_marginLeft="16dp"
android:src="#drawable/ic_beta_calling_watermark_blue" />
<TextView
android:id="#+id/activeSpeakerName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#AA555555"
android:ellipsize="end"
android:gravity="center_horizontal|bottom"
android:lines="1"
android:textSize="16sp"
tools:text="" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/ShareContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/callButtonContainer"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<FrameLayout
android:id="#+id/ShareVideo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"/>
<ImageButton
android:id="#+id/ShareToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="36dp"
android:layout_marginLeft="16dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_video_cam_switch" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/callStatusContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#AA555555"
android:padding="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/callNameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:lines="1"
android:textSize="14sp"
tools:text="" />
<TextView
android:id="#+id/callParticipantCountText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/callNameText"
android:layout_toRightOf="#+id/callNameText"
android:ellipsize="end"
android:lines="1"
android:paddingLeft="18dp"
android:paddingRight="18dp"
android:textSize="14sp" />
<TextView
android:id="#+id/callDurationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_toEndOf="#id/callParticipantCountText"
android:layout_toLeftOf="#+id/callButtonVideoRotate"
android:layout_toRightOf="#id/callParticipantCountText"
android:layout_toStartOf="#id/callButtonVideoRotate"
android:lines="1"
android:textSize="14sp"
tools:text="03:16" />
<ImageButton
android:id="#+id/callButtonVideoRotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/callDurationText"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#android:color/transparent"
android:src="#drawable/ic_video_cam_switch" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/groupCallerList"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/callButtonContainer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/activeSpeakerContainer">
</android.support.v7.widget.RecyclerView>
<RelativeLayout
android:id="#+id/callProgressContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/groupCallerList"
app:layout_constraintLeft_toLeftOf="#+id/groupCallerList"
app:layout_constraintRight_toRightOf="#+id/groupCallerList"
app:layout_constraintTop_toTopOf="#+id/groupCallerList">
<TextView
android:id="#+id/callProgressName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:textSize="20sp"
tools:text="Caller Name" />
<TextView
android:id="#+id/callProgressText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/callProgressName"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:text="#string/call_status_connecting"
android:textSize="16sp" />
</RelativeLayout>
<include
android:id="#+id/callButtonContainer"
layout="#layout/layout_call_button_bar_1_row"
android:layout_width="0dp"
android:layout_height="48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/callButtonContainerUnavailable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/callButtonContainer"
app:layout_constraintLeft_toLeftOf="#+id/callButtonContainer"
app:layout_constraintRight_toRightOf="#+id/callButtonContainer"
app:layout_constraintTop_toTopOf="#+id/callButtonContainer"
tools:visibility="visible">
<Button
android:id="#+id/callButtonCancel"
style="#style/CallButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_call_end"
android:text="#string/dialog_button_cancel"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/callButtonRetry"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/callButtonRetry"
style="#style/CallButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_call_retry"
android:text="#string/button_try_again"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/callButtonCancel"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
any clues how to go about it?I actually want to place the callstatuscontainer on top of share or activespeaker container. I tried app:layout_constraintTop_toBottomOf="#+id/callStatusContainer"
in active speaker container, but no luck, any ideas?