In this blog, we are going to create an ImageView open with URL Layout in Android Studio. We will provide the latest code UI/UX layout for the user, reliable for the Android App.
Before creating the project, we have provided some assets to support its development.
Here, we have to insert the color code to customise your application project.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#024265</color>
<color name="purple_700">#012F49</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="light_purple_700">#435863</color>
</resources>
- Replace “Action Bar” with “No Action Bar”.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.UIDesignLoginSignUp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
- Import “string.xml” code given below.
We need to import some important text string code into a string.xml file.
<resources>
<string name="app_name">ImageView With URl</string>
</resources>
Download This Blog “Templates” Here
Import ImageView Dependency under “build.gradle.kts” given below.
// Glide ImageView Dependency
implementation("com.github.bumptech.glide:glide:5.0.7")
// Zoom ImageView Dependency
implementation("com.github.chrisbanes:PhotoView:2.3.0")
Import ImageView Dependency under “build.gradle.kts” given below.
<?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/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="@string/app_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Implement or Create “MainActivity” Java File.
Import Some “Variables” For Under AppCompactActivity.
PhotoView imageView;
private float scaleFactor = 1.0f;
private ScaleGestureDetector scaleDetector;
String img = "https://androidappmaterial.in/wp-content/uploads/2026/04/Bharat-App-Tutorial.png";
Import Some “Variables” For Under AppCompactActivity.
imageView = findViewById(R.id.imageView);
Glide.with(this).load(img).into(imageView);
scaleDetector = new ScaleGestureDetector(this, new ScaleGestureDetector.SimpleOnScaleGestureListener() {
@Override
public boolean onScale(ScaleGestureDetector detector) {
scaleFactor *= detector.getScaleFactor();
scaleFactor = Math.max(0.1f, Math.min(scaleFactor, 5.0f)); // Limit zoom range
imageView.setScaleX(scaleFactor);
imageView.setScaleY(scaleFactor);
return true;
}
});
}
@Override
public boolean onTouchEvent(MotionEvent event) {
scaleDetector.onTouchEvent(event);
return true;
}
Output Result in Animation View Given Below.