ScrollView inside ViewPager does not scroll on Android 4.x - android

I have a problem that seems to only impact Android 4.x versions and may be also device specific (i.e. it does not exist on my Huawei G630#4.3, but do exists on a Samsung Ace2#4.4.4).
I have a ScrollView that contains a RelativeLayout that has 4 CardViews. Now on some 4.x devices, the scroll event simply does not happen when I try to scroll beginning from a card. If I touch the small padding between the cards or above the first card (and not between any two) and the device screen, I can scroll the content.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<android.support.v7.widget.CardView
android:id="#+id/metricsContainerCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"
android:src="#drawable/metrics"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/metrics"
android:textSize="20sp"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/projectCircleBackgroundShadow"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/warningsContainerCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_below="#id/metricsContainerCard"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"
android:src="#drawable/bug_color"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/warnings"
android:textSize="20sp"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/projectCircleBackgroundShadow"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/topWarningsContainerCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/warningsContainerCard"
android:layout_marginTop="10dp"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"
android:src="#drawable/top_warnings"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/topWarnings"
android:textSize="20sp"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/projectCircleBackgroundShadow"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/topCriticalItemsContainerCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/topWarningsContainerCard"
android:layout_marginTop="10dp"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"
android:src="#drawable/top_critical_items"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/topCriticalItems"
android:textSize="20sp"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/projectCircleBackgroundShadow"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
There isn't any problem on Android 5.x and 6.x.
EDIT
It seems that problem is not exclusively related to CardView, as I have another layout, and it also does not scroll even when I drag the screen by the custom view:
<ScrollView
android:id="#+id/scrollView"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".projects.details.ProjectDetailsActivity_">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/projectName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:ellipsize="none"
android:gravity="center_horizontal"
android:text="Project name"
android:textSize="24sp"/>
<c.f.q.a.projects.details.components.widgets.ProjectDetailWidget
android:id="#+id/projectDetailWidget"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="#+id/timelineWrapperLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/qualityTimelineCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/flipQualityTimelineButton"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginRight="5dp"
android:src="#drawable/flip_to_cost"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:lines="1"
android:text="#string/project_timeline_title"
android:textSize="16dp"/>
</LinearLayout>
<ProgressBar
android:id="#+id/projectQualityTimelineProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/projectQualityTimeline"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="16dp"
android:tag="#string/project_chart_tag"
android:visibility="gone"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/costTimelineCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:visibility="gone"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/flipCostTimelineButton"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginRight="5dp"
android:src="#drawable/flip_to_quality"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:lines="1"
android:text="#string/project_cost_timeline_title"
android:textSize="16dp"/>
</LinearLayout>
<ProgressBar
android:id="#+id/projectCostTimelineProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/projectCostTimeline"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="16dp"
android:tag="#string/project_chart_tag"
android:visibility="gone"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.CardView
android:id="#+id/vcsChangeCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/expandVcsChangeButton"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginRight="5dp"
android:src="#drawable/expand_chart"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:maxLines="2"
android:text="#string/project_vcschange_title"
android:textSize="16sp"/>
</LinearLayout>
<ProgressBar
android:id="#+id/vcsChangeProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<com.github.mikephil.charting.charts.BarChart
android:id="#+id/projectVcsChange"
android:layout_width="match_parent"
android:layout_height="175dp"
android:layout_marginTop="16dp"
android:tag="#string/project_chart_tag"
android:visibility="gone"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/dtnosChangeCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/expandDtnosChangeButton"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginRight="5dp"
android:src="#drawable/expand_chart"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:maxLines="2"
android:text="#string/project_systemchange_title"
android:textSize="16sp"/>
</LinearLayout>
<ProgressBar
android:id="#+id/dtnosChangeProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<com.github.mikephil.charting.charts.BarChart
android:id="#+id/projectDtnosChange"
android:layout_width="match_parent"
android:layout_height="175dp"
android:layout_marginTop="16dp"
android:tag="#string/project_chart_tag"
android:visibility="gone"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/sensorNodeCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/expandSensornodeButton"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginRight="5dp"
android:src="#drawable/expand_chart"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:maxLines="2"
android:text="#string/project_sensornode_title"
android:textSize="16sp"/>
</LinearLayout>
<ProgressBar
android:id="#+id/sensorNodeProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<com.github.mikephil.charting.charts.RadarChart
android:id="#+id/sensorNodeChart"
android:layout_width="match_parent"
android:layout_height="175dp"
android:layout_marginTop="16dp"
android:tag="#string/project_chart_tag"
android:visibility="gone"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/aggregateNodeCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/expandAggregateButton"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginRight="5dp"
android:src="#drawable/expand_chart"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:maxLines="2"
android:text="#string/project_aggregatenode_title"
android:textSize="16sp"/>
</LinearLayout>
<ProgressBar
android:id="#+id/aggregateNodeProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<com.github.mikephil.charting.charts.RadarChart
android:id="#+id/aggregateNodeChart"
android:layout_width="match_parent"
android:layout_height="175dp"
android:layout_marginTop="16dp"
android:tag="#string/project_chart_tag"
android:visibility="gone"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</ScrollView>
I added the complete layout, and also here is an image for clarification (I marked the scrollable areas which I can drag):
EDIT2
Maybe it is also important that these layouts are Fragments inside a ViewPager. Is it possible that the ViewPager prevents the ScrollView (and any other views inside it) gaining the focus / handling the touch events? The code for my ViewPager is this:
<android.support.v4.view.ViewPager
android:id="#+id/projectPager"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
EDIT3
It seems the problem must be with ViewPager + (Nested)ScrollView (I tried to exchange the plain ScrollView with that, but without success). I created a dummy layout for my Fragment that only hosts a parent NestedScrollView, a LinearLayout and many big TextViews like this:
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="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=".projects.details.ProjectDetailsActivity_">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:ellipsize="none"
android:gravity="center_horizontal"
android:text="Project name"
android:textSize="80sp"/>
... <!-- more TextViews come here -->
...and scrolling also doesn't work! Only at the very edge of the screen, as previously. I have no idea how can this happen...

Solved! I had exactly the same problem. You are probably using a PageTransformer ViewPager animation.
Disabling the custom page transformer for < Android 4.1 solved it:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
// there are problems with this on 4.0.3, probably also on 4.1
viewPager.setPageTransformer(true, new DepthPageTransformer());
}
Your post and research saved me a lot of time, thank you.
OTHER SOLUTION:
If you like your animation, you can also try changing your DepthPageTransformer to this: https://stackoverflow.com/a/28214802/1310343c

You are right, the 2 scrollable controls are competing with each other.
Use a NestedScrollView from the Support Library instead. It is designed to get around problems of this type.
It has many enhancements that lets it work with other scrollable controls, including the ViewPager, RecyclerView (as long as you call .setNestedScrolling(true)) and CoordinatorLayout.
Based on the above, I have been using this new class in all instances, and the scrolling within scrolling has been working perfectly. Our product is live with perfectly working NestedScrollView controls inside a ViewPager, some with embedded RecyclerView lists inside them as well.

For me this setup worked: I have a Coordinator layout which has below nested scrollview
<android.support.v4.widget.NestedScrollView
android:layout_marginTop="8dp"
android:fillViewport = "true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/content_app_bar_search_patient_module"/>
</android.support.v4.widget.NestedScrollView>
and <include layout="#layout/content_app_bar_search_patient_module"/>has a viewpager which has fragment which contains again a nested scrollview
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
.
</android.support.v4.widget.NestedScrollView>

Your ScrollView must have match_parent height and first child of scrollview ( LinearLayout ) must have wrap_content height

Related

Android Progress bar shows behind Page content

I want to show a progress bar on my screen during the API calls. Created the API as below, but its showing behind the buttons/text field once it is visible. If there are no items on the screen it is fully visible. And if there are buttons or something its showing behind the button. So I can't see it properly. Please let me know if anything wrong with the implementation.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/window_layout"
android:background="#color/white"
>
<FrameLayout
android:id="#+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/progress_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ProgressBar
style="?android:attr/progressBarStyleInverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:theme="#style/ProgressBarTheme"
android:id="#+id/progress"
android:layout_gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dip"
android:text="#string/txt_setup"
android:layout_marginBottom="16dp"
/><RelativeLayout
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_marginTop="8dp"
android:id="#+id/spinner_layout"
android:background="#drawable/spinner_back"\>
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dropDownWidth="match_parent"
android:dropDownVerticalOffset="40dp"
android:background="#android:color/transparent"
android:spinnerMode="dropdown" />
<ImageView
android:id="#+id/spinner_arr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic__2_web_icons_ic_caretdown_gra"/>
</RelativeLayout>
</LinearLayout>
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Have you tried:
<LinearLayout
android:id="#+id/progress_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
+ android:elevation="1dp">
<ProgressBar
style="?android:attr/progressBarStyleInverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:theme="#style/ProgressBarTheme"
android:id="#+id/progress"
android:layout_gravity="center" />
</LinearLayout>
That would possibly bring this layout to the front
android:translationZ="1dp"
Could also possibly work
You might want to read up on how a FrameLayout works, but generally for every subview in a FrameLayout, the one at the bottom of the hierarchy will be displayed on top. So for your case, you need to make the change as below
<FrameLayout
android:id="#+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dip"
android:text="#string/txt_setup"
android:layout_marginBottom="16dp"
/><RelativeLayout
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_marginTop="8dp"
android:id="#+id/spinner_layout"
android:background="#drawable/spinner_back"\>
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dropDownWidth="match_parent"
android:dropDownVerticalOffset="40dp"
android:background="#android:color/transparent"
android:spinnerMode="dropdown" />
<ImageView
android:id="#+id/spinner_arr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic__2_web_icons_ic_caretdown_gra"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/progress_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ProgressBar
style="?android:attr/progressBarStyleInverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:theme="#style/ProgressBarTheme"
android:id="#+id/progress"
android:layout_gravity="center" />
</LinearLayout>
</FrameLayout>
Notice how i moved your progress_linear LinearLayout to the bottom within the FrameLayout

