How to set height of a view in percent using ConstraintLayout

How to set height of a view in percent using ConstraintLayout - android

Currently I'm learning ConstraintLayout
below is my code that i have tried so far
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activity.PhaseListActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#color/colorAccent">
<VideoView
android:id="#+id/myVideoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible" />
<TextSwitcher
android:id="#+id/tvAnimText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="#font/knowledge_bold"
android:textColor="#color/greenColor"
android:textSize="#dimen/_100ssp"
android:textStyle="bold"
tools:text="1" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/greenColor"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want don't want use nested LinearLayout inside ConstraintLayout
Also in above layout my NestedScrollView is not scrolling
I want to create this type of screen using ConstraintLayout
My expected OUTPUT
I have tried to set Guideline but it didn't work for me, because i don't know how to use Guideline in above layout
Can anybody help me create this screen only using ConstraintLayout
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

So, after looking at your xml file, I've come up with solution to get rid of nested LinearLayout hierarchy in below solution:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#id/tv_bottom_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<VideoView
android:id="#+id/myVideoView"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="visible"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/tv1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.85"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextSwitcher
android:id="#+id/tvAnimText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="#font/knowledge_bold"
android:textColor="#color/greenColor"
android:textSize="#dimen/_100ssp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/myVideoView"
app:layout_constraintEnd_toEndOf="#id/myVideoView"
app:layout_constraintStart_toStartOf="#id/myVideoView"
app:layout_constraintTop_toTopOf="#id/myVideoView"
tools:text="1" />
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/myVideoView" />
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv1" />
<TextView
android:id="#+id/tv3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<TextView
android:id="#+id/tv_bottom_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know if there's any query in comments. For your fixed bottombar TextView, now you can change height percent to whatever you want to change it's height dynamically.

You can use below code for bottom View which remove your Nested LinearLayout :
<TextView
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:background="#00ff00"
android:padding="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textStyle="bold" />

Related

Android view, starts element from bottom overlap with header on small screens

I have a sample view, where on the top is logo + header divider + some description, and from the bottom starts: Button + some checkboxes, please see image below:
It looks good on current devices, but on old phones, when screen is small (5 inches for example) - elements overlap:
View looks like below:
<androidx.constraintlayout.widget.ConstraintLayout android:id="#+id/parent"
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="fill_parent"
android:layout_height="fill_parent">
<!-- TOP -->
<ImageView
android:id="#+id/logo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/loremipsum"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.12"
app:layout_constraintWidth_percent="0.50"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="15dp"
android:scaleType="fitXY"
android:src="#drawable/header_divider"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text"
android:lines="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider"
android:textStyle="bold" />
<!-- BOTTOM -->
<LinearLayout
android:id="#+id/linearLayoutMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toTopOf="#+id/validIDLinearLayout"
android:orientation="vertical"
android:gravity="bottom"
android:visibility="visible">
<LinearLayout
android:id="#+id/linearLayoutMobilePhonePicker"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:visibility="visible">
<com.hbb20.CountryCodePicker
android:id="#+id/countryCodePickerId"
...
/>
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/mobileEditText"
android:layout_width="fill_parent"
android:hint="elo elo elo"
android:inputType="phone" />
</LinearLayout>
<TextView
android:id="#+id/mobileText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_terms_and_condition_send_sms" />
</LinearLayout>
<LinearLayout
android:id="#+id/validIDLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toTopOf="#+id/consentLinearLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textViewValidIdBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/errorRed"
android:text="text" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/consentLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/privacyPolicyLinearLayout"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
android:background="#color/errorRed"
app:layout_constraintEnd_toEndOf="parent" >
<TextView
android:id="#+id/textViewConsent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/fragment_terms_and_condition_consent_VI" />
</LinearLayout>
<LinearLayout
android:id="#+id/privacyPolicyLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toTopOf="#id/button_continue"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/errorRed"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewPrivacyPolicy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:linksClickable="true"
android:textColor="text"
android:text="#string/fragment_terms_and_condition_privacy_policy" />
</LinearLayout>
<TextView
android:id="#+id/button_continue"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:enabled="false"
android:background="#color/errorRed"
android:gravity="center"
android:text="ELO"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
android:layout_marginBottom="80dp"
android:layout_marginTop="25dp"
app:layout_constraintWidth_percent="0.7" />
</androidx.constraintlayout.widget.ConstraintLayout>
How should I set constraint between this two parts of the view, so they wont overlap on small screen? Add marginTop to the bottom section?

I found an answer, will post below, maybe it helps someone in the future:
I copied all elements from Bottom section inside ScrollView:
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/header"
app:layout_constraintBottom_toBottomOf="parent"
android:fillViewport="true" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp" >
<!-- all LinearLayout's from bottom section -->
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

