상세 컨텐츠

본문 제목

[안드로이드] 이미지(Image) 흐림효과(Blur) 쉽게 주는 방법

안드로이드

by aries574 2022. 2. 27. 08:55

본문


이번 시간에는 이미지(Image) 흐림 효과(Blur)를

쉽게 주는 방법에 대하여 알아보겠습니다.


목차

1. 실행 화면

2. 라이브러리 등록

3. 메인 화면 구성 activity_main.xml

4. 메인 코드 구현 MainActivity.java


1. 실행 화면


2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

 implementation 'com.github.jgabrielfreitas:BlurImageView:1.0.1'

setting.gradle

repositories 괄호 안에 아래 코드를 넣어주시면 됩니다.

maven { url 'https://jitpack.io' }

 참조 문서

https://github.com/jgabrielfreitas/BlurImageView

 

GitHub - jgabrielfreitas/BlurImageView: ImageView with blur

ImageView with blur. Contribute to jgabrielfreitas/BlurImageView development by creating an account on GitHub.

github.com

 


3. 메인 화면 구성 activity_main.xml

 - 구성 -

텍스트뷰(TextView), 흐림 이미지 뷰(BlurImageView), 시크 바(SeekBar)

 - 설명 -

 1. 흐림 이미지 뷰(BlurImageView)에이미지를 넣는다.

 2. 시크 바(SeekBar)를 통해 흐림의 강도를 조절한다.

 3. 텍스트뷰(TextView)에 흐림의 강도값이 표시된다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp" />


    <com.jgabrielfreitas.core.BlurImageView
        android:id="@+id/blueImageView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginTop="30dp"
        android:scaleType="centerCrop"
        android:src="@drawable/dog1" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:max="25" />


</LinearLayout>

 - 이미지 - 

res -> drawable


4. 메인 코드 구현 MainActivity.java

 - 설명 - 

 1. onProgressChanged: 시크바(SeekBar)를 움직여 값이 변경되면 실행되는 메서드

 2. 시크 바(SeekBar) 값이 변경되면 그 값을,  흐림 이미지 뷰(BlurImageView) 흐림 처리에 사용한다.

 3. 시크 바(SeekBar) 값이 변경되면 그 값을 텍스트뷰에 넣는다. 

public class MainActivity extends AppCompatActivity {

    BlurImageView blurImageView;

    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);

        blurImageView = findViewById(R.id.blueImageView);
        SeekBar seekBar = findViewById(R.id.seekBar);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {

                blurImageView.setBlur(progress);

                textView.setText("흐림세기: " + progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }//onCreate

}//MainActivity

2022.02.26 - [안드로이드] - [안드로이드] 시작화면(Splash) 쉽게 만드는 방법

 

[안드로이드] 시작화면(Splash) 쉽게 만드는 방법

이번 시간에는 시작화면(Splash) 쉽게 만드는 방법에 대하여 알아보겠습니다. 목차 1. 실행 화면 2. 시작화면 Drawable 파일 만들기 3. 시작화면 Activity 만들기 4. 메인 화면 구성 activity_main.xml 1. 실행..

aries574.tistory.com

2022.02.25 - [안드로이드] - [안드로이드] Material NavigationRailView 쉽게 만드는 방법

 

[안드로이드] Material NavigationRailView 쉽게 만드는 방법

이번 시간에는 Material 컴포넌트 중 NavigationRailView 쉽게 만드는 방법에 대하여 알아보겠습니다. 목차 1. 실행화면 2. 라이브러리 등록 3. 테마 수정 4. 프래그먼트 만들기 5. 메뉴 만들기 6. 메인 화면

aries574.tistory.com

2022.02.24 - [안드로이드] - [안드로이드] 그리드 레이아웃(GridLayout) 카드뷰(CardView) 디자인 꾸미는 방법

 

[안드로이드] 그리드레이아웃(GridLayout) 카드뷰(CardView) 디자인 꾸미는 방법

이번 시간에는 그리드 레이아웃(GridLayout)과 카드뷰(CardView)를 사용해서 대시보드 느낌의 디자인을 쉽게 만들어 보겠습니다. 목차 1. 실행 화면 2. 메인 화면 구성 activity_main.xml 1. 실행 화면 2. 메인

aries574.tistory.com

반응형

관련글 더보기

댓글 영역