커스톰 RatingBar // ProgressBar

블로그 개설하고 나니 갑자기 바뻐지는 바람에 한동안 블로그 정리를 못했네요, 프로젝트 일정이

너무 빡빡한지라 짬을 내서 정리하기가 쉽지않은데 오랜만에 다시 강좌를 올려 봅니다.

이번에 만들어 볼것은 제목처럼 RatingBar 흔히 별점을 표시 하던가 평점 을 사용하는데 쓰이는 부분

ProgressBar경우는 다운로드나 진행상태등을 알릴때 자주 이용되는데 기본적으로 안드로이드가

제공하는 UI가 아닌 이 부분에서의 Custom을 사용하게 되면 상당히 예쁘게 ? 나오는 것을 확인하였  다.

꾸미는건 역시 디자이너의 영역이라 패스

일단 스샷을 먼저 보고 ~ 들어 가시지요

위는 하나의 레이팅바의 모습인데, 이해하기 쉽도록 세개를 연속으로 붙여 놨습니다.

간격은 0.5 간격씩~

프로그래스바의 모습~

뒷배경은 회색과 라운딩 처리 // 앞부분은 노락색 약간 주황색에 가까운 색깔로 채워지게끔 처리

프로그레스바에는 이미지가 필요 없습니다. 개발자가 꾸미기에 따라서 투박하게 둥글게등

다양한 모양으로 만들 수 있습니다.

이제 코드~

레이팅바 관련

프로젝트 res 부분

drawable 폴더 안에 만들어 줘야 한다.

rating_bar.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+android:id/background"
          android:drawable="@drawable/star1" />
    <item android:id="@+android:id/secondaryProgress"
          android:drawable="@drawable/star1" />
    <item android:id="@+android:id/progress"

   android:drawable="@drawable/star1_p" />

</layer-list>

value 부분


style.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>
 <style
  name="StoreBigRatingBar"
  parent="@android:style/Widget.RatingBar">
  <item
   name="android:progressDrawable">@drawable/store_bigrating_bar</item>
 </style>
</resources>

custom_ratingbar.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="커스톰 강좌3 레이팅바"
 android:textSize="20dip"
 android:textColor="#ff9900"
 />
 <LinearLayout
  android:layout_marginTop="10dip"
  android:layout_marginLeft="10dip"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  <RatingBar
   android:id="@+id/bigrate"
   android:layout_marginTop="8dip"
   android:numStars="5"
   android:stepSize="0.5"
   android:rating="3.0"
   android:layout_width="112dip"
   android:layout_height="20dip"
   android:layout_alignParentLeft="true"
   android:layout_alignParentTop="true"
   style="@style/StoreBigRatingBar" />
  <TextView
   android:layout_marginLeft="5dip"
   android:id="@+id/txt_progress"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
 </LinearLayout>
</LinearLayout>

참 간단하게 튜닝이 완료 된다. 대신 레이팅바의 경우는 이미지 사이즈에 맞춰서 별의 간격을 조절해 줘야 되기 때문에 이미지 크기에 따른 배치가 중요합니다~ ㅎ.ㅎ

ProgressBar의 경우는 더 간단하다.

이미지가 필요없이 바로 튜닝하기 때문에 ~ ㅎ.ㅎ

custom_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="커스톰 강좌2 프로그레스바"
 android:textSize="20dip"
 android:textColor="#ff9900"
 />
 <LinearLayout
  android:layout_marginTop="10dip"
  android:layout_marginLeft="10dip"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  <ProgressBar
   android:id="@+id/studi_progress"
   style="?android:attr/progressBarStyleHorizontal"
   android:progressDrawable="@drawable/custom_progress"
   android:layout_width="200dp"
   android:layout_height="15dp" />
  <TextView
   android:layout_marginLeft="5dip"
   android:id="@+id/txt_progress"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
 </LinearLayout>
</LinearLayout>

custom_progress.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list
 xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:id="@android:id/background">
  <shape>
   <corners
    android:radius="5dip" />
   <gradient            이부분이 배경 설정 배경에 나올 프로그래스바의 색
    android:startColor="#505050"
    android:centerColor="#505050"
    android:endColor="#505050"
    android:centerY="0.75"
    android:angle="270" />
  </shape>
 </item>
 
 <item
  android:id="@android:id/progress">
  <clip>
   <shape>
    <corners
     android:radius="5dip" />
    <gradient             이부분이 앞부분 설정 위에 나올 프로그래스바의 색
     android:startColor="#ff9900"
     android:centerColor="#ffcc00"
     android:endColor="#ff9900"
     android:centerY="0.75"
     android:angle="270" />
    <stroke
     android:width="3dp"
     color="#000000" />
    <padding
     android:left="10dp"
     android:top="10dp"
     android:right="10dp"
     android:bottom="10dp" />
   </shape>
  </clip>
 </item>
</layer-list>

너무간단하기 때문에 따로 설명이 필요 없을 것 같네요, ㅎㅎ

행여나 모르시면 질문하시면 답변해 드립니다.

해보고 싶은신거 있으셔도 말씀해 주시면 Try 해보도록 하죠 ㅎ.ㅎ