(android) How to place a view below other views in constraint layout - android

This picture is state of layout
I want to place the RecyclerView below the Button
However, as you can see, even with layout_constraintTop_toBottomOf, the RecyclerView is not placed
under the Button
There is a condition, the size of the RecyclerView must be math_parent.
This is because you are using a nested recycler view and you are dynamically adding items, otherwise
the last nested recycler view's item will be cut off and not visible when adding dynamically..
If I set the height of a view to match_parent in the constraint layout, is there any way to place it
below other views?
This is XML file.
activity_write_routine.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
tools:context=".data.DailyRecordDetailActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppBarOverlay"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/body_part_detail_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="P A R T"
android:textColor="#color/white"
android:textAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<Button
android:id="#+id/add_routine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A D D"
android:backgroundTint="#color/light_green"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/routine_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#+id/add_routine"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

change the height to 0dp, and constraint the bottom of recyclerview to parent
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/routine_recyclerview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/add_routine"/>

Related

Is there a way to fit element inside Scrollview to its size?

My layout looks like this:
<androidx.core.widget.NestedScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/main_part"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/main_content_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/featured_vp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/view_pager_nav_fragment"
android:layout_below="#id/featured_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="50dp" />
</RelativeLayout>
<AnotherContent>...</AnotherContent>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Question is: which way is easiest to make RelativeLayout that holds my front content to fit scrollview?
I've try to achieve that programmaticly by change LayoutParanms of RelativeLayout but this way viewpager get all space inside layout, it kills my FragmentContainerView despite its min_heigt is 50dp.

Make RecycleView show items in the middle of the screen, if the items are few

I have programmed a simple linear RecycleView for my new alarm application. Since I am very new to Android programming I have run into such a question: now, all the items I have are shown from top to bottom, even if there are only, say 3 items at all. It doesn't look too good and not convenient also. Is there some way, if there are only few items in the list, to show them in the middle, rather than from top to bottom?
Thank you!!
My current main XML code is:
<?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="#drawable/background"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:scrollbars="vertical"
android:layout_marginTop="27dp"
android:layout_marginBottom="36dp"
android:requiresFadingEdge="vertical|horizontal"
tools:listitem="#layout/alarms_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
You should change the recycleView android:layout_height="match_parent" to
android:layout_height="wrap_content"
then add these lines in your RecycleView.
app:layout_constraintCircleRadius="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
You can center all the recyclerView in the middle
for that change your recyclerView like the xml below
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:fadeScrollbars="true"
android:scrollbars="vertical"
android:layout_marginTop="27dp"
android:layout_marginBottom="36dp"
android:requiresFadingEdge="vertical|horizontal"
tools:listitem="#layout/alarms_view" />
and when you add new item your recyclerview expand up to the height of screen
Add layout gravity to parent layout and change recyclerview height to wrap content like this:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/background"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fadeScrollbars="true"
android:scrollbars="vertical"
android:layout_marginTop="27dp"
android:layout_marginBottom="36dp"
android:requiresFadingEdge="vertical|horizontal"
tools:listitem="#layout/alarms_view" />

RecyclerView items overlap the rest of my layout

I try to create a RecyclerView which has to be in the bottom of my View and I want to be able to scroll the RecyclerView so I added a NestedScrollView.
But the problem is : when the RecyclerView has too many items, I'm not able to scroll and even worse because the items go the top of the screen and overlap with the rest of my layout.
<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="wrap_content">
<unrelated data>...</unrealated data>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/XXX"
tools:layout_editor_absoluteX="0dp">
<LinearLayout
android:id="#+id/linear_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</ConstraintLayout>

ScrollView isn't placed below ToolBar

I faced with the following problem: ScrollView in my activity should be placed below ToolBar. Here's the layout of this activity:
<?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"
tools:context=".SongLyricsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0000FF"
tools:ignore="MissingConstraints" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp">
<TextView
android:id="#+id/lyrics_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
</android.support.constraint.ConstraintLayout>
But when I run the app, I see this:
I don't understand, why it happens, as I position it below the toolbar, so, what's the matter?
I solved this problem using a marginTop parameter (equals to toolbar height), like this:
<ScrollView
android:id="#+id/activity_show_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:background="#color/transparent_background"
>
This works for my app.
This is happening because your scroll views height is match_parent and not 0dp - so your scroll view will not respect your constraints and will spread all over your screen.
Please notice that you are using tools:ignore="MissingConstraints" and the tool attribute will only affect the preview so you will see your layout in a different way from the preview.
In addition, you were missing some constraint - app:layout_constraintTop_toTopOf="parent"
Now with that constraint, it should work:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0000FF"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp">
<TextView
android:id="#+id/lyrics_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
you might try:
<LinearLayout>
vertical
<RelativeLayout>
<Toolbar>
someID
parent top
parent left
<Scrollview>
below someID
parent left

Align FrameLayout inside ConstraintLayout to bottom

I want a layout above recycler view at the bottom of the screen,(like a frame) so that even when that layout is visible I can still scroll recycler view behind it. So I want to align the frame layout at the bottom of the screen and make it visible and invisible as per requirement. Here is my 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"
tools:context="com.protossoft.root.aesencryption.MainActivity">
<ListView
android:layout_width="match_parent"
android:id="#+id/listView"
android:layout_height="match_parent">
</ListView>
<!-- <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="443dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/deviceNumberImage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:src="#android:drawable/btn_default" />
<TextView
android:id="#+id/deviceNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:text="990000862471854" />
</LinearLayout>
</FrameLayout>
<!-- </RelativeLayout>-->
I don't have too much of idea about constraint layout, but when I am moving the view at the bottom from the editor, it is using property like
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="443dp"
I want to achieve the same with some property like align_parentBottom. But none of the properties is available for use. What do I need to do so that the frame layout is visible at the bottom and on the top of recycler view at the same time?
Thanks :)
I want to achieve the same with some property like align_parentBottom.
You should use app:layout_constraintBottom_toBottomOf="parent" attribute.
Here's the setup that you need:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
...
</FrameLayout>
</android.support.constraint.ConstraintLayout>

Categories

Resources