DEV Community: Mubarak Basha

How I Optimize My Android App from 15MB to under <2MB

Mubarak Basha — Mon, 30 Jun 2025 11:03:26 +0000

How I Optimize My Android App from 15MB to under 2MB [IMG Credit: (Mubarak Basha)]

In this blog, I’m going to share my personal experience of how I Optimized my FOSS Android app by ~90% , which led to more downloads and positive feedback. I will also share some practical ways you can do the same for your app and more. Let’s begin.

Update (July 2025):
This article was featured at #2 in Android Weekly Issue #682.
Also, my open-source app MBCompass got featured in the following issue #683 under Libraries & Code!

Why is optimizing necessary ??

Optimizing Android apps offers several benefits, including but not limited to:

Faster downloads
Reduced storage consumption
Improved overall performance.
Reduce internet bandwidth and many more.

The app that I optimized.

In this blog, I’m going to share MBCompass as an example, which is an open-source, simple yet feature-rich Android Compass app

When I first built MBCompass with new features and improvements on v1.1.4, like:

Showing the current location on the map.
Updated Compass rose.
Day/Light theme support.

In this process the APK size was significantly increased to 15.5MB. Most users expect these tools to be lightweight, ideally a few MBs at most.

People even complaining about my app on its size when I posted it on platform like reddit.

So, I decided to reduce the APK size but without compromising the feature that has already before.

What Was Taking Up Space??

MBCompass v1.1.4 APK increased to 15MB compared to previous release

When I analyze the MBCompass APK using Android Studio’s APK Analyzer tool , the issue was clear, most of the space was taken by MapLibre’s native binaries, which I use this library to just show the current location on the map.

That was one of the features the library provides. For that single feature, I’ve used the big, powerful library.

Switching to a Lightweight Alternative

I started looking for a smaller, simpler map library. That’s when I found osmdroid (which is a low-level library*) -* a lightweight replacement for Android’s MapView.

After switching to osmdroid, I had to manually handle:

Location permissions
Map tile loading
Overlays and markers

It was a bit more work, but gave me full control and customization.

Step-by-Step Optimizations Process

After switching to a different library, some other processes still have to be done before releasing the app to production.

Replaced MapLibre with osmdroid

Dropped the MapLibre dependency and rewrote the location feature using osmdroid.

Shrink resources using R8 + Proguard

In build.gradle(:app):


 buildTypes {
        release {
            isDebuggable = false
            // Enables code-related app optimization.
            isMinifyEnabled = true

            // Enables resource shrinking.
            isShrinkResources = true

            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }

    }
// ...

isMinifyEnabled = true: removes unused code/imports.
isShrinkResources = true: removes unused icons, drawables, layouts, etc.

Optimized Image Assets

Replace the use PNGs/JPEGs with WebP for Images.webp

Final Result

MBCompass v1.1.8 APK reduced to just 1.7MB

After these steps on v1.1.8 latest release , I brought the size down to just 1.7MB — a reduction of around 90%. And importantly! The core experience didn’t change instead it improved.

What I Learned

Don’t use a third-party library when you’re not fully utilizing it.
Use Prograud and R8 to optimize APK.
Smaller apps == happier users, especially on low-end devices
Keep utility apps small, users appreciate it

You Can Try It

Conclusion

That’s pretty much it, I talked about how I found what was bloating my APK, switched to a lighter map library, enabled R8 and resource shrinking, and cleaned up resources. All of that helped me bring my app from 15MB down to 1.7MB without losing features.

If you’re working on something similar, give these steps a try.

And if you’re curious, you can check out MBCompass on GitHub or F-Droid. Feedback or contributions are always welcome! Thanks for reading. I will see you on my next interesting topic.

Signing off, Mubarak Basha

LinkedIn, GitHub, X

Building Accessible Android UIs with Jetpack Compose

Mubarak Basha — Sun, 25 May 2025 09:57:29 +0000

IMG Credit (Mubarak Basha)

In this blog, we are going to learn the importance of accessible UI and practical ways to make your app accessible in Compose for users with disabilities, with complete, real code examples. Let’s Begin.

Why Accessibility Matters

More than a billion, or 1 in 6 of us people live with some form of disability. Accessible apps support:

Screen reader users (TalkBack)
Motor-impaired users (who use switch devices)
Color blind and low-vision users

Compose brings built-in support for accessibility with testing using various API’s, like Semantics, TalkBack, making this faster and seamless.

Semantics: Providing Meaning to UI Elements

Accessibility services such as screen readers rely on semantic information to interpret UI components correctly. It is important to provide meaningful descriptions rather than relying solely on visual things.

Icon(
    imageVector = Icons.Default.Home,
    contentDescription = "Navigate to home screen"
)

SettingcontentDescription to null to interactive elements (unless they are purely decorative items) leaves assistive technologies without contextual information, impairing the experience of users with disabilities.

Note: Most of the Material Compose Components like Checkbox_,_ RadioButton_,_ Switch_,_ Slider_, and_ Surface implement accessibility by default and come with the built-in semantics, but based on our use case, we might want to do it manually. Even for that, compose has a range of useful API’s

Custom Composables and Accessibility Roles

When creating custom interactive UI components, explicitly define their semantic roles (UI Meanings) and content descriptions to ensure they are announced properly. Jetpack Compose’s semantics modifier is key here (see merging and clearing semantics).

Box(
    modifier = Modifier
        .clickable { /* Handle upload action */ }
        .semantics {
            contentDescription = "Upload file"
            role = Role.Button
        }
        .padding(16.dp)
) {
    Icon(Icons.Default.CloudUpload, contentDescription = null)
    Text("Upload")
}

This approach allows TalkBack and similar tools to identify the composable as a button with the specified action.

Adequate Touch Target Size

IMG Credit: (Developer Docs) Touch Target Size

Ensure touch targets meet the recommended minimum size of 48x48dp for comfortable interaction, following Android accessibility design guidelines (Material Accessible Design).

Button(
    onClick = { /* Handle click */ },
    modifier = Modifier.sizeIn(minWidth = 48.dp, minHeight = 48.dp)
) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
}

This improves accessibility for users with motor impairments.

Managing Focus with Keyboard and Assistive Devices

Not all users interact via touch. Keyboard navigation and switches require explicit focus order management, which Compose supports via focusRequesterand focusOrder (detailed in the focus traversal order docs).

val focusRequester1 = remember { FocusRequester() }
val focusRequester2 = remember { FocusRequester() }

TextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    modifier = Modifier
        .focusRequester(focusRequester1)
        .focusOrder { next = focusRequester2 }
)

TextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    modifier = Modifier.focusRequester(focusRequester2)
)

This code ensures a logical order of focus between inputs.

Maintaining Adequate Color Contrast

IMG Credit: (Developer Docs) Increase text visibility

Using your theme’s color scheme to maintain appropriate contrast ratios in both light and dark modes, as emphasized by Material Design accessibility standards.

Text(
    text = "Welcome",
    style = MaterialTheme.typography.titleLarge,
    color = MaterialTheme.colorScheme.onBackground
)

Proper contrast improves readability for users with visual impairments.

Testing Accessibility

Use both automated checks and manual tools for testing accessibility:

Automated Compose test

@get:Rule
val composeTestRule = createComposeRule()

@Before
fun setup() {
    AccessibilityChecks.enable()
}

Manual testing tools:

Reference

Conclusion

In this quick blog, we learned the importance of accessible UI and also learned its practical uses with an example_._ I hope you will like this article. If so, please like👏 this story and share it with your friends and family, don’t forget to follow me. And I will see you in the next upcoming article with an interesting topic.

Signing off, Mubarak Basha

LinkedIn, GitHub, X

Getting Started with Material Design 3 in Jetpack Compose

Mubarak Basha — Thu, 17 Apr 2025 13:36:41 +0000

Photo by Daniel Korpai on Unsplash

In this article, you’ll learn how to integrate Material 3 in your Compose app, use the updated components, and apply best practices for building beautiful Android UIs.

Why Material 3?

Material Design 3 is Google’s latest design system, aiming to create a more expressive, adaptive, and accessible UI across Android apps. Some key benefits include:

Dynamic color that matches the user’s wallpaper (Android 12+)
New UI components like FilledTonalButton, AssistChip, and BottomAppBar
Better control over shape, elevation, and typography
Native support in Jetpack Compose

Step 1: Add Material 3 to Your Project

In your build.gradle(:app) file, add: Find the latest version here

dependencies {
   implementation("androidx.compose.material3:material3:1.3.2")
}

Step 2: Set Up Your Theme with Material 3

Create or update your Theme.kt to use MaterialTheme with dynamic color support:

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val context = LocalContext.current
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> darkColorScheme()
        else -> lightColorScheme()
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Then wrap your app’s setContent with it:

setContent {
    MyAppTheme {
        Scaffold() {
            // Your UI goes here
        }
    }
}

Custom Color Scheme

If you don’t want to rely on dynamic colors or manually create a color scheme, you can create your own custom color scheme that might reflect your branding to do this —Material 3 provides a Theme builder where you generate Color and Theme by mentioning your base color.

Step 3: Use Material 3 Components

Material 3 introduces redesigned components with updated styling:

@Composable
fun Material3Buttons() {
    Column(modifier = Modifier.padding(16.dp)) {
        Button(onClick = { /*TODO*/ }) {
            Text("Default Button")
        }

        FilledTonalButton(onClick = { }) {
            Text("Tonal Button")
        }

        ElevatedButton(onClick = { }) {
            Text("Elevated Button")
        }
    }
}

Try Card, TextField, TopAppBar, NavigationBar, and more — The full list can be founded here.

Typography & Shapes

Material 3 introduces modern typography styles like:

displayLarge, headlineSmall, titleMedium, labelLarge, etc.

You can customize them in your Typography.kt:

