Relative Layout Background Color And Image Example In Android Studio

Here we show how to change background color and image in Relative Layout with example in Android Studio.

In this example we create a custom layout in which we display two RelativeLayout’s , one is the parent layout and other one  is the child layout in which we display two TextView’s. In the background of Parent Relative Layout we set green color and in the background of child RelativeLayout we set a image/drawable. Finally we get the reference of TextView’s in our Activity and then perform setOnClickListener event on TextView’s. Whenever a user click on any TextView the text value is displayed on screen by using a Toast.

Download Code

Important Note: We can set color or image in the background of RelativeLayout in XML using background attribute or programmatically means in java class using setBackgroundColor() for color and setBackground() method for setting image.

Step 1: Create a new project and name it RelativeLayout’sBackgroundColorAndImage.

Step 2: Open res -> layout ->activity_main.xml (or) main.xml and add following code:

In this step we open xml file and then create a custom layout in which we display two RelativeLayout’s , one is the parent layout and other one  is the child layout in which we display two TextView’s. In the background of Parent Relative Layout we set green color and in the background of child RelativeLayout we set an image/drawable.

<!-- parent RelativeLayout in which we set green color for the background -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/greenColor"
tools:context=".MainActivity">
<!-- child RelativeLayout in which we set an image for the background -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/img"
android:padding="20dp">
<!-- first TextView -->
<TextView
android:id="@+id/firstTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:padding="10dp"
android:text="First Text View"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold" />
<!-- second TextView -->
<TextView
android:id="@+id/secondTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/firstTextView"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:padding="10dp"
android:text="Second Text View"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>


</RelativeLayout>

Step 3: Open   src -> package -> MainActivity.java

In this step Firstly we get the reference of TextView’s  and then perform setOnClickListener event on TextView’s so Whenever a user click on any TextView the text value is displayed on screen by using a Toast.

package example.abhiandroid.relativelayoutsbackgroundcolorandimage;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

TextView firstTextView, secondTextView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the reference of TextView's
firstTextView = (TextView) findViewById(R.id.firstTextView);
secondTextView = (TextView) findViewById(R.id.secondTextView);
// perform setOnClickListener event on first TextView
firstTextView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// display the text of first TextView by using a toast
Toast.makeText(getApplicationContext(), firstTextView.getText().toString(), Toast.LENGTH_LONG).show();
}
});
// perform setOnClickListener event on first TextView
secondTextView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// display the text of second TextView by using a toast
Toast.makeText(getApplicationContext(), secondTextView.getText().toString(), Toast.LENGTH_LONG).show();
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Step 4: Open   res -> values-> colors.xml

In this step we define the colors (green and white) that used in the background and text color of TextView’s.

<?xml version="1.0" encoding="utf-8"?>
<resources>

<!—define color’s that are used in our app -->
<color name="greenColor">#0f0</color>
<color name="white">#fff</color>
</resources>

Output:

Now run the app and you will see the below output

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!

Name

Email

Subscribe & Download eBook Now >>