How place overlay imageview on two layouts?

I want to build the following screen which contains app logo, success/failure icon image, information message and ok button.
Here this the code. I am using linear layout to achieve this.
<LinearLayout
android:id="#+id/statusLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#android:color/white"
android:weightSum="2"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/statusTopRelativeLayout"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/client_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/no_image_description"
android:src="#drawable/client_logo"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/statusBottomRelativeLayout"
android:background="#android:color/holo_blue_light"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/statusText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/statusText"
android:textSize="50sp"/>
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/statusText"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:clickable="true"
android:focusable="true"
android:onClick="goToHomeScreen"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#string/ok"
android:textColor="#ffffff"
android:textSize="40sp"/>
</RelativeLayout>
How to place success/failure icon image on top of the two layouts?
You can use constraint to make it easy
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:id="#+id/center"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/center"
android:background="#ffffff"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#00ffff"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff8801"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="#id/center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
Output:
Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nilu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:orientation="vertical"
android:paddingBottom="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
<LinearLayout
android:id="#+id/nilu2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/nilu"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
</RelativeLayout>
OUTPUT
Parent RelativeLayout
add child LinearLayout as fillParent and assign weightsum 2. add two
layouts with 1 weight each. (add individual implementation for each
layout according to your requirements.)
add second child in relative
layout as imageview/button for that good sign and set it center in
parent.
This will fix your problem

Multiple recyclerview issue

I am trying to create an XML layout for football teams statistics and add who scored the goal for each team on the side of the vertical red view
After some work i created this layout:
This is my layout xml code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:card_view="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardUseCompatPadding="true"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start">
<ImageView
android:id="#+id/image_team1"
android:layout_width="50dp"
android:layout_height="50dp"
android:adjustViewBounds="true"
android:src="#drawable/placemahdi"
/>
</LinearLayout>
<LinearLayout
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end">
<ImageView
android:id="#+id/image_team2"
android:layout_width="50dp"
android:layout_height="50dp"
android:adjustViewBounds="true"
android:src="#drawable/placemahdi"/>
</LinearLayout>
<TextView
android:id="#+id/versus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_stadium"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text=":"
android:textSize="25sp" />
<com.github.pavlospt.CircleView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="30dp"
android:id="#+id/point1"
android:layout_height="35dp"
app:cv_titleText="2"
app:cv_titleSize="14sp"
android:layout_marginRight="10dp"
android:layout_toStartOf="#+id/versus"
android:layout_toLeftOf="#+id/versus"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:cv_titleColor="#color/white"
app:cv_subtitleText=""
app:cv_strokeColorValue="#color/colorGreen"
app:cv_backgroundColorValue="#color/yellow"
app:cv_fillColor="#color/yellow"
app:cv_fillRadius="0.9"
app:cv_strokeWidthSize="3"/>
<com.github.pavlospt.CircleView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="30dp"
android:id="#+id/point2"
android:layout_height="35dp"
app:cv_titleText="2"
app:cv_titleSize="14sp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/versus"
android:layout_toRightOf="#+id/versus"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:cv_titleColor="#color/white"
app:cv_subtitleText=""
app:cv_strokeColorValue="#color/colorGreen"
app:cv_backgroundColorValue="#color/yellow"
app:cv_fillColor="#color/yellow"
app:cv_fillRadius="0.9"
app:cv_strokeWidthSize="3"/>
<TextView
android:id="#+id/team2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="ahed2"
android:textAlignment="center"
android:textSize="10sp"
android:layout_marginTop="5dp"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#+id/point2"
android:layout_alignStart="#+id/point2" />
<TextView
android:id="#+id/team1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentBottom="true"
android:text="ahed2"
android:textAlignment="center"
android:textSize="10sp"
android:layout_marginTop="5dp"
android:layout_below="#+id/point1"
android:layout_alignLeft="#+id/point1"
android:layout_alignStart="#+id/point1" />
</RelativeLayout>
<View
android:layout_width="2dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginTop="50sp"
android:background="#a40404" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|bottom"
android:layout_gravity="bottom"
android:textSize="20sp"
/>
</android.support.v7.widget.CardView>
</ScrollView>
</LinearLayout>
And this is my layout inflater where i added a recyclerview:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_post"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Here is an image i am following :
I just want to add the player who scored the goal with the football icon foreach side of the vertical red line.
Should i create two recyclerview?
Any suggestions please?
If you are using LinearLayout with weight property you can reslove this issue..
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_red_dark"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_two"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="49"/>
</LinearLayout>
try this..

