I'm having a weird bug. I really don't know why.
So, on the editor, my constraints work just as I want. But on the phone, they don't.
Pictures (I don't have enough reputation to show images..):
android studio
phone problem
Code:
<?xml version="1.0" encoding="utf-8"?>
<layout
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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".fragments.home.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</layout>
Thank you in advance!
Have you tried setting the ConstraintLayout height to "match_parent"?
It seems like you restrict it to the combined height of the TextViews.
Also, you shouldn't set BottomToTop and TopToBottom in such a way, one should depend on the parent. You can easily do it by selecting both views in the editor, right clicking the choosing Chain Vertically.
Never mind, just found the problem.
Both width and height need to be match_parent on the NavHostFragment in activity_main.xml.
<!-- navigation fragment -->
<androidx.fragment.app.FragmentContainerView
android:id="#+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost="true"
app:navGraph="#navigation/navigation"
android:layout_height="match_parent"
android:layout_width="match_parent" />
Related
I've tried a few different ways at getting this to work but the fragments I host inside of the ViewPager for a tab layout don't display correctly unless I position the components in the fragments oddly. Here's my fragment_tab xml and code is in Java:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="37dp" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF" />
</LinearLayout>
<Button
android:id="#+id/btnPost"
android:layout_width="147dp"
android:layout_height="47dp"
android:layout_marginBottom="16dp"
android:text="Post"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
And for instance in one of the fragments I host inside of it, the XML is this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swiperefresh"
android:layout_width="387dp"
android:layout_height="491dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="387dp"
android:layout_height="491dp"
android:layout_marginBottom="8dp">
</androidx.recyclerview.widget.RecyclerView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="96dp"
android:layout_height="103dp"
android:visibility="invisible"
android:layout_marginBottom="342dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/txtViewEmpty"
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_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and this is what the design view looks like below. This fragment is hosted inside of the view pager with the tabs, inside of another screen that has an action bar but the tabs is hosted within that one.
I've been testing on Android Studio using an emulator and then when I test on hardware the UI is all messed up, but also positioning the screens like above, ideally I'd like to be able to use the whole view for the recycler view without having to place it like that as it may look right on my emulator but not hardware device if I use match_parent or the whole screen. Any ideas? I tried coordinator layout and relative layout as well and couldn't get it exact, it's possible it was done incorrectly though.
Thanks all!!
Edit: Picture on the hardware device where its messed up, but looks fine on emulator in the odd position that view was created with:
Currently, I am trying to make my heights and widths of my views relative to the available space, so my ui will be more responsible. The problem I encounter is that whenever I try to include this layouts inside a parent layout (e.g include shop_content inside fragment_shop), the heights and widths of my included layout don't work anymore.
I've made a small example to show this. In this example, you can see that the height of the toolbar should take 17% of the given height. Everything works fine when I look at my design tab inside the child layout, but when importing this layout inside my fragment_shopping_cart, the view remains invisible / the height is not shown properly.
child_layout
<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"> <!-- Changing this to wrap_content makes weird stuff -->
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/calibrate_btn_background"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/color_primary"
android:clickable="false"
app:layout_constraintHeight_percent="0.17" <!-- Height should take 0.17 -->
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
parent_layout
<layout
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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".framework.ui.view.fragments.shop.ShoppingCartFragment">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/shopping_cart_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:title="#string/bottom_nav_shopping_cart"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.google.android.material.appbar.MaterialToolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_shopping_cart"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#id/shopping_cart_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/shopping_cart_toolbar"
tools:listitem="#layout/shopping_cart_list_item" />
<include
android:id="#+id/shopping_cart_btn"
layout="#layout/child_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
How it should look
How it looks
What am I doing wrong here? I appreciate every help. Note: I am new to responsive ui in Android
EDIT
As this question gets harder to understand, I will try to explain it better with this example: I have a layout called app_standard_checkout_btn that I use in several of my layouts (including it). This layout contains different views such as a toolbar (serves as a background), textview and other stuff.
Currently, the height of the toolbar is fix with 124dp and here lies the problem. I don't want the height to be 124dp but rather to be 0.15 of the entire available height in which the layout is included in (which is same as 124dp in some cases). How is this achievable?
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="price"
type="Float" />
<variable
name="btnText"
type="String" />
<variable
name="btnIcon"
type="android.graphics.drawable.Drawable" />
<variable
name="btnTextCapitalized"
type="Boolean" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/calibrate_btn_background"
android:layout_width="match_parent"
android:layout_height="124dp" <!-- THIS FIXED VALUE IS BAD -->
android:background="#color/color_btn_gray"
android:clickable="false"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/calibrate_btn_tv_sum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/standard8dpMargin"
android:layout_marginEnd="#dimen/big16dpMargin"
android:text="#string/calibrate_btn_price"
android:textColor="#color/color_text_dark"
android:textSize="#dimen/textHeadlineNormal2"
app:layout_constraintEnd_toStartOf="#+id/shop_item_price"
app:layout_constraintTop_toTopOf="#+id/calibrate_btn_background" />
<TextView
android:id="#+id/shop_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{price}"
android:textColor="#color/color_text_blue"
android:textSize="#dimen/textHeadlineNormal2"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/calibrate_btn_tv_sum"
app:layout_constraintEnd_toStartOf="#+id/calibbrate_btn_tv_intern_curr"
app:layout_constraintTop_toTopOf="#+id/calibrate_btn_tv_sum"
tools:text="4800.00" />
<TextView
android:id="#+id/calibbrate_btn_tv_intern_curr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/currency"
android:textColor="#color/color_text_blue"
android:textSize="#dimen/textHeadlineNormal2"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/shop_item_price"
app:layout_constraintEnd_toEndOf="#+id/calibrate_btn_next"
app:layout_constraintTop_toTopOf="#+id/shop_item_price" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/calibrate_btn_tv_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="#string/calibrate_btn_desc"
android:textColor="#color/color_text_gray"
android:textSize="#dimen/textDescriptionNormal4"
app:layout_constraintEnd_toEndOf="#+id/calibrate_btn_next"
app:layout_constraintTop_toBottomOf="#+id/shop_item_price" />
<com.google.android.material.button.MaterialButton
android:id="#+id/calibrate_btn_next"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="#dimen/big16dpMargin"
android:layout_marginEnd="#dimen/big16dpMargin"
android:layout_marginBottom="#dimen/standard8dpMargin"
android:clickable="true"
android:focusable="true"
android:text="#{btnText}"
android:textAllCaps="#{btnTextCapitalized}"
android:textSize="#dimen/textDescriptionNormal1"
android:textStyle="normal"
app:backgroundTint="#color/color_btn_blue"
app:icon="#{btnIcon}"
app:iconGravity="textStart"
app:layout_constraintBottom_toBottomOf="#id/calibrate_btn_background"
app:layout_constraintEnd_toEndOf="#id/calibrate_btn_background"
app:layout_constraintStart_toStartOf="#+id/calibrate_btn_background" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
You need to constraint the top of the child_layout to the bottom of the ReyclerView
So add bleow constraint to the child_layout
app:layout_constraintTop_toBottomOf="#+id/rv_shopping_cart"
Upon this change, the entire parent layout will be:
<layout
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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".framework.ui.view.fragments.shop.ShoppingCartFragment">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/shopping_cart_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:title="#string/bottom_nav_shopping_cart"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.google.android.material.appbar.MaterialToolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_shopping_cart"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#id/shopping_cart_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/shopping_cart_toolbar"
tools:listitem="#layout/shopping_cart_list_item" />
<include
android:id="#+id/shopping_cart_btn"
layout="#layout/child_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rv_shopping_cart"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
EDIT
I don't want the height to be 124dp but rather to be 0.15 of the entire available height in which the layout is included in
Now you want the Toolbar to be 17% of the parent layout while it's not a direct child of it.. that looks strange and not matching with ConstraintLayout guidance as the Toolbar is not a direct child of the parent's ConstraintLayout
So, you can't constraint the Toolbar to the parent ConstraintLayout; instead you can constraint the entire child layout to the parent layout.. So you need to limit the height of the entire child layout by either by hard-coding it or by constraining it. And without constraining the height you'll get the layout disappear as in your shared picture.
In top answer I had constraint it to the bottom of the RecyclerView and this is what you already did in your shared RecyclerView constraints with app:layout_constraintBottom_toTopOf="#id/shopping_cart_btn". This may not be perfect as we can't predect the height of the RecyclerView at compile time.
So, here is another option of constraining the height of the child layout relative to the parent layout using app:layout_constraintHeight_percent constraint likewise you did with its Toolbar but with a percentage that is greater than the 17%. It's up to you to pick a suitable percentage, here I will pick 50%.
Now the height of the parent is 100%. The height of the child is 50%, and as you need the Toolbar height to be 17% of the parent, then now double it to be 34%. And you have to change it according to your picked value of the entire child layout.
Now the parent layout will be
Parent layout:
<layout
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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".framework.ui.view.fragments.shop.ShoppingCartFragment">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/shopping_cart_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:title="#string/bottom_nav_shopping_cart"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.google.android.material.appbar.MaterialToolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_shopping_cart"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/shopping_cart_toolbar"
tools:listitem="#layout/shopping_cart_list_item" />
<include
android:id="#+id/shopping_cart_btn"
layout="#layout/child_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Child 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:layout_width="match_parent"
android:layout_height="0dp"> <!-- Changing this to wrap_content makes weird stuff -->
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/calibrate_btn_background"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/color_primary"
android:clickable="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.34"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
this line
app:layout_constraintHeight_percent="0.17"
belongs to parent_layout, should be set for <include tag or at least for ConstraintLayout placed in child_layout (root view in file)
I know this question has been asked many times. However all the answers I have tried to find have failed me. I want the textview to appear on top of the constraint layout but every time I try to run the application I just see the web view vidged which is connected to the constraint layout.
The last solution I tried was to reduce elevation of the layout to 1dp and increase elevation of the TextView to 2dp.
<?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"
tools:background="#drawable/green_border_background" android:elevation="1dp">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:elevation="2dp"
android:id="#+id/textView2"
tools:text="0"
android:textSize="30sp"
/>
At the moment I do not care if the textview is centered, vertically below or vertically above the layout. I just want it to be visible. It is under the layout (Z vise) and thereby invisible. Elevation is the problem I am facing.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<TextView
android:textSize="25sp"
android:layout_marginStart="50dp"
android:text="Title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
This code place the TextView on the top of the ConstraintLayout
Just check the ConstraintLayout.
Read the "Adjust the constraint bias" part, try to set the
app:layout_constraintVertical_bias="0"
I have a form which has around 12/13 fields. I used a Scrollview inside a constraint layout. Below is the hierarchy of the XML layout. The problem is, it doesn't scroll to the bottom instead scrolls only to the first initial 10 views. The last 3 fields gets hidden as the view does not scroll any further.
PARENT LAYOUT
<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:id="#+id/activity_register"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:orientation="vertical">
<!-- Textview and a button -->
<ScrollView
android:id="#+id/scrollView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:orientation="vertical"
android:overScrollMode="never"
android:scrollbars="none"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Child Views (12/13 views of the fields)-->
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
This layout works in my app.
The trick is to set these two attributes in ScrollView:
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
The simplified layout from my app:
<?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:theme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:id="#+id/linear"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="#color/title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/linear">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/titleView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:text="#string/title"
android:textSize="14sp"
app:layout_constraintBaseline_toBaselineOf="#+id/title"
app:layout_constraintLeft_toLeftOf="parent" />
<EditText
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:hint="toilet title"
android:inputType="text"
android:textColor="#android:color/holo_red_dark"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="#+id/open_hour"
app:layout_constraintLeft_toRightOf="#+id/titleView"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
...
Other Views in ScrollView
...
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
In my case NestedScrollView worked instead of ScrollView. Following is the snippet of my working layout:
<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">
<!-- Some Views Here -->
<android.support.v4.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Some Views That can be Scrolled Here -->
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>
You have two solutions for this problem (the same solution but in two ways to do it):
If you put the Design mode in Android Studio, select your ScrollView and open attributes tab and in the layout_height, select "match_constraint".
If you use the Text mode in Android Studio, use this:
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/tb_details">
See that the ScrollView height is set to 0dp. Both of this ways resolve the same problem but these are the different ways to do it.
The ScrollView is not the root view, I have a Constraint layout wrapping the ScrollView as you.
Two Steps
Keep layout height for scroll view zero
android:layout_height="0dp"
Again for scroll view
android:fillViewport="true"
Try adding bottom constraint to scrollview (eg: app:layout_constraintBottom_toBottomOf="parent")
and change android:layout_height="wrap_content" to android:layout_height="0dp"
In my case NestedScrollView worked instead of ScrollView.
Following is the snippet of my working layout:
Please make sure that you haven't make any childview height to match parent(0 dp) inside constrianlayout also for scroll view android:fillViewport="true;
Ask me if any doubt Occur.
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/_90sdp"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/cvLayout"
android:animateLayoutChanges="true">
Just Put android:fillViewport="true" in Parent Layout
In my case, I had a tall TextView (height set to wrap_content) inside a ScrollView (height set to 0dp and being constraint on the top and bottom). No suggestions worked, but I solved the problem by wrapping the TextView inside a FrameLayout (height set to wrap_content).
Never keep 0dp height of childs of ConstraintLayout if it is inside SV/NestedSV
wrap_content works because in this case ScrollView knows its childens height.
For me, I needed to add a LinearLayout inside my ScrollView in order to constrain it
<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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View....</View>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
I have resolve this issue. Inside ScrollView you can not use constraint Layout.
for using constrain inside scroll u have to use Relative layout is parent of constraint Layout..
so ur sequence should be:
ScrollView ---> Relative Layout ---> Constraint Layout
If you came here after searching "Soft Keyboard Hides the View elements"!
Then you just have to add a scrollView and the same layout element again.
Before
<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">
<ImageView
android:id="#+id/imageView3"
android:layout_width="246dp"
android:layout_height="168dp"
android:layout_marginTop="20dp"
android:src="#drawable/img"/>
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>
After
<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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView3"
android:layout_width="246dp"
android:layout_height="168dp"
android:layout_marginTop="20dp"
android:src="#drawable/img"/>
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
For the horizontal scroll view case (parent is ConstraintLayout, immediate child is LinearLayout), I found that setting the four constraints, layout_width=0dp, and fillViewport=true was not enough. It still didn't scroll.
What did work in my case was to set the four constraints and change the element from ScrollView to HorizontalScrollView. In that case layout_width can be set to "wrap_content" and fillViewport can be omitted.
Additionally, I added a padding at the end of the immediate child of the HorizontalScrollView, to make the scrolling experience and the look better.
I faced another issue where i had nestedscrollview which has constrainlayout which has linearlayout. This linearlayout has child get added programatically. So scroll was not working. Solved by replacing CL with LL with vertical orientation
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/separatr"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:fillViewport="true"
android:fitsSystemWindows="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:background="#color/yellow_highlight"
android:paddingBottom="#dimen/box96">
<TextView
android:id="#+id/qansTv"
style="#style/BodyText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/box200"
android:layout_marginTop="#dimen/box32"
android:layout_marginEnd="#dimen/box200"
android:text="Lorem ipsum dofdfd fsd fdfsd sdf sdfsd fsdfsd fd sdfd fsdfsdf sdfsd df sdfd fsdfsd fsdf sdfsd dflors fdfdf."
android:textColor="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/ansImageContainerLL"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:background="#color/red"
android:layout_marginEnd="#dimen/box64"
android:orientation="vertical"
android:layout_marginStart="#dimen/box64"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/qansTv" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
in my case I had to use 2 recyclerviews and since it didn't want to scroll all the way I found a way to set to which length of the scrollview to scroll, the length is set by changing the width of the TextView.
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView 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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.ProjectsFragment"
android:background="#color/blue">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="#+id/scrollViewLength"
android:layout_width="2000dp"
android:layout_height="match_parent"
android:text="Change the width above"
android:visibility="invisible"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="exampletag"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView1"
android:tag="exampletag"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="28dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</FrameLayout>
</HorizontalScrollView>
I know I'm late little bit ,I was facing the same issue what I did wrapped my RecyclerView Inside Linear or Relative layout and it worked like a charm,
I'm using the new Constraint layout to build my layout. I need to have Button that occupies almost the entire screen width and that was easy using constraints.
As you can see in the image I am setting the width to 0dp (Any size), but the text don't stick at the center what's usually the normal for a button text.
I've tried:
- set gravity to center
- set textAlignment to center
Looks like this properties can't work with 0dp width (Any size).
So I've tried to set the width to match_parent using gravity center.
It's a little bit to the right.
Does any one know how to fix that behavior ?
Note that i'm using alpha4
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha4'
XML code
<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:id="#+id/content_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="br.com.marmotex.ui.LoginActivityFragment"
tools:showIn="#layout/activity_login">
<Button
android:text="Log in"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/btLogin"
android:layout_marginTop="48dp"
app:layout_constraintTop_toBottomOf="#+id/textView6"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="#+id/content_login"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="#+id/content_login"
android:layout_marginLeft="16dp"
android:textColor="#android:color/white"
android:background="#color/BackgroundColor" />
</android.support.constraint.ConstraintLayout>
EDIT It was a bug in ConstraintLayout alpha4.
UPDATE Google has released alpha5, the above code now Works.
Release note
It's a little bit to the right.
I think margin(s) is causing these. And its not only affecting Buttons, in my experience. Margin is screwing TextInputEditText too.
Below is a working code but please pay attention to android:layout_width="match_parent" on the Button. Any time I clicked in the editor, it will change to android:layout_width="0dp", and ruin the button alignment.
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/button_survey"
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/activity_main"
app:layout_constraintLeft_toLeftOf="#+id/activity_main"
app:layout_constraintRight_toRightOf="#+id/activity_main"
app:layout_constraintTop_toTopOf="#+id/activity_main"
tools:text="#string/main_activity_btn_survey"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp" />
</android.support.constraint.ConstraintLayout>
Inspired by Hobo joe's solution, below is the way i prefer to did it. His solution is working but still need to use padding to create spacing. If margin was used instead, the alignment of button's text will go slightly to the right. So I used padding on LinearLayout(or ConstraintLayout) instead of margin on button.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/activity_main"
app:layout_constraintTop_toTopOf="#+id/activity_main"
app:layout_constraintRight_toRightOf="#+id/activity_main"
app:layout_constraintBottom_toBottomOf="#+id/activity_main"
android:padding="16dp">
<Button
android:text="Button"
android:layout_width="match_parent"
android:layout_height="52dp"
android:id="#+id/button_survey"
android:layout_weight="1"
tools:text="#string/main_activity_btn_survey"
/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Have you tried ?
android:textAlignment="center"
This works for me.
This is a bug. However, you can work around it by placing the button inside a LinearLayout (Or other standard ViewGroup). Set the parent view and the button width to match_parent, and move whatever constraints you had on the button to the parent layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/parent_left"
app:layout_constraintTop_toTopOf="#+id/parent_top"
app:layout_constraintRight_toRightOf="#+id/parent_right">
<Button
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Centered Text"/>
</LinearLayout>
Well I think its because of these constraints
app:layout_constraintRight_toRightOf
app:layout_constraintLeft_toLeftOf
replace your current button with this one :
<Button
android:text="Log in"
android:layout_width="match_parent"
android:layout_height="48dp"
android:id="#+id/btLogin"
android:textColor="#android:color/white"
android:background="#color/BackgroundColor"
android:gravity="center"
android:textAlignment="center"
android:layout_marginTop="100dp"
tools:layout_editor_absoluteX="-1dp"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
Hope this will help.
It seems that the issue is with android:layout_width="match_parent" when using inside ConstraintLayout.
Just set android:layout_width="0dp" and add constraints app:layout_constraintStart_toStartOf="parent" & app:layout_constraintEnd_toEndOf="parent", it'd just work fine.
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Continue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />