Hi I am using single activity over which I have used all fragments. I am developing a screen of gallery fragment in which I am showing slide show with bottom recycler view to slide pages of slide show. The bottom view of gallery recycler is getting hide from bottom navigation bar.
What I have used:- I have added window flag to gallery fragment from main activity backstackChangeListner
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
Here is my gallery fragment view
<data>
<variable
name="viewImageVM"
type="com.geenie.consumer.viewmodel.ViewImageViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:background="#android:color/black"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:orientation="vertical"
android:weightSum="10">
<!--
this is my slide show view pager for gallery
-->
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.viewpager.widget.ViewPager>
<!--
this is for backward slide in my slide show
-->
<ImageView
android:id="#+id/start"
android:layout_width="35dp"
android:layout_height="0dp"
android:background="#BF3e434c"
android:elevation="#dimen/margin_large"
android:onClick='#{(v)->viewImageVM.switchToComponent("Backward")}'
android:padding="10dp"
android:src="#drawable/ic_back_arrow_gray"
android:tint="#color/gray"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/bottomRecycler"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/bottomRecycler" />
<!--
this is bottom icons of image for selecting the image
-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/bottomRecycler"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#android:color/transparent"
android:paddingStart="5dp"
app:layout_constraintBottom_toBottomOf="parent" />
<!--
this is for forward slide in my slide show
-->
<ImageView
android:id="#+id/end"
android:layout_width="35dp"
android:layout_height="0dp"
android:background="#BF3e434c"
android:elevation="#dimen/margin_large"
android:onClick='#{(v)->viewImageVM.switchToComponent("Forward")}'
android:padding="10dp"
android:rotation="180"
android:src="#drawable/ic_back_arrow_gray"
android:tint="#color/gray"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/bottomRecycler"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/bottomRecycler" />
<!--
this is my custom toolbar
-->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="5dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
android:onClick='#{(v)->viewImageVM.switchToComponent("Back")}'
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:tint="#color/gray"
app:srcCompat="#drawable/ic_back_arrow_gray" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="35dp"
android:padding="#dimen/padding_small"
android:tint="#color/gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:visibility="gone"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="#dimen/margin_small"
android:src="#drawable/trash_white"
android:padding="3dp"
android:textColor="#android:color/darker_gray"
android:textSize="#dimen/txt_normal"
android:textStyle="bold"
app:fontFamily="#font/sfprodisplay_bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I have used android:fitsSystemWindows="true" attribute in recyclerview which is getting hidden by navigation bar still no effect is getting seen in that my current screen. Please see screenshot of what I have achieved till now. Please help me I have used android:fitsSystemWindows="true" earlier also which worked fine. Now I am missing somewhere.Any help would be highly appreciated.Thanks
Related
In my layout xml file i have a webView and a Navigation Drawer:
<?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:context=".MainActivity">
<WebView
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</WebView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/boReFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:contentDescription="#string/add_to_bookmarks"
android:focusable="true"
android:translationY="-480px"
android:visibility="gone"
app:backgroundTint="#03A9F4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#android:drawable/btn_star_big_off"
tools:ignore="SpeakableTextPresentCheck,ImageContrastCheck" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/baHoFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:contentDescription="#string/go_back_home"
android:focusable="true"
android:translationY="-320px"
android:visibility="gone"
app:backgroundTint="#E91E63"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#android:drawable/ic_menu_gallery"
tools:ignore="SpeakableTextPresentCheck" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/shLiFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:contentDescription="#string/go_to_the_shopping_list"
android:focusable="true"
android:translationY="-160px"
android:visibility="gone"
app:backgroundTint="#E91E63"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/baseline_view_list_24"
tools:ignore="SpeakableTextPresentCheck" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/moBuFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:contentDescription="#string/show_buttons"
android:focusable="true"
app:backgroundTint="#E91E63"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#android:drawable/ic_menu_add"
tools:ignore="SpeakableTextPresentCheck" />
<androidx.drawerlayout.widget.DrawerLayout
android:id="#+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="HardcodedText,SpeakableTextPresentCheck">
<!--this the navigation view which draws
and shows the navigation drawer-->
<!--include the menu created in the menu folder-->
<com.google.android.material.navigation.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/navigation_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
When I run this, I can't click on the webview at all. But if i switch the order of the webview and the navigation drawer, then i can press on the webview but i cannot open the navigation drawer (or it can't be seen). I want to be able to click and open both. How can i achieve this functionality?
A typical pattern to achieve the overall goals you want here is to use a Toolbar and a hamburger icon to trigger open/close of the NavDrawer.
Without that, using your current approach, you could:
setup a Guideline within the ConstraintLayout,
have the WebView start from that guideline and end at the parent,
set the WebView width to 0dp to allow the Constraints to control the width.
https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline
I tried windowSoftInputMode in manifest nothing worked the views get pushed up when the keyboard is opened I tried different approaches but none of them worked. The recycler view collapses with the edit text but it is below the guide line separator.
Image when keyboard is opened:
Image when the keyboard is not opened:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color_for_screen">
<!--Guide line left-->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guide_line_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="#dimen/padding_margin_15" />
<!--Guide line right-->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guide_line_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="#dimen/padding_margin_15" />
<!--Guide line for separating image-->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guide_line_separator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.17" />
<!--Image for the top header-->
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/guide_line_separator"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/splash_bg" />
<!--back button image-->
<ImageView
android:id="#+id/step_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_margin_15"
android:scaleType="centerCrop"
android:src="#mipmap/ic_back_arrow"
android:tint="#color/white"
android:visibility="visible"
app:layout_constraintStart_toStartOf="#id/guide_line_left"
app:layout_constraintTop_toTopOf="parent" />
<!--title for the screen-->
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/padding_margin_10"
android:layout_marginLeft="#dimen/padding_margin_5"
android:layout_marginTop="#dimen/padding_margin_18"
android:fontFamily="#font/nunito_medium"
android:text="#string/blank"
android:textColor="#color/white"
android:textSize="#dimen/text_size_18"
app:layout_constraintStart_toEndOf="#+id/step_back_button"
app:layout_constraintTop_toTopOf="parent" />
<!--edit text for searching by the keyword-->
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/edit_text_search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/padding_margin_10"
android:layout_marginTop="#dimen/padding_margin_12"
android:background="#drawable/edit_text_background"
android:drawableStart="#mipmap/ic_search"
android:drawablePadding="#dimen/padding_margin_8"
android:fontFamily="#font/nunito_regular"
android:hint="#string/blank"
android:padding="#dimen/padding_margin_10"
android:textSize="#dimen/text_size_15"
app:layout_constraintEnd_toStartOf="#+id/guide_line_right"
app:layout_constraintStart_toStartOf="#id/guide_line_left"
app:layout_constraintTop_toBottomOf="#+id/label" />
<!--recycler view for the list -->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/padding_margin_5"
android:layout_marginBottom="#dimen/padding_margin_5"
android:background="#color/transparent"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/guide_line_right"
app:layout_constraintStart_toStartOf="#id/guide_line_left"
app:layout_constraintTop_toBottomOf="#+id/guide_line_separator" />
</androidx.constraintlayout.widget.ConstraintLayout>
Please try to remove this line from rv and then try it.
app:layout_constraintBottom_toTopOf="parent"
as you can see from the image above, the progress bar is always right below the tab layout, even though I have set the progress bar always in the center of the screen like this
but if I choose the tab index == 1 then when the progress bar will show in the center while fetching data from the internet
here is the xml I use
<?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:id="#+id/constraintLayout_upcomingPastEvent_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.Reusable.UserPage.UpcomingAndPastEventsFragment">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout_upcoming_past_event"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabRippleColor="#null"
app:tabTextAppearance="#style/CustomTextAppearanceTab">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Akan Hadir" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Telah Selesai" />
</com.google.android.material.tabs.TabLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView_upcoming_past"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
android:nestedScrollingEnabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout_upcoming_past_event"
app:layout_constraintVertical_bias="0.516"
tools:listitem="#layout/item_general_event"></androidx.recyclerview.widget.RecyclerView>
<ProgressBar
android:id="#+id/progressBar_upComingPast"
style="?android:attr/progressBarStyle"
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_toBottomOf="#+id/tabLayout_upcoming_past_event" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am struggling to get ConstraintLayout to work for me when I want to refactor common layout code into a separate xml file. I can easily do this with RelativeLayouts but I believe RelativeLayouts are deprecated and we should be using ConstraintLayous now.
I have an app with a screen which has a different layout on portrait and landscape as illustrated in the diagram below.
I have 2 layout files with the same name ("my_layout.xml"), one in "layout" folder and one in "layout-land". Currently i have duplicated all the xml in both the layout files and adjusted the constraints so that in the landscape version the views are placed horizontally.
Portrait version
<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">
<!-- OTHER VIEWS 1 -->
<View
android:id="#+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="#+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintBottom_toTopOf="#+id/scrollbar" />
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="#+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintStart_toEndOf="#+id/slow"
app:layout_constraintEnd_toStartOf="#+id/fast"/>
<TextView
android:id="#+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="#+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Landscape version
<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">
<!-- OTHER VIEWS 1 -->
<View
android:id="#+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="#+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintBottom_toBottomOf="parent" />
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="#+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintStart_toEndOf="#+id/OtherViews2"
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintStart_toEndOf="#+id/slow"
app:layout_constraintEnd_toStartOf="#+id/fast"/>
<TextView
android:id="#+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="#+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content
app:layout_constraintStart_toEndOf="#+id/OtherViews2""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The xml for the "Slow" textbox, the scrollbar and the "Fast" textbox is duplicated in both files. I would like to move the layout for these 3 elements into a separate file and reference it in both "my_layout.xml" files so its more reusable and no duplication across layout files. I want to keep my hierarchy flat (otherwise i would just use RelativeLayouts). I do not know how to specify the constraints of the new reusable xml layout file for the scrollbar UI.
Portrait version reusing the scrollbar layout
<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">
<!-- OTHER VIEWS 1 -->
<View
android:id="#+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="#+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintBottom_toTopOf="#+id/scrollbar" />
<include
layout="#layout/scrollbar
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintStart_toStartOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="#+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Reusable scrollbar layout
<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="wrap_content"
android:layout_height="wrap_content">
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="#+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/> ******************
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="#+id/OtherViews3" ******************
app:layout_constraintStart_toEndOf="#+id/slow"
app:layout_constraintEnd_toStartOf="#+id/fast"/>
<TextView
android:id="#+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="#+id/scrollbar"
app:layout_constraintBottom_toBottomOf="#+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" /> ******************
</androidx.constraintlayout.widget.ConstraintLayout>
I do not know what to put for the lines marked with ****. If I specify that the "slow" textbox starts at the start of the parent, that will not work for the landscape version. I would like this scrollbar layout to just indicate the slow is to the left, the scrollbar in the middle (taking up all remaining space) and the fast textbox is on the right. How do i do that using Constraint Layout? Also how do i center all 3 views vertically?
RelativeLayout is so much easier, as i would say the slow textbox is alignedParentLeft, the fast is alignedParentRight and the scrollbar is to the right of the slow textbox and to the left of the fast textbox. Finally i would say all 3 views are centered vertically in the parent.
A view in the included layout cannot refer to a view in the layout file in which it is included. You can still use an included layout with a different approach.
Look at the included layout with the fast/slow text and the seek bar as a self-enclosed entity - something like the following:
scrollbar.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/slow"
app:layout_constraintEnd_toStartOf="#+id/fast"
app:layout_constraintStart_toEndOf="#+id/slow"
app:layout_constraintTop_toTopOf="#+id/slow" />
<TextView
android:id="#+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fast"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can now include this layout in layouts for portrait and landscape orientation:
activity_main.xml (portrait)
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="24dp">
<TextView
android:id="#+id/OtherViews1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews1"
app:layout_constraintBottom_toTopOf="#+id/OtherViews2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="#+id/OtherViews2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews2"
app:layout_constraintBottom_toTopOf="#+id/scrollbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintTop_toBottomOf="#+id/OtherViews1"
app:layout_constraintVertical_weight="4" />
<include
layout="#layout/scrollbar"
android:id="#+id/scrollbar"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/OtherViews2"
app:layout_constraintVertical_weight="0.5" />
<TextView
android:id="#+id/OtherViews3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="24dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollbar"
app:layout_constraintVertical_weight="1" />
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main.xml (landscape)
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="24dp">
<TextView
android:id="#+id/OtherViews1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews1"
app:layout_constraintBottom_toTopOf="#+id/OtherViews2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="#+id/OtherViews2"
android:layout_width="342dp"
android:layout_height="0dp"
android:layout_marginTop="24dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottom="#+id/OtherViews1"
app:layout_constraintTop_toBottomOf="#+id/OtherViews1"
app:layout_constraintVertical_weight="8" />
<include
android:id="#+id/scrollbar"
layout="#layout/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toTopOf="#+id/OtherViews3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/OtherViews3" />
<!-- OTHER VIEWS 3 -->
<TextView
android:id="#+id/OtherViews3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:background="#FFCCCCCC"
android:gravity="center"
android:text="OtherViews3"
app:layout_constraintBottom_toBottomOf="#+id/OtherViews2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/OtherViews2" />
</androidx.constraintlayout.widget.ConstraintLayout>
The included layout file can be treated, in terms of constraints and size, like its own widget. See Re-using layouts with <include/>.
I am trying to implement a Recyclerview but I just can not make it scrollable. I read several threads here in StackOverflow, but I was not able to find one to fix my problem. I think there is something related to the MapView because I have another similar activity without maps that I can scroll, but I still do not know how to fix in this case.
<?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:context=".activities.BookmarkActivity">
<com.google.android.gms.maps.MapView android:id="#+id/bk_mapView" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintHeight_default="percent" app:layout_constraintHeight_percent="0.4" android:layout_marginTop="0dp" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout android:id="#+id/bk_linearlayout" android:visibility="visible" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bk_mapView">
<TextView android:id="#+id/radlabel" android:layout_width="wrap_content" android:layout_height="25dp" android:layout_marginStart="4dp" android:layout_marginTop="2dp" android:layout_marginBottom="8dp" android:hint="#string/bk_radiusName" android:textAlignment="center"
android:textSize="15sp" android:textStyle="bold" app:layout_constraintBottom_toTopOf="#+id/bk_textName" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
<SeekBar android:id="#+id/bk_seekBar" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="2dp" android:layout_marginEnd="8dp" android:max="1000" android:min="10" android:progress="50" app:layout_constraintEnd_toStartOf="#+id/bk_imageButton"
app:layout_constraintHorizontal_weight="1" app:layout_constraintStart_toEndOf="#+id/radlabel" app:layout_constraintTop_toTopOf="parent" />
<ImageButton android:id="#+id/bk_imageButton" android:layout_width="25dp" android:layout_height="25dp" android:layout_marginEnd="8dp" android:background="#android:drawable/ic_input_add" app:layout_constraintEnd_toEndOf="parent" />
<EditText android:id="#+id/bk_textName" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="2dp" android:layout_marginTop="4dp" android:layout_marginEnd="8dp" android:hint="#string/bk_bookmarkName" android:inputType="textCapWords"
android:maxLength="30" android:textSize="15sp" app:layout_constraintEnd_toStartOf="#+id/bk_notify" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="#+id/bk_seekBar" />
<CheckBox android:id="#+id/bk_notifyWifiOnly" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="WifiOnly" android:visibility="gone" android:layout_marginTop="4dp" android:layout_marginEnd="4dp" android:layout_marginBottom="2dp"
app:layout_constraintBottom_toBottomOf="#+id/bk_textName" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="#+id/bk_seekBar" />
<CheckBox android:id="#+id/bk_notify" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Notify" android:layout_marginTop="4dp" android:layout_marginEnd="4dp" android:layout_marginBottom="2dp" app:layout_constraintBottom_toBottomOf="#+id/bk_textName"
app:layout_constraintEnd_toStartOf="#+id/bk_notifyWifiOnly" app:layout_constraintTop_toBottomOf="#+id/bk_seekBar" />
</androidx.constraintlayout.widget.ConstraintLayout>
<FrameLayout android:id="#+id/emptyFrameLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="2dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="#+id/bk_linearlayout">
<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginStart="2dp" android:layout_marginTop="4dp" android:textAlignment="center" android:layout_marginBottom="150dp" android:textSize="20sp" android:textStyle="bold|italic"
android:text="None Here" app:layout_constraintTop_toTopOf="parent" />
</FrameLayout>
<FrameLayout android:id="#+id/topFrameLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="2dp" android:layout_marginEnd="2dp" android:visibility="visible" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="#+id/bk_linearlayout">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="#+id/bk_swipeRefreshLayout" android:layout_width="match_parent" android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView android:id="#+id/bk_recycler_view" app:layout_behavior="#string/appbar_scrolling_view_behavior" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="vertical" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The actual layout screenshot is here:
Put your RecyclerView inside a ScrollView. The SwipeRefreshLayout extends ViewGroup and is used to allow the user to refresh/update the contents of a view via a vertical swipe gesture. It can, therefore, detect vertical swipe gestures made by the users, but it in and off itself does not behave as a scroll view.
Your code should be converted to something along the following lines:
<FrameLayout
android:id="#+id/topFrameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginEnd="2dp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bk_linearlayout">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/bk_swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/bk_recycler_view"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</ScrollView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</FrameLayout>
To get a basic idea on how to use SwipeRefreshLayout, refer to this article. Also, refer to the official documentation.
Summary about SwipeRefreshLayout (from official documentation)
The SwipeRefreshLayout should be used whenever the user can refresh the contents of a view via a vertical swipe gesture. The activity that instantiates this view should add an OnRefreshListener to be notified whenever the swipe to refresh gesture is completed. The SwipeRefreshLayout will notify the listener each and every time the gesture is completed again; the listener is responsible for correctly determining when to actually initiate a refresh of its content. If the listener determines there should not be a refresh, it must call setRefreshing(false) to cancel any visual indication of a refresh. If an activity wishes to show just the progress animation, it should call setRefreshing(true). To disable the gesture and progress animation, call setEnabled(false) on the view.
This layout should be made the parent of the view that will be refreshed as a result of the gesture and can only support one direct child. This view will also be made the target of the gesture and will be forced to match both the width and the height supplied in this layout. The SwipeRefreshLayout does not provide accessibility events; instead, a menu item must be provided to allow refresh of the content wherever this gesture is used.