val Typography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 22.sp,
        letterSpacing = 0.15.sp
    )
)

The same goes for shapes:

val Shapes = Shapes(
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(16.dp),
    large = RoundedCornerShape(24.dp)
)

Dynamic Color on Android 12+

One of the coolest features of M3 is dynamic theming. On Android 12+, the system can generate color schemes from the user’s wallpaper.

This happens automatically when you use dynamicDarkColorScheme() or dynamicLightColorScheme() — it just works.

On older versions, you can fall back to predefined colors with lightColorScheme() and darkColorScheme().

Best Practices

Use MaterialTheme.colorScheme and MaterialTheme.typography instead of hardcoded values
Test your UI in light/dark mode and with accessibility settings
Avoid mixing Material 2 and Material 3 unless necessary

Sample Project

Check out this GitHub repo for a full Material 3 Compose sample:

GitHub - MubarakNative/WikiNewsFeed: WikiNewsApp: A modern Android app for fetching and displaying global news from the open-source WikiNews platform https://www.wikinews.org/

In this quick blog, we learned how to set up material 3 design system in jetpack compose and also learned its advantages. I hope you will like this article. If so, please like👏 this story and share it with your friends and family, don’t forgot to follow me. And I will see you in the next upcoming article with an interesting topic.

Signing off, Mubarak.M Basha

How to Publish Your App on F-Droid: A Beginner’s Guide

Mubarak Basha — Tue, 25 Mar 2025 15:20:57 +0000

This article covers how to publish your app to f-droid, I also pleasure to share my own experience when publishing my first app on f-droid.

What is F-Droid?

When you come across this blog post you most probably know what f-droid is But I just want to introduce you f-droid simply.

F-droid is a FOSS (free and open-source) app store for Android, similar to the Google Play Store, but the f-droid software repo hoisted on GitLab contains only free and open-source apps and the components of that app itself must comply with OSS terms.

🔗 Read more about F-Droid’s Inclusion Policy: F-Droid Inclusion Policy 🔗 Read about Repository Styling Guidelines: F-Droid Repository Style Guide

Why Publish on F-Droid?

Publishing on F-Droid has several advantages:

No account registration required
Privacy-friendly (no data sharing with third parties)
Completely free (no fees to publish your app)

How to Publish Your App on F-Droid

There are two primary ways to submit your app to F-Droid:

1. GitLab Submission Queue (Beginner-Friendly)

This method involves creating an issue on GitLab to request app packaging. It’s the simplest way to submit an app but also the slowest, because reviewers manually build the APK from the source.

MBCompass app on F-droid: https://f-droid.org/packages/com.mubarak.mbcompass/

I submitted MBCompass, my compass application, using this approach . It took about a month for my app to be included in F-Droid, even though it contained no non-free assets.

2. Metadata Merge Request (Advanced Method)

This method involves manually writing the F-Droid metadata and submitting a merge request to the fdroiddata GitLab repository.

✅ Advantages:

Faster approval process
Reduces manual work for F-Droid reviewers

This guide will focus on the GitLab Submission Queue , as it is the best option for beginners.

🔗See: F-droid Inclusion How to

Steps to Publish Your App on F-Droid

Step 1: Prepare Your App

Before submitting your app, ensure it’s ready for production:

Add an app icon
Conduct thorough testing
Follow versioning and minification best practices

🔗 Refer to the Android Developer Docs: Publish Your App

Step 2: Ensure Reproducible Builds

What are Reproducible Builds (RB)? A reproducible build ensures that the APK built from your source code is identical every time, preventing tampering or unintended modifications.

🔗 Learn more about Reproducible Builds:

Steps to Enable Reproducible Builds:

Generate a signed APK :

Open Android Studio -> Build -> Generate Signed APK
Use a release signing key instead of a debug key
Upload the signed APK to your remote Git repository

🔗 More about App Signing and RB Build:

Step 3: Use Fastlane for Metadata & Screenshots

Fastlane is an open-source automation tool that helps with app metadata management, screenshots, and deployment, and it is maintained by google now.

✅ F-droid uses fastlane for:

Add app descriptions and title
Upload screenshots
Provide app details for the F-Droid listing

🔗 How to Set Up Fastlane:

Follow this guide: Fastlane Snippet
Check an example setup: MBCompass Metadata

Step 4: Add APK Signing Blocks

F-Droid requires proper signing metadata to ensure secure and verified builds.

Add this dependenciesInfo block on*build.gradle.kts(Module:app)*

android {
    ...
    dependenciesInfo {
        includeInApk = false
        includeInBundle = false
    }
    ...
}

🔗 More about APK Signing:

Final Step: Submit Your App to the GitLab Submission Queue

Once your app is ready:

F-droid RFP issue template

Go to F-Droid’s GitLab Request for Packaging (RFP) Issues: Submit Your App
Create a new issue by selecting Minimal template.
Add necessary info like Category, Summary, and license
Wait for the review process (this can take several weeks to a month, depending on the app).

