본문 바로가기
안드로이드 자바

[Java][Android] GradientView를 통해 그라데이션 색상 구현 사용해보기

by teamnova 2022. 4. 17.
728x90

안녕하세요. 오늘은 GradientView 를 통해 그라이데이션 색상을 구현해보도록 하겠습니다.

 

gradle 설정

implementation 'com.mikhaellopez:gradientview:1.1.0'
compile 'com.larswerkman:lobsterpicker:1.0.1'

 

MainActivity.java


import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.graphics.Color;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.provider.Settings;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.Toast;

import com.larswerkman.lobsterpicker.OnColorListener;
import com.larswerkman.lobsterpicker.sliders.LobsterShadeSlider;
import com.mikhaellopez.gradientview.GradientView;


public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        GradientView gradientView = findViewById(R.id.gradientView);
        SeekBar seekBarAlphaStart = findViewById(R.id.seekBarAlphaStart);
        SeekBar seekBarAlphaEnd = findViewById(R.id.seekBarAlphaEnd);
        LobsterShadeSlider shadeSliderColorStart = findViewById(R.id.shadeSliderColorStart);
        LobsterShadeSlider shadeSliderColorEnd = findViewById(R.id.shadeSliderColorEnd);

        //커서를 붉은 곳에 위치
        shadeSliderColorStart.setShadePosition(4);
        shadeSliderColorEnd.setShadePosition(4);

        // Set Color Start
        gradientView.setStart(Color.RED);
        gradientView.setAlphaStart(1f);

        // Set Color End
        gradientView.setEnd(Color.RED);
        gradientView.setAlphaEnd(1f);

        // Set Gradient Direction
        gradientView.setDirection(GradientView.GradientDirection.TOP_TO_BOTTOM);

        seekBarAlphaStart.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                float alpha = (float)progress/100;
                Log.d("!!!",String.valueOf(alpha));

                gradientView.setAlphaStart(alpha);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        }); //시작 색상 투명도
        seekBarAlphaEnd.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                float alpha = (float)progress/100;
                gradientView.setAlphaEnd(alpha);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });//끝 색상 투명도

        shadeSliderColorStart.addOnColorListener(new OnColorListener() {
            @Override
            public void onColorChanged(int color) {
                gradientView.setStart(color);
            }

            @Override
            public void onColorSelected(int color) {

            }
        });//시작 색상
        shadeSliderColorEnd.addOnColorListener(new OnColorListener() {
            @Override
            public void onColorChanged(int color) {
                gradientView.setEnd(color);
            }

            @Override
            public void onColorSelected(int color) {

            }
        });//끝 색상
    }


}

 

activity_main.xml

<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:background="#ddd"
    android:gravity="center"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="보일랑 말랑 아일락"
            android:textSize="20sp"
            android:textStyle="bold"
            tools:ignore="HardcodedText" />

        <com.mikhaellopez.gradientview.GradientView
            android:id="@+id/gradientView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:gv_direction="left_to_right"
            app:gv_end="#d32e2e"
            app:gv_start="#3f51b5" />

        <ImageView
            android:id="@+id/btnChangeDirection"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_gravity="end|bottom"
            android:layout_margin="20dp"
            android:src="@drawable/ic_rotate"
            tools:ignore="ContentDescription"
            app:tint="@color/white" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:layout_marginBottom="40dp"
        android:gravity="center"
        android:orientation="vertical">

        <com.larswerkman.lobsterpicker.sliders.LobsterShadeSlider
            android:id="@+id/shadeSliderColorStart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <SeekBar
            android:id="@+id/seekBarAlphaStart"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:max="100"
            android:progress="100" />

        <com.larswerkman.lobsterpicker.sliders.LobsterShadeSlider
            android:id="@+id/shadeSliderColorEnd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />

        <SeekBar
            android:id="@+id/seekBarAlphaEnd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:max="100"
            android:progress="100" />

    </LinearLayout>

</LinearLayout>