Develop Reference

Making a styled ListView over an element such as iOS

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).

TextView Bar over Google Map

I am trying to implement a screen with a map and on top on the map it should have a textbar displaying text but for some reason my textbar always goes below the google map view.
I tried to look up for relateable questions but no success with their answers. The picture is attached below to give some more gudience. Code is below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingStart="20dp"
android:paddingEnd="20dp">
<com.google.android.gms.maps.MapView
android:id="#+id/map"
android:elevation="10dp"
android:layout_below="#+id/tv_treatment_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/tv_rateDoctor"
>
</com.google.android.gms.maps.MapView>
<include
android:id="#+id/toolbar"
layout="#layout/menu_top_header"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_toolbar_height"
/>
<TextView
android:id="#+id/tv_treatment_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:layout_marginBottom="20dp"
android:layout_centerHorizontal="true"
android:text="Treatment ID: 222-X-F"
android:textSize="#dimen/font_label" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tv_information"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_alignTop="#+id/map"
android:orientation="horizontal"
android:background="#color/colorTextGrey"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_sent_info"
android:padding="20dp"
android:text="Your Treatment has been sent to the following lab"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:padding="20dp"
android:id="#+id/tv_rateDoctor">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rate_doctor"
android:textSize="#dimen/font_input"
android:fontFamily="#font/lato_bold"
/>
<ImageView
android:layout_marginStart="5dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_arrow_right"
android:layout_marginLeft="30dp" />
</LinearLayout>
Image of desirable output

Try the next layout. If you want to display something in front then you must put it at last in the layout.
EDIT
Try this code instead. I´m using it in a personal project and show buttons in front of the map. But of course im using a SupportMapFragment, maybe you can try using it too.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="250dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:gravity="top">
<!-- Put any TextView, Imageview, Button, etc inside -->
<LinearLayout/>
</FrameLayout>
Hope it helps!

try using this in your textView
android:layout_alignParentTop="true"
layout_alignParentTop
If true, makes the top edge of this view match the top edge of the
parent. Accommodates top margin.
May be a boolean value, such as "true" or "false".
You can also try using
android:layout_alignTop
which Makes the top edge of this view match the top edge of the given anchor view ID. Accommodates top margin.

MvxRecyclerView is being drawn under other elements

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>

Is it possible to make the first view in ScrollView match dimensions to screen?

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>

Wizard like layout in android

I want to create a Wizard like layout which should look like described:
* at the top should be some kind of title of the current dialog
* at the bottom should be a navigation bar containg buttons for next/previous and various operations. THis bar should always(!) be at the very bottom of the screen.
* at the center should be a list (should use all the space left, except the title bar and the navigation bar described above)
My first attempt is posted below. I used framelayout however I was told this is a bad idea. The problem I ran into is that last row of my list is below the bar with the buttons at the bottom of the screen. Do you have any suggestions on how I could solve my Problem?
Thanks
Here's my not working draft:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical" >
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal" style="#android:style/ButtonBar">
<ImageView android:src="#drawable/person"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/personstring"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<ListView android:visibility="visible" android:id="#android:id/list"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:id="#+id/footer"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_gravity="bottom|center"
android:layout_alignParentBottom="true" style="#android:style/ButtonBar">
<ImageButton android:id="#+id/loacreation.previousButton"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:src="#drawable/buttonarrowleft" />
<ImageButton android:id="#+id/loacreation.nextButton"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:src="#drawable/buttonarrowright" />
</LinearLayout>
</FrameLayout>

Use a RelativeLayout as your outermost container, and the LinearLayout that contains your buttons can have android:layout_alignParentBottom="true".