Conclusion

In this blog, I just shared my experience when uploading my one of my apps in F-droid, and I included all the possible useful links that helped me. Hopefully, it also helped you if you please❤️ this blog and share it with your niche dev. If you face some problems or challenges, feel free to reach out me. I always like to help someone throughout my journey.

Signing off, Mubarak Native, GitHub, X

Getting Started with MapLibre on Android

Mubarak Basha — Wed, 12 Mar 2025 04:32:21 +0000

All you need to know about MapLibre

In this article, we are going to learn what MapLibre Native is for rendering vector maps in Android. We will also explore the benefits of using MapLibre over other map rendering SDKs, some customization options, and more. Let’s begin!

What is MapLibre Native ??

MapLibre Native is an open-source vector map rendering library for Android. It is part of the MapLibre Organization, which provides open-source mapping solutions for various platforms, including Android, iOS, and Web.

Originally, it was a community-led fork of Mapbox GL Native for Android before Mapbox closed-sourced their implementation. Since then, the project has replaced the closed-source components with fully open-source alternatives.

Why MapLibre Native ??

You might wonder why we need to use MapLibre Native when we already have Google Maps, Mapbox, Here SDKs, and other mapping providers.

Yes, many software SDKs and libraries exist to integrate maps into products, but they often come with vendor lock-in.

For example, if you want to set up your own map server to reduce the cost of monthly/annual billing , you can’t do that with proprietary SDKs. Additionally, they offer limited customization options.

In short, MapLibre Native allows you to swap out implementations easily , offering greater flexibility and control.

How to work with MapLibre Native??

Before diving into integration, let’s discuss how MapLibre Native handles map data.

MapLibre Native is a map renderer — to display a map, we need map data. In my previous article, I explained the types of map tiles.

MapLibre Native renders vector tile data , which can be self-hosted using a tile server (e.g., TileServer GL with a simple S3 CDN ). Alternatively, multiple vector tile providers are available.

For a high-level understanding, we need to display data in Mapbox Vector Tile (MVT) format, such as this example:

https://demotiles.maplibre.org/style.json

More details: https://maplibre.org/maplibre-style-spec/

What do we build ??

In this demo, we will build a views (XML) based simple app that uses OpenFreeMap tile data to display a world map.

For production apps, you can self-host your data using Protomaps or TileServer GL.

Note: There is a community folk for MapLibre Native for Jetpack Compose checkout here.

build.gradle.kts(Module:app)

You can find the latest version of this maplibre native SDK at Maven Central here .

    dependencies {
       // ...
    implementation ("org.maplibre.gl:android-sdk:11.8.2")
       // ...
    }

Don’t forget to add internet permission to your app for fetching map tiles from the server.

AndroidManifest.xml


<!-- ... -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- ... -->

Step 1:

Let’s start by adding MapViewin your XML layout on your Activity/fragment .

<org.maplibre.android.maps.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

Step 2: Initialize this MapView in your fragment or Activity

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import org.maplibre.android.MapLibre
import org.maplibre.android.camera.CameraPosition
import org.maplibre.android.geometry.LatLng
import org.maplibre.android.maps.MapView

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    // Declare a variable for MapView
    private lateinit var mapView: MapView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Get an instance of MapLibre.
        MapLibre.getInstance(this)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Init the MapView
        mapView = binding.mapView
        mapView.getMapAsync { map ->
            map.setStyle("https://tiles.openfreemap.org/styles/liberty")
            // Shows full world view
            map.cameraPosition = CameraPosition.Builder().target(LatLng(0.0,0.0)).zoom(1.0).build()
        }
    }

    override fun onStart() {
        super.onStart()
        mapView.onStart()
    }

    override fun onResume() {
        super.onResume()
        mapView.onResume()
    }

    override fun onPause() {
        super.onPause()
        mapView.onPause()
    }

    override fun onStop() {
        super.onStop()
        mapView.onStop()
    }

    override fun onLowMemory() {
        super.onLowMemory()
        mapView.onLowMemory()
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView.onDestroy()
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView.onSaveInstanceState(outState)
    }
}

When we run the app, it successfully shows the world map from OpenFreeMap data for other data sources checkout TestStyles from MapLibreAndroidTestApp.

Conclusion

That’s it we learned What is MapLibre Native , why we use MapLibre and also learned its benefits over other sdk for complete source code with a additional map features, checkout the repository down below.

GitHub - MubarakNative/MBCompass: A fully functional jetpack compose compass app that uses device magnetometer to find cardinal direction

If you found this article helpful and learned something new, please consider ❤️ and sharing it with your friends. This is a niche topic, and very few articles cover it in detail. Creating content like this takes hours of effort — from designing a thumbnail to structuring the information in an easy-to-understand way.

Your support motivates me to keep writing more valuable articles. See you in the next one! 🚀

How to Build Offline Maps with OpenStreetMap on Android

Mubarak Basha — Sat, 08 Feb 2025 13:41:27 +0000

