Branch : 01_uiDesign (Localization / Ripple Effect)

Localization

commit message : strings.xml korean Localization

 

경로 : app/src/main/res/values-b+ko/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">생활 도우미</string>
</resources> 

 

경로 : app/src/main/res/values/strings.xml

<resources>
    <string name="app_name">Life helper</string>
</resources> 

 

Ripple Effect

commit message : add ripple effect

 

경로 : app/src/main/res/drawable/ic_eco.xml

<vector android:height="100dp" android:tint="?attr/colorControlNormal"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="100dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M6.05,8.05c-2.73,2.73 -2.73,7.15 -0.02,9.88c1.47,-3.4 4.09,-6.24 7.36,-7.93c-2.77,2.34 -4.71,5.61 -5.39,9.32c2.6,1.23 5.8,0.78 7.95,-1.37C19.43,14.47 20,4 20,4S9.53,4.57 6.05,8.05z"/>
</vector>

Ripple Effect를 사용할 Button에 넣을 Vector 이미지 생성

 

 

경로 : app/src/main/java/com/example/lifehelper/MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<ImageButton>(R.id.Lifehelper_logo)
            .setOnClickListener {
                val intent = Intent(this, HomeActivity::class.java)
                startActivity(intent)
            }
    }
}

 

경로 : app/src/main/res/drawable/ripple_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#1FC84A">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#008FFC" />
            <corners android:radius="10dip" />
        </shape>
    </item>
    <!--
    child Layout으로 mask Layout이 설정되어
    mask Layout에 설정된 Drawable 위에만 Ripple Effect가 발생
    shape : Ripple Effect 방식 설정
    corners : Ripple Effect 모서리를 둥글게 설정
     -->

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="#14BCDA"
                android:startColor="#17D5A9"
                android:type="linear" />
            <corners android:radius="10dip" />
        </shape>
    </item>
    <!--
    view의 background 설정
    gradient : 그라데이션 효과 적용
    -->

</ripple> 

 

경로 : app/src/main/res/layout/activity_main.xml

<ImageButton
        android:id="@+id/Lifehelper_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_custom"
        android:padding="30dp"
        android:src="@drawable/ic_eco"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.3" />

NoActionBar

commit message : Apply Material NoActionBar Theme

 

경로 : app/build.gradle

def material_version = "1.3.0"
    implementation "com.google.android.material:material:$material_version"
</vector>

 

경로 : app/src/main/res/values/themes.xml

  <style name="Theme.Material.Lifehelper" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

 

경로 : app/src/main/AndroidManifest.xml

android:theme="@style/Theme.Material.Lifehelper"