Position views under CoordinatorLayout - material-design

I have layout structure like this:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- other layout content goes here -->
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:hideOnScroll="true"
app:menu="#menu/menu_continue" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
NestedScrollView fills whole screen. If it happens scroll content is about the height of the screen (but not more then that), user sees non-scrollable content (because from NestedScrollView point of view there is no need to scroll) that goes under BottomAppBar.
Now I can easily workaround this by adding bottom padding or margin to the scroll view, but to me it's a hack. Is there any adequate clean solution to this problem?

Related

Drawer Layout in fragment

I tried to implement a Drawer Layout in a fragment, however, if I use "android: layout_gravity="start" then my navigational just disappears.The same code works fine if I put it in an activity.
And if I try to swipe to the right, it also does not work (you can see it in the image I posted). For me, it looks like I can not swipe to the right and therefor the navigation view can not be opened?
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/bottom_navigation">
/>
</android.support.v4.widget.DrawerLayout>
Image (if I swipe to the right
By looking at this gist, you should add android:fitsSystemWindows="true" to the DrawerLayout and set its width to match_parent. My guess is, it should be the child NavigationView which can have a defined width.

How ignore ConstraintLayout padding in children element

In my App, I want some child view ignore parent view padding.
For Example:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="86dp"
android:clipToPadding="false"
android:padding="8dp">
<TextView
android:id="#+id/history_restart"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="-8dp"
android:layout_marginTop="-8dp"
android:gravity="center"
android:paddingLeft="27dp"
android:paddingRight="27dp"
android:text="#string/history_restart_action_text"
android:textColor="#color/colorAccent"
android:textSize="#dimen/normal_text_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Tried it but not working :(
This is impossible. Your parent view has a fixed height. Adding the padding means that the greatest height it will assign to its children will be 86dp - 2 * 8dp = 70dp. Using negative margin will only move your view around. It will not change the height it gets. So will never fill the parent.
You have to give up the padding attribute and instead use margins on every other view inside your layout.

Android - how to set SlidingUpPanelLayout to half of the screen height?

I am using Umano's SlidingUpPanelLayout to provide a sliding panel that you can drag up from the bottom of the screen. You can find the documentation here:
https://github.com/umano/AndroidSlidingUpPanel
I want it so that the panel only fills half of the screen when it is extended. The documentation states this:
The main layout should have the width and the height set to match_parent.
The sliding layout should have the width set to match_parent and the height set to either match_parent, wrap_content or the max
desireable height. If you would like to define the height as the
percetange of the screen, set it to match_parent and also define a
layout_weight attribute for the sliding view.
This is my XML layout containing the sliding panel:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.bleachedlizard.policeapp.mainactivity.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/sliding_up_panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<include layout="#layout/main_content" />
<FrameLayout
android:id="#+id/contact_details_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
I've tried adding a layout_weight attribute to contact_details_frame but it doesn't work. In fact, Android Studio won't auto-complete when I try to add a layout_weight attribute (I'm guessing because it needs to be inside a LinearLayout in order for that attribute to be valid there). I've tried adding a LinearLayout, both on its own and also with an empty View to try to take up the top half of the screen, but still nothing.
Can someone tell me how to get the SlidingUpPanelLayout to only take up half of the screen?
I test a lot of ways , but non of them works, But here is a another way. hope that it helps :)
First: just change sothree:umanoPanelHeight value to 0dp that it'll hide bottom bar of SlidingUpPanelLayout
<com.sothree.slidinguppanel.SlidingUpPanelLayout
// your code
sothree:umanoPanelHeight="0dp">
Second: make a barlayout or button [Not in dragView]
(to open SlidingUpPanelLayout, instead of using the bar that SlidingUpPanelLayout shows itself)
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/btn_open_slide_panel"
android:text="open SlidingUpPanelLayout "/>
Third: in SetOnClickListener method of your view(that we made in second part)
Call method setAnchorPoint() and pass 0.5f as argument
Use ANCHORED as PanelState
slidingUpPanelLayout.setAnchorPoint(0.5f);
slidingUpPanelLayout.setPanelState(SlidingUpPanelLayout.PanelState.ANCHORED);
hope it helps :)

