June 2011

Android tip #028 – Sync two ScrollLayouts when scroll

Platform/Language: Java/XML/Android

Description: if we need to scroll two ScrollLayouts at the same time we can create a new View that implements the standard ScrollView in order to create a listener which allow us to know when this one is scrolling and modify the behavior of the other (or maybe because we want to know about the scroll behavior).

Code:

IScrollListener.java

1
2
3
4
5
6
7
public interface IScrollListener {

  void onScrollChanged(
    IScrollListener scrollView,
    int x, int y, int oldx, int oldy);

}

ObservableScrollView.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class ObservableScrollView extends ScrollView {

  private IScrollListener listener = null;

  public ObservableScrollView(Context context) {
      super(context);
  }

  public ObservableScrollView(Context context,
           AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
  }

  public ObservableScrollView(Context context,
           AttributeSet attrs) {
      super(context, attrs);
  }

  public void setScrollViewListener(IScrollListener listener) {
      this.listener = listener;
  }

  @Override
  protected void onScrollChanged(int x, int y,
           int oldx, int oldy) {
      super.onScrollChanged(x, y, oldx, oldy);
      if (listener != null) {
          listener.onScrollChanged(this, x, y, oldx, oldy);
      }
  }
}

Use two ObservableScrollView in your layout: oScrollViewOne, oScrollViewTwo.

YoutActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
public class YourActivity extends Activity
                          implements ScrollViewListener {
  ObservableScrollView oScrollViewOne, oScrollViewTwo;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    oScrollViewOne = (ObservableScrollView) this
        .findViewById(R.id.oScrollViewOne);
    oScrollViewTwo = (ObservableScrollView) this
        .findViewById(R.id.oScrollViewTwo);

    oScrollViewOne.setScrollViewListener(this);
    oScrollViewTwo.setScrollViewListener(this);
  }

  @Override
  void onScrollChanged(
    IScrollListener scrollView,
    int x, int y, int oldx, int oldy) {

    if (scrollView == oScrollViewOne) {
      oScrollViewTwo.scrollTo(x, y);
    } else if (scrollView == oScrollViewTwo) {
      oScrollViewOne.scrollTo(x, y);
    }
  }
}

Android tip #027 – Add shadow to labels, buttons and other views

Platform/Language: Java/XML/Android

Description: We can drop shadows to our controls (TextView, Buttons, Checkbox, …). Adding this shadow, we can create a better interface in our applications (but be careful adding shadow to everything!).

Result

Code:

my_layout.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- ... -->
<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
 
  android:textColor="@android:color/black"
  android:text="@string/eridemNet"
 
  android:shadowRadius="3"
  android:shadowDx="3"
  android:shadowDy="2"
  android:shadowColor="@android:color/black"
></TextView>
<!-- ... -->

Android tip #026 – Create nice buttons with XML

Platform/Language: XML/Android

Description: We can create nice buttons simply using few colors and gradients. We need to create a Selector resource and attach all the shape items for every state: pressed, focussed, disabled and normal. In the most common cases, focussed and normal could show the same result. In the case of pressed and normal, we will invert the colors. And in the case of disabled, we will use other colors (like a gray color).

Result

Custom nice button

Code:

colors.xml in /values/

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="NiceButtonStartColor">#4AA02C</color>
    <color name="NiceButtonEndColor">#348017</color>
    <color name="NiceButtonDisabledStartColor">#565051</color>
    <color name="NiceButtonDisabledEndColor">#736F6E</color>
    <color name="NiceButtonBorderColor">#254117</color>
</resources>

nice_button.xml in /drawables/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<?xml version="1.0" encoding="utf-8"?>
<selector
   xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >
        <shape>
            <gradient
               android:endColor="@color/NiceButtonStartColor"
               android:startColor="@color/NiceButtonEndColor"
               android:angle="270" />
            <stroke
               android:width="1dp"
               android:color="@color/NiceButtonBorderColor" />
            <corners
               android:radius="3dp" />
            <padding
               android:left="0dp"
               android:top="10dp"
               android:right="0dp"
               android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
               android:startColor="@color/NiceButtonStartColor"
               android:endColor="@color/NiceButtonEndColor"
               android:angle="270" />
            <stroke
               android:width="1dp"
               android:color="@color/NiceButtonBorderColor" />
            <corners
               android:radius="3dp" />
            <padding
               android:left="0dp"
               android:top="10dp"
               android:right="0dp"
               android:bottom="10dp" />
        </shape>
    </item>

  <item android:state_enabled="false">
          <shape>
            <gradient
               android:startColor="@color/NiceButtonDisabledStartColor"
               android:endColor="@color/NiceButtonDisabledEndColor"
               android:angle="270" />
            <stroke
               android:width="1dp"
               android:color="@color/NiceButtonBorderColor" />
            <corners
               android:radius="3dp" />
            <padding
               android:left="0dp"
               android:top="10dp"
               android:right="0dp"
               android:bottom="10dp" />
        </shape>
  </item>

    <item>        
        <shape>
            <gradient
               android:startColor="@color/NiceButtonStartColor"
               android:endColor="@color/NiceButtonEndColor"
               android:angle="270" />
            <stroke
               android:width="1dp"
               android:color="@color/NiceButtonBorderColor" />
            <corners
               android:radius="3dp" />
            <padding
               android:left="0dp"
               android:top="10dp"
               android:right="0dp"
               android:bottom="10dp" />
        </shape>
    </item>
</selector>

my_layout.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- ... -->
<!-- Better if you use most of the attributes in a style -->
<Button
  android:id="@+id/btnStart"
  android:layout_width="fill_parent" 
  android:layout_height="40dp"
  android:layout_margin="3dp"
  android:gravity="center"

  android:background="@drawable/nice_button"

  android:text="@string/labelStart"
  android:textColor="@android:color/white"
  android:textSize="18sp"
  android:shadowRadius="1"
  android:shadowDx="1"
  android:shadowDy="1"
  android:shadowColor="@android:color/black"
></Button>
<!-- ... -->

No Older Posts →
← No Newer Posts