[android / xml] 안드로이드 홈스크린위젯 꾸미기 - 이미지 넣기, 그라데이션적용, drawable resource file 적용

1. 이미지 넣기 

이미지를 넣는 방법은 두가지가 있다.

  1.1 이미지 뷰 사용하기

       xml 뷰 중에서 <ImageView /> 를 사용하는 방법이다. 

 

먼저 이미지 파일을 res/drawable 폴더에 넣어준다.

 

 <ImageView /> 에서 src 속성을 사용해 해당 이미지를 불러온다.

<ImageView
  android:layout_width="18dp"
  android:layout_height="18dp"
  android:id="@+id/cartSmall"
  android:src="@drawable/cart_small"/>

파란 동그라미 안에있는 부분이 이미지뷰 를 사용한 삽입 방법임

 

  1.2 백그라운드로 넣기 

    버튼이나 텍스트 뷰 같은 뷰안에 백그라운드로 넣는 방식이다.

    이미지 사이즈 조절이 안되고 항상 꽉 차있기 때문에 이미지를 따올 때 사이즈를 미리 정해놔야 함.

 

   먼저, res/drawable 폴더에 이미지파일을 넣는다.

   bacground 속성을 사용해 이미지를 불러온다.

<Button
  android:id="@+id/bt_update"
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:drawablePadding="8dp"
  android:background="@drawable/refresh"/>

파란색 안에 있는 버튼에 백그라운드로 이미지 넣음.

 

2. 그라데이션 적용

   res/drawable 폴더 안에 shape.xml 파일을 새로 생성한다. (이것을 drawable resource file)이라고 한다.

   <shape></shape> 뷰 안에 <gradient /> 를 넣고 속성으로 컬러값을 지정해준다. 

   layout.xml 파일에서 shape.xml을 불러온다.

 

 ** shape.xml **

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#D3D3D3"
        android:centerColor="#ffffff"
        android:endColor="#D3D3D3"
        android:angle="90"/>
</shape>

** widget_layout.xml **

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:textColor="@android:color/holo_blue_dark"
        android:paddingLeft="18dp"
        android:paddingRight="18dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:background="@drawable/new_shape">    // <-여기있음!!
        <ImageView
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:id="@+id/cartSmall"
            android:src="@drawable/cart_small"/>
        <TextView
            android:id="@+id/tv_counter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="12dp"
            android:text="--"
            android:layout_weight="1"
            android:textSize="16sp" />
        <Button
            android:id="@+id/bt_update"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:drawablePadding="8dp"
            android:background="@drawable/refresh"/>

    </LinearLayout>

android:background="@drawable/shape" 여기서 불러오는 shape는 shape.xml 파일 그 자체 및 그 안에있는 모든 내용물이지, shape.xml 안에 있는 <shape></shape> 가 아니다. 

 

 

 

drawable resource file 을 활용하는 간단한 예시는 다음 링크에서 참조

https://upcake.tistory.com/208

[Android] 8. Drawable Resource XML 작성 : gradient, shape, drawable, layer-list

https://developer.android.com/guide/topics/resources/drawable-resource?hl=ko

드로어블 리소스  |  Android 개발자  |  Android Developers