Android clickable layouts above empty views

My project also uses Xamarin with MvvmCross, but I don't think this will effect the answer since the problem is all view-layout/axml related.
I have a GridView that summarizes a list of contacts. When clicking on this grid view, I would like the user to be taken to another screen to add more contacts to this list (so there is more space).
Subscribing to the GridView's OnClick event gives me an exception, saying I should be subscribing to the item click event, so I have done this using a clickable relative layout that surrounds the GridView (and its accompanying empty image view) as such:
...
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/addContactsRelativeLayout"
android:clickable="true">
<ImageView
android:id="#+id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_add" />
<Mvx.MvxGridView
android:id="#+id/addContactsGridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
local:MvxBind="ItemsSource Contacts"
local:MvxItemTemplate="#layout/contact_summary_item"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:columnWidth="55dip"
android:gravity="center" />
</RelativeLayout>
...
This works fine when the GridView is empty, and the empty ImageView is shown. However, when there are items in the GridView, the RelativeLayout no longer seems to exist and clicks over the GridView can be seen to highlight items on the GridView. This means the user is not taken to the screen to edit their contact list.
I have tried several different configurations and attributes from similar questions on SO, but I think the addition of an empty view is causing problems. Any help would be greatly appreciated.
Ok, after a lot more playing around I found a solution.
Essentially it's adding another relative layout, higher in the z-index and therefore above the 'real' contents, within the surrounding relative layout.
...
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView
android:id="#+id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_add" />
<Mvx.MvxGridView
android:id="#+id/addContactsGridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
local:MvxBind="ItemsSource Contacts"
local:MvxItemTemplate="#layout/contact_summary_item"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:columnWidth="55dip"
android:gravity="center"
android:focusable="false"/>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:clickable="true"
android:id="#+id/addContactsRelativeLayout"/>
...
Then just move all your click listeners to listen to the relative layout at the bottom.

Android app RelativeLayout not showing

so im trying to use a relative layout (for basic app tabs at the bottom of the screen) and it is not showing when i place it inside the LinearLayout after 2 other layouts (a LinearLayout and a ScrollView). The ScrollView contains several textViews and scrolls nicely on its own and the linearlayout before it also works nicely, but the relativelayout that i have tried to place at the bottom of the screen does not work.
Here is the general code for what i am trying to do:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:background="#drawable/common_bg"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="50dp">
<TextView android:layout_height="50dp"
android:text="Heading"
android:gravity="center"
android:textSize="17dp"
android:textColor="#color/white"
android:textStyle="bold"
android:layout_width="fill_parent">
</TextView>
</LinearLayout>
<ScrollView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:layout_gravity="top"
android:layout_marginBottom="60dp">
<LinearLayout android:layout_width="fill_parent"
android:orientation="vertical"
android:paddingTop="15dp"
android:layout_weight="1"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_height="fill_parent">
<TextView android:layout_width="wrap_content"
android:textColor="#color/white"
android:textSize="18dp"
android:textStyle="bold"
android:text="#string/text"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/bottomMenu"
android:layout_width="wrap_content"
android:layout_height="60dp" />
</LinearLayout>
UPDATE: the Relative layout that im using is custom in a way that i cant actually show the code for it here, but it contains a radio group with several buttons.
UPDATE 2: Ok, so I solved the problem by manipulating the layout_height="wrap_content" on the 3 layouts (the first linear, the one holding the scroller, and the bottom relativelayout) as well as manipulating the layout_wieght of each of them until I was satisfied with the way it looked... it doesnt seem like this is the best possible solution, but it worked so i cant complain too much lol...
The relative layout in itself wont be displayed in an xml graphical layout or when you are running the app, it needs a child element to occupy the parent layout, try putting a text view inside the relative layout, it'll be displayed, position it right below the linear layout having the scroll view, it'll work properly, i just tried it with your code and it works

Resources