Cover the touch area that is overlapped by another layout - android

I want to show a layout on top of another layout that is in full screen, but when I touch the laout that in on top (higher translationZ) the view that is behind this layout also get clicked. I want the view that is in behind have touch gesture but I don't want touch gesture when I click the viewholder that is on top.
Also when I use AppBarLayout then there is no problem, but when I use ConstraintLayout, I am not able to fix the problem.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clBigScreenPhotoInfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:translationZ="1dp"
android:visibility="invisible">
<com.google.android.material.appbar.AppBarLayout
android:background="#77000000"
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="72dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/ivBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_back_white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
app:elevation="1dp"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#77000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent">
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/ivBig"
android:translationZ="0dp"
android:layout_width="match_parent"
android:src="#drawable/big"
android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
click listener of the imageView that is in behind
binding.ivBig.setOnClickListener {
val v = binding.clBigScreenPhotoInfo
if (v.visibility == View.INVISIBLE) {
v.visibility = View.VISIBLE
return
}
v.visibility = View.INVISIBLE
}

Related

Recycler view last item get truncated

It looks like my layouting is bad.
So I have a recycler view and the top app bar inside constraint layout (for positioning). And I have a swipe refresh as container. But when I run my app, the last item of recycler view is not show fully (get cut/truncated)
Here is my xml layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout 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:id="#+id/swipe_refresh_layout"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".view.ThirdScreen">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/top_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/rv_user">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/material_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="#drawable/baseline_arrow_back_ios_24"
app:navigationIconTint="#554AF0"
app:title="Third Screen"
app:titleCentered="true"
style="#style/ThemeOverlay.MaterialComponents.Toolbar.Primary"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintTop_toBottomOf="#id/top_app_bar"
app:layout_constraintStart_toStartOf="parent" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Weird scrolling behavior and visibility of Persistent or Standard BottomSheet in a page having RecyclerView

As one can see in image, RecyclerView items are visible through Standard/Persistent BottomSheet and collapsing/expanding of BottomSheet is also not happening in Standard/Persistent BottomSheet. RecyclerView items are scrollable but when I do any kind of activity in Standard/Persistent BottomSheet, it directly scrolling the RecyclerView item behind this Standard/Persistent BottomSheet.
Note: Background color used in BottomSheet is solid. It's not transparent.
I'm wondering how to solve this issue?
Here's the code snippet ->
activity_main.xml
<?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:id="#+id/layout_container_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/layout_container_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<include
android:id="#+id/included_layout_standard_bottom_sheet"
layout="#layout/layout_standard_bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
layout_standard_bottom_sheet.xml
<?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"
android:id="#+id/layout_container_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/bottom_sheet_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/summary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/thumbnail"
android:layout_width="?actionBarSize"
android:layout_height="?actionBarSize"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/thumbnail"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.slider.Slider
android:id="#+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/summary" />
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see in the image your bottom sheet is behind the recycler view. To change that you have to change the order of recyclerview and coordinatelayour in your activity_main.xml
You can try by changing the order like this
<?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:id="#+id/layout_container_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/layout_container_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<include
android:id="#+id/included_layout_standard_bottom_sheet"
layout="#layout/layout_standard_bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Since both recycler view and CoordinatorLayout are match_parent, There order decide which is above to another.

How to set height of ScrollView in Android?

I am very new in Android development I have designed the xml below
I started with creating a ConstraintView inside of that I created a ConstraintView with some fixed height and ScrollView.
I am facing problem to set the height of Scrollview. How to set ScrollView should start just below to ConstraintView
<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=".activity.MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/CL1"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#color/color_primary"
app:layout_constraintBottom_toTopOf="#+id/scrollView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.0">
</androidx.constraintlayout.widget.ConstraintLayout>
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="match_parent"
android:layout_height="550dp"
android:background="#color/color_primary_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
I am not sure what is your end layout goal here, but you can simply set a top to bottom constraint on your ScrollView like you have done on your RecyclerView. So just add the following in your ScrollView XML
app:layout_constraintTop_toBottomOf="#+id/CL1"
So your XML becomes
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="match_parent"
android:layout_height="550dp"
app:layout_constraintTop_toBottomOf="#+id/CL1"
android:background="#color/color_primary_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
android:fillViewport="true">

Place ImageButton in top left corner

I have a very simple fragment layout (fragment_search.xml):
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.review.SearchFragment">
<ImageButton
android:id="#+id/search_bar_button"
android:layout_width="48dp"
android:layout_height="48dp"
android:contentDescription="#string/switch_to_search_bar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_search_bar" />
<TextView
android:id="#+id/text_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
The fragment is hosted by activity_main.xml:
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/nav_view"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
My intention is for the ImageButton in fragment_search.xml to appear in the top-left corner with no gaps. For some reason, when I run the app, the icon appears with a large gap above and a small gap to the left:
In Design view, the button appears in the top-left corner but with a 1mm gap between the button and the edge of the screen.
Why is the button not appearing in the top-left corner when I run the app, and how do I fix it?
remove padding top from your activity root layout (contraintlayout) in activity_main.xml
android:paddingTop="?attr/actionBarSize"
I'm not sure what the cause of your problem is, but I think it's because your activity layout not fragment layout, try to edit your activity layout and let me know what is the result.
or you can edit your question with showing activity layout where your fragments lies there.

how to make activity can be scrolled vertically if I have view pager that has recycler view in it?

here is the simple project of this problem:
https://drive.google.com/file/d/1fs7ggSdhPbiNCWa5GIb5RIIOEKQbgo57/view?usp=sharing
in my activity, as a base, I have tab layout and view pager like this
<?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=".activities.MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout_main"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabRippleColor="#null">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager_main"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout_main" />
</androidx.constraintlayout.widget.ConstraintLayout>
and here is the code for my MainActivity
class MainActivity : AppCompatActivity() {
lateinit var tabLayout : TabLayout
lateinit var viewPager: ViewPager
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
tabLayout = findViewById(R.id.tabLayout_main)
viewPager = findViewById(R.id.viewPager_main)
val adapter = ViewPagerAdapter(supportFragmentManager)
adapter.addFragment(AFragment(),"Fragment A")
adapter.addFragment(BFragment(),"Fragment B")
viewPager.adapter = adapter
tabLayout.setupWithViewPager(viewPager)
}
}
in one fragment of my viewpager (fragment B), there is a recycler view inside fragment B.
here is the xml for fragment B
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.BFragment" >
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewB"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
here is the problem .....
if I scroll vertically in that recycler view in fragment B, it does not make my tab layout in my MainActivity scrolled. the tab layout still on the top. I want to make that tab layout scrolled and disappear from the screen when I scroll the recycler view.
I have tried to set nested scroll view in my MainActivity xml, like this code below, it doesn't work
<?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=".activities.MainActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
android:id="#+id/scrollView_verified_user_control"
android:scrollbars="vertical"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout_main"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabRippleColor="#null">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager_main"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout_main" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
java or kotlin is ok
Try wrapping your TabLayout inside a CoordinatorLayout
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/id_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<com.google.android.material.tabs.TabLayout
android:id="#+id/id_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Categories

Resources