Android Studio XML formatting not filling screen - android

I am working on one of my first apps. One activity of the app includes swiping left and right to scroll through different fragments, I am using Scroll-View for this. I want each fragment to include multiple elements, but unfortunately Scroll-View only supports a maximum of one direct child element. To work around this, I placed all the views I want in the fragment inside a ConstraintLayout, making the ConstraintLayout the only direct child of the ScrollView. You can see this in my XML code below:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/gayLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<A BUNCH OF CHILD VIEWS (ImageViews, TextViews, etc.)/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Unfortunately, this completely messes up the formatting. You can see this in the image below:
A blue line can be seen in the render underneath all the views. From what I can gather, this is the bottom edge of the inner Constraint-Layout, but the thing is, I have no idea how to move it, and I cannot move any of its child elements below the line. I can make it smaller, just not larger, and there's no way for me to get it to scale to different screen sizes. What would be a better way to group these child elements without having this problem? Thanks!

Related

android listView clipping and unable to scroll

I've a fragment file with a listview in it, as my number of items increase, they are populating beyond the screen but I'm unable to scroll the listView to bring the hidden items up. Most of the tutorials are following LinearLayout etc. but I want to stay within the modern constrain layout mode.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/userList"
android:layout_width="409dp"
android:layout_height="729dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
There is a similar question HERE where the poster indicated it was working fine all along, but needed more elements to scroll.
If that is not the case, try setting this in your ListView
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
I haven't tested it, but some people reported success so give it a try.

Flat ConstraintLayout with layout_constraintHeight_min for each row doesn't work

I have what I think is a pretty common use case: I have multiple rows of information on the screen. I'm hoping to implement these views without having to use nested ViewGroups. Each row should have a minimum height, but expand if the contents are larger than the minimum height. The contents should be nested vertically.
It seems like this simplified example should work:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Row"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/view"
app:layout_constraintBottom_toBottomOf="#+id/view"/>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#8800ff00"
app:layout_constraintHeight_min="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="#id/textView"/>
</android.support.constraint.ConstraintLayout>
Instead of creating a ViewGroup for each row, I have a flat layout with constraints. A View for each row sets the row height and can be clickable. The views inside the row are siblings in the layout hierarchy, but center themselves vertically in the middle of the View for that row. Since I've specified app:layout_constraintHeight_min and anchor the bottom of the View to the bottom of the contents, it should grow with the contents.
But there's a problem:
ConstraintLayout adds undesired spacing above the row! Note that the unwanted spacing above the row is equal to the correct spacing between the bottom of the contents and the bottom of the row.
My theory is this: since the View's bottom is anchored to the bottom of the contents (the TextView) it wants to stick tightly to that and be right next to it. If I force it to move further away, it adds something like a bottom margin to accomplish that, it adds a similar top margin to be symmetrical.
How do I make it stop? If it wasn't for that unwanted spacing on the top, I'd have exactly what I need. Perhaps there's some special ConstraintLayout trick, some magical attribute to fix this behavior. Or maybe there's a completely different way to use ConstraintLayout to accomplish the UI I want.
I realize that using fixed-height rows would make this much simpler, but I don't like doing that if the contents can grow.
I could change my UI to have a nested ConstraintLayout for each row, but I'd rather not do that after working so hard to make a complex layout completely flat, without multiple layers of ViewGroups. But that's what I'll do if I can't find a better solution, which I hope to find here.
I think removing the min height and adding some margin in the TextView will do the thing and instead of using match_parent you can use constraints if possible
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="50dp"
android:text="Row is not column"
android:textColor="#283858"
app:layout_constraintBottom_toBottomOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/view"/>
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#8800ff00"
app:layout_constraintBottom_toBottomOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView (wrap_content) inside of a BottomSheetDialogFragment

