Images that have been resized on Android appear blurry when viewed on the second page

Customizing the Toolbar:

#main_bar {
    background: url(../images/logo.jpg) 99% 50% no-repeat;
    background-size: auto 80%;
}

The original size of logo.jpg is 220x266px

The toolbar has a fixed height of 46px

Therefore, the background image appears to be about 36px in height

It should be noted that the toolbar design remains consistent across all two pages

However, an issue arises as follows: The clarity of the image is perfect upon app initialization but becomes blurry when transitioning to the second page. The blurriness persists even upon returning to the first page.

After attempting to adjust with the following code:

background-size: auto 36px;

The problem still persists despite this change

Any advice or recommendations on how to address this concern would be greatly appreciated

Thank you, Irina

androidcssresizebackground-image

Answer №1

Here is a method that resizes a Bitmap image in Java:


public Bitmap resizeBitmapImage(String filePath, int targetWidth, int targetHeight) {
    Bitmap bitmapImage = null;
    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeFile(filePath, options);
    double sampleSize = 0;

    boolean scaleByHeight = Math.abs(options.outHeight - targetHeight) >= Math.abs(options.outWidth - targetWidth);

    if (options.outHeight * options.outWidth * 2 >= 1638) {
        sampleSize = scaleByHeight ? options.outHeight / targetHeight : options.outWidth / targetWidth;
        sampleSize = (int) Math.pow(2d, Math.floor(Math.log(sampleSize) / Math.log(2d)));
    }

    options.inJustDecodeBounds = false;
    options.inTempStorage = new byte[128];
    
    while (true) {
        try {
            options.inSampleSize = (int) sampleSize;
            bitmapImage = BitmapFactory.decodeFile(filePath, options);
            break;
        } catch (Exception ex) {
            try {
                sampleSize = sampleSize * 2;
            } catch (Exception ex1) {
                
            }
        }
    }

    return bitmapImage;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Improved efficiency in CSS for left transition animations

Here is the current code I am using: .s2 { top: 150px; left: 20px; position: absolute; transition: left 300ms linear; } I am currently updating the left position dynamically using JavaScript based on scroll events. However, I have noticed that th ...

javascriptcssanimation

What is the best way to eliminate excessive margin-bottom on a floating image?

Is it possible to maintain the same margin at the right and bottom of an image when using <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p>? ...

htmlcssxhtml

Implement the color codes specified in the AngularJS file into the SASS file

Once the user logs in, I retrieve a color code that is stored in localstorage and use it throughout the application. However, the challenge lies in replacing this color code in the SASS file. $Primary-color:#491e6a; $Secondary-color:#e5673a; $button-color ...

javascriptcssangularjssass

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

javascriptcssreactjsnpm

Simple HTML alignment tool instead of Bootstrap

Are there any other options besides Bootstrap for a predefined CSS library that can help align and customize an HTML page quickly? I have been using ASP.NET and Bootstrap for my development, but I'm looking for something new. If there is another libr ...

htmlcssasp.netfrontend

Angular: How to restrict the compilation of rgba() to #rrggbbaa in your codebase

There are some browsers that do not support #rrggbbaa but do support rgba(). However, in my Angular project, background-color: rgba(58, 58, 58, 0.9) in common.css was compiled to background-color:#3a3a3ae6 in style.[hash].css. How can I prevent this co ...

cssangular

What is the best way to decipher JSON using Java?

Currently in the midst of developing an Android test app that requires JSON test data parsing. The structure of the JSON data is as follows: {"id":1,"name":"Test Test","questions":[{"id":1,"test":1,"text":"Can you answer this question?","answers":[{"id": ...

javaandroidjson

What could be causing the page to automatically scroll to the bottom upon loading?

My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...

javascriptjquerycsstwitter-bootstrap

Building a Dynamic Web Widget with the Perfect Blend of HTML, JS,

While developing a javascript-based web widget, I am aiming to steer clear of using iframes and avoid relying on the page's CSS. It is infeasible for me to utilize custom CSS, as it defeats the purpose, and iframe integration would not present a user- ...

javascripthtmlcsstwitter-bootstrapweb-widget

Ways to align grid components at the center in MUI frameworks?

I am brand new to using MUI and currently experimenting with the grid functionality. <Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> {data.data.map((item, index) => { ...

cssmaterial-ui

jQuery and Bootstrap collide

Here is my jQuery code that toggles visibility of different divs based on a click event: $(function () { $(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide(); $("a").bind("click", function () { $(".conor-div, . ...

javascripthtmljquerycssbootstrap-4

CSS Table Style Chaos

When styling a table using CSS, I encountered this line within the code: .pricing tr td:last-child { text-align: right; } This particular line ensures that the text in the last column of the table aligns to the right. The class "pricing" is applied to th ...

htmlcsscss-tables

Obtain the text that is shown for an input field

My website is currently utilizing Angular Material, which is causing the text format in my type='time' input field to change. I am looking for a way to verify this text, but none of the methods I have tried give me the actual displayed text. I a ...

javascriptcssangularjsseleniumangular-material

Tricks for refreshing cached web page assets in the year 2023

So far, here are some of the old Cache Buster techniques I've come across: Adding a query string in the link src: /mstylesheet.css?cache_buster=12345 Changing the filename each time: /mstylesheet-12345.css Using Apache with Cache-Control "must-revali ...

javascripthtmlcssbrowser-cache

When my script is located in the head of the HTML page, I am unable to

My goal is to make my JavaScript code function properly when I insert it into either the head or body elements of an HTML document. Let's look at some examples: First, I insert the script into the body as shown in this example (works correctly): ...

javascripthtmlcss

How come characteristics of one particular div element are transferring to unrelated div elements?

Recently, I created a small practice website and encountered an issue that is quite frustrating. Here's the div structure I used: <div class="work-process"> <div class="container" align="center"> <div class="col- ...

htmlcss

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

javascripthtmljquerycsstwitter-bootstrap

What is preventing me from setting a background image in Angular 13?

Trying a different approach based on advice from Stack Overflow, I attempted the following: <div [style.background-image]="'url(https://picsum.photos/200)'"></div> Unfortunately, this resulted in no effect and the image was ...

htmlcssangularimage

Multi-line auto-suggest list with typeahead functionality

Currently, I am utilizing typeahead with Twitter Bootstrap and AngularJS. The autocomplete suggestions are displayed in a single line, as seen in the screenshot below. However, I would like to have the big cities' names displayed on separate lines. Fo ...

cssangularjstwitter-bootstrap

Arranging SVG icons in a row within the navigation bar

Having trouble aligning the icons side by side? Even with margin and padding adjustments, I couldn't get it right. I've scoured multiple sites for a solution but couldn't find one. As an attempt to fix this, I created a bar with aligned butt ...

htmlcsssvgiconsnavbar