View is overlapped by another view in NestedScrollView with ConstrainLayout

I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/content_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_32"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:id="#+id/online_card_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_25"
android:background="#color/white"
app:cardCornerRadius="#dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="#dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="#+id/online_card_rb"
android:layout_width="#dimen/margin_22"
android:layout_height="#dimen/margin_22"
android:layout_marginStart="#dimen/margin_16"
app:layout_constraintBottom_toBottomOf="#id/online_card_ll"
app:layout_constraintEnd_toStartOf="#id/online_card_ll"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/online_card_ll" />
<LinearLayout
android:id="#+id/online_card_ll"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:background="#color/white"
android:gravity="start"
android:orientation="vertical"
android:paddingVertical="#dimen/padding_16"
app:layout_constraintEnd_toStartOf="#id/cards_iv"
app:layout_constraintStart_toEndOf="#id/online_card_rb"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/online_card_tv"
style="#style/OnlineCardTitleTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/online_card_title"
app:lineHeight="#dimen/default_text_size_28" />
<androidx.appcompat.widget.AppCompatTextView
style="#style/OnlineCardSubTitleTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/online_card_now" />
</LinearLayout>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/cards_iv"
android:layout_width="#dimen/margin_80"
android:layout_height="#dimen/margin_20"
android:layout_marginEnd="#dimen/margin_16"
android:src="#drawable/ic_visa_master"
app:layout_constraintBottom_toBottomOf="#id/online_card_ll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/online_card_ll" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/online_card_expanded_info_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#id/online_card_ll">
<View
android:id="#+id/online_card_divider"
style="#style/ViewDividerStyle"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_16"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/cards_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/online_card_divider" />
<View
android:id="#+id/cards_list_divider"
style="#style/ViewDividerStyle"
android:layout_width="match_parent"
android:layout_height="1dp"
app:layout_constraintTop_toBottomOf="#id/cards_list" />
<TextView
android:id="#+id/read_more_tv"
style="#style/OnlineCardReadMoreTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginBottom="#dimen/margin_8"
android:text="#string/read_more"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cards_list_divider" />
<LinearLayout
android:id="#+id/additional_info_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_21"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginEnd="#dimen/margin_10"
android:layout_marginBottom="#dimen/margin_8"
android:orientation="vertical"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cards_list_divider">
<TextView
android:id="#+id/online_card_less_info_tv"
style="#style/OnlineCardReadMoreTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/online_card_less_info" />
<TextView
android:id="#+id/check_card_type_title_tv"
style="#style/OnlineCardBottomTitleTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_check_card" />
<TextView
android:id="#+id/check_card_type_info_tv"
style="#style/OnlineCardBottomDescriptionTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_check_card_info" />
<TextView
android:id="#+id/online_card_data_title_tv"
style="#style/OnlineCardBottomTitleTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_data" />
<TextView
android:id="#+id/online_card_data_info_tv"
style="#style/OnlineCardBottomDescriptionTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_data_info" />
<TextView
android:id="#+id/online_card_confirmation_title_tv"
style="#style/OnlineCardBottomTitleTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_confirmation" />
<TextView
android:id="#+id/online_card_confirmation_info_tv"
style="#style/OnlineCardBottomDescriptionTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_confirmation_info" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="25dp"
android:background="#color/white"
app:cardCornerRadius="#dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginVertical="#dimen/margin_24">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="#+id/bank_account_rb"
android:layout_width="#dimen/margin_22"
android:layout_height="#dimen/margin_22"
android:layout_marginStart="#dimen/margin_16"
app:layout_constraintBottom_toBottomOf="#id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/bank_account_tv"
style="#style/OnlineCardTitleTextStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_14"
android:text="#string/title_on_bank"
android:textAlignment="textStart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/bank_account_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_16"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toBottomOf="#id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/iban_hint_tv"
style="#style/OnlineCardEditTextHintTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:layout_marginTop="15dp"
android:text="#string/step7_iban_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/bank_account_divider" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/step1_phone"
android:layout_width="match_parent"
android:layout_height="#dimen/height_edittext"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_2"
android:background="#drawable/rounded_edittext_with_border"
android:maxLines="1"
app:layout_constraintTop_toBottomOf="#id/iban_hint_tv" />
<androidx.constraintlayout.widget.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="step1_phone, iban_hint_tv, bank_account_divider" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/step7_next_btn"
android:layout_width="#dimen/width_button_next"
android:layout_height="#dimen/height_button_next"
android:layout_marginBottom="#dimen/margin_10"
android:background="#drawable/rounded_button_next"
android:text="#string/next"
android:textColor="#color/button_text_green"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
When the part of the view has gone visibility, my screen looks like this:
As you can see, button is placed in the bottom and it's not overlapped by any other views. But when card is expanded, it looks like this:
As you can see, now button overlaps another card, and I need to place button under the card. So, how can I prevent existing behavior and place the button under all cards in the bottom? Thanks in advance, I will appreciate any help!

