Put blackline border around ScrollView - Android

Question

My question is if there is a way to put a simple blackline border around a ScrollView so the user is aware exactly where the ScrollView starts, stops and how wide it is. I cannot find any sort of XML or java code in the Android docs saying how to do this. I know this has to be possible.

Below is my XML code for the ScrollView I need to have a border.

<LinearLayout
          .... />


    <TextView
        ... />

//BORDER STARTS HERE        
    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="94.5"
        android:paddingBottom="5dp"
        android:fillViewport="true" >

        <LinearLayout
            ... > 

            <TextView
                ... />

        </LinearLayout>
    </ScrollView>
//BORDER ENDS HERE

    <Button
        ... />
</LinearLayout>

EDIT

I just added a scrollviewborder.xml with the following code as a background for the ScrollView.

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="#000000"/>
</shape>

The below screenshot is what it produced:

enter image description here

This is not quite what I wanted. I want a thin blackline bordering around and not a black box.

score 11 · Answer 1 · answered Feb 19 '13 at 16:17

You can set its background to be a shape drawable with a stroke.

Example:

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="94.5"
    android:paddingBottom="5dp"
    android:background="@drawable/stroke_bg"
    android:fillViewport="true" >

And in your drawables folder, have a stroke_bg.xml file:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="#000000"/>
</shape>

This should result in a scroll view with a black border of width 2dp.

Please see my edited opening post. I tried your solution and did not get my desired result. — Matt, Feb 20 '13 at 12:52

Sean O'Toole · Accepted Answer · 2013-02-20T13:19:27.493

11

In light of your new requirements, try the following code:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    <solid
        android:color="@android:color/transparent"/>
    <stroke
        android:width="2dp"
        android:color="#000000"/>
</shape>

edited Feb 20 '13 at 13:19

answered Feb 19 '13 at 16:17

Sean O'Toole

4,304
6
35
43

Of course if you want the black border all the way around, replace marginTop and marginBottom with margin. – Sean O'Toole Feb 19 '13 at 16:20
I have a background picture for my whole activity that I want to keep and show in the ````ScrollView````. Please see my edited opening post. – Matt Feb 20 '13 at 12:53

score 2 · Answer 3 · edited May 23 '17 at 11:48

Is there an easy way to add a border to the top and bottom of an Android View?

There is no built-in "border" concept in Android that I can think of. You can emulate one through layouts, such as:

Wrap the TextView in a LinearLayout and add a plain View above and below it, with the Views having the desired android:background color and an appropriate android:layout_height (e.g., 1px, 1dip).

Wrap the TextView in a LinearLayout and add ImageView widgets above and below with your desired border images.

Wrap the TextView in a RelativeLayout, add in a plain View (with proper background & height) anchored to the top, another plain View anchored to the bottom, and your TextView anchored to the top and bottom. This takes advantage of RelativeLayout's z-axis support, so the border will be inside the space taken up by the TextView, rather than being outside the TextView as in the first two approaches.

Give the TextView a nine-patch PNG file as a background that has your borders. This is simplest from the XML standpoint, but you have to craft an appropriate nine-patch image.

score 2 · Answer 4 · answered Feb 19 '13 at 16:24

2

Do not wrap it in a layout, as some people have suggested. This will make rendering your app a bit slower (maybe not noticeably, but still). Instead, create a shape that only defines a child and use it as a background for your ScrollView.

answered Feb 19 '13 at 16:24

npace

4,218
1
25
35

Put blackline border around ScrollView - Android

4 Answers4