As described on Android Developer site:
A drawable defined in XML that insets another drawable by a specified
distance. This is useful when a View needs a background that is
smaller than the View's actual bounds.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Inset
Instead of just moving the background and leaving the content in place in my case the inset is also moving the TextView.
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_inset"
android:orientation="horizontal" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
android:textSize="23sp" />
</LinearLayout>
This is the bg_inset drawable
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#android:color/darker_gray"
android:insetLeft="100dp" />
And this is the result I get:
By default, setting a background drawable also applies that drawable's padding to the view. Set the padding explicitly if you don't want it to match the background drawable.
Try to use shape with left-padding instead of inset:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<padding android:left="100dp"/>
</shape>
Another option: if you want to use DP instead of PX, try my suggestion below. From my experience, InsetDrawable only works with pixels, which I find... unhelpful. To be honest, I am not happy with this solution, but hey, it works.
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="10dp"
android:drawable="#drawable/image_placeholder"
android:top="10dp" />
</layer-list>
Related
I have a situation where I want to add an image view doing the same effect as this app
As you notice there is a drawable or something hiding the bottom side of the view adding a transparent gradient. How can I achieve the same effect?
Well, you can use fadingEdge attribute of the listView in your xml. Make a listView, then add items xml (images in particular as you've mentioned above).
android:fadingEdge="horizontal"
android:fadingEdgeLength="30dp"
android:fillViewport="false"
android:requiresFadingEdge="vertical"
Place this drawable in the bottom of your layout:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FFFFFF"
android:endColor="#android:color/transparent"
android:angle="90" />
</shape>
Your layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="#android:color/white" >
<View
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#drawable/gradient"
android:layout_gravity="bottom"/>
</FrameLayout>
I think you can change alpha value of that image View. Go through
this and this for more details.
I want to get a transparent gradient over the image, why does transparency work:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.twick.screens.custom.SquaredImageView
android:id="#+id/rv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/office"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80abcdef" > //TRANSPARENT WORK
</FrameLayout>
</android.support.v7.widget.CardView>
and so there is no
android:background="#drawable/background_gradient_blue_indigo>//TRANSPARENT NOT WORK
background_gradient_blue_indigo :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#800055FA" //80 transaprent
android:startColor="#807942DF" //80 transparent/>
</shape>
Add android:alpha=0.8 (or whatever float value you want) along with android:background="#drawable/background_gradient_blue_indigo" to the FrameLayout.
However, please note that this will make the whole view transparent, not the drawable in the background.
I'm in need of creating a receipt layout in Android. The idea is very simple, a rectangle layout with a zigzag top.
Even, i have tried dashed line but nothing working.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:color="#FF00"
android:dashWidth="5dp"
android:dashGap="5dp" />
</shape>
Try with this: https://github.com/beigirad/ZigzagView
Support top and bottom Zigzag.
<ir.beigirad.zigzagview.ZigzagView
android:layout_width="match_parent"
android:layout_height="240dp"
app:zigzagBackgroundColor="#8bc34a"
app:zigzagElevation="8dp"
app:zigzagHeight="10dp"
app:zigzagShadowAlpha="0.9"
app:zigzagSides="top|bottom"
app:zigzagPaddingContent="16dp">
// add child view(s)
</ir.beigirad.zigzagview.ZigzagView>
Hi you can use this library android-shape-imageview. And use transparent shape like this
End use library.
<com.github.siyamed.shapeimageview.mask.PorterShapeImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:siShape="#drawable/zigzag"
android:src="#drawable/neo"
app:siSquare="true"/>
You can change app:siShape="#drawable/zigzag" to desired shape. You can create other png shape.
Create small triangle and use repeat background
repeat_background.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/imagename"
android:tileMode="repeat" />
and use it in any view
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/repeat_background" />
refer this and this for more
EDITED
Decided to delete all of the previous question, since I made a standalone app just for solving this issue.
Problem: xml drawable does not works properly on API21, when defined as a background of a Button. and works on all other API's. Including API22 which is still Lollipop. really strange..
After making this standalone app, I realize that it might really be an API21 bug related to xml gradients. So in this app I put just a button on it in which I set the background to a drawable xml selector that changes the background drawable file depending on the state of the Button.
From what I could understand was that on API21 it only uses the start color of the gradient.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
>
<Button
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/imageView"
android:background="#drawable/key_pressed_selector"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
background_key_default.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/grey"
android:endColor="#color/grey"
/>
<corners android:radius="15dp"/>
background_yellow.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:type="radial"
android:gradientRadius="100"
android:startColor="#color/dark_blue"
android:endColor="#color/yellow"
/>
<corners android:radius="15dp"/>
</shape>
background_pressed_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/background_yellow"
android:state_pressed="true"/>
<item android:drawable="#drawable/background_key_default"/>
</selector>
res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="yellow">#ffff39</color>
<color name="dark_blue">#332ff2</color>
<color name="grey">#b1b2b6</color>
</resources>
Solved! To me there is a bug with this xml attribute android:gradientRadius on version API21.
The way I solved this was to create a drawable-v21 folder and copy all of my xml drawable that have this xml attribute and use one of this appendix: px (pixels), dp (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), mm (millimeters).
While leaving the default drawable folder without appendix.
otherwise I was not able to make it work, when it worked on API21 it didn't on all others API's and when it worked on all others API's it didn't on API21.
To me it worked like this.
ex:
drawable
android:gradientRadius="110"
drawable-v21
android:gradientRadius="55%p"
you do not have to override onTouch() method
simply try giving your selector xml file to the button's background.
EXAMPLE
<Button
android:id="#+id/id_Login_login_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/your_selector_xmlfile"
android:text="Login" />
I have a LinearLayout that looks like this.
I want each row to be clickable. The LinearLayout code for a row looks like this:
<LinearLayout
style="#style/home_menu_item_container"
android:id="#+id/home_menu_acronyms_button"
>
<ImageView
style="#style/home_menu_item_left"
android:background="#color/greyLight"
/>
<TextView
style="#style/home_menu_item_right"
android:text="#string/home_menu_option_2"
android:background="#color/grey"
/>
</LinearLayout>
How can I add a ripple effect that expands over the entire row (parent) - not just one child view in the row? The tricky part here is to let the ripple go over the two colored row.
So far, I found out the easiest way to do so is define a <ripple> in your drawable and then set the background of the LinearLayout to this drawable resource.
Define your drawable-v21/item_selector.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/your_background_color">
<item android:id="#android:id/mask"
<!--color here doesn't matter-->
android:drawable="#android:color/white" />
</ripple>
Set the background of your LinearLayout to drawable/item_selector.
<LinearLayout
style="#style/home_menu_item_container"
android:background="#drawable/item_selector"
android:id="#+id/home_menu_acronyms_button" >
...
</LinearLayout>
Besides, if you don't have your own background color, then there is no need to define a item_selector at all. You can simply define background as android:background="?android:attr/selectableItemBackground" for your LinearLayout.
It is a little bit complicated for that what you need but I don't think there is another way,...
You need to put your ImageView's into a ListView so that every ImageView is a ListItem and then you can set the ripple but you also need to set drawSelectorOnTop="true" otherwise it won't work correctly
I too faced this problem, finally found a simple solution
In linear Layout just add android:clickable="true";
and set background with ur ripple effect as
android:background="#drawable/ripple_effect"
code:
<LinearLayout
android:clickable="true"
android:background="#drawable/ripple_effect"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Add your child views here -->
</LinearLayout>
add ripple_effect.xml in drawable
ripple_effect.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#f87d05c2"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f87d05c2" />
</shape>
</item>
</ripple>
<RelativeLayout
android:id="#+id/rll_privacy_policy"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="?android:attr/selectableItemBackground"
android:orientation="vertical">
<TextView
android:id="#+id/txt_privacy_policy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/layout_margin_16"
android:text="#string/privacy_policy"
android:layout_centerVertical="true"
android:textColor="#color/link_acc"
android:textSize="#dimen/txt_title_20" />
</RelativeLayout>
Another option is to make the ripple's background color transparent. This way only the ripple can be seen. The ripple's xml file (in your drawable-v21/ folder) is thus:
<-- Ripple in some ghastly color, like bright red so you can see it -->
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/red"
>
<!-- background color uses a transparent mask set to full #ffffff (white) -->
<item
android:id="#android:id/mask"
android:drawable="#android:color/white"
/>
Note that if you are supporting pre-lollipop devices, you need to have a dummy file with the same name in your drawable/ folder. An empty selector is sufficient for that file. And remember that those older devices will not ripple.
answer above dont work for me,
here is my solution:
ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
>
...put het your design
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ripple" />
</FrameLayout>