Hoy en día, muchas aplicaciones de redes sociales brindan tantos filtros que podemos usar para hacer que nuestra imagen dentro de la aplicación sea más hermosa y atractiva. Este tipo de función se ve generalmente en Instagram, Snapchat y muchas aplicaciones de redes sociales. En este artículo, veremos la implementación de esta sección de filtro similar a Instagram en Android.
¿Qué vamos a construir en este artículo?
Construiremos una aplicación simple en la que mostraremos un ImageView y proporcionaremos diferentes tipos de opciones de filtrado de imágenes a continuación. Después de hacer clic en cada filtro de imagen, ese filtro se aplicará a nuestra imagen original. qué
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <!--Imageview for our original image--> <ImageView android:id="@+id/idIVOriginalImage" android:layout_width="match_parent" android:layout_height="300dp" android:layout_centerHorizontal="true" android:layout_margin="20dp" android:padding="5dp" android:src="@drawable/image" /> <!--horizontal scroll view for displaying all our image filters--> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idIVOriginalImage" android:layout_marginTop="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <!--We are creating a linear layout for displaying each item in horizontal scroll view--> <LinearLayout android:id="@+id/idLLVignette" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <!--We are displaying the image view how it will look after applying the filter--> <ImageView android:id="@+id/idIVOne" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <!--Text view for displaying our filter name--> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 1" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLTint" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVTwo" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 2" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLTemperature" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVThree" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 3" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLSharpen" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVFour" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 4" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLSepia" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVFive" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 5" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLSaturate" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVSix" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 6" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLRotate" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVSeven" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 7" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLPosterize" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVEight" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 8" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLNone" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVNine" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 9" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> <LinearLayout android:id="@+id/idLLNegative" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="vertical"> <ImageView android:id="@+id/idIVTen" android:layout_width="140dp" android:layout_height="140dp" android:layout_gravity="center" android:src="@drawable/image" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="Filter 10" android:textAlignment="center" android:textColor="@color/black" /> </LinearLayout> </LinearLayout> </HorizontalScrollView> </RelativeLayout>
Java
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import com.mukesh.image_processing.ImageProcessor;
public class MainActivity extends AppCompatActivity {
// creating a bitmap for our original
// image and all image filters.
Bitmap bitmap;
// creating a variable for image view.
ImageView oneIV, twoIV, threeIV, fourIV, fiveIV, sixIV, sevenIV, eightIV, nineIV, tenIV, originalIV;
Bitmap oneBitMap, twoBitMap, threeBitmap, fourBitMap, fiveBitMap, sixBitMap, sevenBitMap, eightBitMap, nineBitMap, tenBitMap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// creating a variable for our image processor.
ImageProcessor processor = new ImageProcessor();
// initializing bitmap with our image resource.
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
// initializing image views for our filters
// and original image on which we will
// be applying our filters.
oneIV = findViewById(R.id.idIVOne);
twoIV = findViewById(R.id.idIVTwo);
threeIV = findViewById(R.id.idIVThree);
fourIV = findViewById(R.id.idIVFour);
fiveIV = findViewById(R.id.idIVFive);
sixIV = findViewById(R.id.idIVSix);
sevenIV = findViewById(R.id.idIVSeven);
eightIV = findViewById(R.id.idIVEight);
nineIV = findViewById(R.id.idIVNine);
tenIV = findViewById(R.id.idIVTen);
originalIV = findViewById(R.id.idIVOriginalImage);
// below line is use to add tint effect to our original
// image bitmap and storing that in one bitmap.
oneBitMap = processor.tintImage(bitmap, 90);
// after storing it to one bitmap
// we are setting it to imageview.
oneIV.setImageBitmap(oneBitMap);
// below line is use to apply gaussian blur effect
// to our original image bitmap.
twoBitMap = processor.applyGaussianBlur(bitmap);
twoIV.setImageBitmap(twoBitMap);
// below line is use to add sepia toing effect
// to our original image bitmap.
threeBitmap = processor.createSepiaToningEffect(bitmap, 1, 2, 1, 5);
threeIV.setImageBitmap(threeBitmap);
// below line is use to apply saturation
// filter to our original image bitmap.
fourBitMap = processor.applySaturationFilter(bitmap, 3);
fourIV.setImageBitmap(fourBitMap);
// below line is use to apply snow effect
// to our original image bitmap.
fiveBitMap = processor.applySnowEffect(bitmap);
fiveIV.setImageBitmap(fiveBitMap);
// below line is use to add gray scale
// to our image view.
sixBitMap = processor.doGreyScale(bitmap);
sixIV.setImageBitmap(sixBitMap);
// below line is use to add engrave effect
// to our image view.
sevenBitMap = processor.engrave(bitmap);
sevenIV.setImageBitmap(sevenBitMap);
// below line is use to create a contrast
// effect to our image view.
eightBitMap = processor.createContrast(bitmap, 1.5);
eightIV.setImageBitmap(eightBitMap);
// below line is use to add shadow effect
// to our original bitmap.
nineBitMap = processor.createShadow(bitmap);
nineIV.setImageBitmap(nineBitMap);
// below line is use to add flea
// effect to our image view.
tenBitMap = processor.applyFleaEffect(bitmap);
tenIV.setImageBitmap(tenBitMap);
// below line is use to call on click
// listener for our all image filters.
initializeOnCLickListerns();
}
private void initializeOnCLickListerns() {
oneIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(oneBitMap);
}
});
twoIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(twoBitMap);
}
});
threeIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(threeBitmap);
}
});
fourIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(fourBitMap);
}
});
fiveIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(fiveBitMap);
}
});
sixIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(sixBitMap);
}
});
sevenIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(sevenBitMap);
}
});
eightIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(eightBitMap);
}
});
nineIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(nineBitMap);
}
});
tenIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
originalIV.setImageBitmap(tenBitMap);
}
});
}
}
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA