I am working on an app that uses a DrawerLayout. The fragment containing this layout also contains some scrollable content.
So the main layout of this fragment is a DrawerLayout, below is the include block for the app bar, then the ScrollView block, which contains a ConstraintLayout so that I can put all the content I need in the ScrollView. Here is the code in details :
<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
tools:openDrawer="start">
<include
android:id="#+id/appBarMain"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ScrollView
android:id="#+id/scrollViewDashboard"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:id="#+id/lytDashboardContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="76dp">
<Button
android:id="#+id/btnAwaitingReview"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:background="#drawable/rounded_corners_color_primary"
android:text="42 avis en attente"
android:textAllCaps="false"
android:textColor="#color/grey"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.lsjwzh.widget.recyclerviewpager.RecyclerViewPager
android:id="#+id/rvpPlaceOfTheDay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnAwaitingReview"
app:rvp_singlePageFling="true"
app:rvp_triggerOffset="0.1" />
<TextView
android:id="#+id/lblDateNews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:text="Dimanche 31 Fevrier"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rvpPlaceOfTheDay" />
<View
android:id="#+id/separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="10dp"
android:background="#color/grey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/lblDateNews" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvNews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/separator" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/fragment_dashboard_drawer" />
</android.support.v4.widget.DrawerLayout>
But there are two problems :
The first is that the NavigationDrawer button at the top left is no more clickable. I know that this is caused by the ConstraintLayout because I tried putting every element as a comment one by one, and it worked properly as long as I uncommented the ConstraintLayout, but I couldn't find a way to solve it.
And the second is that the ScrollView scrolls over the app bar as you can see on this screenshot. For this one I couldn't figure out the source of the problem...
I'm not 100% sure but my guess is:
<ScrollView
android:id="#+id/scrollViewDashboard"
android:layout_width="match_parent"
android:layout_height="match_parent">
It that won't help try wrapping ScrollView with eg. LinearLayout.
Hope it helps.
Thanks to Mike M. I solved my problems, so my mistake was to put my ScrollView after I included the app_bar_main, which ended up covering it, so the solution was to simply move the ScrollView in app_bar_main, after the AppBarLayout.
Related
This is Acitivity_main.xml of a PDF Reader on Android.
I am confused on how to add two floating Action Buttons(Page Up/Down Button) in the bottom right corner. The buttons need to display above PDF, and uses linear vertical layout.
Following XML separates PDF and Buttons into two parts which is wrong, any idea how to correct it?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/pdfstructure"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/DownButton"
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_gravity="end|bottom"
android:layout_marginTop="600dp"
android:layout_marginRight="30dp"
android:clickable="true"
android:contentDescription="#string/upButton"
android:stateListAnimator="#null"
android:text="Down"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/upButton"
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_gravity="end|bottom"
android:layout_marginTop="800dp"
android:layout_marginRight="30dp"
android:clickable="true"
android:text="Up"
android:stateListAnimator="#null"
android:contentDescription="#string/upButton"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Add this line in your linearLayout
android:gravity="bottom"
and delete those lines in your FloatingActionButton
android:layout_marginTop="600dp"
android:layout_marginTop="800dp"
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
I have to make (sort of) footer for empty screen. My parent layout is RelativeLayout1. Inside this layout I have ToolBar and below that is another RelativeLayout2.
Inside this RelativeLayout2 is Button and another RelativeLayout3. I made it that way, because I want to center RelativeLayout3 content in RelativeLayout2 and Button should always align bottom of the parent layout(RelativeLayout2)
I got answer for similar question before, but it doesnt always work. My problem now is that RelativeLayout3 is off-centered vertically(it's closer to the bottom).
How it should looks like
How it actually looks like
How to fix this?
Full Layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/colorBackground"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/toolbar_round"
android:orientation="horizontal">
<include
android:id="#+id/toolBarContent"
layout="#layout/order_toolbar_layout" />
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:id="#+id/order_complete_footer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolBar"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/order_complete_image_text_layout"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/order_complete_image"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/footer_image" />
<TextView
android:id="#+id/order_complete_text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/order_complete_image"
android:layout_marginEnd="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="-12dp"
android:gravity="center_horizontal"
android:text="#string/order_complete_screen_text1"
android:textColor="#color/colorItemMinor"
android:textStyle="bold"
android:textSize="12sp" />
<TextView
android:id="#+id/order_complete_text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/order_complete_text1"
android:layout_marginEnd="50dp"
android:layout_marginStart="50dp"
android:gravity="center_horizontal"
android:text="#string/order_complete_screen_text2"
android:textColor="#color/colorItemMinor"
android:textSize="12sp" />
</RelativeLayout>
<Button
android:id="#+id/order_complete_continue_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/address_creation_button_padding_TOP_BOTTOM"
android:layout_marginEnd="#dimen/address_creation_button_padding_START_END"
android:layout_marginStart="#dimen/address_creation_button_padding_START_END"
android:layout_marginTop="#dimen/address_creation_button_padding_TOP_BOTTOM"
android:background="#drawable/login_button_background_void"
android:text="#string/order_complete_screen_button_label"
android:textAppearance="#style/VoidLoginButtonTextAppearance" />
</RelativeLayout>
</RelativeLayout>
If I understood correctly, you should add the following to your order_complete_image_text_layout.
android:layout_above="#id/order_complete_continue_button"
#JanStoltman
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".