I have an activity which I will show xml for below, containing a webView inside an appBarLayout. Now to be frank, I don't know where the appBarLayout came from because I dont remember adding it in. But anyways, the screen has stacked in the following order top->bottom: a textView, a videoView, and a webView. So the HTML being displayed in the webview is only maybe the bottom half of the screen. Below the xml snippet, I have a image of how this looks from the design POV. The closest I ever got to scrolling is if the webView and friends are NOT children of appBarLayout but then the webview takes up entire screen which is not desirable.
I admit, this probably is setup wrong but I will gladly take whatever advice you have and suggestions on editing the way this is arranged/configured.
Activity XML
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Lesson">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true"
android:scrollbars="vertical"
android:theme="@style/Theme.ProjectName.AppBarOverlay"
android:verticalScrollbarPosition="right">
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="64dp"
android:fontFamily="@font/reem_kufi"
android:gravity="center"
android:isScrollContainer="false"
android:linksClickable="true"
android:text="Title Goes Here"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:textStyle="bold" />
<com.pierfrancescosoffritti.androidyoutubeplayer.core.player.views.YouTubePlayerView
android:id="@+id/videoView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<WebView
android:id="@+id/lessonContentView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:isScrollContainer="true"
android:nestedScrollingEnabled="true"
android:overScrollMode="ifContentScrolls"
android:persistentDrawingCache="scrolling"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:layout_scrollFlags="scroll" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Kotlin File
class Lesson : AppCompatActivity() {
private lateinit var appBarConfiguration: AppBarConfiguration
private lateinit var binding: ActivityLessonBinding
private lateinit var webView: WebView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityLessonBinding.inflate(layoutInflater)
setContentView(binding.root)
webView = findViewById(R.id.lessonContentView)
if(webView != null){
webView.requestFocus()
webView.settings.javaScriptEnabled = true
webView.isSoundEffectsEnabled = true
webView.isVerticalScrollBarEnabled = true
webView.settings.loadWithOverviewMode = true
webView.settings.allowContentAccess = true
webView.settings.domStorageEnabled = true
webView.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
if (url != null) {
view?.loadUrl(url)
}
return true
}
}
webView.loadUrl("file:///android_asset/lesson.html")
}
val youTubePlayerView: YouTubePlayerView? = findViewById(R.id.videoView)
if (youTubePlayerView != null) {
lifecycle.addObserver(youTubePlayerView)
}
youTubePlayerView?.addYouTubePlayerListener(object : AbstractYouTubePlayerListener() {
override fun onReady(youTubePlayer: YouTubePlayer) {
val videoId = "yJdkdiAly0w"
youTubePlayer.cueVideo(videoId, 0F)
}
})
}
override fun onSupportNavigateUp(): Boolean {
val navController = findNavController(R.id.nav_host_fragment_content_lesson)
return navController.navigateUp(appBarConfiguration)
|| super.onSupportNavigateUp()
}
}
How it looked when I got it to scroll but not how I wanted
I have already tried the advice given on several posts here on StackOverflow so please do not just mark as Duplicate and run off. Probably a quarter of the code in the project right now is from me trying to get scrolling to work with the advice of this site.
I have tried messing with all the scroll attributes for basically every view on here.
I have added StackOverflow recommended items such as the app:layout_behavior and these webview settings below:
webView.isVerticalScrollBarEnabled = true
webView.settings.loadWithOverviewMode = true
webView.settings.allowContentAccess = true
When I got it to scroll but wasnt correct, shown in image link earlier, I had removed all the views from the appBarLayout parent making everything a direct child of what this says is a "CoordinatorLayout".
Received help outside of SO (Discord) and I will go over the changes below.
First, I removed the appBarLayout. As originally mentioned, I wasn't even sure about it or how it got there as a parent of everything. I also removed ITS PARENT the coordinatorLayout by changing it to a constraintLayout. This is the parent of my 3 needed pieces (text, video, web) all stacked on top of each other. A few attributes were removed from the xml as well.
Please feel free to comment if you see this in the future and have questions about how I solved 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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Lesson">
<com.pierfrancescosoffritti.androidyoutubeplayer.core.player.views.YouTubePlayerView
android:id="@+id/videoView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
<TextView
android:id="@+id/textView2"
android:layout_width="412dp"
android:layout_height="54dp"
android:fontFamily="@font/reem_kufi"
android:gravity="center"
android:isScrollContainer="false"
android:linksClickable="true"
android:text="Winds & Temperatures Aloft"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<WebView
android:id="@+id/lessonContentView"
android:layout_width="412dp"
android:layout_height="0dp"
android:fadeScrollbars="true"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/videoView"
app:layout_constraintVertical_bias="0.483"
app:layout_scrollFlags="scroll" />
</androidx.constraintlayout.widget.ConstraintLayout>