Before Scrolling the Activity
After Scrolling the Activity
I am trying to make a card view which can collapse on scrolling as i have shown in pictures. But In my view cardview is collapsing but its height doesn't change. I have made collapsing toolbar and image but could not make card view collapse with its height changing as per figure shoen.
This is my code for Activity:
<?xml version="1.0" encoding="utf-8"?>
<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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#color/white"
android:theme="#style/Theme.Mynew.AppBarOverlay"
app:liftOnScroll="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<androidx.cardview.widget.CardView
android:id="#+id/card"
android:layout_width="350dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:isScrollContainer="true"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
app:srcCompat="#drawable/ic_baseline_home_24" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
app:srcCompat="#drawable/ic_baseline_grid_on_24/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
app:srcCompat="#drawable/trips" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:srcCompat="#drawable/var2" />
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="35dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:minHeight="65dp"
app:contentInsetStart="25dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:maxButtonHeight="70dp"
app:navigationIcon="#drawable/dropmenu"
app:navigationIconTint="#color/white"
app:popupTheme="#style/Theme.Mynew.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Related
I would like to create a horizontally scrolling photo gallery. I'm using https://github.com/IslamKhSh/CardSlider.
I would like the photo to be displayed across the entire width of the screen and the height of the photo to scale.
Unfortunately, currently the image is not displayed on the entire width of the screen, there are small margins (green area) screenshot.
I tried setting the margin and padding to 0 but it didn't help. What can I do to remove these margins?
Gallery item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="0dp"
>
<ImageView
android:id="#+id/image_poster"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#color/colorContrastYellow"
/>
<TextView
android:id="#+id/image_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp" />
</LinearLayout>
Activity with gallery
<?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="match_parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/activity_details_social_bar"
android:background="#color/colorLightGrayBackground"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#color/colorLightGrayBackgroundTransparent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#color/colorRed">
<com.github.islamkhsh.CardSliderViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/greenCard"
app:cardSlider_indicator="#id/indicator"
app:cardSlider_otherPagesWidth="0dp"
app:cardSlider_pageMargin="0dp"
android:layout_margin="0dp"
android:padding="0dp"
app:cardSlider_smallScaleFactor="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.github.islamkhsh.CardSliderIndicator
android:id="#+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/viewPager" />
</androidx.constraintlayout.widget.ConstraintLayout>
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_transparent" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/v_line"
android:orientation="vertical"
android:showDividers="middle">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_padding"
android:paddingTop="#dimen/dp10"
android:paddingRight="#dimen/activity_padding"
android:paddingBottom="#dimen/dp10">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/activity_details_news_TV_category"
style="#style/AppTheme.DetailsSectionTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/dp12" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/activity_details_news_CIV_author_photo_static"
android:layout_width="#dimen/author_image_size"
android:layout_height="#dimen/author_image_size"
android:layout_alignTop="#+id/activity_details_news_TV_author"
android:layout_alignBottom="#+id/activity_details_news_TV_publ_date"
android:layout_alignParentLeft="true"
android:layout_marginRight="#dimen/dp8" />
<ImageView
android:id="#+id/activity_details_news_IMG_line"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignTop="#+id/activity_details_news_TV_author"
android:layout_alignBottom="#+id/activity_details_news_TV_publ_date"
android:layout_marginRight="#dimen/dp8"
android:layout_toRightOf="#+id/activity_details_news_CIV_author_photo_static"
android:src="#drawable/h_line" />
<TextView
android:id="#+id/activity_details_news_TV_author"
style="#style/AppTheme.DetailsAuthorTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/activity_details_news_TV_category"
android:layout_toRightOf="#+id/activity_details_news_IMG_line" />
<TextView
android:id="#+id/activity_details_news_TV_publ_date"
style="#style/AppTheme.DetailsAuthorTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/activity_details_news_TV_author"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/activity_details_news_IMG_line" />
</RelativeLayout>
<TextView
android:id="#+id/activity_details_news_TV_title"
style="#style/AppTheme.DetailsTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp12" />
<TextView
android:id="#+id/activity_details_news_TV_headline"
style="#style/AppTheme.DetailsAbstrTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp12" />
<TextView
android:id="#+id/activity_details_news_TV_descr"
style="#style/AppTheme.DetailsContentTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp8" />
</LinearLayout>
<LinearLayout
android:id="#+id/activity_details_news_LL_editorial"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/linear_vertical_contact_spacing"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_padding"
android:paddingTop="#dimen/dp10"
android:paddingRight="#dimen/activity_padding"
android:paddingBottom="#dimen/dp10"
android:showDividers="middle">
<TextView
android:id="#+id/tvEditorial"
style="#style/AppTheme.DetailsSectionTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/editorial" />
<TextView
android:id="#+id/activity_details_news_TV_phone"
style="#style/AppTheme.DetailsContactTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/vertical_phone" />
<TextView
android:id="#+id/activity_details_news_TV_email"
style="#style/AppTheme.DetailsContactTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/vertical_message" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/activity_details_news_CIV_author_photo"
android:layout_width="#dimen/author_image_size"
android:layout_height="#dimen/author_image_size"
android:layout_marginLeft="#dimen/activity_padding"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|left"
app:layout_behavior="com.yarmobile.gminy.utils.behaviors.NewsDetailsAuthorImageBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<include
android:id="#+id/activity_details_social_bar"
layout="#layout/activity_details_social_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<include
android:id="#+id/progress_wheel"
layout="#layout/blocking_progress_wheel"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
I tried setting the margin and padding to 0 but it didn't help.
you can use RecyclerView if you have list of Images to scroll Horizontal Image
In my layout there is recyclerview and bottom navigation bar but the problem is that the recyclerview occupies all the view and the bottom navigation bar and the header bad goes behind the recycler view. I've sucessfully implemented the material dependency.
this is the layout:
This is the code of the layout.
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/baseLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!--status bar-->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/default_activity_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:backgroundTint="#color/buttoncolor"
app:menu="#menu/default_menu" />
<!--add button-->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/buttoncolor"
app:fabAlignmentMode="end"
app:fabCradleMargin="6.2sp"
app:fabCradleRoundedCornerRadius="15sp"
app:menu="#menu/app_bar_menu" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:backgroundTint="#ED4444"
android:onClick="openCamera"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottomAppBar"
app:maxImageSize="35sp"
app:tint="#color/white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rw"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/empty_list" />
<LinearLayout
android:id="#+id/empty_list"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/empty_list_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/ic_no_data" />
<TextView
android:id="#+id/empty_list_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Scan the files"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:textSize="24dp"
android:gravity="center_horizontal"/>
<TextView
android:id="#+id/empty_list_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Scan to make something great"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:gravity="center_horizontal" />
</LinearLayout>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Try this by giving specific height to the BottomAppBar. Then provide margin top and Bottom to the RelativeLayout :
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/baseLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!--status bar-->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/default_activity_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="top"
android:backgroundTint="#color/buttoncolor"
app:menu="#menu/default_menu" />
<!--add button-->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:backgroundTint="#color/buttoncolor"
app:fabAlignmentMode="end"
app:fabCradleMargin="6.2sp"
app:fabCradleRoundedCornerRadius="15sp"
app:menu="#menu/app_bar_menu" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:backgroundTint="#ED4444"
android:onClick="openCamera"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottomAppBar"
app:maxImageSize="35sp"
app:tint="#color/white" />
<RelativeLayout
android:layout_marginTop="50dp"
android:layout_marginBottom="50dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rw"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/empty_list" />
<LinearLayout
android:id="#+id/empty_list"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/empty_list_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/ic_no_data" />
<TextView
android:id="#+id/empty_list_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Scan the files"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:textSize="24dp"
android:gravity="center_horizontal"/>
<TextView
android:id="#+id/empty_list_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Scan to make something great"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:gravity="center_horizontal" />
</LinearLayout>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I have set up a AppBarLayout with a SwipeRefreshLayout and all works great except when I add app:behavior_overlapTop="200dp" to the layout. I am able to swipe down to refresh everywhere except for where the SwipeRefreshLayout overlaps the AppBarLayout. Image of layout. The yellow in the image indicates the area where I can't swipe down on. Here is my code for reference.
<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:background="#color/red"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_header"
android:background="#color/red"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/red"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="290dp"
android:background="#color/red"
app:layout_collapseMode="parallax"
android:paddingTop="60dp"
app:layout_collapseParallaxMultiplier="0.7">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:background="#color/red"
android:src="#drawable/cp_logo_stack" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/home_header_toolbar"
android:layout_width="match_parent"
app:contentScrim="#color/red"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/updated_home_page_reload"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FAFAFA"
android:paddingEnd="16dp"
android:visibility="gone"
android:paddingStart="16dp"
android:elevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="0dp"
android:orientation="vertical"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_horizontal|center_vertical"
android:elevation="2dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:text="#string/permissions_failure_page_text"
android:textColor="#color/detailsBorderColor"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_horizontal|center_vertical" />
<Button
android:id="#+id/home_page_try_again_button"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginTop="25dp"
android:background="#color/detailsBorderColor"
android:text="#string/permissions_try_again"
android:textColor="#color/colorPrimary" />
</LinearLayout>
</LinearLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/home_page_pull_refresh"
android:layout_width="match_parent"
android:paddingStart="16dp"
android:paddingEnd="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:elevation="3dp"
app:behavior_overlapTop="140dp"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:fillViewport="true"
android:id="#+id/te"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<GridView
android:background="#android:color/transparent"
android:id="#+id/dashboard_grid"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:horizontalSpacing="15dp"
android:numColumns="auto_fit"
android:columnWidth="165dp"
android:verticalSpacing="15dp" />
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
I tried used the setOverlayTop and got the same results.
In my CountryActivityInfo.java I have a collapsing toolbar with both width and height set to match-parent so it can occupy the whole phone screen. When I scroll up the toolbar gets a fixed 200dp height.
Right now, it looks like this:
I want to display, in that white screen that appears when the toolbar is collapsed, a vertical scroll view with a text view inside. How can I do that? I've tried this way:
<android.support.design.widget.AppBarLayout
android:id="#+id/testeparainfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/actionBarDivider">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/backgroundcollapsedtoolbarinfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<ImageView
android:id="#+id/imgCountryInfoFoto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imgCountryInfoEscuro"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#drawable/background_pais_info"
android:scaleType="centerInside" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbaridinfo"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<TextView
android:id="#+id/txtNomePaisInfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="30dp"
android:layout_marginTop="520dp"
android:paddingBottom="10dp"
android:text="TextView"
android:textColor="#android:color/background_light"
android:textSize="35sp"
app:layout_anchor="#+id/testeparainfo"
app:layout_anchorGravity="left|bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txtInfoPais"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/btnArrowBackWhite"
android:layout_marginBottom="111dp"
android:text="TextView"
android:textColor="#android:color/background_light"
android:textSize="15sp"
android:visibility="invisible"
app:layout_anchor="#+id/imgCountryInfoFoto"
app:layout_anchorGravity="bottom|center" />
</LinearLayout>
</ScrollView>
But, when I do this, the text view gets inside the collapsing toolbar and gets collapsed with the toolbar.
By the way, all the XML is wrapped up in a Coordinator Layout!!!
Change the root to CoordinatorLayout
<?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">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
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:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>
and then in content_scrolling.xml use NestedScrollView and app:layout_behavior="#string/appbar_scrolling_view_behavior" use this property for proper behaviour.
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.NestedScrollView>
Add app:layout_behavior="#string/appbar_scrolling_view_behavior" inside your ScrollView.
Replace this code
you have to add app:layout_behavior="#string/appbar_scrolling_view_behavior" in your ScrollView.
<ScrollView
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txtInfoPais"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/btnArrowBackWhite"
android:layout_marginBottom="111dp"
android:text="TextView"
android:textColor="#android:color/background_light"
android:textSize="15sp"
android:visibility="invisible"
app:layout_anchor="#+id/imgCountryInfoFoto"
app:layout_anchorGravity="bottom|center" />
</LinearLayout>
</ScrollView>
I'm developing an app that has a Main Activity and a Navigation Drawer to switch between different fragments inside the Main Activity.
One of the fragments contains a tab layout.
My layouts are a mess and they don't behave or perform properly.
Here is my XML:
Main:
<android.support.v4.widget.DrawerLayout 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:layout_gravity="right"
android:fitsSystemWindows="true"
android:clickable="true"
android:layoutDirection="rtl"
android:id="#+id/drawer_layout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
android:background="#EEEEEE"
android:clickable="true">
<include
android:id="#+id/toolbar"
android:gravity="right"
layout="#layout/toolbar"
android:clickable="true" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/mainFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom|end"
android:layout_marginLeft="16dp"
android:layout_marginBottom="16dp"
android:layout_marginTop="5dp"
android:elevation="8dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorAccent"
android:src="#drawable/ic_perm_phone_msg_white_24px" />
<LinearLayout
android:id="#+id/miniFabFrame"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom|end"
android:layout_marginLeft="20dp"
android:layout_above="#id/mainFab"
android:padding="0dp">
<android.support.design.widget.FloatingActionButton
android:id="#+id/messageFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:elevation="8dp"
android:layout_marginTop="5dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorPrimary"
app:fabSize="mini"
android:src="#drawable/ic_textSMS_white_24px" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/callFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:elevation="8dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorPrimary"
app:fabSize="mini"
android:src="#drawable/ic_call_white_24px" />
</LinearLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:id="#+id/nav_view"
android:layoutDirection="rtl"
app:headerLayout="#layout/header"
app:menu="#menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
Tabs Fragment:
<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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true"
android:id="#+id/halachot_layout"
android:layoutDirection="ltr">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.refractored.PagerSlidingTabStrip
android:id="#+id/halachotTabs"
android:layout_below="#id/halachot_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
pstsPaddingMiddle="false"
app:pstsShouldExpand="true" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/halachotPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
I want to use Coordinator Layout in my Main layout, and use AppBarLayout to wrap the Toolbar, although I don't know how to use them.
If someone could please help me organize my layout properly, with some explanations of how this works and what I am doing wrong, I would appreciate it very very much.
Thanks!
Firstly create an activity layout which contains Navigation Drawer and ToolBar
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:background="#drawable/ab_bg2"
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:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/Base.TextAppearance.AppCompat.Subhead"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginBottom="40dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetStart="0dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_marginRight="3dp"
android:layout_marginTop="5dp"
android:background="#drawable/linlayoutshape_shadow"
android:tag="#string/layout_default"/>
</android.support.design.widget.CoordinatorLayout>
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#color/Drawer_bg"
android:choiceMode="singleChoice"
android:divider="#color/Drawer_bg"
android:dividerHeight="10dp"
android:listSelector="#drawable/list_selector"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" />
Now create a Fragment which will show your Tab layout
<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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.utils.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#drawable/background_tab"
app:pstsShouldExpand="true" />
<com.utils.CustomViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/linHeader"
android:background="#drawable/background_tab"
tools:context=".TestBoardActivity" />
</RelativeLayout>