Recycler View Not align Correctly with Tablayout - java

I am a fresher in android development,I applied tab layout with view pager,In Fragment i applied the Recycler view but an output Recyclerview Displaying Wrongly,Here i attached my recyclerview display like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/xvehiclelistRV"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
My Mainactivity.xml
<include
android:id="#+id/custom_actionbar"
layout="#layout/custom_actionbar" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/custom_actionbar"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DCEBFF"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorPrimary"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="#696969"
app:tabTextColor="#color/black"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>

Firstly , set the height of relative layout as match_parent
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/xvehiclelistRV"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
Secondly , If you want any view below of other view , always use layout_below in case of relative layout . Or else you can use linear layout , and provide the orientation wither horizontal or vertical on the basis of your requirement . This will place the view in order .
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/custom_actionbar"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DCEBFF"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorPrimary"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="#696969"
app:tabTextColor="#color/black"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_below="#+id/tabs"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>
Use this blog , for better understanding on linear and relative layout .
https://blog.mindorks.com/android-layout-relative-linear-frame

Here is my Actvity Design :-
Replace code with Mainactivity.xml with my code :-
<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/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/black"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFF"
app:tabTextColor="#FFF" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

Related

RecyclerView Item doesn't fit when using CollapsingToolbarLayout

In RecyclerView in xml design
How do I fully display the last text?
When you see the image, you will notice that the last text (TextView)
Only a small part of it is visible and the rest of the text is hidden on the screen
Here is my list_item xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="72dp"
android:paddingTop="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp">
<TextView
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#android:id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
Here is my activity_main xml
<androidx.coordinatorlayout.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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="168dp"
android:background="?colorPrimary">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleMarginStart="72dp"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStart="72dp"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_action_menu" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
thanks for your support

how to make scrolling up panel

I am currently working on a photogallery and I want to create a description layout which will be shown by scrolling up for each photograph, just like on the screenshots I've taken. How can I do that?
Here is my layout:
<androidx.constraintlayout.widget.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"
android:background="#000000"
tools:context=".DetailActivity"
android:clipToPadding="false">
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:elevation="0dp"
android:translationZ="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_detail"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#50000000"
app:elevation="0dp"
app:layout_constraintTop_toTopOf="parent"
android:clipToPadding="false"
android:fitsSystemWindows="true">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_detail"
style="#style/Theme.MaterialComponents.Light"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00000000"
app:title="#string/app_name"
app:titleTextColor="#FFFFFF">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Thanks!
Photo 1
Photo 2

SwipeRefreshLayout not working with empty List

My app contains a SwipeRefreshLayout with a listView inside of it. The list receives data from a server. So when the data is fetched and the list is populated correctly the swipe to refresh works, but when the data is not passed to the list and is empty the SwipeRefresh doesn’t work. Why can’t I swipe when the listView is empty?
That‘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:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/colorGrayHell"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="140dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="56dp"
app:contentScrim="#color/colorPrimary"
app:expandedTitleGravity="bottom|center"
app:expandedTitleTextAppearance="#style/CollBar"
app:title="Tankstellen"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/backg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/backthree"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
android:layout_gravity="bottom"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="55dp">
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:background="#android:color/white"
android:divider="#color/colorGrayHell"
android:dividerHeight="10dp"
android:nestedScrollingEnabled="true" />
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Your listview and the swipe refresh layout is within a nested scroll view which means the height of child of the nested scroll view becomes wrap content (Relative layout in your case) automatically (It also might be showing you a lint warning to replace the match parent height of your relative layout to wrap content).
therefore when there's no data in your list, the height of the whole layout group becomes 0 and the place where you need to swipe to refresh has a height of 0 and you cant swipe within a layout of height zero.
To solve this you can take a linear layout above your nested scroll view with the height of match parent and put your swipe refresh layout over it.
Let me know if you need the example code.
EDIT
Okay! so this is a workaround I found to solve the issue. You can try this and please let me know if this solves your problem.
The Idea is to wrap everything a swipe refresh layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent">
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:background="#color/colorGrayHell"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="140dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="56dp"
app:contentScrim="#color/colorPrimary"
app:expandedTitleGravity="bottom|center"
app:expandedTitleTextAppearance="#style/CollBar"
app:title="Tankstellen"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/backg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/backthree"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
android:layout_gravity="bottom"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="55dp">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:background="#android:color/white"
android:divider="#color/colorGrayHell"
android:dividerHeight="10dp"
android:nestedScrollingEnabled="true" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</android.support.v7.widget.LinearLayoutCompat>
</android.support.v4.widget.SwipeRefreshLayout>

ViewPager in RelativeLayout consumes full Height (Tabs)

I am working with AndroidStudio 3.0 and I am creating a TabbedActivity with Fragments using Java.
For realizing the following design:
sketch
i sourrounded the ViewPager with a RelativeLayout in order to display a static content object (TextView) below the ViewPager. For this I am using the attribute
android:layout_below="#id/container"
Unfortunately, the TextView never gets shown.
By fuzzling around i realized, that when setting the
android:layout_height="100dp"
of the ViewPager to a fixed value it will be displayed.
As I am a beginner to Android I am unsure how to handle this issue. Is it not possible to use the layout_below attribute when working with ViewPagers? Or do i have to set a fixed value for them?
Is there another solution to achieve what i want - simply showing a static content below a 'TabControl'?
Here is my complete XML 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:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_3" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</android.support.v4.view.ViewPager>
<TextView
android:id="#+id/static_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is the Textiew that is not shown!"
android:layout_below="#id/container"
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Thank You very much!
Change this part of your code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</android.support.v4.view.ViewPager>
<TextView
android:id="#+id/static_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is the Textiew that is not shown!"
android:layout_below="#id/container"
/>
</RelativeLayout>
I would replace this with a vertical LinearLayout. This allows you to give some space to the TextView and then give the rest of the space to the ViewPager, which a RelativeLayout won't allow.
<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="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<TextView
android:id="#+id/static_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is the Textiew that is not shown!"/>
</LinearLayout>

Hide search bar when listview scrolling

how to add the search bar in the listView to hide it when Scrolling?
Here my code xml:
<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"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<SearchView
android:id="#+id/maBtnSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:iconifiedByDefault="false"
android:queryHint="Search User" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/listView">
</ListView>
</LinearLayout>
This is my complete layout code above, thank you for helping me
Try this. Here searchview is put on toolbar. Change code according to your usage.
<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:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:background="#drawable/back"
android:id="#+id/pager_sessions"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/search_edit_frame"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_sessions"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.SearchView
android:id="#+id/search_item"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
app:layout_scrollFlags="scroll|enterAlways"
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabIndicatorColor="#android:color/background_light"
app:tabSelectedTextColor="#android:color/background_light"
app:tabTextColor="#android:color/background_light">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Categories