CODEWITHSUNDEEP
androidandroid-layoutuser-experienceadt
Bjarke Freund-Hansen
Bjarke Freund-Hansen

Reputation: 30134

Setting background colour of Android layout element

I am trying to, somewhat clone the design of an activity from a set of slides on Android UI design. However I am having a problem with a very simple task.

I have created the layout as shown in the image, and the header is a TextView in a RelativeLayout. Now I wish to change the background colour of the RelativeLayout, however I cannot seem to figure out how.

I know I can set the android:background property in the RelativeLayout tag in the XML file, but what do I set it to? I want to define a new colour that I can use in multiple places. Is it a drawable or a string?

Additionally I would expect there to be a very simple way to this from within the Eclipse Android UI designer that I must be missing?

I am a bit frustrated currently, as this should be an activity that is performed with a few clicks at maximum. So any help is very appreciated. :)

Android activity design

Upvotes: 207

Views: 720425

Answers (9)

Khemraj Sharma
Khemraj Sharma

Reputation: 59004

4 possible ways, use one you need.

1. Kotlin

val ll = findViewById<LinearLayout>(R.id.your_layout_id)
ll.setBackgroundColor(ContextCompat.getColor(this, R.color.white))

2. Data Binding

<LinearLayout
    android:background="@{@color/white}"

OR more useful statement-

<LinearLayout
    android:background="@{model.colorResId}"

3. XML

<LinearLayout
    android:background="#FFFFFF"

<LinearLayout
    android:background="@color/white"

4. Java

LinearLayout ll = (LinearLayout) findViewById(R.id.your_layout_id);
ll.setBackgroundColor(ContextCompat.getColor(this, R.color.white));

Upvotes: 9

Bemtorres
Bemtorres

Reputation: 21

Kotlin

linearLayout.setBackgroundColor(Color.rgb(0xf4,0x43,0x36))

or

<color name="newColor">#f44336</color>

-

linearLayout.setBackgroundColor(ContextCompat.getColor(vista.context, R.color.newColor))

Upvotes: 1

T.Woody
T.Woody

Reputation: 1228

The answers above all are static. I thought I would provide a dynamic answer. The two files that will need to be in sync are the relative foo.xml with the layout and activity_bar.java which corresponds to the Java class corresponding to this R.layout.foo.

In foo.xml set an id for the entire layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/foo" .../>

And in activity_bar.java set the color in the onCreate():

public class activity_bar extends AppCompatActivty {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.foo);

            //Set an id to the layout
        RelativeLayout currentLayout = 
                    (RelativeLayout) findViewById(R.id.foo);

        currentLayout.setBackgroundColor(Color.RED);
        ...
    }
    ...
}

I hope this helps.

Upvotes: 0

Android Killer
Android Killer

Reputation: 18509

The above answers are nice.You can also go like this programmatically if you want

First, your layout should have an ID. Add it by writing following +id line in res/layout/*.xml

<RelativeLayout ...
...
android:id="@+id/your_layout_id"
...
</RelativeLayout>

Then, in your Java code, make following changes.

RelativeLayout rl = (RelativeLayout)findViewById(R.id.your_layout_id);
rl.setBackgroundColor(Color.RED);

apart from this, if you have the color defined in colors.xml, then also you can do programmatically :

rl.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.red));

Upvotes: 96

user2585548
user2585548

Reputation: 245

The

res/values/colors.xml.

<color name="red">#ffff0000</color>
android:background="@color/red"

example didn't work for me, but the

android:background="#(hexidecimal here without these parenthesis)"

worked for me in the relative layout element as an attribute.

Upvotes: 23

Shygar
Shygar

Reputation: 1252

Android studio 2.1.2 (or possibly earlier) will let you pick from a color wheel:

Color Wheel in Android Studio

I got this by adding the following to my layout:

android:background="#FFFFFF"

Then I clicked on the FFFFFF color and clicked on the lightbulb that appeared.

Upvotes: 2

yjw
yjw

Reputation: 3444

You can use android:background="#DC143C", or any other RGB values for your color. I have no problem using it this way, as stated here

Upvotes: 46

kgibilterra
kgibilterra

Reputation: 901

If you want to change a color quickly (and you don't have Hex numbers memorized) android has a few preset colors you can access like this:

android:background="@android:color/black"

There are 15 colors you can choose from which is nice for testing things out quickly, and you don't need to set up additional files.

Setting up a values/colors.xml file and using straight Hex like explained above will still work.

Upvotes: 21

user658042
user658042

Reputation:

You can use simple color resources, specified usually inside res/values/colors.xml.

<color name="red">#ffff0000</color>

and use this via android:background="@color/red". This color can be used anywhere else too, e.g. as a text color. Reference it in XML the same way, or get it in code via getResources().getColor(R.color.red).

You can also use any drawable resource as a background, use android:background="@drawable/mydrawable" for this (that means 9patch drawables, normal bitmaps, shape drawables, ..).

Upvotes: 284

Related Questions