How to build offline maps with OpenStreetMap on android

Want to add offline maps to your Android app without relying on paid mapping services? OpenStreetMap (OSM) is a powerful, free, and open-source alternative that lets you integrate customizable, offline-friendly maps into your project.

In this guide, we’ll cover:

✅ What is OpenStreetMap (OSM)?

✅ Types of map tiles (Raster vs. Vector) & their differences

✅ Best libraries for rendering offline vector tiles on Android

✅ How to build an offline map app using the Mapsforge library

By the end, you’ll have a working offline OpenStreetMap-based Android app without needing a tile server. Let’s get started! 🚀

What is OpenStreetMap 🌍?

OpenStreetMap (OSM) provides open map data that is built by a community of mappers around the world and maintains the info about roads, trails, hospitals, railway stations, and much more.

Why OSM ?

Because OpenStreetMap is free and open map data and it is community driven means you are free to use it for any purpose as long as you credit OpenStreetMap and its contributors.

“Used in popular free navigation apps like Organic Maps and OsmAnd ”

“No licensing fees like Google Maps”

More about OSM see FAQ WIKI and License.

🗺️Map tiles available in OSM ?

Map rendering refers to the process of taking raw geospatial data and making a visual map from it.

There are two different types of tiles:

Raster tiles
Vector tiles

Raster tiles are just pre-rendered images , (ex: here) and they are displayed in a grid arrangement to form a visual map. Raster maps are usually harder to customize on the client side and require a tile server.

Vector tiles are just like raster tiles, but instead of pre-rendered images as a tile, the return data contains map data, thus adding complexity to the client application that they need to render its data on the fly to form a visual representation of map in it.

Also, vector tiles address some limitations of raster tiles, like. Customization, smooth zooming and more. Read more about it here.

Note: In this article we are focused on the Vector tile rendering library on Android, because it is easy to implement it on an offline OSM-based map app, and it doesn’t require a tile server.

As I mentioned earlier, vector maps are somewhat complex to render them on the client side (Mobile, Desktop, and Web) because they only contain map data. Fortunately, the rendering libraries handle the complex tasks for us. We will see these libraries in the details in the next section.

Offline Vector Rendering libraries

In this section, we are more specifically going to explore the available libraries for rendering offline vector map based on OSM for Android & Java platforms.

Apart from these mentioned libraries, there are other libraries as mentioned in the Android Wiki of OSM. The reason why I am not listing those libraries is because they often have a vendor-lock-in, which means proprietary licensing terms and don’t completely support the offline maps.

Integrating Offline OSM Maps in an Android App

In today’s article I am going to show an example of Mapsforge library as a vector map renderer for android, because it fully supports offline maps, and has a lot of online map providers.

Note: I am not a member or a contributor of any listed libraries here, and I am not promoting any libraries, so, it is full of my research effects and things I learnt that I am happy to share with you without expecting any profits.

Let’s begin by adding the necessary dependencies for Mapsforge. Check out the latest version here.

// Mapsforge Core
    implementation ("org.mapsforge:mapsforge-core:0.23.0")
    implementation ("org.mapsforge:mapsforge-map:0.23.0")
    implementation ("org.mapsforge:mapsforge-map-reader:0.23.0")
    implementation ("org.mapsforge:mapsforge-themes:0.23.0")

// Android dependencies for Mapsforge
    implementation ("org.mapsforge:mapsforge-map-android:0.23.0")
    implementation ("com.caverock:androidsvg:1.4")

    // Mapsforge POI core (OPTIONAL)
    implementation ("org.mapsforge:mapsforge-poi:0.23.0")

    // Mapsforge POI android specific (OPTIONAL)
    implementation ("org.mapsforge:mapsforge-poi-android:0.23.0")

Here, we are going to create a basic application (see MapForgeMapView.java ) that renders the osm vector map that is already stored in our mobile file system. Download the map that you want to display in the app.

And its corresponding MainActivity.kt

MapsForge Application Demo

This is only a simple demo. Mapsforge can do more than this. Don’t forget to read all the docs on the Mapsforge page.

As I mentioned previously, vector tiles can be easily styled. The mapsforge library also supports styling using the XML format. See here for more details. I am also working on an OSM-based offline map app, which is in an development state right now.

GitHub - MubarakNative/OSMDemo: A Demo android application to integrate OpenStreetMap based map using Mapsforge library

Contributing to OpenStreetMap

If you want to give back to the community and improve OpenStreetMap by adding missing places or updating existing data, you’re always welcome! Several tools make contributing easy:

On Android : Use StreetComplete — Easy to use OpenStreetMap editor for Android
On Desktop : Use JOSM (Java OpenStreetMap Editor) — A powerful tool for advanced editing and customization.

Conclusion

I hope you found this article helpful! If you appreciate my research and effort, 🙏 please consider ❤️ and sharing it . Your support motivates me to continue creating high-quality, free content for everyone. Happy mapping!🌍

Comprehensive Guide: Get User Location on Android with Jetpack Compose

