Layout: dynamic background

Question

I'm creating app similar to this:

enter image description here

Width of one hour is expressed in dp. How can I create such divided (by borders or by different colors) background? I though about inserting ImageViews but is there better method? Currently my layout:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/horizontalScrollView1" android:layout_width="fill_parent" android:layout_height="fill_parent">
    <LinearLayout android:id="@+id/tableLayout" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical">
        <RelativeLayout android:id="@+id/tableRowLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content"></RelativeLayout>
        <RelativeLayout android:id="@+id/tableRowLayout2" android:layout_width="wrap_content" android:layout_height="wrap_content"></RelativeLayout>
    </LinearLayout>
</HorizontalScrollView>

And I insert elements to relative layouts.

Thanks for help.

SOLUTION

    HorizontalScrollView mainView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView1);

    Point size = new Point();
    getWindowManager().getDefaultDisplay().getSize(size);

    int height = size.y;
    int width = dpToPixels(dpPerHour);

    Bitmap bmpBg = ((BitmapDrawable) getResources().getDrawable(R.drawable.schedule_bg)).getBitmap();
    Bitmap scaled = Bitmap.createScaledBitmap(bmpBg, width, height, true);
    BitmapDrawable viewBg = new BitmapDrawable(getResources(), scaled);
    viewBg.setTileModeX(TileMode.REPEAT);
    viewBg.setGravity(Gravity.LEFT);
    mainView.setBackground(viewBg);

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

For the horizontally separated white areas

You can use a <bitmap> with tiling via android:tileMode="repeat" (one example of bitmap constructed via tiling the source drawable).

You could tile a <shape> inside of the <bitmap> with a bit of work. But, I suspect tiling an image drawable inside the <bitmap> is easier.

For the buttons

You might want to look into using 9-patches to specify the appearance of the buttons. You can use 9-patches to make every button have a thin black border. Or, you could use a <shape> drawable.

edited May 23 '17 at 11:55

Community

1
1

answered May 12 '13 at 18:13

Brian Attwell

9,239
2
31
26

I mean the white background divided horizontally. – micnyk May 13 '13 at 13:06
Almost perfect. But width of one hour is expressed in dp. Can I scale source drawable in runtime? – micnyk May 13 '13 at 17:56
1

This scaling should be effortless on your part if you intend to maintain the same aspect ratio. – Brian Attwell May 13 '13 at 18:55

score 0 · Answer 2 · answered May 12 '13 at 18:39

if you give your LinearLayout a black background color, then you only need to put

android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"

or some such amount into each of your RelativeLayout rows, and the LinearLayout will show through in those areas, and look like what I see in your example.

Alternately, If you want one item on each row that doesn't show the marginTop and marginBottom, like those colored buttons on the left, then make those views a bit taller than the ones on the right, make the RelativeLayouts have a gravity that centers vertically, and you will see the black above and below the shorter views.

I mean the white background divided horizontally. – micnyk May 12 '13 at 20:37 — micnyk, May 12 '13 at 20:37

Layout: dynamic background

2 Answers2

For the horizontally separated white areas

For the buttons