Android - Change background color of margin

Question

I have a fragment named HostFragment which nests one to four other fragments.

This is the layout of HostFragment:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hostFragmentLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="12dp">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <RelativeLayout
            android:id="@+id/fragmentContainer1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

        <RelativeLayout
            android:id="@+id/fragmentContainer2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <RelativeLayout
            android:id="@+id/fragmentContainer3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

        <RelativeLayout
            android:id="@+id/fragmentContainer4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

    </TableRow>

</TableLayout>

The important part of this is android:layout_marginTop="12dp".

Background: The nested fragments cover the entirety of HostFragment except for this margin. When the nested fragments change their background color (by calling Canvas#drawColor), HostFragment needs to also change the color of this margin to match. I store the needed color in SharedPreferences.

Behavior: If the user goes from HostFragment to SettingsActivity, changes the color, and comes back to HostFragment, the nested fragments will change their color immediately (through their onResume() methods), but HostFragment's margin will still be the old color. If the user then leaves HostFragment and goes to another fragment, then returns to HostFragment, the margin will update its color. I don't know how or why - I have no code in HostFragment to update the color. The code in HostFragment only deals in swapping in and out nested fragments.

Problem: I need the margin color to update right away, so in onResume(), I've tried something like mTableLayout.setBackgroundColor(...) or even mView.setBackgroundColor(...) (mView is the layout I inflate in onCreateView()). This still doesn't work, and the color will only update if the user leaves and comes back.

Question: How can I change the color of the margin to match an int value in SharedPreferences once the user returns to HostFragment from another Activity (i.e. Right after the user returns from the Settings)?

Thank you in advance!

Solution 1

Try giving paddingTop instead of marginTop and then change the color of the view in onResume by mView.setBackgroundColor(...).

• Margin is the space outside the View so background color of a view won't reflect in margin space.
• Padding is the space inside of a view and background color given to a View will be applied to padding space as well.

Solution 2

Setting the color of a margin is not possible. To achieve something that looks like that though, there's two things to do.

1) Use padding instead of margin. Margin is outside of an element, while padding is inside of the element. This means that the element will grow in size, and that the color you've given your element as background-color will also apply to the area around the content.

2) Use a border, or drawable. This way of doing it requires more work, but is very highly configurable. Creating a border is done by simply setting a drawable as background, and giving it a stroke width and color. For more information (and an example implementation) see https://stackoverflow.com/a/8203840/4330555.

For more information on margin, padding, border etc. see http://www.w3schools.com/css/css_boxmodel.asp. This website explains it for CSS, but the concept is the same pretty much anywhere.

Solution 3

try this,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/c1_cnxlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black" >

    <RelativeLayout 
        android:id="@+id/c2_cnxlayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:background="@android:color/darker_gray" />

</RelativeLayout>