Mubarak Basha — Thu, 09 Jan 2025 09:33:22 +0000

Get user location on android using google’s fused location provider and Jetpack Compose

In this article, we are going to learn about Google’s fused location provider client for accessing user location on Android, compare it with Android’s native LocationManager API, permission handling for location, build a real-world compose app and more. Let’s begin.

What is Fused Location Provider ?

Fused location provider is a location API from Google Play Services. It combines several additional services from Android to get the location, like Wi-Fi and GPS based on their availability for battery efficiency.

Why Fused Location Provider API ??

To access the device’s geographical location, Android natively has a LocationManager api. Why do we need this API? Well, Android has this LocationManager API to access all the location updates. But when we have a requirement to combine different services, as I mentioned above based on availability. We need to write a lot of boilerplate code to achieve the same thing in the fused provider client. It offers a simple API to work with considering power efficiency.

Key Components when requesting Location

Before we implementing requesting location on a android, We must know what are the type of location service available for us. here it follows

Foreground Location

last known location
location updates

Background Location

Note: In this article we are going to only focus on foreground location access, especially (2. location updates in detail). Not all apps have a requirement for accessing locations in the background. Special use cases only have this requirement, like for Geo-fencing.

last known location:

Using the fused location provider, we are able to get the last known location of the device using the getLastLocation()function. It returns the cached location object from the past currently available. It may return null if there are no cached values available.

fusedLocationClient.lastLocation
        .addOnSuccessListener { location : Location? ->
            // last known location. this can be null.
        }

For use cases like map, driving, walking, apps the location updates would be more appropriate.

location updates

For current continued location update at a specific intervals location updates will be used. it return the updates based on the currently-available location service such as Wi-Fi and GPS.

Request the location permissions.

To access system location, we need to request two permissions at runtime, ACCESS_FINE_LOCATION and ACCESS_COARSE_LOCATION, because on Android 12 (API level 31) or higher, users have a choice to provide a coarse location (approx. location) only, even if we declare fine permissions on the manifest. Read more about it here.

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Handling permission request

Here, the below code implementation uses google Accompanist Permissions library to make things easier for this demo, If you like to handle the permissions yourself in a jetpack compose, I recommend using rememberLauncherForActivityResult() API.

In this implementation, we have a better way to request location permissions as per our need for both ACCESS_FINE_LOCATION and ACCESS_COARSE_LOCATION, and we also handle the permission rejection by showing a rational alert dialog to the user if they deny the permission we have requested.

See how this example app requests the permission (gif) here

Start location request

Before we going to receive the location update, we need to request the location that specifies the required level of accuracy/power consumption and desired update interval, and the device automatically makes the appropriate changes to system settings. These settings are defined by the LocationRequest data object.

The LocationRequest object has multiple parameters to configure. Here are some important parameters as follows:

Priority

Sets the setPriority(int priority) of the location request.

The default value is Priority.PRIORITY_BALANCED_POWER_ACCURACY— Use this setting to request location precision to within a city block, which is an accuracy of approximately 100 meters.

Priority.PRIORITY_HIGH_ACCURACY — Use this setting to request the most precise location possible.

Update interval

setInterval(long intervalMillis) — Sets the desired interval of location updates.

Create the location request and set the parameters as shown in this code sample:

  fun createLocationRequest() {
    val locationRequest = LocationRequest.Builder(Priority.PRIORITY_HIGH_ACCURACY, 2000)
        .build()
}

The priority of PRIORITY_HIGH_ACCURACY is ideal for map apps, the requires current real time locations.

Once the location request is in place, we can start the regular location updates by calling requestLocationUpdates()

Note: requestLocationUpdates() has two function overloads. One parameter is (LocationRequestrequest, LocationCallback callback, Looper looper) and the second one is (LocationRequest with a Pending Intent.) If you receive location updates in the background, pending intent overload will be used. For foreground use cases, prefer to listen for location updates via a listener or callback instead of a pending intent.

Here, we receive updates in the foreground, so let’s use theLocationCallbackapproach. Call requestLocationUpdates(), passing it your instance of the LocationRequest object, and a LocationCallback.

Note: Here we use DisposableEffect for receiving and removing listing updates for location, based on application lifecycle. Receive when the application is in the foreground using our requestLocationUpdates and stop when the application is in the background using removeLocationUpdates(locationCallback).

Finally, receive updates using location update callback

With our LocationCallback.onLocationResult() callback method we get the LocationResult. Using this we get a Locationobjects containing location’s latitude and longitude. The following snippet shows how you can do that.

    // Only register the location updates effect when we have a locationRequest
    if (locationRequest != null) {
        LocationUpdatesEffect(locationRequest!!) { locationResult ->
            for (currentLocation in locationResult.locations) {
                // Update UI with location data as per your needs.
            }
        }
    }

Here is the full implementation of this code by building a LocateU jetpack compose location demo app:

LocateU App

GitHub - MubarakNative/LocateU: Location aware android app demo using google fusedlocationprovider

