I have a SearchView inside my Layout. In this layout, I have my ListView associate with the SearchView. When I edit my SearchView, I have the right result.
But I what my ListView to over the other element of my screen (such as a button). How do I do that ?
I see that it's what's done on iOS.
to sum up : I need the listView to be under my searchView AND in front of all other element (the list does not have to move down the reste of my layout)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="10dp"
android:id="#+id/layoutDepart">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/background_input_no_padding"
android:weightSum="1"
android:id="#+id/layoutSearchViewDepart">
<android.support.v7.widget.SearchView
android:id="#+id/searchDepart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
app:iconifiedByDefault="false"
app:defaultQueryHint="Arrêt de départ"
app:queryHint="Arrêt de départ"
android:layout_weight="0.95"
android:padding="0dp"
android:layout_margin="0dp"
>
<SearchView
android:layout_width="wrap_content"
android:layout_height="match_parent"
/>
</android.support.v7.widget.SearchView>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#3a4770"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:ignore="UseCompoundDrawables"
android:tag="favArretItineraire"
android:id="#+id/favDepart"
android:layout_gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/mes_favoris"
android:textColor="#color/bleuFonce"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_star_yellow_24dp"
android:contentDescription="#string/mes_favoris"
android:layout_gravity="center"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/resSelectionLigneDepart"
android:visibility="visible"
android:background="#color/grayBg"
android:layout_below="#id/layoutSearchViewDepart"
>
<ListView
android:id="#+id/listSearchViewDepart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:visibility="gone"
android:translationZ="15dp"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
When deciding what view to draw on top, android respects two things:
order in which views appear in the layout (next one is drawn over
previous one)
Z-coordinates - view with higher Z is drawn over view with lower Z
Note!
Old devices (below 21) do not use Z-order, only view order.
New devices (21 and above) use Z-order first and (for views with equal Z-coords) view order.
Your layout may look like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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"
android:padding="20dp">
<FrameLayout
android:id="#+id/behindListViewWrapper"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- here goes everything that should be behind listview, for example button -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="A button behind"
android:layout_gravity="center"
android:background="#f00"/>
</FrameLayout>
<ListView
android:id="#+id/listSearchViewDepart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#7000"
android:divider="#null"
android:dividerHeight="0dp"/>
<android.support.v7.widget.SearchView
android:id="#+id/searchDepart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:defaultQueryHint="Arrêt de départ"
app:iconifiedByDefault="false"
app:queryHint="Arrêt de départ"/>
</FrameLayout>
Why Button is wrapped in additional FrameLayout?
Because widgets can have default Z-coords. For button Z is equal 2 in normal state and 8 in pressed state (see https://material.io/design/environment/elevation.html). So in all cases the button will be drawn on top.
But that can be bypassed by wrapping button in other layout.
When desiding what to draw next, layout looks only for its direct children, not whole hierarchy. In this case all children have Z equal to 0, therefore behindListViewWrapper is the first to draw, then listview, then searchview.
If the button was not wrapped, it would be drawn on top (on modern devices, because of Z) or behind (on old devices, because of view ordering).
Related
I have the following (Relative) layout (from top to bottom):
Top bar with an icon which opens an options menu
Hidden menu which is set to Visibility.GONE until it is opened
RecyclerView beneath, it takes up the remainder of the screen
So in the beginning, only the top bar and the RecyclerView are visible.
When I click to display the hidden menu, it opens up and lowers the RecyclerView down to make space for itself. If I click on the buttons inside of this hidden menu, they work. The tricky part is, if I click on empty space between those buttons (screen area where the RecyclerView elements USED to be), the click is passed on to a certain RecyclerView element.
So instead of nothing happening because I clicked on empty space, my clicks get passed on to the RecyclerView which used to be there before the options menu popped up.
I am not using animations, only view.visibility = View.VISIBLE
Edit: Let me know if you guys need some photos for better understanding.
Here is my XML:
<!-- TOP BAR -->
<RelativeLayout
android:id="#+id/topBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="47dp">
<ImageButton
android:id="#+id/topBarButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"/>
</RelativeLayout>
<!-- RecyclerView -->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_below="#id/hiddenMenu"/>
<!-- Hidden menu -->
<RelativeLayout
android:id="#+id/hiddenMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/topBar"
android:orientation="vertical"
android:visibility="gone">
<EditText
android:id="#+id/hiddenMenutext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is some text" />
<ImageView
android:id="#+id/hiddenMenuImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
Can u try this..... if not solved share the exact issue with images/Gif.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/lltop"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/topBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="47dp">
<ImageButton
android:id="#+id/topBarButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/hiddenMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
<EditText
android:id="#+id/hiddenMenutext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is some text" />
<ImageView
android:id="#+id/hiddenMenuImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_below="#+id/lltop"
android:layout_height="match_parent"
android:padding="#dimen/item_margin"
android:clipToPadding="false"/>
</RelativeLayout>
I have a ConstraintLayout where I have three different ListView's.
The content of these ListViews is set dynamically. So I don't really know how many items they will get on runtime.
I want the layout as follows: The first ListView should start at the top of the screen and the second should be almost right under it. (just with some fix distance). The third one should stick to the bottom of the screen, if the first two ListViews aren't taking to much space already. If they do and so they would interfere with the third ListView on the bottom, it should put below the second ListView with some fix distance.
How could I achieve this? At the moment I implemented it so that the third ListView sticks to the bottom. But it will be overwritten from the second ListView if it has too many items, or the screen of the phone is too small.
Here my Layout:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/backgroundColor"
android:fitsSystemWindows="true"
tools:context=".activities.fragments.PreferenceCategoryFragment">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:textAppearance="#style/introductionTitle"
android:text="Allgemeines"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/divider1"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/darkGray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="#id/title"/>
<ListView
android:id="#+id/settingsCategories"
android:layout_width="match_parent"
android:layout_height="0dp"
android:divider="#null"
app:layout_constraintTop_toBottomOf="#id/divider1">
</ListView>
<TextView
android:id="#+id/title2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="30dp"
android:textAppearance="#style/introductionTitle"
android:text="Sonstiges"
app:layout_constraintTop_toBottomOf="#id/settingsCategories"/>
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/darkGray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="#id/title2"/>
<ListView
android:id="#+id/settingsCategoriesLegal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:divider="#null"
app:layout_constraintTop_toBottomOf="#id/divider2">
</ListView>
<ListView
android:id="#+id/logout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:divider="#null"
android:layout_marginTop="50dp"
app:layout_constraintBottom_toBottomOf="parent">
</ListView>
</android.support.constraint.ConstraintLayout>
For better understanding see this image of how it looks like on a big screen phone:
And this is how it looks like if the screen is too small:
I have a really weird issue. I have a complex linear layout containing 3 children.The first left child is a list (a lot like the list detail pattern of android(two pans)) the second child is a separator view (just a simple view as a line separator) and the third is a Big Image view (https://github.com/Piasy/BigImageViewer)
The problem is when trying to zoom on the right side the recycler view items get clicked
<LinearLayout 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="horizontal"
android:weightSum="5">
<LinearLayout
android:id="#+id/total_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<RelativeLayout
android:id="#+id/menu_container"
android:layout_width="180dp"
android:layout_height="match_parent"
>
<include
android:id="#+id/list"
layout="#layout/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ProgressBar
android:id="#+id/devices_new_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="gone" />
</RelativeLayout>
<View
android:id="#+id/line_seperator"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/grey"
></View>
<RelativeLayout
android:id="#+id/image_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.github.piasy.biv.view.BigImageView
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
app:customSsivId="#+id/mSSIV"
app:initScaleType="centerInside"
app:optimizeDisplay="true">
<ImageSSIV
android:id="#+id/mSSIV"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.github.piasy.biv.view.BigImageView>
<ProgressBar
android:id="#+id/image_progress_bar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
Check your match_parent attributes so they are not triggered by the screen touches
For whoever if facing this
My main issue was that I was using a Chinese tablet Huawei and whenever you plug it in the pc it goes crazy all the touches are mixed.
What I have so far
I have a recyclerview and buttons below it. On initial state everything looks good: recyclerview makes space for a button and I can scroll down to the end of the list and the last item won't be hidden by the button. When I pick one of the items, one button becomes invisible and other buttons become visible.
Actual behavior
When buttons change their visibility, recyclerview fills parent, so part of the content is being hidden under the recently appeared buttons.
Expected behavior
I expect that recyclerview will shrink its height leaving some space for the buttons.
What I've tried to do
I've tried to apply this to a swiperefreshlayout:
android:layout_height="0dp"
android:layout_weight="1"
but now recyclerview will just disappear when first button hides and others show up.
Layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<include
layout="#layout/toolbar_actionbar" />
<TextView
android:gravity="center"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_gravity="center|center"
android:maxLines="10"
android:textSize="20dp"
local:MvxBind="Text EmptyMessage;Visibility Visibility(ShowEmptyMessage)" />
<MvvmCross.Droid.Support.V4.MvxSwipeRefreshLayout
android:id="#+id/timeslotsSwipeRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/getTimeslotButton"
android:layout_below="#+id/appbar"
local:layout_behavior="#string/appbar_scrolling_view_behavior"
local:MvxBind="Refreshing IsRefreshingTimeslots; RefreshCommand RefreshTimeslotsCommand">
<!-- Here is my recycler view -->
<MvxRecyclerView
android:id="#+id/MyTimeslotsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:MvxBind="ItemsSource Timeslots;Visibility Visibility(ShowList)"
local:MvxItemTemplate="#layout/item_my_timeslot" />
</MvvmCross.Droid.Support.V4.MvxSwipeRefreshLayout>
<!-- Here is my disappearing button -->
<android.support.v7.widget.AppCompatButton
android:id="#+id/getTimeslotButton"
android:text="Получить таймслоты"
android:theme="#style/ButtonPrimary"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
local:MvxBind="Click GetTimeslotsCommand; Visibility InvertedVisibility(IsEditModeEnabled)" />
<!-- Here are my appearing buttons.
I placed it inside of a relativelayout
to make a single visibility data binding -->
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
local:MvxBind="Visibility Visibility(IsEditModeEnabled)">
<android.support.v7.widget.AppCompatButton
android:id="#+id/copyToSmsButton"
android:text="Отправить по SMS"
android:theme="#style/ButtonPrimary"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginBottom="0dp"
android:layout_alignParentLeft="true"/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_below="#id/copyToSmsButton">
<android.support.v7.widget.AppCompatButton
android:id="#+id/deleteTimeslotButton"
android:text="Удалить"
android:theme="#style/ButtonSecondary.Red"
android:layout_marginTop="0dp"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/moveTimeslotButton"
android:text="Перенести"
android:theme="#style/ButtonSecondary"
android:layout_marginTop="0dp"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I was able to this somehow using RecyclerView. When I create a view for a specific item in my RecyclerView, the recyclerview item layout is matched to parent.
I am wondering if this is also possible using ScrollView?
Here's what I did so far:
ScrollView xml:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollview_homescreen"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/linearlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/listitem_comic_menu"/>
<LinearLayout
android:id="#+id/linearlayout_comic_listings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
</ScrollView>
Content:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageview_menu_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true" />
<ImageView
android:id="#+id/imageview_menu_title_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/starwars_webtoon_home_1_logo"
android:scaleType="fitXY"
android:adjustViewBounds="true" />
<Button
android:id="#+id/button_start_reading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/button_menu"
android:layout_marginBottom="18dp"
android:text="#string/button_start_reading"
android:gravity="start"
android:drawableRight="#drawable/ic_keyboard_arrow_right_black_24dp"
android:drawableEnd="#drawable/ic_keyboard_arrow_right_black_24dp"
android:background="#drawable/button_bg"
android:textSize="18sp"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp" />
<Button
android:id="#id/button_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="28dp"
android:text="#string/button_menu"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:drawableLeft="#drawable/ic_menu_white_24dp"
android:drawableStart="#drawable/ic_menu_white_24dp"
android:background="?android:attr/selectableItemBackground" />
</RelativeLayout>
So what am I trying to do? Basically this is for comic listing. The first item should be the homescreen, a couple of button here and there and the entire application logo. The next item should show the listings (I have 40 items of the same width and height) and a footer.
I need my homescreen to match the parent which is the screen. So when I scroll the topmost part, the first item (the first view, which is the homescreen) fills the entire devices screen.
I was able to to do this on RecyclerView and looks nice. I have encountered some of problems that plague me which I have to fix extensively to the point that I am hacking through the system and I realize RecyclerView is not really the best layout for this kind of case. I am currently deciding whether to switch to ScrollView and dynamically/statically add the comic items. But, the homescreen, which is the first View is not matching the screen device.
I would just like to ask if this possible at all to do in ScrollView?
Thanks!
Use weight attribute:
<LinearLayout
android:id="#+id/linearlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<include layout="#layout/listitem_comic_menu"/>
<LinearLayout
android:id="#+id/linearlayout_comic_listings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>