border-left: 1dp solid #666666;

� Rekimoto Lab. at University of Tokyo(prev: Akashi-NCT)

� Enginner at Wantedly, Inc.(Dmetlabel Corp. , Life is Tech, Inc.)

RubyRuby on Rails

JavaScript

Android

Design

Others

Skill Ratio

How do you do this in Android ?

�

1 border-right: 1px solid #fff;

2 border-bottom: 1px solid #fff;

CSS

XML

1 <layer-list>

2 <item android:top="-1dp" android:left="-1dp">

3 <shape>

4 <stroke android:width="1dp" android:color="#55ffffff" />

5 </shape>

6 </item>

7 </layer-list>

1 <layer-list>


3 <shape>

4 <stroke android:width="1dp" android:color="#55ffffff" />

5 </shape>

6 </item>

7 </layer-list>

� 1dp

�1dp

黒 : View赤 : layer-list 内の item

XML

XML

1 <layer-list>


3 <shape>

4 <stroke android:width="1dp" android:color="#ffff9999" />

5 </shape>

6 </item>

7 <item android:bottom="-1dp" android:right="-1dp">

8 <shape>

9 <stroke android:width="1dp" android:color="#ff9999ff" />

10 </shape>

11 </item>

12 </layer-list>

Java

1 GradientDrawable layer = new GradientDrawable();

2 layer.setStroke(BORDER_WIDTH, BORDER_COLOR);

3

4 Drawable[] layers = new Drawable[]{layer};

5 LayerDrawable layerDrawable = new LayerDrawable(layers);

6 layerDrawable.setLayerInset(0, 0, -BORDER_WIDTH, 0, -BORDER_WIDTH);

7

8 view.setBackground(layerDrawable);

<layer-list /> : LayerDrawable

<item /> : GradientDrawable

楽をしてみる

CSS-Like な border

1 <AwesomeView

2 android:laoyut_width="wrap_content"

3 android:laoyut_height="wrap_content"

4 app:border_color="0xffffffff"

5 app:border_right_width="1dp"

6 app:border_bottom_width="1dp" />

izumin5210/ViewBorderHelper

1 class AwesomeView extends View {

2 public AwesomeView(Context context, AttributeSet attrs) {

3 super(context, attrs);

4 new ViewBorderHelper(context, attrs).setBorder(this);

5 }

6 }


1 <AwesomeView

2 android:laoyut_width="wrap_content"

3 android:laoyut_height="wrap_content"

4 app:border_color="0xffffffff"

5 app:border_right_width="1dp"

6 app:border_bottom_width="1dp" />


border_color

border_left_color

�

border_bottom_color

border_dash_width

border_left_dash_width

�

border_bottom_dash_width

border_width

border_left_width

�

border_bottom_width

border_dash_gap

border_left_dash_gap

�

border_bottom_dash_gap

まとめ

� Android で Viewの border 扱うのは面倒

（CSS に比べた場合）

� イイ感じのヘルパとか作ってややこしさ隠蔽

（e.g. izumin5210/ViewBorderHelper）

� これで CSS わかる人なら

Android のレイアウトが書ける！[要出典 ]

border-left: 1dp solid #666666;

Technology