Conclusion

In this article, I explained what is fused location provider API is, and how to implement it in our Android project and more. I hope you like this article and learn its use-cases. If yes, please consider supporting me 👏. To stay motivated to creating high-quality free articles, I will see you on my next interesting topic with an interesting article.

Signing off, Mubarak Native

A Modern WebView Alternative: AndroidX Browser for Jetpack Compose

Mubarak Basha — Sat, 14 Dec 2024 07:22:31 +0000

Welcome back! In this article, we are going to learn what is androidx.browser library, and how it is the best way to display web content in our android app, also learn how to integrate this into our android studio project, and explore some customization in it for displaying web content and more. Let’s begin.

What is browser library in androidx package?

androidx.browser library helps us to display the web pages in the user’s default browser through Android Custom Tabs. For instance, in a news app, when the user clicks on the detail page for specific news that go to the specific website, we can show this webpage in our app from a user’s default browser application. It might be chrome, or any other browser they’ve set as default. This approach ensures a better user experience while leveraging the browser’s capabilities and security features.

Why android custom tabs?

Displaying web pages as a part of our application is a common requirement for android apps. I see a lot of apps that use WebView for just displaying web pages within their app. It comes with several drawbacks:

Heavy Context Switch: It launches the actual browser, which is a heavy context switch for users that isn’t also customizable like It doesn’t include the features of a fully developed web browser, such as navigation controls or an address bar
Compose Integration Challenges: Apart from this, WebView is from the Views System, so there is no straight forward implementation to integrate into a compose project. While interoperability APIs like AndroidView can bridge the gap, this isn’t an ideal or elegant solution.

So, why stick with WebView for displaying web pages? Instead, use Custom Tabs!

WikiNews App demo that has Custom Tab implementation

Integrating on a Compose Project

Add the dependencies for the artifacts you need in the build.gradle file for your app or module:

dependencies {
    implementation("androidx.browser:browser:1.8.0")
}

Use the CustomTabsIntent.Builder to create a CustomTabsIntent and launch the Custom Tab by calling launchUrl() and passing an Uri:

val url = "https://kotlinlang.org/docs/home.html"

val intent = CustomTabsIntent.Builder()
        .setShowTitle(true) //
        .setUrlBarHidingEnabled(true)
        .build()
    intent.launchUrl(this@MainActivity, Uri.parse(url))

Customizing the appearances

val intent = CustomTabsIntent.Builder()
…
.setShowTitle(true)
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.setUrlBarHidingEnabled(true)
.build();

.setShowTitle(true) — Sets whether the web page title should be shown in the custom tab.
.setStartAnimations(…) and .setExitAnimations — Enter and Exit animations when user enters and leaves the web page.
.setUrlBarHidingEnabled — Hide the URL bar on scroll to give the user more space to explore web content.

These are just a few basic customizations. There’s much more you can do, like adding custom menu items, or integrating Chrome-specific features etc.

For a comprehensive guide, check out the official documentation here. here.

Conclusion

In this article, we explored how the androidx.browser library and Android Custom Tabs provide a modern, secure, and user-friendly alternative to WebView for displaying web content within Android applications. With features like seamless integration with the user's default browser, enhanced security, and extensive customization options, Custom Tabs offer an efficient way to enrich your app's functionality while ensuring a smooth user experience.

For real world demonstration of this custom tabs don’t forgot to checkout my WikiNews Github project.

GitHub - MubarakNative/WikiNewsFeed: WikiNewsApp: A modern Android client for fetching and displaying global news from the open-source WikiNews platform https://www.wikinews.org/

Get your app for larger screens using window-size classes

Mubarak Basha — Sat, 29 Jun 2024 16:10:48 +0000

In this article, we are going to learn how to optimize our app to look better on every screen-sizes. It includes a phone, tablet and even a desktop (Chrome OS) and also learn why we need to consider optimizing our app for larger screens and more. Let’s begin.

Why do we need to support larger screen-sizes?

Android not only runs on smartphones, it also runs on Tablet, Desktop (Chrome OS), Foldables, Automotive and also on Smart TV’s with over three billion active devices. We are developers we ensure to provide a seamless experience on every platform, foldables are now the current hot topic is that every smartphone brand releases their own version of foldables. They dynamically change their screen sizes from a phone to a tablet-sized display.

How to support large screen-sizes?

To support every screen-size, we need to make our layout adaptive , so they adapt its size based on screen size. We achieve this by using window-size-classes on android. They provide high level abstraction of screen size by providing these simple types: compact , medium , and expanded , so we can easily make UI design decisions based on screen sizes. Ex: in compact we show a navigation bar or model navigation drawer, there are 2 types of window-size-classes

Height
Width

We usually consider width size class because most of the content in our app scrolls vertically.

Window-Size-Classes

To get the current window-size, let’s add one dependency to our libs.versions.toml

[versions]
material3AdaptiveNavigationSuite = "1.3.0-beta04"

