I have created a simple recycler view within a linear layout. When I scroll to the right I want the items
to disappear behind my frameLayout. (It should look like you cant see the items anymore because they are behind the frameLayout).
Unfortunately, the items appear do move behind a invisible wall (the left border of the recycler view) instead of behind my frameLayout. Is there a way to remove the animation for items leaving the recyclerview?
Thanks for any help!
Code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_exerciseCards"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:animateLayoutChanges="false"
android:paddingLeft="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="50dp"
android:layout_height="300dp"
android:layout_marginLeft="-10dp"
android:background="#drawable/view_newexercise_deck"
android:elevation="4dp" />
<com.example.projecttraining0.VerticalTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="-5dp"
android:elevation="4dp"
android:rotation="180"
android:text="My Exercises"
android:textAlignment="center"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp" />
</FrameLayout>
screenshot
By using LinearLayout your FrameLayout and RecyclerView get placed one next to each other with no overlap. If you want your RecyclerView to be the full width you can use a ConstraintLayout instead of your parent LinearLayout.
You can constrain your RecyclerView to the parent so it fills the entire screen. And also put the RecyclerView first in the hierarchy and the FrameLayout second, so that the FrameLayout will be on top and occlude the RecyclerView.
You can learn a lot about ConstraintLayout here. There are also a lot of video tutorials on YouTube.
Related
discover.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_peekHeight="#dimen/peek_height">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/discover_displays"
android:layout_width="match_parent"
android:layout_height="#dimen/peek_height"
android:background="#drawable/round_corners"
android:orientation="vertical">
<TextView
android:id="#+id/to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="#dimen/pad_17"
android:paddingBottom="#dimen/pad_16"
android:text="#string/to"
android:textAlignment="center"
android:textColor="#color/light_gray"
android:textSize="#dimen/pad_12"
android:visibility="gone"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/disp"
android:layout_width="match_parent"
android:layout_height="#dimen/disp_height"
tools:listitem="#layout/disp_item" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/small"
android:layout_width="#dimen/progress_bar"
android:layout_height="#dimen/progress_bar"
android:layout_gravity="center"
android:layout_marginTop="#dimen/text_width"
android:indeterminate="true"
android:progressBackgroundTint="#color/progressbar_background"
android:progressTint="#color/progressbar_color" />
<TextView
android:id="#+id/discovery_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/pad_26"
android:gravity="center"
android:paddingStart="#dimen/element_margin"
android:paddingEnd="#dimen/element_margin"
android:text="#string/discovery_message"
android:textColor="#color/text_color"
android:textSize="#dimen/text_size"
android:visibility="visible" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/error_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/pad_12"
android:background="#color/discovery_error_item"
android:padding="#dimen/discovery_error"
android:textColor="#color/white"
tools:text="#string/bluetooth_label" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
Current Layout :
Expected layout : The Recyclerview in the above pick should have a height as below, while the 3 views progressbar, discover state message, error action should be aligned in the middle as in order (one below the other). How to accomplish the same ?
The view with id : "to" is optional, since its being used in two fragments, 1 fragment uses it and other dont, hence the visibility is hidden and made visible whenever required. I am using the coordinator layout, since a bottomsheet view is being used.
The recyclerview height needs to be adjusted, keeping the progress bar, discovery state message, error actions being aligned to center when its visible one after the other (either recyclerview is visible at a time, or the 2 views are visible at a time (progress bar, discover error state or the button) or only the error button is visible at a time aligned to the center) . Please help in aligning the view items to the center when the visibility of one view is not present. currently the view aligns to the top if there is no visibility. Thanks.
I believe you can nest ConstraintLayout within the CoordinatorLayout and implement your screen in the Constraint Layout by adding the constraints you wish.
Should be easy enough.
You have to use a combine of linear layout and relative layout with the relative as parent , and recycler and the linear as childs of it , its look like this :
<RelativeLayout>
<RecyclerView android:layout_width="match_parent" android:layout_height="match_parent"\><LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android: orientation="vertical" ... android:gravity="center"></LinearLayout>
</RelativeLayout>
I'd like to start by showing what I'm trying to achieve, and I'll move on to what I I know and have tried.
• What I've tried:
I've tried Collapsing Toolbar Layout, which doesn't give the effect that's in the image, where the bottom view with Title and description is stacked on Top of ImageView.
I used BottomSheet, but unfortunately I don't see any way to anchor the BottomSheet to the bottom of ImageView, I tried to do it using app:layout_anchor="#id/imageView", but it still covers the complete image, and without that, it does as intended, but it doesn't stay below the ImageView, if the image is long, it'll cover a lot of part of that image.
I tried the following layout, (where #drawable/background_blog_description is the drawable with rounded corners at top). Also, in the layout below, I haven't added layout_anchor tag because it covers entire Image (Even if I specify the anchor_gravity="bottom").
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:orientation="vertical">
<ImageView
android:id="#+id/iv_notice_image_complete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:transitionName="iv_notice_image" />
<androidx.core.widget.NestedScrollView
android:id="#+id/acm_nsv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="false"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_blog_description"
android:orientation="vertical"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:paddingEnd="20dp"
android:paddingBottom="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_notice_title_complete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:padding="5dp"
android:text="This will be the title of notice"
android:textColor="#color/black"
android:textSize="30sp"
android:textStyle="bold"
android:transitionName="tv_notice_title" />
<WebView
android:id="#+id/mdv_notice_description_complete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:transitionName="tv_notice_description" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_notice_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_gravity="top|start"
android:layout_margin="8dp"
app:backgroundTint="#color/white"
app:srcCompat="#drawable/ic_back" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
At this point I'm kinda blank as to what I should do to make something like below. It must be something really simple, but I'm not seeing it for some reason. My only requirement is that the bottom Layout/View of the ImageView should be on top of it, with a small part of Image (20dp maybe?) under that view, and when scrolled, it should cover the image.
So, BottomSheet which can be anchored at the bottom of ImageView, but with some part of Image going under the BottomSheet?
Put your image within an AppBarLayout and then add app:behavior_overlapTop=20dp to your NestedScrollView.
https://developer.android.com/reference/android/support/design/widget/AppBarLayout.ScrollingViewBehavior.html#setOverlayTop(int)
I have an ImageView and TextView inside a CardView. I can adjust the size of both the ImageView and TextView but when I try and move either of the 2 inside the XML design window, the top left corner of both doesn't move from the top left corner of the CardView, they're just stuck there. Any idea why this happens? I've included an image and my XML code below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/newsView_container"
android:orientation="vertical"
android:layout_marginBottom="1dp">
<android.support.v7.widget.CardView
android:id="#+id/news_cardView"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="1dp"
card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#406490">
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
card_view:srcCompat="#drawable/cast_abc_scrubber_control_off_mtrl_alpha"/>
<TextView
android:id="#+id/news_title"
android:layout_width="157dp"
android:layout_height="99dp"
android:background="#99141414"
android:fontFamily="sans-serif-condensed-light"
android:text="Internet of Things Reaches One Day Volume of $430.00 (XOT) - Modern Readers"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
When working with RelativeLayout, you have basically two different ways to position views inside it.
The first is to use the attributes available in RelativeLayout.LayoutParams, such as centerInParent in order to center views vertically, horizontally, or both. You can also use attributes like below to position views relative to each other.
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
android:layout_centerInParent="true"/>
The other is to use margins in order to push views slightly away from the edge of the parent they're fixed to. In your case, with the views stuck to the top left (the default without any of the other attributes specified), you could use top or left margins.
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
android:layout_marginTop="32dp"/>
You can make this possible with ConstraintLayout, you can set your Views wherever you want and it is so simple and easy. You just have to connect constraints with parent or with other Views.
<!-- Your Parent View Start-->
<androidx.cardview.widget.CardView
android:id="#+id/news_cardView"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="1dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#406490">
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
card_view:srcCompat="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/news_title"
android:layout_width="157dp"
android:layout_height="99dp"
android:background="#99141414"
android:fontFamily="sans-serif-condensed-light"
android:text="Internet of Things Reaches One Day Volume of $430.00 (XOT) - Modern Readers"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Your Parent View End-->
if you have use relative layout as a parent layout in xml file then RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).In relative layout by default views are set in relative layout left top corner. you need to add view relative to anothers views
for Example
if you want to set image view center in layout then you so add this attribute in child view android:layout_centerInParent="true"
follow these tutorial to design layout in relative layout
relative layout
relative layout
I am trying to place an ImageView inside my RelativeLayout that is positioned about 3/4 down the screen, but as soon as I add an ImageView to the RelativeLayout, the layout and the image get snapped to the top of the screen and I am not sure how to move it from there.
This is what it looks like whenever I add an ImageView to the RelativeLayout
But I want it positioned just above the "Ready" button
This is the .xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
This is happening because you don't understand RelativeLayout well enough.
All Views placed inside RelativeLayout will automatically be placed ontop of each other in the top left corner of the RelativeLayout.
If you want to move it, you need to 'align' it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
By aligning the ImageView to the bottom of the RelativeLayout, it should be placed above the Ready button IF your RelativeLayout ends right above the Ready button.
If you want to center the ImageView, you can add in android:layout_centerHorizontal="true".
You can read more about RelativeLayout here: https://developer.android.com/guide/topics/ui/layout/relative
However, there's 2 curious things about your xml code.
Why are you placing an ImageView of height 80dp inside a RelativeLayout of height 74dp? It's basically purposely looking for trouble.
Why are you using a RelativeLayout if you're using ConstraintLayout already? One of the main benefits of using a ConstraintLayout is so you don't have to use nested layouts. With the power and control of ConstraintLayout, you can actually rearrange almost all views to any design you want without nesting another layout like RelativeLayout inside of it.
I'm just guessing that you're using ConstraintLayout because you used app:layout_constraintStart_toStartOf in your RelativeLayout and these types of 'constraints' only exist for ConstraintLayout.
So if you're already using a ConstraintLayout and your Ready Button is inside the ConstraintLayout, you simply need to do:
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
You don't need a RelativeLayout to place the ImageView above the Ready Button.
wrap the relative layout and button with linear layout orientation vertical and adjust gravity as you like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
</LinearLayout>
Im using com.android.support:recyclerview-v7:23.2.1 and with that version it should be possible to use WRAP_CONTENT on a RecyclerView height. I for now have the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:importantForAccessibility="no">
<android.support.v7.widget.RecyclerView
android:id="#+id/message_list_row_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/message_list_message_divider"
android:layout_alignParentTop="true"
android:clipToPadding="false"
android:divider="#null"
android:importantForAccessibility="no"
android:listSelector="#android:color/transparent"
android:padding="10dp"
android:textColor="#color/textcolorprimary" />
<View
android:id="#+id/message_list_message_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="#+id/message_list_layout_message"
android:layout_gravity="center"
android:background="#android:color/darker_gray"
android:importantForAccessibility="no" />
<RelativeLayout
android:id="#+id/message_list_layout_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:importantForAccessibility="no"
android:orientation="horizontal">
<EditText
android:id="#+id/message_list_edittext_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginEnd="10dp"
android:layout_toStartOf="#+id/message_list_button_send"
android:background="#color/transparent"
android:hint="#string/message_input"
android:inputType="textMultiLine"
android:maxLines="10"
android:minLines="3"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textColor="#color/primaryColor"
android:textSize="16sp" />
<ImageButton
android:id="#+id/message_list_button_send"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:background="#null"
android:contentDescription="#string/content_description_image_send"
android:gravity="center"
android:scaleType="fitXY"
android:src="#drawable/custom_button_send" />
</RelativeLayout>
</RelativeLayout>
The Preview in Android Studio is showing the correct layout with the RecyclerView above the dummy line View i inserted. I need this kind of layout because the RelativeLayout with the EditText inside can grow in height (if there are mor than 3 lines the EditText is growing in height and also the RelativeLayout).
When i install it on my Phone there is a problem. The RecylcerView is not above the view i defined. it is filling the complete height of the device. so the last row of my recylcerview is always behind the relative layout.
Why that? And how can i fix it? I need the RecyclerView to stay ALWAYS above the my divider and to shrink in height when relativelayout is growing in height.
Edit I want to provide some screenshots to show you the problem. The first Screenshot shows my Chat with the current layout:
But there is missing one item because the scroll height is bigger than defined by the layout. The missing item you can see here after i scrolled down:
When i now (just to find the source of the problem) remove alignParentTop from the RecyclerView and set its height to 300dp, the change of the height gets correctly respected:
But as you can see several items are missing now because they are hiding out of the field of view (yes... even when i programmatically scroll to bottom after initialization). To show that all elements are there:
So the height gets correctly set... but the last elements arent showing up until i manually scroll down. programmatically scrolling does not have an effect.
Add this to the RelativeLayout with EditText inside it layout_below="#+id/message_list_message_divider". And remove the layout_above on the divider
I fixed a similar problem with placing the element you want ti have on top as last child of the parent layout or try putting android:translationZ="1dp" into the recyclerview.