I have a CoordinatorLayout and inside it, two FloatingActionButton and below them a ScrollView.
The problem is that even though I can see my FloatingActionButtons on screen I cannot click them. I suspect that's because all onTouch events are being handled from ScrollView
Here is my layout xml (which is probably pretty bad so any tips are welcome):
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Note: that 80dp padding is:
main_padding + fab_size + 8dp = 80dp
16dp + 56dp + 8dp = 80dp
and it was the only way I could think to add padding
between my FABs
I tried to use app:layout_anchor but my 2
FABs had no padding between them... -->
<android.support.design.widget.FloatingActionButton
style="#style/RefreshFab"
android:id="#+id/fab_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="80dp"
android:layout_marginEnd="16dp"
app:fabSize="normal"
app:pressedTranslationZ="12dp"/>
<android.support.design.widget.FloatingActionButton
style="#style/SendFab"
android:id="#+id/fab_refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
app:fabSize="normal"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Toolbar -->
<include
layout="#layout/view_toolbar" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<!-- Much stuff here, text views, spinners etc.. -->
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
The problem is because each item is laid out in a CoordinatorLayout in the same order it is written in the xml. By that logic, the FloatingActionButtons are each placed on the screen and then the LinearLayout on top of them, so I would expect the click is being overriden by the LinearLayout.
Rearrange your XML to place the FloatingActionButtons last, so that they are 'on top', so to speak, of your layout. Then they will detect your click listeners just fine.
I think the problem will persist since each FloatingActionButton is wrapped inside of a FrameLayout with match_parent dimensions. I do not believe you need these FrameLayouts, but you can simply put the FloatingActionButtons inside of the CoordinatorLayout.
Related
I'm trying to make a layout with a main area and a bottom button bar. Unfortunately, the main area always overlaps the bottom bar. What am I doing wrong?
The simple code below just contains the main area and the bottom bar, but I can see in the designer that the main area goes to the bottom of the window, despite the constraint
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
This is presumably because I also have to put in the following line:
android:layout_height="match_parent"
Android complains if you don't have this, so I am wondering how the constraints are supposed to work in this case?
Note: I have tried using "wrap_content" instead but in my real view the content is in a ScrollView, and the ScrollView overlaps the buttons unless I hack around with margins. I have to think I am missing aomething?
<?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"
android:id="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
app:layout_constraintTop_toTopOf="#+id/layout__main"
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
app:layout_constrainedWidth="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
app:layout_constraintEnd_toEndOf="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:backgroundTint="#color/black"
>
</LinearLayout>
<LinearLayout
app:layout_constraintBottom_toBottomOf="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
android:id="#+id/layout__bottomButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:backgroundTint="#color/teal_200"
>
<Button
android:id="#+id/btn__reset_all_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="0dp"
android:minWidth="0dp"
android:text="Reset"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
app:layout_constraintTop_toTopOf="#+id/layout__main"
app:layout_constraintBottom_toTopOf="#+id/layout__bottomButtons"
app:layout_constrainedWidth="#+id/layout__main"
app:layout_constraintStart_toStartOf="#+id/layout__main"
app:layout_constraintEnd_toEndOf="#+id/layout__main"
android:layout_width="match_parent"
android:layout_height="0dp"//match constraints is appropriate here
android:orientation="vertical"
android:backgroundTint="#color/black"
>
you used match parent on the layout__main. Now since the parent is the constraint layout it is going to cover the whole screen. Match constraints( denoted by 0dp) will solve your problem. Match constraints translates as cover as much screen that is available to me defined by the constraints i have
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 am in the process of writing my first full Android app, and I want to center a linear layout so that the layout itself is centered, not just the content inside of the layout. I have seen through old posts that android:layout_gravity is used to do this, but as I enter that into my activity's XML, there are no suggestions, and nothing happens when fully entered.
Am I not supposed to use a linear layout to achieve this? Am I supposed to make its size match_parent and just constrain the sizes of all of its children? My idea for the layout was to constrain the size of the linear layout, center it, and have all of its children's horizontal size match_parent.
Here is my activity's XML for reference:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
tools:context="com.frc5113.combustiblescouting.MainActivity">
<LinearLayout
android:layout_width="140dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Team Number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Color" />
</LinearLayout>
Your root layout is a ConstraintLayout. I don't think that supports the attribute layout_gravity. You should either use LinearLayout or use constraints relative to your root view as described here.
Try this, it makes your containt horizontal & vertical center simultaneously:
<?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="match_parent"
tools:context="com.frc5113.combustiblescouting.MainActivity"
android:orientation="vertical"
android:gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Team Number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Color" />
</LinearLayout>
using android:gravity="center" on the LinearLayout will center it's childs not itself.
There would be the android:layout_gravity attribute which is telling the parent how this child wants to be layed out. But this needs to be supported by the Containers' LayoutParams (which is true for e.g. FrameLayout, LinearLayout...)
But Constraintlayout does not support this kind of child gravity.
Here you need to set Constraints on the child (in your case the LinearLayout) in order to place it properly.
Therefore if you want to center the LinearLayout (which would somehow be obsolete as you could center it's childs directly in the ConstraintLayout)
you can achieve this like the following:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="140dp"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<!-- content -->
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I have a dialog fragment that contains linear layout that involves a titleText above a RecyclerView, and at the very bottom, there's a button below the recyclerView.
Since a recyclerView expands or collapses based on the number of items the adapter sets, the button sometimes gets truncated and no longer appears to be on screen, since the recyclerView just covers the entire screen.
My question is, is there a way to set the maximum height of the recyclerView without ever hiding the button underneath. I also don't want to just give the view a random height just in case the recyclerView contains no items, and it would just be a blank section.
Please let me know if you've ever run into this issue, and how you resolved this. Thanks!
UPDATED
You can achieve this easily using layout weights. Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="21sp"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Submit"/>
</FrameLayout>
The Title and RecyclerView will wrap content according to contents and button will always take up bottom place.
I suggest using RelativeLayout as it handles the positioning of views for cases like yours, so that you can actually focus on main design.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Some title" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/title"
android:layout_above="#+id/button"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</RelativeLayout>
Above XML code is the skeleton code for what you need. you can add margins and dimensions to control the spacing. But in any case (until you provide negative margins) your views will never overlap each other.
Main trick of using RelativeLayout is the ability to use XML tags like
android:layout_below or android:layout_above or android:layout_start
or android:layout_end which perfectly aligns your view the way you
want.
I want to create a custom height toolbar and it works fine until I add content to it. Then my content is adjusted to be between the back arrow and the actionbar buttons.
How can I make my content take the entire width so I can create a layout like below? I guess the "+" icon needs to be in a parent layout of the toolbar?
The docs say:
The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
But I don't have the gravity set to CENTER_HORIZONTAL...
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:iosched="http://schemas.android.com/apk/res-auto"
iosched:theme="#style/ActionBarThemeOverlay"
iosched:popupTheme="#style/ActionBarPopupThemeOverlay"
android:id="#+id/toolbar_actionbar"
android:background="#color/theme_primary"
iosched:titleTextAppearance="#style/ActionBar.TitleText"
iosched:contentInsetStart="16dp"
iosched:contentInsetEnd="16dp"
android:layout_width="match_parent"
android:layout_height="128dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
... My Content
Currently my layout ends up like this when running with left margin set to 168:
I'm not sure if you still need help with this, but it has the most votes for an unanswered question in not only the android-5.0-lollipop tag, but also the android-toolbar tag right now. So, I thought I'd give it one.
This layout is pretty easy to achieve, especially with the new Design Support Library.
Implementation
The root of your hierarchy will need to be the CoordinatorLayout.
As per the docs:
Children of a CoordinatorLayout may have an anchor. This view id must
correspond to an arbitrary descendant of the CoordinatorLayout, but it
may not be the anchored child itself or a descendant of the anchored
child. This can be used to place floating views relative to other
arbitrary content panes.
So, we'll use this to position the FloatingActionButton where it needs to go.
The rest is pretty straightforward. We're going to use a vertical LinearLayout to position the Toolbar, text container, tab container, and then a ViewPager. So, the full layout looks like:
<android.support.design.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:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#181E80"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:paddingTop="8dp">
<ImageView
android:id="#android:id/icon"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:importantForAccessibility="no"
android:src="#drawable/logo" />
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#android:id/icon"
android:layout_marginStart="14dp"
android:layout_toEndOf="#android:id/icon"
android:text="Chelsea"
android:textColor="#android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#android:id/text1"
android:layout_below="#android:id/text1"
android:text="England - Premier League"
android:textColor="#android:color/white"
android:textSize="12sp" />
</RelativeLayout>
<FrameLayout
android:id="#+id/tab_container"
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="#272F93">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabContentStart="70dp"
app:tabGravity="center"
app:tabIndicatorColor="#F1514A"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#99ffffff" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="16dp"
android:src="#drawable/ic_star_white_24dp"
app:backgroundTint="#F1514A"
app:borderWidth="0dp"
app:elevation="8dp"
app:layout_anchor="#id/tab_container"
app:layout_anchorGravity="top|right|end" />
</android.support.design.widget.CoordinatorLayout>
There's not a whole lot more to add, the only other thing I'd mention is how to use the TabLayout. If you're using a ViewPager like we are, you'd probably call one of the two:
TabLayout.setTabsFromPagerAdapter
TabLayout.setupWithViewPager
Notes
I just kind of eyeballed the dimensions, trying to match the picture as much as possible.
Results