I am trying to create a screen which should look like this
But when I create the view using the XML code as per below
<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/fb_constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="me.buddy.buddy.ui.BenefitsActivity$BenefitsFragment">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_animals"
android:src="#drawable/animal_love"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/fb_meal_data"
app:layout_constraintBottom_toTopOf="#id/fb_environment"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_meal_data"
android:src="#drawable/food"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/fb_animals"
app:layout_constraintBottom_toTopOf="#id/fb_health"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_environment"
android:src="#drawable/environment"
app:layout_constraintTop_toBottomOf="#id/fb_animals"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/fb_health"
app:layout_constraintBottom_toTopOf="#id/fb_hunger"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_health"
android:src="#drawable/health"
app:layout_constraintTop_toBottomOf="#id/fb_meal_data"
app:layout_constraintBottom_toTopOf="#id/fb_section_label"
app:layout_constraintLeft_toRightOf="#id/fb_environment"
app:layout_constraintRight_toRightOf="parent"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_hunger"
android:src="#drawable/bowl"
app:layout_constraintTop_toBottomOf="#id/fb_environment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/fb_section_label"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fb_section_label"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
app:layout_constraintTop_toBottomOf="#id/fb_health"
app:layout_constraintLeft_toRightOf="#id/fb_hunger"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
I am getting a screen like below in my app
Do note that this layout is inside a fragment of an activity as depicted in the tools tag in the xml. Hence the additional floating action button and the back arrow in the actual layout.
However what I am not able to understand is why is icon of the food bowl getting pushed below the visible screen space in the actual layout.
Any resolution to this issue? I would like to avoid using Scrollview as much as possible.
For reference, XML Code of parent activity is attached below
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="me.buddy.buddy.ui.BenefitsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/ab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/ab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/ab_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/ab_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_menu_share" />
</android.support.design.widget.CoordinatorLayout>
Java code for adding fragment to main activity as per below:
First the parent class:
setContentView(R.layout.activity_benefits);
Toolbar toolbar = (Toolbar) findViewById(R.id.ab_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.ab_container);
mViewPager.setAdapter(mSectionsPagerAdapter);
Then inside Fragment class:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_benefits_dashboard, container, false);
return rootView;}
The problem you are trying to solve is easily accomplished using ConstraintLayout Guidelines.
You just define 2 horizontal guidelines: one at 33%, the other one at 66%.
Then all you have to do, is to position your views relative to these guidelines.
Here's a skeleton implementation of your screen:
<?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/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#53d94f"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toStartOf="#+id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#d9c74f"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#4f68d9"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/view4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline" />
<View
android:id="#+id/view4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#d95a4f"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view3"
app:layout_constraintTop_toTopOf="#id/guideline" />
<View
android:id="#+id/view5"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#4fd4d9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/view6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline2" />
<View
android:id="#+id/view6"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#c94fd9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view5"
app:layout_constraintTop_toBottomOf="#+id/guideline2" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.66" />
</android.support.constraint.ConstraintLayout>
Here's the output:
The Toolbar in your Main Activity pushes down the ViewPager. The AppBarLayout is mainly used in a Tabbed Layout for using a TabLayout. If you are using a TabLayout inside the AppBarLayout, the Toolbar will hide automatically after launching the activity and your ViewPager will occupy the full window.
The Solution:
Remove the whole AppBarLayout with Toolbar from your Activity and also remove the NoActionBar theme from Activity manifest
Or, don't use CoordinatorLayout for your parent activity.
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 have a problem to create a Android layout for the following case:
It's a fragment with a webview on the top and some other layout components below. The webview itself should not be scrollable. The hole fragment should be scrollable. Here's an image for better visualisation.
The webview and the recyclerview are flexible in high depending on the content. The webview and the recylerview should always show all content without scrolling. The hole fragment should be scollable.
I tried serveral combinations of scrollview, nestedscrollview and constraint layout. But most of the time my webview wasn't shown.
My question is: How should this layout components be nested and what are the right options for component height (match_parent, ....)?
Here's an example of my latest try. The webview isn't shown.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.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:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
android:requiresFadingEdge="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_constraintBottom_toTopOf="#+id/txtSimilarTopics"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/scrollToTopHelper"
android:layout_width="100dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="#+id/webView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/txtSim"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:textColor="#color/colorBlack"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/webView"
tools:text="Ähnliche Themen" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txt"
tools:itemCount="3"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
So it was not a layout issue. My problem was caused by a JavaScript error on the webpage. That's why the page wasn't showed.
The last item of RecyclerView is being overlapped by BottomNavigationView. The description and time is being overlapped by BottomNavigationView.
framgment_news.xml: This contains my RecyclerView
<android.support.constraint.ConstraintLayout ...
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.NewsFragment"
android:background="#fff">
<ImageView
android:id="#+id/imageView" ... />
<TextView
android:id="#+id/textView" ... />
<TextView
android:id="#+id/textView3" ... />
<TextView
android:id="#+id/textView2" ... />
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/circularImageView" ... />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/textView3"
tools:layout_editor_absoluteX="0dp"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
activity_home.xml
<android.support.constraint.ConstraintLayout ...
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeActivity">
<FrameLayout
android:id="#+id/frameContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
android:layout_marginEnd="0dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_above="#+id/bottom_navigation_view"
app:layout_constraintTop_toTopOf="parent" />
<!--Border on Top of Bottom Navigation View-->
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#616161"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation_view" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:labelVisibilityMode="unlabeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation_menu" />
</android.support.constraint.ConstraintLayout>
The last item of RecyclerView being overlapped by BottomNavigationView
Add padding to the parent layout of RecyclerView
<android.support.constraint.ConstraintLayout ...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="56dp"
tools:context=".Fragments.NewsFragment"
android:background="#fff">
And change the height of BottomNavigationView according to Material Design
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#fff"
app:labelVisibilityMode="unlabeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation_menu" />
You should attach the container view where you load your fragments to the top of the bottom navigation view.
This way, if you load anything in the container view it won't go under the bottom navigation view.
app:layout_constraintEnd_toEndOf="parent"
this part of the code, inside your frame layout, should be
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation_view"
Just use the constraint layout you already have, remove the bottom constraint from the frame layout and attach it to the top of bottomNavigationView!
In your activity_home.xml, you can use RelativeLayout. And set android:layout_above="#+id/bottom_navigation_view" in the FrameLayout.
if none of the above solved your problem..put your fragment layout in scrollview or nested scrollview..also use android:fillViewport="true" in constraint layout of fragment.
`
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.