how to arrange views inside coordinatorlayout? - android

My collapsible toolbar works but covers the title as i was trying to scroll up using a nestedscrollview. I tried putting it inside relative layout but then the toolbar stopped working and wouldn't collapse anymore.
Here's my layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/cordinator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
tools:context="com.store.android.basic.Introduction">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/introduction_toolbar"
layout="#layout/app_toolbar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id = "#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="#string/heading"
android:textColor="#D31F33"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id = "#+id/sub_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text_one"
android:textSize="18sp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

app:layout_behavior="#string/appbar_scrolling_view_behavior"
Just put this line in your NestedScrollView.

Related

How to remove empty white space at the bottom of the screen in NestedScrollView?

I'm using a NestedScrollView to make the carousel and viewPager scrollable. I added the carousel on the main layout because I need it on all pages from the tab layout. All the pages of the tab layout have only a recycler view in the fragment. The problem is that on the bottom of the screen there is a lot of empty white space that I can't figure out how to remove.
This is the main layout activity xml
`
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/blue_primary"
tools:context=".ui.activity.SplashscreenActivity">
<LinearLayout
android:id="#+id/mainTopBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/margin_padding_size_xlarge"
android:orientation="horizontal">
////// irrelevant code
</LinearLayout>
<LinearLayout
android:id="#+id/mainLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="fill_vertical"
android:layout_alignParentBottom="true"
android:layout_below="#+id/mainTopBar"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:background="#color/blue_primary"
app:tabTextAppearance="#style/MyCustomTextAppearance"
app:tabIndicatorColor="#color/plan_popular_gradient_1"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/white"
app:tabGravity="fill"
android:clipToPadding="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true"
android:overScrollMode="never"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical">
<LinearLayout
android:id="#+id/secondLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">
<com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
android:id="#+id/carousel"
android:layout_width="match_parent"
android:layout_height="#dimen/featured_height"
app:icvp_interpolator="#android:anim/accelerate_decelerate_interpolator"
app:icvp_scroll_duration="3000"
app:icvp_center_page_scale_offset="#dimen/icon_size_large"
app:icvp_min_page_scale_offset="#dimen/margin_padding_size_xmedium"
app:icvp_max_page_scale="0.8"
app:icvp_min_page_scale="0.55"
app:icvp_medium_scaled="false"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:paddingHorizontal="#dimen/margin_padding_size_small"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
</RelativeLayout>
`
This is the fragments xml
`
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/app_layout_content_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:focusable="false"
tools:context=".ui.fragments.AppLayoutFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/app_layout_scroll_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical"
android:focusable="false"
android:focusableInTouchMode="false" />
</LinearLayout>
`
This is the recycler view item xml
`
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/home_item_content_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_padding_size_medium"
android:focusable="false"
android:orientation="vertical">
<TextView
android:id="#+id/itemHomeTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:textStyle="bold"
android:textSize="#dimen/text_size_large" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/itemHomeRv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
android:orientation="horizontal"
android:focusable="false" />
</LinearLayout>
`
I tried all the answers I could find on stackoverflow (you can see all the attributes on the NestedScrollView) but none of them fixed my problem.

Making recyclerview fill entire page

I have a page that has a custom recyclerview. I want items I add to the recyclerview to pop up in a list. App was working just fine before I updated my AppCompact library. But essentially, I had anchored my FAB to a Coordinator layout, but I got an IllegalStateException and to resolve that, I had to anchor it to one of the Coordinator layout's children. I picked the recyclerview. But the problem now is that the recycler view does not fill the entire page. It only shows one item (I can scroll through them) but they only take up the space of one - like viewing one at a time. How do I make the layout work like it did before the update?
This is my 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:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<!--<include layout="#layout/base_toolbar"/>-->
<android.support.design.widget.CoordinatorLayout
android:id="#+id/myCoordinatorLayout"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/reminderEmptyView"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/empty_view_bg"
android:layout_width="100dp"
android:layout_height="100dp"/>
<TextView
android:text="Nothing added yet"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:paddingTop="4dp"
android:paddingBottom="8dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<!--<include layout="#layout/base_toolbar"/>-->
<!--</android.support.design.widget.AppBarLayout>-->
<apps.todo.Utility.RecyclerViewEmptySupport
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/toDoRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionBut
You probably don't need that parent LinearLayout.
Just copy
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
These into your CoordinatorLayout.
Then remove gravity from your Coordinator Layout and change your FloatingActionButton to:
<android.support.design.widget.FloatingActionButton
android:src="#drawable/ic_add_white_24dp"
android:id="#+id/addToDoItemFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"/>
This fixes the connection between your RecyclerView and FAB.
This Blog post may help you as well: https://android.jlelse.eu/coordinatorlayout-basic-8040c74cf426
Try like this:
<?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">
<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>
<RelativeLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/reminderEmptyView"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/empty_view_bg"
android:layout_width="100dp"
android:layout_height="100dp"/>
<TextView
android:text="Nothing added yet"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:paddingTop="4dp"
android:paddingBottom="8dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<apps.rtkay.pookiev2.todo.Utility.RecyclerViewEmptySupport
android:id="#+id/toDoRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:src="#drawable/ic_add_white_24dp"
android:id="#+id/addToDoItemFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin" />
</android.support.design.widget.CoordinatorLayout>

Android RecyclerView Gravity issue

I am using DrawerLayout to show Navigation Drawer, in that A NavigationView, the xml code is :
MyDrawerLayout.xml
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<include layout="#layout/layout_navigation_list" />
</android.support.design.widget.NavigationView>
layout_navigation_list.xml
<?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="wrap_content"
android:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/headerLayout"
layout="#layout/nav_header_dash_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:gravity="top" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/headerLayout"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/white"
android:foregroundGravity="bottom" />
</RelativeLayout>
In the RecyclerView i have only 3 items to be shown, and they are aligning on the top of the RecyclerView layout which is i don't want. Hence my question here is , how to send those items to the bottom of the RecyclerView (just like shown in the image).
Set match_parent instead wrap_content field layout_height in relativeLayout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
Insert a ConstraintLayout
<?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:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/headerLayout"
layout="#layout/nav_header_dash_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:gravity="top" />
<android.support.constraint.ConstraintLayout
android:layout_below="#id/headerLayout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
You should have to MATCH_PARENT height instead of WRAP_CONTENT in root relative layout in file layout_navigation_list.xml. So it looks like,
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
...
...
...
</RelativeLayout>
Notes: Gravity won't work with relative layouts.

Unable to align TextView above Coordinator Layout

I have a Coordinator Layout showing cardview, I wanted to show TextView above this coordinator layout, I tried putting Coordinator Layout inside Linear Layout just like how we do for Frame Layout, but that didn't work. Can someone help
Code:
<?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:comfort="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:background="#color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Hello World"
android:textColor="#color/eula_body_text_color"
android:textSize="19sp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:tabStripEnabled="false"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/_16sdp"
android:paddingLeft="12dp"
android:paddingRight="-12dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Hello World"
android:textColor="#color/eula_body_text_color"
android:textSize="19sp" />
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:comfort="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:background="#color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:tabStripEnabled="false"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/_16sdp"
android:paddingLeft="12dp"
android:paddingRight="-12dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
Main Problem is you want textview outside the coordinatorlayout but you are defining as child of that layout. So, you need to create a parent layout which have two childs i.e. 1. TextView and 2. CoordinatorLayout.
<LinearLayout>
<TextView/>
<CoordinatorLayout>
all Views
</CoordinatorLayout>
</LinearLayout>

android layout with fragment breaks when toolbar is there

Couldn't find a more appropriate title but my problem is the following. I have a LinearLayout that contains another LinearLayout and a fragment. I also want to add the toolbar but when I do so, then I only see the toolbar and the other screen is just white.
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal"
tools:context="xeniasis.mymarket.MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:weightSum="4">
<LinearLayout
android:id="#+id/categories_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="20dp">
<ExpandableListView
android:id="#+id/categories_listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<fragment
android:id="#+id/mainPane"
android:name="xeniasis.mymarket.Products"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
tools:layout="#layout/activity_main" />
</LinearLayout>
</LinearLayout>
Toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
And the fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipeRefreshContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="#dimen/activity_vertical_margin">
<GridView
android:id="#+id/productsGridview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:numColumns="3"></GridView>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_margin="8dp"
android:clickable="true"
android:elevation="5dp"
android:src="#android:drawable/ic_menu_search" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
This only happens when I have a fragment, cause I previously had the same xml with a static layout where the fragment is now.
The problem is that you used a LinearLayout with
android:orientation="horizontal"
and since the toolbar has match_parent as width it occupies all the screen.
Try to use
android:orientation="vertical"
in the root layout

Categories

Resources