See below for an updated answer.
Old
I don't see the purpose of ConstraintLayout. You can remove that and place the button as last item in LinearLayout. The XML would then be like:
NestedScrollingView
LinearLayout
CardView ...
CardView ...
AppCompatButton
You can also use ConstraintLayout instead of LinearLayout, but I don't see the need for both.
This introduces a problem: the button is not at the bottom, when the content does not fill out the screen. For an easy fix, you can use ConstraintLayout with appropriate constraints.
New
I suggest you to use a ConstraintLayout. With it, you can achieve a flat layout hierarchy. You can use chains and vertical bias as such:
Chain the first card to the top of your parent
Chain the button to the bottom of your parent
Chain the second card to the bottom of the first card and to the top of the button. Apply a vertical bias of 0.0.
The result:
And the simple code for the example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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="#dddddd"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:id="#+id/card1"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_margin="16dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="First card" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/card2"
android:layout_width="0dp"
android:layout_height="800dp"
android:layout_margin="16dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/card1"
app:layout_constraintVertical_bias="0.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Second card" />
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_marginBottom="16dp"
android:background="#ffffff"
android:text="Button text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

Using Constraint layout not able to place a textview below guideline

I am trying to place a TextView below Guideline. I have tried as below,
<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="match_parent"
android:orientation="vertical">
<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"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="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/sub_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subscription"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#id/package_name_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
My Package name TextView is not displaying below Guideline...I am new to use ConstraintLayout. Not able to find my mistake...Anybody help me to solve this.

Remove constraintTop_toTopOf in package_name_text_view
<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="match_parent"
android:orientation="vertical">
<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"
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/sub_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subscription"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#id/package_name_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Top_toBottomof is not working in constraintlayout . How to use Top_toBottomof in Constraint layout?

I have this following 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar_with_filter_back" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/banner"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="165dp" />
<android.support.v7.widget.CardView
android:id="#+id/win_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_5sdp"
android:elevation="#dimen/_8sdp"
app:cardCornerRadius="#dimen/_10sdp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
app:layout_constraintTop_toBottomOf="#+id/guideline">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="#dimen/_10sdp">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:gravity="center"
android:scaleType="fitXY"
app:cardCornerRadius="8dp"
app:cardPreventCornerOverlap="true">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/exec_business_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:scaleType="fitXY"
android:src="#drawable/icon_dairy" />
<TextView
android:id="#+id/exec_business_iconname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/exec_card_second_title"
android:fontFamily="#font/boutrosasma_regular"
android:gravity="center"
android:text="Foods"
android:textColor="#color/white"
android:textSize="#dimen/text_size_h" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="#+id/tvRname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:fontFamily="#font/boutrosasma_bold"
android:gravity="center"
android:text="#string/exe_size"
android:textColor="#color/exec_card_second_title"
android:textSize="#dimen/text_size_h_valve"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/fb_sr_bu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:fontFamily="#font/boutrosasma_regular"
android:gravity="center"
android:text="SR"
android:textColor="#color/exec_card_size_val_color"
android:textSize="#dimen/text_size_h"
android:textStyle="bold" />
<TextView
android:id="#+id/fb_size_val_bu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="#dimen/_5sdp"
android:ellipsize="end"
android:fontFamily="#font/boutrosasma_bold"
android:gravity="center"
android:text="56.9"
android:textColor="#color/exec_card_size_val_color"
android:textSize="#dimen/_14ssp"
android:textStyle="bold" />
<TextView
android:id="#+id/fb_bn_bu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:fontFamily="#font/boutrosasma_regular"
android:gravity="center"
android:text="BN"
android:layout_marginLeft="#dimen/_5sdp"
android:textColor="#color/exec_card_size_val_color"
android:textSize="#dimen/text_size_h"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/layer_5" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="#+id/tvgrowth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:fontFamily="#font/boutrosasma_bold"
android:gravity="center"
android:text="#string/exe_growth"
android:textColor="#color/exec_card_second_title"
android:textSize="#dimen/text_size_h_valve"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/fb_growth_bu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:fontFamily="#font/boutrosasma_bold"
android:gravity="center"
android:text="+7.0%"
android:textColor="#color/exec_growth_val_color"
android:textSize="#dimen/_14ssp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_topplayer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_5sdp"
android:elevation="#dimen/_8sdp"
app:cardCornerRadius="#dimen/_10sdp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
app:layout_constraintTop_toBottomOf="#+id/win_card"
app:layout_constraintEnd_toEndOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/top_player_back"
android:padding="#dimen/_10sdp">
<TextView
android:id="#+id/top_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/boutrosasma_bold"
android:text="#string/business_unit_top"
android:textColor="#color/exec_card_size_val_color" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/orientation" />
</RelativeLayout>
<com.github.mikephil.charting.charts.LineChart
android:layout_margin="#dimen/_5sdp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/business_lineChart"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
Problem 1:
When i set the second cardview height to match_parent then it takes the full screen instead of the left screen at the bottom. It means it will override the first cardview also and reach to the top of parent/screen. So in this case why the set constraint toptobottomof is not working and how can i make it work? As far as i know toptobottomof makes sure that your second view will always remain below of first view which in this case is not working.
Problem 2:
If i keep my layout as it is then the problem is the LineChart is not expanding at all. It is compressing the whole chart height into the wrap content height. It is not behaving like it needs more space as this is what wrap_content attribute is made for instead it is restricting the chart itself to that available height and its not expanding the cardview height at all.
Please help me with these issues.

