I'm trying to create a CollapsingToolbarLayout in which the there is a movie poster overlapping the backdrop. To achieve this I'm enabling behavior_overlapTop="67dp" but this results in a strange scrolling behavior.
When scrolling, my views are pushed away from their overlapping position. How do I make them stay in place?
<?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"
tools:context=".MediaItemBaseActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="1dp">
<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="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar"
app:scrimAnimationDuration="250"
app:scrimVisibleHeightTrigger="100dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="20dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</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"
app:behavior_overlapTop="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MediaItemBaseActivity"
tools:showIn="#layout/activity_media_item_base">
<android.support.constraint.ConstraintLayout
android:id="#+id/ll_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingEnd="16dp"
android:paddingStart="16dp">
<ImageView
android:id="#+id/poster"
android:layout_width="134dp"
android:layout_height="201dp"
android:layout_gravity="top|start"
android:layout_marginTop="-10dp"
android:elevation="10dp"
app:layout_anchor="#id/ll_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/surtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:textAllCaps="false"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/title"
app:layout_constraintStart_toStartOf="#+id/title" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="96dp"
android:ellipsize="end"
android:maxEms="9"
android:maxLines="3"
android:singleLine="false"
android:textAllCaps="false"
android:textColor="#android:color/black"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/poster"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:textAllCaps="false"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="#+id/surtitle"
app:layout_constraintTop_toBottomOf="#+id/title" />
<TextView
android:id="#+id/body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/poster" />
<TextView
android:id="#+id/credit_title_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/body" />
<TextView
android:id="#+id/credit_name_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintStart_toEndOf="#id/credit_title_1"
app:layout_constraintTop_toTopOf="#id/credit_title_1" />
<TextView
android:id="#+id/credit_title_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/credit_name_1" />
<TextView
android:id="#+id/credit_name_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/credit_name_1"
app:layout_constraintTop_toTopOf="#id/credit_title_2" />
<TextView
android:id="#+id/credit_title_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/credit_name_2" />
<TextView
android:id="#+id/credit_name_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/credit_name_2"
app:layout_constraintTop_toTopOf="#id/credit_title_3" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#drawable/ic_add_black_24dp" />
</android.support.design.widget.CoordinatorLayout>
What is happening here is that both the CollapsingToolbar and the NestedScrollView is getting scrolled which is obvious. To get the effect you probably want(similar to FAB but with the view visible even when collapsed), you need to extend the CoordinatorLayout.Behaiour class to make your own behaviour. Setting behavior_overlapTop="67dp" wont do anything except what it seems to be doing right now.
Related
I have a scrollView in my xml. There's ConstraintLayout inside of it. In the ConstraintLayout is my RecyclerView. It's invisible. When I change ScrollView to ConstraintLayout everything gets back to normal. Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true"
tools:context=".ui.fragments.ChannelAudioFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ProgressBar
android:id="#+id/allChannelAudiosProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/noAudiosTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
android:gravity="center|left"
android:text="No audios"
android:layout_marginTop="5dp"
android:textSize="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/channelAudiosRefreshSwipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MissingConstraints">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvAllChannelAudios"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I don't get any errors in console. Why is this happening?
UPDATE
Additional info: I'm using it in ViewPager. Here it is
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".ui.fragments.ChannelFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/channelBlock"
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_margin="30dp"
android:background="#drawable/main_background"
android:padding="20dp"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivChannelImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_person_flat"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Qewbite"
android:textColor="#color/whiteColor"
android:layout_marginTop="8dp"
android:textSize="26sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/ivChannelImage" />
<LinearLayout
android:id="#+id/subscriptionBlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/channelName"
android:gravity="center_vertical">
<Button
android:id="#+id/subscribeButton"
android:layout_width="wrap_content"
android:textAllCaps="false"
android:layout_height="40dp"
android:textSize="12dp"
android:gravity="center"
android:background="#drawable/subscribed_background"
android:padding="0dp"
app:backgroundTint="#color/colorDark"
android:textColor="#color/whiteColor"
android:layout_marginLeft="5dp"
android:text="Unfollow" />
<ImageButton
android:id="#+id/notificationButton"
android:layout_width="40dp"
android:textAllCaps="false"
android:layout_height="40dp"
android:textSize="12dp"
android:tint="#color/whiteColor"
android:src="#drawable/ic_notification"
app:backgroundTint="#color/colorDark"
android:background="#drawable/subscribe_notification_background"
android:padding="0dp"
android:textColor="#color/whiteColor" />
</LinearLayout>
<View
android:id="#+id/headerHr"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorNavbarGray"
app:layout_constraintTop_toBottomOf="#id/subscriptionBlock"
android:layout_marginTop="10dp"
/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelSubscribers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10M"
android:textColor="#color/whiteColor"
android:layout_marginTop="8dp"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#id/channelSubscribersTitle"
app:layout_constraintEnd_toEndOf="#id/channelSubscribersTitle"
app:layout_constraintTop_toBottomOf="#id/headerHr" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelSubscribersTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:textColor="#color/colorLightGray"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/channelSubscribers" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelListened"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="120M"
android:textColor="#color/whiteColor"
android:layout_marginTop="8dp"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#id/channelListenedTitle"
app:layout_constraintEnd_toEndOf="#id/channelListenedTitle"
app:layout_constraintTop_toBottomOf="#id/headerHr" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelListenedTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Auditions"
android:textColor="#color/colorLightGray"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/channelListened" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelYear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2021"
android:textColor="#color/whiteColor"
android:layout_marginTop="8dp"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/headerHr" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelYearTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Year"
android:textColor="#color/colorLightGray"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#id/channelYear"
app:layout_constraintEnd_toEndOf="#id/channelYear"
app:layout_constraintTop_toBottomOf="#id/channelSubscribers" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#color/colorPrimary"
app:layout_constraintTop_toBottomOf="#id/channelBlock"
app:layout_constraintStart_toStartOf="#id/channelBlock"
app:tabRippleColor="#color/colorGray"
android:layout_marginTop="8dp" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/channelViewPager"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tab"
app:layout_constraintStart_toStartOf="#id/tab" />
</androidx.constraintlayout.widget.ConstraintLayout>
Most probably that is because you put more than 1 view inside ScrollView , ScrollView expects 1 view from you. If you want to put more than one consider using a viewGroup view and put your views inside it. For Instance , you can use a vertical LinearLayout to wrap the Views you used. Also , consider using NestedScrollView instead.
Try this one
<?xml version="1.0" encoding="utf-8"?>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
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">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
>
<ProgressBar
android:id="#+id/allChannelAudiosProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/noAudiosTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
android:gravity="center|left"
android:text="No audios"
android:layout_marginTop="5dp"
android:textSize="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvAllChannelAudios"
tools:listitem="#layout/event_near_items"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="10"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
swipe_refresh.setOnRefreshListener {
swipe_refresh.isRefreshing = false
// refresh the list here
}
Why not try a nested scroll view.
I have an activity with CollapsingToolbarLayout and with a lot of widgets in NestedScrollingview that I use for details of products ... I want when scrolling the activity to up the title that is below the slider goes to the toolbar and show on the toolbar... Must I add more attributes in .xml or write code in .java?
activity.xml
<?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:background="#color/bg_main"
tools:context=".DetailsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true">
<com.daimajia.slider.library.SliderLayout
android:id="#+id/sliderdetails"
android:layout_width="match_parent"
android:layout_height="300dp"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/img_cardtool"
android:layout_width="25dp"
android:layout_height="35dp"
android:src="#drawable/ic_shop"
android:layout_marginLeft="20dp"/>
</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:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="0dp"
android:layout_marginBottom="0dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_caption_details"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="6dp"
android:layout_gravity="left">
<ImageView
android:id="#+id/img_sharedetail"
android:layout_width="25dp"
android:layout_height="35dp"
android:src="#drawable/ic_shareb"
android:layout_marginLeft="5dp"
/>
<ImageView
android:id="#+id/img_notificationdetail"
android:layout_width="25dp"
android:layout_height="35dp"
android:src="#drawable/ic_notification"
android:layout_marginLeft="20dp"
/>
<ImageView
android:id="#+id/img_bookmarddetail"
android:layout_width="25dp"
android:layout_height="35dp"
android:src="#drawable/ic_fav"
android:layout_marginLeft="20dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/txtcaptiondetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:hint=" عنوان اصلی محصول"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/black"/>
<TextView
android:id="#+id/txtcaptiondescdetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:hint=" عنوان دوم محصول"
android:textSize="14sp"
android:layout_marginTop="5dp"
android:textColor="#color/twotitle"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="150dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:foreground="?attr/selectableItemBackground"
android:background="#drawable/cardviewrounded"
android:clickable="true"
android:padding="6dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cardView2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.517">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#id/txtdesc"
android:src="#drawable/ic_contet" />
<TextView
android:id="#+id/txtdesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="مشخصات"
android:textStyle="bold" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/cardView2"
android:layout_width="150dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:foreground="?attr/selectableItemBackground"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/cardView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#id/txtrespo"
android:src="#drawable/ic_response" />
<TextView
android:id="#+id/txtrespo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="نظرات کاربران"
android:textStyle="bold" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I have made the following layout using coordinator layout. But when the keyboard pops up some of the elements go below the keyboard hence losing the visibility.
So please help me to fix that.I have tried putting adjustPan, adjustResize in windowSoftInputMode but still not working. Even tried with the nested scroll view, no success.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/gradient"
android:gravity="center">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center|center_vertical"
android:background="#drawable/app_main_logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_vertical"
android:layout_marginTop="20dp"
android:text="My App"
android:textColor="#fff"
android:textSize="20dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.CardView
android:id="#+id/loginCardView"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="250dp"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#fff">
<EditText
android:id="#+id/input_email_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="40dp"
android:hint="Username"
android:inputType="textEmailAddress"
android:textColor="#fff"
android:textColorHint="#fff" />
</android.support.design.widget.TextInputLayout>
<!-- Password Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#fff"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/input_password_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#fff"
android:textColorHint="#fff" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/capsule_button"
android:elevation="20dp"
android:gravity="center"
android:text="Sign In"
android:textColor="#fff"
android:textSize="20dp"
app:layout_anchor="#id/loginCardView"
app:layout_anchorGravity="bottom|center" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Don't have an account?" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:text="Create Now"
android:textStyle="bold" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Use card view to top root then use any other layout with in it...!
Well you can use Scrollview,It will enable scrolling. So you can scroll all layout upside and downside.Do try this, if you don't want this you can also check Collapsing Toolbars. From here
https://material.io/develop/android/components/collapsing-toolbar-layout/
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
//This is Scrollview you can adjust height and width as you want.
<ScrollView android:layout_marginTop="30dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/scrollView">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/gradient"
android:gravity="center">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center|center_vertical"
android:background="#drawable/app_main_logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_vertical"
android:layout_marginTop="20dp"
android:text="My App"
android:textColor="#fff"
android:textSize="20dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.CardView
android:id="#+id/loginCardView"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="250dp"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#fff">
<EditText
android:id="#+id/input_email_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="40dp"
android:hint="Username"
android:inputType="textEmailAddress"
android:textColor="#fff"
android:textColorHint="#fff" />
</android.support.design.widget.TextInputLayout>
<!-- Password Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#fff"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/input_password_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#fff"
android:textColorHint="#fff" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/capsule_button"
android:elevation="20dp"
android:gravity="center"
android:text="Sign In"
android:textColor="#fff"
android:textSize="20dp"
app:layout_anchor="#id/loginCardView"
app:layout_anchorGravity="bottom|center" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Don't have an account?" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:text="Create Now"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
I have a ListView of a chat that is not scrolling till the end of all the messages. I can't figure out why this is happening. If I send a new message and the length of all the messages in the chat is more than a page so i nedd to scroll over to see the message i succeed to scroll but not enogh to see all the messages.
My Layout XML code here :
<android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/cool_background3">
<ListView
android:layout_width="wrap_content"
android:id="#+id/messages_view"
android:layout_weight="1"
android:divider="#fff"
android:layout_height="0dp"
tools:layout_editor_absoluteX="8dp"
app:layout_constraintTop_toBottomOf="#+id/topBar" />
<LinearLayout
android:id="#+id/layout_chatbox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="48dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<EditText
android:id="#+id/edittext_chatbox"
android:hint="Enter message"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:maxLines="6"
/>
<Button
android:id="#+id/button_chatbox_send"
android:text="send"
android:textSize="14dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:layout_width="64dp"
android:layout_height="48dp"
android:gravity="center"
android:textColor="#color/myColor"
android:layout_gravity="bottom"
android:onClick="sendMessage"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/topBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="50dp"
android:background="#color/white"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
tools:layout_editor_absoluteY="0dp">
<TextView
android:id="#+id/name_of_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomnaor"
android:textColor="#color/myColor"
android:textStyle="bold"
android:textSize="20dp"
android:layout_marginStart="30dp"
android:layout_centerVertical="true"
/>
<TextView
android:id="#+id/emotion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy Chat"
android:textColor="#939393"
android:textSize="14dp"
android:layout_toEndOf="#+id/name_of_user"
android:layout_marginStart="4dp"
android:layout_below="#+id/name_of_user"/>
</RelativeLayout>
Add this in your ListView xml:
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
For reference:
stack from bottom
transcript mode
you are not given proper constraint to your ListView.
You may try this way :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/cool_background3">
<ListView
android:id="#+id/messages_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:divider="#fff"
app:layout_constraintBottom_toTopOf="#+id/layout_chatbox"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topBar" />
<LinearLayout
android:id="#+id/layout_chatbox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="48dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<EditText
android:id="#+id/edittext_chatbox"
android:hint="Enter message"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:maxLines="6"
/>
<Button
android:id="#+id/button_chatbox_send"
android:text="send"
android:textSize="14dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:layout_width="64dp"
android:layout_height="48dp"
android:gravity="center"
android:textColor="#color/myColor"
android:layout_gravity="bottom"
android:onClick="sendMessage"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/topBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="50dp"
android:background="#color/white"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
tools:layout_editor_absoluteY="0dp">
<TextView
android:id="#+id/name_of_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomnaor"
android:textColor="#color/myColor"
android:textStyle="bold"
android:textSize="20dp"
android:layout_marginStart="30dp"
android:layout_centerVertical="true"
/>
<TextView
android:id="#+id/emotion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy Chat"
android:textColor="#939393"
android:textSize="14dp"
android:layout_toEndOf="#+id/name_of_user"
android:layout_marginStart="4dp"
android:layout_below="#+id/name_of_user"/>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
I am trying since 2 days ago to create this simple layout: it is not exactly equal, but it is near that what I want.
When I try to set the scrollView on my constraint layout I get always this messy
even if I constraint all my elements, I don't know how to organize the things at the moment, I am really confused about this.
here is my xml:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".PhotosForPlant">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.afcosta.inesctec.pt.android.PhotosForPlant"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<ImageView
android:id="#+id/plantImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/color_cursor_white"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="41dp" />
<TextView
android:id="#+id/descricaoTit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Descrição"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="582dp" />
<TextView
android:id="#+id/specieDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="4dp"
tools:layout_editor_absoluteY="622dp" />
<TextView
android:id="#+id/Family"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Familia"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="458dp" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Genre"
tools:layout_editor_absoluteX="24dp"
tools:layout_editor_absoluteY="389dp" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Espécie"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="309dp" />
<TextView
android:id="#+id/FamilyName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="96dp"
tools:layout_editor_absoluteY="458dp" />
<TextView
android:id="#+id/GenreName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="96dp"
tools:layout_editor_absoluteY="389dp" />
<TextView
android:id="#+id/SpecieName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="96dp"
tools:layout_editor_absoluteY="309dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/gallery"
android:layout_width="408dp"
android:layout_height="111dp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="141dp" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
As per your requirement i created sample layout so you can design same according to that i used nestedscrollview rather than scrollview and also applied constraint for all views
<android.support.v4.widget.NestedScrollView 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:fillViewport="true"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.afcosta.inesctec.pt.android.PhotosForPlant"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<ImageView
android:id="#+id/plantImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/smile"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.573"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/toolbar2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViLeft"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/plantImage"
android:layout_marginStart="8dp" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewDetail1"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="#+id/textView3"
android:layout_marginStart="8dp" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewDetail2"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewDetail3"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/plantImage"
android:layout_marginEnd="8dp" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewBold1"
android:textStyle="bold"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:layout_constraintLeft_toRightOf="#+id/textView5"
android:layout_marginStart="20dp" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewBold2"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#+id/textView6"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewBold3"
app:layout_constraintLeft_toRightOf="#+id/textView7"
android:textStyle="bold"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView TextView TextView TextView TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView15" />
<android.support.v7.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:id="#+id/recyclerview"
app:layout_constraintTop_toBottomOf="#+id/textView16"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteX="8dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
here is design and blue print
NOTE: You are using RecyclerView in ScrollView which is not recommended.