CODEWITHSUNDEEP
androidandroid-layout
Alex
Alex

Reputation: 2062

Android - achieve dimming of background effect

I'm building a splash screen with a dimmed background. Im using RelativeLayout as the base for all the widgets. In order to create and dim effect I created a dim.xml, which is essentially a black shape (to set the opacity later).

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

The layout:

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:background="@drawable/background"
    android:id="@+id/ActivityLayout">

    <ImageView
        android:layout_width="240dp"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:layout_marginTop="98dp"
        android:layout_marginRight="170dp"
        android:src="@drawable/logo"
        android:id="@+id/logo" />

</RelativeLayout>

Is there a way to place the black shape between the RelativeLayout and the widgets, and then set some alpha value to the black shape in order to achieve the dimming effect?

Upvotes: 1

Views: 705

Answers (1)

Lei Guo
Lei Guo

Reputation: 2550

Is there a way to place the black shape between the RelativeLayout and the widgets, and then set some alpha value to the black shape in order to achieve the dimming effect?

You can achieve this by adding another View in your RelativeLayout and set its width and height to "match_parent", then change the View's background color to what you want.

Your layout may go like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  ...  
>

<View android:width="match_parent"
      android:height="match_parent"
      android:background="@color/the_color_you_want"/>

<here are the widgets...>

</RelativeLayout>

Update:

But it doesnt fill the entire view port, the there's about 10dp margin on each side, that doesnt stretches across the screen. Any way to fill the entire screen?

It's because you have set a 10dp padding for both the left and right side of your RelativeLayout. There are two ways to make the color View fill the entire screen:

  1. Set android:clipToPadding="false" to your RelativeLayout and then set the following attribute to the color View:

android:layout_marginLeft="-10dp"
android:layout_marginRight="-10dp"

This is very easy to do but it may cause problem to your widgets, so you can have a try.

  1. Remove paddingLeft and paddingRight attribute from your RelativeLayout, thus your color View will fill the screen, then rearrange your widgets to make sure their left or right margin is correct.

You may need to do more work with this method, but I'm sure this is a right way.

Upvotes: 2

Related Questions