Change height to 0dp of android.support.v7.widget.CardView , width to 0dp
and use app:layout_constraintBottom_toBottomOf="parent"
This will make the height fill to the parent
Add these
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
Example
<androidx.cardview.widget.CardView
android:id="#+id/card_topplayer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="#dimen/_5sdp"
android:elevation="#dimen/_8sdp"
app:cardCornerRadius="#dimen/_10sdp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/win_card">
Update
To implement scrollview use fillviewport = true
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:fillViewport = "true"
android:layout_height="0dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
And Remove this app:layout_constraintEnd_toEndOf="parent" from second cardview like this
<android.support.v7.widget.CardView
android:id="#+id/card_topplayer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_5sdp"
android:elevation="#dimen/_8sdp"
app:cardCornerRadius="#dimen/_10sdp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
app:layout_constraintTop_toBottomOf="#+id/win_card"
>

Why doesn't Linear Layout maxHeight work?

This is my layout.
I set max and min height on the linear layout but max height seems not to be working. In fact if TextView R.id.testo has a lot of text this won't be trimmed. This doesn't happen if I set fixed height. But I didn't want to set a fixed height in order to make it correctly resizable when for instance spilt screen mode is selected.
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WidgetSettingsActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="?attr/popupThemeToolbar"
app:title=""
app:titleTextAppearance="#style/ToolbarTitle" />
<LinearLayout
android:id="#+id/card"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="55dp"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginEnd="55dp"
android:background="#drawable/widget_background"
android:clickable="false"
android:maxHeight="400dp"
android:minHeight="400dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/titolo"
style="#style/Base.TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:drawableEnd="#drawable/ic_if_settings_1540178"
android:ellipsize="end"
android:fontFamily="#font/encodesanscondensed_medium"
android:hint="#string/no_title"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
tools:text="Title" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingStart="#dimen/fab_margin"
android:paddingTop="4dp"
android:paddingEnd="#dimen/fab_margin"
android:paddingBottom="4dp">
<TextView
android:id="#+id/testo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/encodesanscondensed_regular"
android:hint="#string/no_text"
android:textColor="?android:attr/editTextColor"
android:textSize="18sp"
tools:text="Text multiple rows" />
<TextView
android:id="#+id/last_modified"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginTop="24dp"
android:fontFamily="#font/encodesanscondensed_regular"
android:gravity="end|bottom"
android:textSize="12sp"
tools:text="#string/last_modified_s" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginEnd="35dp"
android:layout_marginBottom="8dp"
android:gravity="bottom"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/card"
app:layout_constraintVertical_bias="0.905">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="13dp"
android:layout_marginBottom="#dimen/margin_16"
android:fontFamily="#font/encodesanscondensed_medium"
android:text="#string/background_transparency"
android:textAllCaps="true"
android:textColor="#color/colorPrimary"
android:textSize="13sp" />
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="255"
android:min="0"
android:progressBackgroundTint="#color/white_opacity" />
</LinearLayout>

As your parent view is ConstraintLayout.
I have also implemented the max and min and for me
Replace these lines
android:maxHeight="400dp"
android:minHeight="400dp"
with
app:layout_constraintHeight_max="400dp"
app:layout_constraintHeight_min="400dp"
app:layout_constrainedHeight="true"
This code working fine. I hope it also works for you.

You have used for your LinearLayout within Constraint layout
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
End_toEndOf set to parent
Start_toStartOf is set to parent
And thats the reason maxHeight is not working.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to set height of a view in percent using ConstraintLayout - android

Related

Android view, starts element from bottom overlap with header on small screens

View is overlapped by another view in NestedScrollView with ConstrainLayout

Using Constraint layout not able to place a textview below guideline

Top_toBottomof is not working in constraintlayout . How to use Top_toBottomof in Constraint layout?

Why doesn't Linear Layout maxHeight work?

Categories

Resources