CODEWITHSUNDEEP
androidlayout
user2350939
user2350939

Reputation: 379

Mask of the components of android when you click

I'd like to get this effect in android, I tried setting the background of the layout but without success, it would be like putting a mask on the elements of layout. An example of these is when you click a button on google play, which look like this:

enter image description here

when you click it puts a mask on blue button.

Could someone help me?

Thank you.

I did the following, I created the layout with image and text.

<LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:gravity="center_horizontal"
   android:orientation="vertical">

  <ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/android" />

      <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="APP" />
</LinearLayout>

and create framelayout 

<FrameLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_default"
    android:clickable="true">

       <include
           android:layout_gravity="center_vertical"
          layout="@layout/test1" />

</FrameLayout>

but only the background is changed, the images and text are not placed the mask. Am I doing something wrong?

Upvotes: 1

Views: 1538

Answers (1)

Emil Adz
Emil Adz

Reputation: 41099

The first thing that comes to my mind to implement this kind of affect is:

1. Create a layout(Linear/Relative) with the Icon and the text (android icon and APPS text in your example.)

2. Set it to wrap-content for both dimensions.

3. Place this layout inside FrameLayout.

4. Inside this FrameLayout add a button and set it to match-parent, for this button create a selector like this and apply it as it background:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

 <!-- pressed -->

 <item android:state_pressed="true"
       android:drawable="@drawable/botton_shape_pressed" /> 

 <!-- focused -->      

 <item android:state_focused="true"
       android:drawable="@drawable/botton_shape_selected" />

 <!-- default -->      

 <item android:drawable="@drawable/botton_shape_released" />

5. For the pressed texture create a semi-transparent blue texture. for the other two states apply a full transparent texture. this will result in the mask affect you looking for.

Upvotes: 2

Related Questions