[libraries]
androidx-material3-adaptive-navigation-suite = { module = "androidx.compose.material3:material3-adaptive-navigation-suite", version.ref = "material3AdaptiveNavigationSuite" }

And define it on build.gradle.kts(module:app)

dependencies {

 // NavigationSuiteScaffold
implementation(libs.androidx.material3.adaptive.navigation.suite)
}

Note: The material adaptive library is currently in beta. Check out the latest releases here

We have the two following benefits for adding this dependency

One is obvious, we can access the window-size class for both height and width by using the currentWindowAdaptiveInfo () function.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass.windowWidthSizeClass

So we can make UI design decisions about something like that.

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun App(
    widthSizeClass: WindowWidthSizeClass
) {
    // Perform logic on the size class to decide whether to show navigation rail or not.
    val isExpanded = windowSizeClass == WindowWidthSizeClass.EXPANDED

    Row {
        if (isExpanded) {
            NavigationRail {
                NavigationRailItem(
                    /* ... */
                )
            }
        }
        DefaultNavGraph(/* ... */)
    }
}

The second one is that we have access to NavigationSuiteScaffold which simplifies the navigation UI decision logic for us, based on window-size.

It shows the bottom navigation bar if the windowsize is in a compact or in a table-top (horizontal) position, and it shows navigation rail for everything else.

For what screen-size, which navigation layout is best ?

As per Material Design guidelines, window size class

Compact (Width < 600 dp): Use Navigation bar, modal navigation drawer
Medium (600 dp≤ width < 840 dp): Use Navigation rail, modal navigation drawer
Expanded (840 ≤ width < 1200*): Use Navigation rail, modal or standard navigation drawer (for expanded use 2 pane layout if you use list-detail screen by using ListDetailPaneScaffold)

Note: ListDetailPaneScaffold is from a material-adaptive library which is currently in alpha, and it also is not supporting Navigation compose yet, for view-based app use SlidingPaneLayout.

Let’s see a real world demo

As I already mentioned, by using NavigationSuiteScaffold , it really simplifies our work. We don’t need to write a logic based on window-size-class ourselves. It does for us out of the box. Let’s get into a demo. Next, we also learn how to manually show navigation layout based on window-size-classes.

What do we build??

In this app we don’t focus on the content of the screen, instead just showing the text that displays, our current destination. Our goal is just displaying a navigation layout based on window-size.

Let’s implement it:

As we already added the required dependency, which is navigation-suite from material 3, so let’s focus on code.

For our top level destinations, I added an enum class. For that, here is that code.

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    DRAWING(R.string.draw, Icons.Default.Draw, R.string.draw),
    EDIT(R.string.edit, Icons.Default.Edit, R.string.edit),
    SETTINGS(R.string.profile, Icons.Default.Person, R.string.settings),
}

And let’s call the NavigationSuiteScaffold and pass the necessary arguments

As you can see the code how easy it is to implement the navigation layout based on window-size class when we use NavigationSuiteScaffold, we don’t need to write. Single conditional statement for the window-size class

If you want, we can further customize it. If you want to show other navigation layout based on window-size, you can do so by passing another parameter in NavigationSuiteScaffold named layoutType.

val adaptiveInfo = currentWindowAdaptiveInfo()

    /* Optional */
    val customNavSuiteType = with(adaptiveInfo) {
        if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
            NavigationSuiteType.NavigationRail
        } else {
            NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
        }
    }

Here we customize the navigation layout based on the window class. If we are currently on the EXPANDED screen, we show the navigation rail instead of the default navigation bar , our layout screen is considered as an EXPANDED if the below criteria meet:

Phone in landscape
Tablet in landscape
Foldable in landscape (unfolded state)
Desktop (Chrome OS)

Now we have learned how to work with NavigationSuiteScaffold. Now let’s move on to more customized option.

Handling navigation layout decisions ourselves by using Window-Size-Classes

Now let’s explore how to handle navigation layout based on Window-Size-Class ourselves.

As you can see in the code, we conditionally show Navigation Rail based on screen-size by using

val isExpanded = widthSizeClass == WindowWidthSizeClass.EXPANDED

Let’s call this function in MainActivity.kt

YourAppTheme{
    val windowWidthSizeClass = currentWindowAdaptiveInfo().windowSizeClass
    OsbApp(windowWidthSizeClass.windowWidthSizeClass) // here we using Width Size class.
}

When you run the app, it shows an appropriate navigation layout based on widow-size

Conditionally show a navigation layout based on window-size.

The source code of the NavigationSuiteScaffold demo is available on this repository:

GitHub - MubarakNative/Compose-Code-Examples at navigation-suite-scaffold

For real world application, checkout GitHub - MubarakNative/WikiNewsFeed

In this article, we learned how to provide the best user-experience on larger screen sizes and also learned its use cases. I hope you will like this article. If so, please like this story and share it with your friends and family. And i will see you in the next upcoming article with an interesting topic.

Signing off, Mubarak Basha