I'm working on a simple chatting app, which has a recyclerView to display messages and a LinearLayout to contain controls for sending new messages. The controls should take as much space as needed (when writing multiple lines of text, it gets bigger) and the recyclerView should take the rest.
I have encountered these issues with my code (see bellow):
When the keyboard pops up, the recyclerView is overlaped (should be resized to fit the remaining space)
Overlap when keyboard appears
When writing more lines of text, the recyclerView is again overlaped (should be resized to fit the remaining space)
Overlap when wirting longer text
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<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" />
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/line"
app:gone="#{!viewModel.loaded}"
app:itemBinding="#{viewModel.itemBinding}"
app:items="#{viewModel.items}" />
<!-- A horizontal line between the chatbox and RecyclerView -->
<View
android:id="#+id/line"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#dfdfdf"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/chatControls"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<LinearLayout
android:id="#+id/chatControls"
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/messageEdit"
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"
android:text="#={viewModel.messageText}"
android:hint="#string/hint_write" />
<ImageButton
android:id="#+id/chatSendButton"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:src="#drawable/ic_menu_send"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="bottom"
android:onClick="#{() -> presenter.sendMessage()}" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
Thank you in advance for any ideas.
I've managed to get the right behaviour by setting stackFromEnd to true on recycler view's LinearLayoutManager.
Related
Hello i have a problem with my cardview. when i click whole cardview with binding.root.setonclicklistener{} doesnt work. only work when i click a little part on bottom. but also when i try click imageview (in my cardview) for favorite it works correctly. how can i fix that ?
<androidx.cardview.widget.CardView
android:id="#+id/cv_product_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="#dimen/radius_10dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_product_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_bordered_ghost_white_with_radius_10dp_width_1dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_product_item_top_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/cl_product_item_bottom_container"
app:layout_constraintDimensionRatio="0.78"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/vp_product_item_images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/silver"
android:elevation="-1dp"
android:orientation="horizontal" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl_product_item"
android:layout_width="wrap_content"
android:layout_height="#dimen/size_25"
android:background="#color/white_p0"
app:tabBackground="#drawable/selector_indicator_white_4dp"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabPaddingEnd="#dimen/size_15"
app:tabPaddingStart="#dimen/size_15"
app:tabPaddingTop="0dp"
android:layout_marginBottom="#dimen/margin_25"
android:layout_marginStart="#dimen/margin_50"
app:layout_constraintBottom_toTopOf="#id/cv_product_item_top"
app:layout_constraintStart_toStartOf="#id/vp_product_item_images"/>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/iv_product_item_favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/padding_50"
android:src="#{data.isFavorite ? #drawable/ic_favorite_filled_cerise : #drawable/ic_favorite_empty_lilac_bloom}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_favorite_filled_cerise" />
Try this -
Add these 2 attributes in your card view - android:clickable="true" and android:focusable="true"
when i change viewpager height for example 20dp i noticed click is works except the 20dp. viewpager doesnt allow me for click. i tried clickable and focusable false in viewpager but still same :(
<androidx.cardview.widget.CardView
android:id="#+id/cv_product_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="#dimen/radius_10dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_product_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_bordered_ghost_white_with_radius_10dp_width_1dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_product_item_top_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/cl_product_item_bottom_container"
app:layout_constraintDimensionRatio="0.78"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/vp_product_item_images"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/silver"
android:elevation="-1dp"
android:orientation="horizontal" />
I'm dealing with a weird issue and I'm kind of lost about which direction to take:
I have a fragment which is opened from several places in the app(it shows a user profile). Most of the places it's ok but in one, in particular, it has a strange behavior, the first time it's open, most views are blank, but some like the profile picture and the toolbar title are ok, if I go back and enter it again then all the views are visible as expected.
I have tried several approached to solve this, one, in particular, is to call activity.recreate() in the fragment onCreateView() which makes the views visible but has some side effects that I want to avoid and also is just a patch and not dealing directly with the problem.
Now, the most strange part to me is that if I open the screen in the layout inspector I see this:
As you can see the textviews and other elements are set, but just not visible.
One experiment I tried was giving a textview a fixed width and in that case it is visible, could this be some problem with the constraintLayout?
Any other ideas?
Thanks in advance!
EDIT:
One other thing, could the viewstubs have anything to do here?
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="0dp"
android:fitsSystemWindows="true"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<androidx.constraintlayout.widget.ConstraintLayout
style="#style/ProfileContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:elevation="0dp"
android:paddingBottom="#dimen/padding_margin_large_20">
<include
layout="#layout/common_profile_picture"
style="#style/ProfileImage"
android:id="#+id/userPicture"
android:layout_width="#dimen/round_avatar_size"
android:layout_height="#dimen/round_avatar_size"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.constraintlayout.widget.Group
android:id="#+id/follow_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:constraint_referenced_ids="user_followers_label_textview,user_followers_number_textview,follow_divider,user_following_label_textview,user_following_number_textview,sectionFollowers,sectionFollowing" />
<TextView
style="#style/ProfileFollowerTextLabel"
android:id="#+id/user_followers_label_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/user_following_label_textview"/>
<TextView
style="#style/ProfileFollowerText"
android:id="#+id/user_followers_number_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/user_followers_label_textview"
app:layout_constraintStart_toStartOf="#+id/user_followers_label_textview"
app:layout_constraintEnd_toEndOf="#+id/user_followers_label_textview"/>
<View
android:id="#+id/sectionFollowers"
android:layout_width="0dp"
android:layout_height="#dimen/profile_vertical_divider_height"
android:layout_marginTop="#dimen/padding_margin_large_28"
android:background="?selectableItemBackground"
android:visibility="gone"
app:layout_constraintTop_toTopOf="#+id/user_followers_label_textview"
app:layout_constraintStart_toStartOf="#+id/user_followers_label_textview"
app:layout_constraintEnd_toStartOf="#id/user_following_label_textview"
app:layout_constraintBottom_toBottomOf="#+id/user_followers_number_textview"/>
<include layout="#layout/common_divider"
android:id="#+id/follow_divider"
android:layout_width="1dp"
android:layout_height="#dimen/profile_vertical_divider_height"
android:layout_marginTop="#dimen/padding_margin_large_28"
app:layout_constraintTop_toTopOf="#+id/user_followers_label_textview"
app:layout_constraintBottom_toBottomOf="#+id/user_followers_number_textview"
app:layout_constraintStart_toEndOf="#+id/user_followers_label_textview"
app:layout_constraintEnd_toStartOf="#+id/user_following_label_textview"
app:layout_constraintHorizontal_bias="1.0"/>
<TextView
style="#style/ProfileFollowingTextLabel"
android:id="#+id/user_following_label_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#+id/user_followers_label_textview"
app:layout_constraintBottom_toBottomOf="#+id/user_followers_label_textview"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
style="#style/ProfileFollowingText"
android:id="#+id/user_following_number_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/user_following_label_textview"
app:layout_constraintStart_toStartOf="#+id/user_following_label_textview"
app:layout_constraintEnd_toEndOf="#+id/user_following_label_textview"/>
<View
android:id="#+id/sectionFollowing"
android:layout_width="0dp"
android:layout_height="#dimen/profile_vertical_divider_height"
android:layout_marginTop="#dimen/padding_margin_large_28"
android:background="?selectableItemBackground"
android:visibility="gone"
app:layout_constraintTop_toTopOf="#+id/user_followers_label_textview"
app:layout_constraintStart_toStartOf="#+id/user_following_label_textview"
app:layout_constraintEnd_toEndOf="#id/user_following_label_textview"
app:layout_constraintBottom_toBottomOf="#+id/user_following_number_textview"/>
<ViewStub
style="#style/ProfileAction"
android:id="#+id/profileaction_viewstub"
android:inflatedId="#+id/profileaction_viewstub"
android:layout_width="#dimen/profile_action_width"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/user_following_number_textview"
app:layout_constraintStart_toStartOf="#+id/user_followers_label_textview"/>
<TextView
style="#style/ProfileName"
android:id="#+id/user_fullname_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:text="#string/placeholder"
android:drawablePadding="#dimen/padding_margin_small_4"
app:layout_constraintTop_toBottomOf="#+id/userPicture"
app:layout_constraintBottom_toTopOf="#+id/donation_list_label_textview"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"/>
<TextView
android:id="#+id/userTitleTextView"
style="#style/ProfileTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintStart_toStartOf="#+id/user_fullname_textview"
app:layout_constraintTop_toBottomOf="#+id/user_fullname_textview" />
<androidx.emoji.widget.EmojiAppCompatTextView
style="#style/ProfileDesc"
android:id="#+id/user_description_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:text="#string/placeholderLong"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/userTitleTextView"/>
<TextView
android:id="#+id/userWebSiteTextView"
style="#style/ProfileWebSite"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:autoLink="web"
android:visibility="invisible"
app:layout_constraintStart_toStartOf="#+id/user_fullname_textview"
app:layout_constraintTop_toBottomOf="#+id/user_description_textview" />
<androidx.constraintlayout.widget.Group
android:id="#+id/donating_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="donation_list_label_textview,donating_arrow_imageview,donationList,donationDivider" />
<include
android:id="#+id/donationDivider"
layout="#layout/common_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="#dimen/padding_margin_medium_16"
android:layout_marginTop="#dimen/padding_margin_medium_16"
android:layout_marginEnd="#dimen/padding_margin_medium_16"
android:layout_marginBottom="#dimen/padding_margin_medium_16"
app:layout_constraintBottom_toTopOf="#+id/donation_list_label_textview"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/userWebSiteTextView" />
<TextView
android:id="#+id/donation_list_label_textview"
style="#style/ProfileDonatingLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_donating"
app:layout_constraintStart_toStartOf="#+id/user_fullname_textview"
app:layout_constraintTop_toBottomOf="#+id/donationDivider" />
<ImageView
android:id="#+id/donating_arrow_imageview"
android:layout_width="#dimen/profile_arrow_size"
android:layout_height="#dimen/profile_arrow_size"
app:srcCompat="#drawable/ic_chevron_accent_right"
android:tint="?iconColorSelected"
app:layout_constraintBottom_toBottomOf="#+id/donation_list_label_textview"
app:layout_constraintStart_toEndOf="#+id/donation_list_label_textview"
app:layout_constraintTop_toTopOf="#+id/donation_list_label_textview"
app:layout_constraintVertical_bias="0.75" />
<TextView
android:id="#+id/donationList"
style="#style/TextValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:paddingTop="#dimen/padding_margin_small_4"
android:paddingBottom="#dimen/padding_margin_large_30"
app:layout_constraintStart_toStartOf="#+id/user_fullname_textview"
app:layout_constraintTop_toBottomOf="#+id/donation_list_label_textview" />
</androidx.constraintlayout.widget.ConstraintLayout>
<include layout="#layout/common_divider"
android:id="#+id/postsDivider"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:layout_marginStart="#dimen/padding_margin_medium_16"
android:layout_marginEnd="#dimen/padding_margin_medium_16"
android:layout_marginBottom="#dimen/padding_margin_medium_18"/>
<include layout="#layout/common_toolbar_back"
android:id="#+id/profileToolbar"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/tabContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<TextView
android:id="#+id/private_profile_textview"
style="#style/TextValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="#dimen/profile_private_label_bottom_margin"
android:text="#string/profile_private"
android:visibility="gone" />
<androidx.core.widget.ContentLoadingProgressBar
android:id="#+id/postsLoadingProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:theme="?android:attr/progressBarStyleLarge"
android:visibility="gone" />
<include layout="#layout/loader"
android:id="#+id/profileLoader"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The first thing you want to do is check color of the font that you are using. the second is the theme that you are using after that in your fragment xmls root tag put color="white" and clickable is true.
This problem is occurred mostly due to the delay and high processing , like your are loading something heavy on your views or overlapping some containers and these are being skipped.
Easy one is just put a background color to this fragment's root container.
Try to remove overlapping of layouts/views because GPU overrides are increasing and rendering becomes slow.
I think the problem must be in layout file. As you said when you open layout file the textviews and other elements are set, but just not visible.
That's what troubling the fragment while inflating the views when you open it first time.
Try:
1.Check your style.xml and layout file again
2.Debug by replacing the code in layout with simple views
On the bottom of my AppBarLayout, where I use my CollapsingToolbarLayout, I have a EditText and a ImageView (working as button).
When the AppBarLayout is open my editText and ImageView work fine.
But when I collapse and they get the space of the Toolbar looks like they are no more clickable.
Here work fine.
But when they get this blue border space (Toolbar)
Stop work. I cannot click in "LOS" or type anything more
My XML 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:clipToPadding="false">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="210dp"
android:stateListAnimator="#animator/appbar_always_elevated"
android:background="#color/neah_screen_bg_white">
<android.support.design.widget.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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/main_home_banner_img"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/background_to_text_contentDescription"
android:scaleType="centerCrop"
android:src="#drawable/bg_home"
app:layout_collapseMode="parallax"
app:layout_constraintBottom_toTopOf="#+id/main_home_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/main_home_banner_filter"
android:layout_width="0dp"
android:layout_height="0dp"
android:alpha="0.4"
android:contentDescription="#string/shadow_contentDesxription"
app:layout_constraintBottom_toTopOf="#+id/main_home_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/gradient_bg" />
<ImageView
android:id="#+id/main_home_neah_logo"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/icon_contentDescription"
app:layout_constraintEnd_toEndOf="#+id/main_home_banner_filter"
app:layout_constraintStart_toStartOf="#+id/main_home_banner_filter"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/icon_neah_logo_white" />
<TextView
android:id="#+id/main_home_cta_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/str_home_cta_text"
android:textColor="#color/neah_text_white"
android:textSize="#dimen/size_text_app_bar"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/main_home_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_home_neah_logo" />
<EditText
android:id="#+id/main_home_text"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:background="#color/transparent"
android:ems="10"
android:hint="#string/str_home_service_cta"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/main_home_button_text"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/main_home_button"
android:layout_width="90dp"
android:layout_height="0dp"
android:contentDescription="#string/button_contentDescription"
app:layout_constraintBottom_toBottomOf="#+id/main_home_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/main_home_text"
app:srcCompat="#color/neah_btn_orange" />
<TextView
android:id="#+id/main_home_button_text"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/str_go"
android:textColor="#color/neah_text_white"
android:textSize="#dimen/size_text_big"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/main_home_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/main_home_text"
app:layout_constraintTop_toTopOf="#+id/main_home_text" />
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/main_home_list_swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<android.support.v7.widget.RecyclerView
android:id="#+id/main_home_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout >
I'm not an Android Developer but from the other UI work I have done so far, it seems that part of your container is in front of the UI elements that you want to be clickable.
I suggest you open your UI designer and put the UI in the collapsed state by setting the initial variables appropriately (not in the rendered view in the app build).
Like this you can then easily click on the single UI elements and see which of the elements is in front and blocking the access to the elements you want to access.
Afterwards either put this element behind the other if possible, or try to restructure your UI so that nothing is in front anymore, like pulling out the toolbar with the text and button out of the collapse area and attaching it to the bottom.
I have read on Android Developers that ConstraintLayout can be used to design a responsive layout for an application. There is a parent ConstraintLayout which houses a toolbar and two other ConstraintLayouts. The first child ConstraintLayout is going to act as empty view for my ListView. The second ConstraintLayout holds my listview and a floating action button. Currently, the the listview appears under the Toolbar, rather than below it. Also as seen in the screenshot, the floating action button appears outside visible area.
See the screenshot below:
And this is the app layout when the list is empty:
This is the code for my layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.constraint.ConstraintLayout
app:layout_constraintTop_toBottomOf="#id/toolbar"
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/tv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/list_is_empty"
android:textSize="#dimen/large_text"
android:textStyle="bold"
/>
<ImageView
android:id="#+id/iv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tv_empty_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:contentDescription="#string/list_is_empty"
android:src="#drawable/emptybox" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/main_area"
android:layout_marginTop="50dp"
android:layout_marginBottom="?actionBarSize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintBottom_toBottomOf="parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
android:layout_marginLeft="#dimen/margin_side"
android:layout_marginStart="#dimen/margin_side"
android:layout_marginRight="#dimen/margin_side"
android:layout_marginEnd="#dimen/margin_side"
android:layout_marginTop="?attr/actionBarSize"
/>
<android.support.design.widget.FloatingActionButton
android:layout_below="#+id/listview"
android:id="#+id/fab"
android:layout_width="#android:dimen/notification_large_icon_width"
android:layout_height="#android:dimen/notification_large_icon_height"
android:layout_gravity="end|bottom"
android:src="#drawable/plus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
While using ConstraintLayout you have to add constraints for 'constraintTop',constraintRight,constraintBottom,constraintLeft or constraintStart and constraintEnd. only if you constraint all your four sides the constraint layout (or Constraint Start or End with other References) works well. Otherwise the layout will not work correctly
For Further Reference https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Findex#0
https://developer.android.com/training/constraint-layout/index.html
There are a couple of things that you can improve with the XML and make the design easier.
First, the main layout will match the screen, to have the preview correctly simulate that, you can set its width/height to match_parent
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
Then, Android Studio should be giving you warnings/errors and saying The view is not constrained horizontally/vertically. In ConstraintLayout, you have to use constraints to specify how your views are placed. If you don't, by default they will position at 0/0 and most probably will look different when it runs on the device:
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp" />
Now, you should be able to that the main_area overlaps with the toolbar. To fix it, you can change main_area height to match the constrains:
android:id="#+id/main_area"
android:layout_height="0dp"
You should be able to obtain a design similar to what you intended.
Here is your desired result, I've made some changes like margins, src just to make it work in my studio, so you'll have to choose whatever you were using, just replace mine with your src's and margins etc...
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<android.support.constraint.ConstraintLayout
app:layout_constraintTop_toBottomOf="#+id/toolbar"
android:id="#+id/empty_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/tv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
android:text="list_is_empty"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ImageView
android:id="#+id/iv_empty_view"
android:layout_width="20dp"
android:layout_height="20dp"
app:layout_constraintTop_toBottomOf="#+id/tv_empty_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#fff222" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/main_area"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ListView
android:id="#+id/listview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.design.widget.FloatingActionButton
android:layout_marginEnd="30dp"
android:layout_marginBottom="30dp"
android:id="#+id/fab"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Here's the output:
I was also facing the same issue.
I made a mistake of keeping layout_width of ListView as fixed width. I changed it to match_constraint and it's coming correctly without any cut.
For height I was facing similar issue so I changed it to match_constraint and it worked.
The content of the main activity looks like:
the main screen looks like (all this inside ConstraintLayout):
image title
date
the image itself
image description
The image description may be too long to be displayed, to fix this I can put it inside a ScrollView, and this works just fine. However, I would like to ScrollView the whole ConstraintLayout, and this is not functioning properly: cannot scroll and some TextViews do not appear!
Relevant Code:
<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:id="#+id/desciptionScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.picture.nasa.nasadailyimage.NasaDailyImage"
tools:showIn="#layout/activity_nasa_daily_image">
<TextView
android:id="#+id/imageTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:text="#string/test_image_title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/imageDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:text="#string/test_image_date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageTitle" />
<ImageView
android:id="#+id/imageDisplay"
android:layout_width="368dp"
android:layout_height="408dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="3dp"
android:src="#mipmap/test_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageDate" />
<TextView
android:id="#+id/imageDescription"
android:layout_width="368dp"
android:layout_height="0dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="#string/test_image_description"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageDisplay" />
</android.support.constraint.ConstraintLayout>
For making the elements in the screen scrollable I think you could use a NestedScrollView inside a CoordinatorLayout.
I usually put a LinearLayout with all the elements I would display there.
For example:
<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"
tools:context="com.xengar.android.puzzlewildanimals.ui.HelpActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<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:id="#+id/desciptionScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.picture.nasa.nasadailyimage.NasaDailyImage"
tools:showIn="#layout/activity_nasa_daily_image">
<TextView
android:id="#+id/imageTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:text="#string/test_image_title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/imageDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:text="#string/test_image_date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageTitle" />
<ImageView
android:id="#+id/imageDisplay"
android:layout_width="368dp"
android:layout_height="408dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="3dp"
android:src="#mipmap/test_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageDate" />
<TextView
android:id="#+id/imageDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="#string/test_image_description"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageDisplay" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
If that doesn't work you can replace the ConstraintLayout with a LinearLayout.
I hope that helps.
To add scrolling to any view, you add a ScrollView. In your code, add it as the root(If the ScrolLView isn't the root and there is more content, add the ScrollView around the ConstraintLayout). move the namespaces(lines containing xmlns) to the new root. Add width and height in the ScrollView to match_parent(or whatever you have) and set the height of the ConstraintLayout to wrap_content.
However, you will not be able to scroll correctly in design mode. (reference). But it will still work as ecpected on a device.
NOTE:
If your layout doesn't scroll with a SCrollView, make sure you set the height of the ConstraintLayout to wrap_content
No need to use a NestedScrollView as long as you can get the constraint layout to "extend" beyond its ScrollView parent as described in this related SO answer
surrounded my constrinat-layout with a ScrollView tag and gave it the property android:isScrollContainer="true".