Muchas aplicaciones de redes sociales en la actualidad ofrecen una función dentro de su aplicación para editar fotos aplicándoles algunos filtros hermosos y haciéndolas más hermosas. Podemos llegar a ver este tipo de filtros en Instagram y Snapchat. En este artículo, crearemos una aplicación en la que agregaremos filtros de imagen de Instagram a nuestra imagen en Android usando Kotlin.
Nota : si está buscando crear esta aplicación en Android usando Java. Cómo construir filtros de imagen como Instagram en Android usando Java
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Cómo crear/iniciar un nuevo proyecto en Android Studio
Paso 2: agregue la dependencia y el repositorio de JitPack
Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.
implementation 'com.github.mukeshsolanki:photofilter:1.0.2'
Agregue el repositorio de JitPack a su archivo de compilación. Agréguelo a su root build.gradle al final de los repositorios dentro de la sección allprojects{ }.
allprojects {
repositories {
…
maven { url “https://jitpack.io” }
}
}
Después de agregar esta dependencia, sincronice su proyecto y ahora avanzaremos hacia su implementación.
Paso 3: agregar una imagen a la carpeta dibujable
Copie su imagen y luego navegue a la aplicación> res> carpeta dibujable. Haga clic derecho sobre él y péguelo para agregar su imagen a la carpeta dibujable.
Paso 4: trabajar con el archivo activity_main.xml
Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml.
XML
<?xml version="1.0" encoding="utf-8"?> <!--on below line we are creating a swipe to refresh layout--> <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="match_parent" android:layout_above="@id/idHSV" android:layout_centerHorizontal="true" android:layout_margin="20dp" android:padding="5dp" android:src="@drawable/dog" /> <!--horizontal scroll view for displaying all our image filters--> <HorizontalScrollView android:id="@+id/idHSV" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginTop="20dp" android:scrollbars="none"> <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/dog" /> <!--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/dog" /> <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/dog" /> <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/dog" /> <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/dog" /> <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/dog" /> <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/dog" /> <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/dog" /> <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/dog" /> <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/dog" /> <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>
Paso 5: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.gtappdevelopers.kotlingfgproject
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import com.mukesh.image_processing.ImageProcessor
class MainActivity : AppCompatActivity() {
// on below line we are creating variables.
lateinit var oneIV: ImageView
lateinit var twoIV: ImageView
lateinit var threeIV: ImageView
lateinit var fourIV: ImageView
lateinit var fiveIV: ImageView
lateinit var sixIV: ImageView
lateinit var sevenIV: ImageView
lateinit var eightIV: ImageView
lateinit var nineIV: ImageView
lateinit var tenIV: ImageView
lateinit var originalIV: ImageView
lateinit var bmp: Bitmap
lateinit var onebmp: Bitmap
lateinit var twobmp: Bitmap
lateinit var threebmp: Bitmap
lateinit var fourbmp: Bitmap
lateinit var fivebmp: Bitmap
lateinit var sixbmp: Bitmap
lateinit var sevenbmp: Bitmap
lateinit var eightbmp: Bitmap
lateinit var ninebmp: Bitmap
lateinit var tenbmp: Bitmap
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// creating a variable for our image processor.
val processor = ImageProcessor()
// initializing bitmap with our image resource.
bmp = BitmapFactory.decodeResource(resources, R.drawable.dog)
// on below line we are initializing
// our variable with their ids.
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.
onebmp = processor.tintImage(bmp, 90)
// after storing it to one bitmap
// we are setting it to imageview.
oneIV.setImageBitmap(onebmp)
// below line is use to apply gaussian blur effect
// to our original image bitmap.
twobmp = processor.applyGaussianBlur(bmp);
twoIV.setImageBitmap(twobmp);
// below line is use to add sepia toing effect
// to our original image bitmap.
threebmp = processor.createSepiaToningEffect(bmp, 1, 2.0, 1.0, 5.0);
threeIV.setImageBitmap(threebmp);
// below line is use to apply saturation
// filter to our original image bitmap.
fourbmp = processor.applySaturationFilter(bmp, 3);
fourIV.setImageBitmap(fourbmp);
// below line is use to apply snow effect
// to our original image bitmap.
fivebmp = processor.applySnowEffect(bmp);
fiveIV.setImageBitmap(fivebmp);
// below line is use to add gray scale
// to our image view.
sixbmp = processor.doGreyScale(bmp);
sixIV.setImageBitmap(sixbmp);
// below line is use to add engrave effect
// to our image view.
sevenbmp = processor.engrave(bmp);
sevenIV.setImageBitmap(sevenbmp);
// below line is use to create a contrast
// effect to our image view.
eightbmp = processor.createContrast(bmp, 1.5);
eightIV.setImageBitmap(eightbmp);
// below line is use to add shadow effect
// to our original bitmap.
ninebmp = processor.createShadow(bmp);
nineIV.setImageBitmap(ninebmp);
// below line is use to add flea
// effect to our image view.
tenbmp = processor.applyFleaEffect(bmp);
tenIV.setImageBitmap(tenbmp);
// on below line we are adding click listeners
// for all image views.
oneIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(onebmp)
}
twoIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(twobmp)
}
threeIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(threebmp)
}
fourIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(fourbmp)
}
fiveIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(fivebmp)
}
sixIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(sixbmp)
}
sevenIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(sevenbmp)
}
eightIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(eightbmp)
}
nineIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(ninebmp)
}
tenIV.setOnClickListener {
// on clicking on each filter we are
// setting that filter to our original image.
originalIV.setImageBitmap(tenbmp)
}
}
}
Ahora ejecute su aplicación para ver el resultado de la aplicación.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA