1

estoy empezando en esto de android y tengo un problema con el mapa. anda muy lento si hay mas de 3 imágenes en el HorizontalScrollView de abajo. al lado hay un linear layout con una imagen que al presionarla despliega un Scroll View donde se muestran otras imágenes, la idea es que al presionar las imágenes que se muestran al apretare el botón, estas pasen al HorizontalScrollView. pero cuando este tiene 3 imágenes o mas, el mapa se empieza ralentizar. todo esto lo tengo en un runnable para no consumir recursos en el mismo thread que el main. les dejo el código xml y el código en java.

<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.parse.starter.RiderActivity" />

<ImageButton
    android:id="@+id/imageButtonMenu"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginStart="-10dp"
    android:layout_marginTop="-10dp"
    android:backgroundTint="@android:color/transparent"
    android:onClick="goToMenu"
    android:scaleType="fitCenter"
    android:src="@mipmap/map_menu_button" />


<HorizontalScrollView
    android:id="@+id/mapScrollViewFiltros"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="0dp"
    android:background="@color/white"
    android:layout_marginEnd="50dp"
    android:visibility="visible">


    <LinearLayout
        android:id="@+id/maplinearHijo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    </LinearLayout>
</HorizontalScrollView>

<ScrollView
    android:id="@+id/mapScrollViewAdd"
    android:layout_width="155dp"
    android:layout_height="match_parent"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="100dp"
    android:layout_marginTop="300dp"
    android:visibility="invisible">
    <LinearLayout
        android:id="@+id/mapLinearAdd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    </LinearLayout>

</ScrollView>
<LinearLayout
    android:id="@+id/layoutAdd"
    android:layout_height="70dp"
    android:layout_width="50dp"
    android:background="@color/white"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">
</LinearLayout>

y aca esta el activity:

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback{

// muchos text View e images view declarados por acá

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        assert mapFragment != null;
        mapFragment.getMapAsync(this);
        
        scrollViewAdd = findViewById(R.id.mapScrollViewAdd);
        linearLayoutFiltro = findViewById(R.id.maplinearHijo);
        linearLayoutFiltroHijo = findViewById(R.id.layoutAdd);
        linearAddFiltro = findViewById(R.id.mapLinearAdd);
        filterRunnable filter = new filterRunnable();
        new Thread(filter).start();
      
    }
 public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        mMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this, R.raw.map_style));
        this.marker =mMap.addMarker(new MarkerOptions().position(userLoc));
        mMap.setInfoWindowAdapter(new CustomInfoWindowAdapter());
        mMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {
                scrollViewAdd.setVisibility(View.INVISIBLE);
            }
        });
        locationManager = (LocationManager) this.getSystemService(Context.LOCATION_SERVICE);
        locationListener = new LocationListener() {
            @Override
            public void onLocationChanged(Location location) {
                userLoc = new LatLng(location.getLatitude(),location.getLongitude());

            }

            @Override
            public void onStatusChanged(String s, int i, Bundle bundle) {
            }

            @Override
            public void onProviderEnabled(String s) {
            }

            @Override
            public void onProviderDisabled(String s) {
            }
        };

        if (Build.VERSION.SDK_INT < 23) {
            locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, locationListener);
        } else {
            if (ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
                ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.ACCESS_FINE_LOCATION}, 1);
            } else {
                mMap.setMyLocationEnabled(true);
                locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, locationListener);
                Location lastKnownLocation = locationManager.getLastKnownLocation(LocationManager.GPS_PROVIDER);
                if (lastKnownLocation != null) {
                    this.userLoc = new LatLng(lastKnownLocation.getLatitude(),lastKnownLocation.getLongitude());
                    mMap.clear();
                    mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(userLoc, 16));
                }
            }
        }

    }
}

y aca les dejo la clase del runnable

 class filterRunnable implements Runnable {

        filterRunnable() {

        }
        @Override
        public void run() {
            mainHandler.post(new Runnable() {
                @Override
                public void run() {
                    setUpButtonsForFilter();
                    addButtonListener();
                }
            });
        }
        private void setUpButtonsForFilter(){
            final float scale = getResources().getDisplayMetrics().density;
            int dpHeightandWidth = (int) (50 * scale);
            LayoutParams lp = new LayoutParams(dpHeightandWidth,dpHeightandWidth);
            lp.topMargin = lp.leftMargin = (int) (10 * scale);

            LayoutParams lpadd = new LayoutParams((int) (25* scale),(int) (25* scale));
            lpadd.topMargin = (int) (25 * scale);
            lpadd.leftMargin = (int) (10 * scale);

            LayoutParams lptext = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            lptext.topMargin = (int) (25 * scale);
            lptext.leftMargin = (int) (10 * scale);

            LayoutParams lptextadop = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            lptextadop.topMargin = (int) (17 * scale);
            lptextadop.leftMargin = (int) (10 * scale);

            lynortamerica = new LinearLayout(MapsActivity.this);
            lynortamerica.setOrientation(LinearLayout.HORIZONTAL);
            filtroNa =  new ImageView(MapsActivity.this);
            filtroNa.setImageResource(R.mipmap.map_icon_na);
            filtroNa.setLayoutParams(lp);
            textNa = new TextView(MapsActivity.this);
            textNa.setText(R.string.gen_na);
            textNa.setLayoutParams(lptext);
            textNa.setTextColor(getResources().getColor(R.color.black,MapsActivity.this.getTheme()));
            lynortamerica.addView(filtroNa);

            lysudamerica= new LinearLayout(MapsActivity.this);
            lysudamerica.setOrientation(LinearLayout.HORIZONTAL);
            filtroSAmerica =  new ImageView(MapsActivity.this);
            filtroSAmerica.setImageResource(R.mipmap.map_icon_samerica);
            filtroSAmerica.setLayoutParams(lp);
            textSamerica= new TextView(MapsActivity.this);
            textSamerica.setText(R.string.gen_samerica);
            textSamerica.setLayoutParams(lptext);
            textSamerica.setTextColor(getResources().getColor(R.color.black,MapsActivity.this.getTheme()));
            lysudamerica.addView(filtroSAmerica);

            lyAsia= new LinearLayout(MapsActivity.this);
            lyAsia.setOrientation(LinearLayout.HORIZONTAL);
            filtroAsia =  new ImageView(MapsActivity.this);
            filtroAsia.setImageResource(R.mipmap.map_icon_asia);
            filtroAsia.setLayoutParams(lp);
            textAsia = new TextView(MapsActivity.this);
            textAsia.setText(R.string.gen_asia);
            textAsia.setLayoutParams(lptext);
            textAsia.setTextColor(getResources().getColor(R.color.black,MapsActivity.this.getTheme()));
            lyAsia.addView(filtroAsia);

            lyeuro= new LinearLayout(MapsActivity.this);
            lyeuro.setOrientation(LinearLayout.HORIZONTAL);
            filtroEu =  new ImageView(MapsActivity.this);
            filtroEu.setImageResource(R.mipmap.map_icon_eu);
            filtroEu.setLayoutParams(lp);
            textEu = new TextView(MapsActivity.this);
            textEu.setText(R.string.gen_eu);
            textEu.setLayoutParams(lptext);
            textEu.setTextColor(getResources().getColor(R.color.black,MapsActivity.this.getTheme()));
            lyeuro.addView(filtroEu);

           

            filtroMas =  new ImageView(MapsActivity.this);
            filtroMas.setImageResource(R.mipmap.map_mas_button);
            filtroMas.setLayoutParams(lpadd);

            linearLayoutFiltro.addView(lysudamerica);
            linearLayoutFiltro.addView(lynortamerica);
            linearLayoutFiltro.addView(lyAsia);
            linearLayoutFiltro.addView(lyeuro);
            
            linearLayoutFiltroHijo.addView(filtroMas);
        }
        @SuppressLint("UseCompatLoadingForDrawables")
        private void upDateFilter(){

            filtroNa.setOnClickListener(v -> {
                
                linearLayoutFiltro.removeView(lynoramerica);
                lynoramerica.addView(textNa);
                linearAddFiltro.addView(lynoramerica);
            });
            filtroSAmerica.setOnClickListener(v -> {
            
                linearLayoutFiltro.removeView(lysudamerica);
                lysudamerica.addView(textSamerica);
                linearAddFiltro.addView(lysudamerica);

            });
            filtroAsia.setOnClickListener(v -> {
              
                linearLayoutFiltro.removeView(lyAsia);
                lyAsia.addView(textAsia);
                linearAddFiltro.addView(lyAsia);
            });
            filtroEu.setOnClickListener(v -> {
             
                linearLayoutFiltro.removeView(lyeuro);
                lyeuro.addView(textEu);
                linearAddFiltro.addView(lyeuro);
            });
            
        }
        public  void getAllChildElements(LinearLayout layoutCont) {
            if (layoutCont == null) return;
            final int mCount = layoutCont.getChildCount();
            for (int i = 0; i < mCount; ++i) {
                final View mChild = layoutCont.getChildAt(i);
                addbuttonitems.add(mChild);
            }
        }

        public void upDateAddFilter(){
            getAllChildElements(linearAddFiltro);
            if(addbuttonitems.contains(lynoramerica)){
                filtroNa.setOnClickListener(v -> {
                    linearAddFiltro.removeView(lynoramerica);
                    addbuttonitems.remove(lynoramerica);
                    filtroNa.setOnClickListener(null);
                    lynoramerica.removeView(textNa);
                    linearLayoutFiltro.addView(lynoramerica);
                    if(addbuttonitems.isEmpty()){
                        scrollViewAdd.setVisibility(View.INVISIBLE);
                    }
                });
            }
            if(addbuttonitems.contains(lysudamerica)){
                filtroSamerica.setOnClickListener(v -> {
                   
                    linearAddFiltro.removeView(lysudamerica);
                    addbuttonitems.remove(lysudamerica);
                    filtroSamerica.setOnClickListener(null);
                    lysudamerica.removeView(textGatos);
                    linearLayoutFiltro.addView(lysudamerica);
                    if(addbuttonitems.isEmpty()){
                        scrollViewAdd.setVisibility(View.INVISIBLE);
                    }
                });
            }
            if(addbuttonitems.contains(lyAsia)){
                filtroAsia.setOnClickListener(v -> {
               
                    linearAddFiltro.removeView(lyAsia);
                    addbuttonitems.remove(lyAsia);
                    filtroVts.setOnClickListener(null);
                    lyAsia.removeView(textAsia);
                    linearLayoutFiltro.addView(lyAsia);
                    if(addbuttonitems.isEmpty()){
                        scrollViewAdd.setVisibility(View.INVISIBLE);
                    }
                });
            }
            if(addbuttonitems.contains(lyeuro)){
                filtroRefugio.setOnClickListener(v -> {
                  
                    linearAddFiltro.removeView(lyeuro);
                    addbuttonitems.remove(lyeuro);
                    filtroRefugio.setOnClickListener(null);
                    lyeuro.removeView(textEU);
                    linearLayoutFiltro.addView(lyeuro);

                    if(addbuttonitems.isEmpty()){
                        scrollViewAdd.setVisibility(View.INVISIBLE);
                    }
                });
            }

            if(addbuttonitems.isEmpty()){
                scrollViewAdd.setVisibility(View.INVISIBLE);
                Toast.makeText(MapsActivity.this,MapsActivity.this.getString(R.string.map_addlistener),Toast.LENGTH_SHORT).show();
            }
        }

        @SuppressLint("UseCompatLoadingForDrawables")
        private void addButtonListener(){
            filtroMas.setOnClickListener(v -> {
                if(filtroMas.getDrawable().getConstantState() == getResources().getDrawable(R.drawable.arrow_hsitorial,null).getConstantState()){
                    filtroMas.setImageResource(R.mipmap.map_mas_button);
                    filtroNa.setOnClickListener(null);
                    filtroSamerica.setOnClickListener(null);
                    filtroAsia.setOnClickListener(null);
                    filtroEu.setOnClickListener(null);
                }else {
                    if(scrollViewAdd.getVisibility()==View.VISIBLE){
                        scrollViewAdd.setVisibility(View.INVISIBLE);

                    }else {
                        scrollViewAdd.setVisibility(View.VISIBLE);
                        upDateAddFilter();
                    }
                }
            });
            filtroMas.setOnLongClickListener(v -> {
                scrollViewAdd.setVisibility(View.INVISIBLE);
                filtroMas.setImageResource(R.drawable.arrow_hsitorial);
                upDateFilter();
                return true;
            });
        }
    }

desde ya gracias por la ayuda, no se porque anda lento.

5
  • Que peso tienen esas imagenes?
    – Jorgesys
    Commented el 26 feb. 2021 a las 16:55
  • 80kb cada una. vos pensas que puede ser eso?
    – Julio
    Commented el 26 feb. 2021 a las 17:36
  • efectivamente era el peso de las imágenes, les baje un poco la resolución y anda perfecto. mil gracias!!
    – Julio
    Commented el 26 feb. 2021 a las 17:48
  • El problema era el peso de las imágenes, con el simple echo de bajar la resolución de las mismas anda perfecto.
    – Julio
    Commented el 26 feb. 2021 a las 17:49
  • Hola Julio, 80kb no me parece mucho pero depende del dispositivo, además de cambiar el tamaño puedes optimizar e incluso muy recomendable es usar Glide o Picasso en tu aplicación, para evitar que en algunos dispositivos se haga muy lenta o incluso se cierre, agregué respuesta @julio
    – Jorgesys
    Commented el 26 feb. 2021 a las 18:37

1 respuesta 1

0

Generalmente cuando la app se ralentiza al cargar imágenes se debe a el tamaño de las mismas las cuales en ocasiones incluso pueden ocasionar problemas de memoria y provocar se cierre tu aplicación.

Revisa: ¿Como evitar Out of memory en aplicación Android?

Lo que debes realizar es aligerar y optimizar tus imágenes para que al dispositivo no le provoque gran trabajo el manipularlas en memoria o usar bibliotecas como Glide o Picasso que realizan una buena optimización de la imagen en tu aplicación.

Revisa: Imageview descargar imagen con Glide o Picasso

Tamaño y peso de las imágenes

Muchos de nosotros hemos comprobado, y sufrido, cómo una página web con bastantes imágenes se ralentizaba o, como un mensaje de correo electrónico con un powerpoint de fotos adjunto, parecía que no se iba a descargar nunca.

Un concepto y expresión que usamos al hablar de imágenes es el de tamaño. Este término puede ocasionar confusión ya que solemos emplearlo para cosas diferentes: normalmente decimos que una imagen tiene un tamaño de 13 x 18 cm o 1024 x 768 píxeles, pero también decimos que una imagen tiene un tamaño de 3 Mbytes. Este uso impreciso de la palabra no suele causar mayores problemas, pero para los objetivos del curso sí que es importante matizar, ya que son dos características diferentes de una imagen.

De esta forma, en este tema, cuando hablemos del tamaño nos referiremos sólo a las dimensiones de la imagen: 13 x 18 cm, 1024 x 768 píxeles; y cuando se hable del espacio que ocupa la imagen en el dispositivo de almacenamiento –disco, memoria…- (3 Mbytes o 149 Kbytes) lo definiremos como peso.

De esta manera, podemos decir que una imagen es:

Grande cuando tiene un tamaño igual o mayor a 1024x768 píxeles Mediana cuando el tamaño va de 320x240 a 1024x768 píxeles Pequeña cuando el tamaño es menor a 320x240 píxeles Muy pequeña cuando es menor a 100x100 píxeles O que es:

Pesada si tiene 1 MB o más De peso mediano si va de 300KB a 1 MB Ligera si su peso es menor de 300KB Muy ligera si el peso es inferior a 100KB Al reducir de peso las imágenes (de mapa de bits) hacemos que tengan menos bytes y, por tanto, que:

Ocupen menos espacio en un dispositivo de almacenamiento. Por ejemplo, el disco duro de un servidor de Internet acojerá más imágenes en un mismo espacio. La transferencia de datos por una red sea más veloz, acelerando así la descarga de imágenes y la navegación por internet. Aligerar ≠ Optimizar

Puede darse que el caso que al “aligerar” de peso una foto, la reduzcamos también de calidad. Al optimizar, lo que pretendemos es reducir el peso lo máximo posible, pero sin que la imagen sufra pérdida de calidad aparente.

Veamos un ejemplo.

Observa atentamente las dos imágenes (jpeg) siguientes e intenta descubrir diferencias de calidad.

introducir la descripción de la imagen aquí Imagen 1introducir la descripción de la imagen aquíImagen 2

Una vez comparadas, crees que... a) Ambas tienen un peso similar b) La imagen 1 pesa más c) La imagen 2 pesa más

Para salir de dudas, puedes ver tú mismo el peso de cada una haciendo clic con el botón derecho sobre ellas y seleccionando en el menú contextual "Ver información de la imagen" o "Propiedades" (dependerá del navegador web que uses) El peso se ve en Tamaño (Size of file) También puedes descargar ambas fotos haciendo clic sobre ellas con el botón derecho del ratón y seleccionando "Guardar imagen cómo" Luego puedes ver el peso de cada archivo viendo sus propiedades.

La respuesta correcta es la b ya que la imagen 1 pesa 173,9 KB y la imagen 2, 19,13 KB.... Pasamos de una fotografía ligera a otra muy ligera, y ambas tienen una calidad similar.

A efectos prácticos, esto significa que la imagen 2 se descargará más rápidamente y/o que en un dispositivo de almacenamiento, como el disco duro de un servidor de internet podremos tener muchas imágenes y no tendremos necesidad de contratar más espacio.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.