Fill CardView inside screen area

In my android app, I am a fragment in which I want to display to CardViews. These both CardViews should fill entire screen area. The image which is shown inside the cardview element is very large image and the same should be shrinked to display inside cardview. I am not able to fill entire area of screen with following code and make cardview clickable.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.myFirstApp.app1.cardviewFragment">
<!-- TODO: Update blank fragment layout -->
<!--<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:background="#android:color/holo_blue_bright" ></android.support.v7.widget.RecyclerView>-->
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp" android:background="#color/colorAccent">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_view1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="8dp"
android:layout_marginBottom="16dp">
<LinearLayout android:orientation="vertical"
android:id="#+id/display_card_view_linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/display_name1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="#string/app_name"
android:textColor="#ffffff"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:background="#1976D2"/>
<ImageView
android:id="#+id/display_image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/action_settings"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/display_information1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
android:text="Card View Footer"
android:textColor="#ffffff"
android:layout_below="#+id/display_image1"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:background="#1976D2"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="8dp"
android:layout_marginBottom="16dp">
<LinearLayout android:orientation="vertical"
android:id="#+id/display_card_view_linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/display_name2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="#string/app_name"
android:textColor="#ffffff"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:background="#1976D2"/>
<ImageView
android:id="#+id/display_image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/action_settings"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/display_information2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
android:text="Card View Footer"
android:textColor="#ffffff"
android:layout_below="#+id/display_image2"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:background="#1976D2"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</FrameLayout>
How I can make both CardView fill entire area and make them clickable?
Thanks in advance,
IamHuM
try put this in cardview:
android:layout_margin="0dp"
i not have idea if this work for you but in one of my apps it worked you can se the code here GitHub code in the settings activity layout, i use a full width cardview.

android:cardView width is not matching to it's parent

Please Read Full - Well I don't know what's gone wrong here.
Each of the CardView Bottom is not matching to it's parent.!
I'm trying to add background to RecyclerView and make transparent background to CardView
custom_row Code -
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="#dimen/card_album_radius">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingBottom="7.5dp"
android:paddingTop="7.5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/imageView1"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:src="#drawable/ic_action_movie" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_weight="0.75"
android:orientation="vertical">
<TextView
android:id="#+id/playList_name"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:ellipsize="end"
android:maxLines="1"
android:text="SongName"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Title"
android:textColor="#c1c1c1"
android:textSize="16sp" />
<TextView
android:id="#+id/album_artist"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:layout_below="#id/playList_name"
android:layout_marginLeft="16dp"
android:layout_weight="0.25"
android:ellipsize="end"
android:maxLines="1"
android:text="ARTIST"
android:textColor="#a1a1a1"
android:textIsSelectable="false"
android:textSize="12sp" />
</LinearLayout>
<ImageView
android:id="#+id/my_overflow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_weight="1.4"
android:paddingRight="16dp"
android:scaleType="fitEnd"
android:src="#drawable/ic_grade" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView></LinearLayout>
And here's song_fragment.xml -
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ansh.albums.Fragments.Songs">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
Here's the Result which i got -
image
I don't know why each of the cardView is not matching to it's parent width at bottom?
Please help.!
You can use try this to get ride of the bottom divider
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/cv"
card_view:cardElevation="0dp"
card_view:cardMaxElevation="0dp"
card_view:cardPreventCornerOverlap="false">

Categories

Resources