I'm facing a tricky situation here and I don't know how to solve this problem.
In my project I have a custom BottomSheetDialogFragment and in the layout a FrameLayout to add or replace Fragments.
Now I have a Fragment and inside I have a RecyclerView with the height:="wrap_content" because I want the BottomSheetDialogFragment only use the necessary space. Everything looks great, the problem appear when I put another view inside of the same layout and set the RecyclerView bellow or above of that view.
The RecyclerView ignores the size of the other view (or views) and always grows to the max screen size, and then it's no possible to see a few elements and even scroll.
I saw a solution, some developers are suggesting to add paddingBottom equals to the height of the view. But in my case doesn't works because I want to have a dynamic solution.
Above I'll share a few images of the problem and GitHub Repository with a sample.
Thanks for your attention!
I've manage to do what you need just need to use this as your fragment_sample.xml:
<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="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/rclItems"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"/>
<Button
android:id="#+id/btnAddMoreItems"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rclItems"
android:text="#string/add_1_item"/>
</LinearLayout>
Explanation
Using a LinearLayout gives you the ability to work with weight, and the vertical orientation allows you to place an item below the other. The weight on the recyclerview will increase the height of it as needed until filling the screen. The next item you add would be added to the recyclerview but you'll need to scroll the list to see it
The android developers blog says that :-
The scrolling containers in your bottom sheet must support nested scrolling .
Try changing your fragment_sample.xml as below to make the recyclerview scroll working and to make the add button persistent.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="wrap_content">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:id="#+id/next"
android:layout_above="#id/btnAddMoreItems"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/rclItems"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.v4.widget.NestedScrollView>
<Button
android:id="#+id/btnAddMoreItems"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:text="#string/add_1_item"/>
</RelativeLayout>
Note: making bottomsheet layout a child view of CoordinatorLayout will allow you to get the implement BottomSheetBehavior and recieve its transitions callbacks .

How to make the content of a grid layout stay inside the screen

I'm developing an app, the have 100 buttons. And I want to put all the buttons inside the screen. I'm using a GridLayout with all the buttons inside the problem that I am having is that the buttons are getting out of the screen.
This is the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/content_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main"
android:layout_column="1">
<GridLayout
android:id="#+id/GridLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="6"
android:rowCount="17"
android:orientation="vertical">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/numero_1"
android:id="#+id/button1"/>
The question that I have is: Is this possible to do? And this is the best approach?
I made other test where I changed the size of the image. The result is not what i expected header
Result with a different size image
As you can see in the second image the buttons in the rows are inside the screen but the position of the buttons is not ok, there are a lot of space between the last button of the row and the end of the screen.
The solution that I am looking for, is to have a layout that don't allow the buttons to get out of the screen, and that resizes the space between the buttons and the edges automatically, if the screen size is different the layout will automatically adapt to the size of the screen.
I don't think that is possible. I would suggest you to use 6 vertical LinearLayouts in one horizontal, with weight 1 on inner ones. I know that that is not most optimized way, but it's easiest. Another would be to keep GridLayout and calculate size of images and set their size from Java code.

Making StaggeredGridLayout wrap content

I need to display a staggered grid within a linear layout.
For that I have used a StaggeredGridLayoutManager on a RecyclerView from android.support.v7.widget. The problem is that StaggeredGridLayoutManager doesn't support wrap_content.
There are other questions addressing the issue, but they are concerned with linear layouts, not staggered grids:
Not able to add empty view below Recyclerview
How do I make WRAP_CONTENT work on a RecyclerView
As far as I understand I could derive StaggeredGridLayoutManager and implement onMeasure. Is there a way do to that without recalculating the positions and sizes of the children myself? When looking at the StaggeredGridLayoutManager.java source, I can see that it uses ScrollbarHelper to approximate the size of the scrolling content. Is there a way to reuse that?
The problem is that when RecyclerView is drawn, it calculates all the remaining size to itself before drawing the next elements and don't recalculate after the other elements are drawn, leaving them outside the screen.
There is an easy fix for this problem: The trick is to draw all other elements first, and leave RecyclerView for last. Use a relative layout and put the RecyclerView last on the XML layout file. Since with relative layout you can put each element wherever you want independently of the order on the XML file, you will draw all elements before RecyclerView and this will make it calculate the accurate remaining space and wrap_content will work properly.
Example to add a paginagion bar below the RecyclerView:
<?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"
android:padding="16dp"
tools:context=".MainActivity"
>
<LinearLayout
android:id="#+id/pagination_btns"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"> //HERE YOU ALIGN THIS ELEMENT TO THE BOTTOM OF THE PARENT
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/previous_btn_label"/>
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/next_btn_label"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/items_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layout_above="#id/pagination_btns"/> //HERE YOU ALIGN THE RECYCLERVIEW ABOVE THE PAGINATION BAR
</RelativeLayout>
I ended-up using a custom control for this, inspired by:
https://github.com/expilu/AntipodalWall/blob/master/library/src/com/antipodalwall/AntipodalWallLayout.java

Categories

Resources