Skip to content

android: Convert progress indicator to Compose UI #46353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yezhizhen merged 1 commit into from
Jul 9, 2026
Merged

android: Convert progress indicator to Compose UI #46353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 15 additions & 7 deletions support/android/apk/servoapp/src/main/java/org/servo/servoshell/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,22 @@ import android.view.inputmethod.InputMethodManager
import android.widget.EditText
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.core.content.getSystemService
import androidx.core.view.isVisible
import androidx.preference.PreferenceManager
import com.google.android.material.progressindicator.CircularProgressIndicator
import org.servo.servoview.Servo
import org.servo.servoview.ServoView

Expand All @@ -41,7 +44,6 @@ class MainActivity : AppCompatActivity(), Servo.Client {
private lateinit var urlField: EditText
private var urlFieldIsFocused = false

private lateinit var progressBar: CircularProgressIndicator
private var canGoBackState = mutableStateOf(false)
private var canGoForwardState = mutableStateOf(false)
private var isRefreshingState = mutableStateOf(false)
Expand All @@ -62,7 +64,6 @@ class MainActivity : AppCompatActivity(), Servo.Client {

servoView = findViewById(R.id.servoview)
urlField = findViewById(R.id.urlfield)
progressBar = findViewById(R.id.progressbar)

historyManager = HistoryManager(this)

Expand Down Expand Up @@ -163,6 +164,16 @@ class MainActivity : AppCompatActivity(), Servo.Client {
}
}

findViewById<ComposeView>(R.id.progressbar).setContent {
if (isRefreshingState.value) {
CircularProgressIndicator(
modifier = Modifier
.padding(end = 10.dp)

@yezhizhen yezhizhen Jul 8, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. There's no concept of margin but only padding in Compose.

@veyndan veyndan Jul 8, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it depends on which order around the padding and size is. If the function calls were flipped, then it acts like padding.

.size(20.dp),
)
}
}

servoView.setClient(this)
servoView.requestFocus()

Expand Down Expand Up @@ -283,8 +294,6 @@ class MainActivity : AppCompatActivity(), Servo.Client {
// back to a page that is already cached.
Log.i(TAG, "onLoadStarted: ")
isRefreshingState.value = true

progressBar.isVisible = true
}

// INFO: This currently gets called multiple times on each load.
Expand All @@ -297,7 +306,6 @@ class MainActivity : AppCompatActivity(), Servo.Client {
historyManager.addEntry(currentUrl, currentTitle)
}
isRefreshingState.value = false
progressBar.isVisible = false
}

override fun onTitleChanged(title: String?) {
Expand Down
11 changes: 3 additions & 8 deletions support/android/apk/servoapp/src/main/res/layout-w600dp/activity_main.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
Expand Down Expand Up @@ -38,14 +37,10 @@
android:singleLine="true"
android:layout_marginEnd="10dp" />

<com.google.android.material.progressindicator.CircularProgressIndicator
<androidx.compose.ui.platform.ComposeView
android:id="@+id/progressbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:indeterminate="true"
android:visibility="gone"
app:indicatorSize="20dp" />
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<androidx.compose.ui.platform.ComposeView
android:id="@+id/settings_menu_item"
Expand Down
12 changes: 4 additions & 8 deletions support/android/apk/servoapp/src/main/res/layout/activity_main.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
android:id="@+id/urlfield"
style="@android:style/Widget.Material.EditText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_height="wrap_content"

@veyndan veyndan Jul 7, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is required, otherwise the field is clipped vertically when the progress indicator is visible. It's a bit counterintuitive. It's been so long since I've dealt extensively with Android Views, so I'm not really sure why this works, just that it does.

@yezhizhen yezhizhen Jul 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this no longer matters anyway after full migration in the future.
Might be some weird interaction with legacy layout.

android:layout_weight="1"
android:autofillHints="url"
android:hint="@string/url_or_search"
Expand All @@ -31,14 +31,10 @@
android:singleLine="true"
android:layout_marginEnd="10dp" />

<com.google.android.material.progressindicator.CircularProgressIndicator
<androidx.compose.ui.platform.ComposeView
android:id="@+id/progressbar"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="10dp"
android:indeterminate="true"
android:visibility="gone"
app:indicatorSize="20dp" />
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>
</com.google.android.material.appbar.MaterialToolbar>
Expand Down
Loading