I want to add this button in my application:
I can create drawable with the frame. But I do not know, how to add this background to the button. If I set android:background property, then the button will loose material design effects.
How can I do this?
Try This,
Create Drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff"></solid>
<stroke
android:width="2dp"
android:color="#05BC32"></stroke>
<corners android:radius="5dp"></corners>
</shape>
Apply on Button in your layout
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_back"
android:textColor="#05BC32"
android:textSize="18sp"
android:text="OPEN"/>
Try this,
First create a drawable having frame
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<stroke
android:width="2dp"
android:color="#color/colorAccent" />
</shape>
After this create your ripple effect drawable for drawable-v21 (version >= Lollipop) :-
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/your_ripple_color">
<!-- button background -->
<item android:drawable="#drawable/abc"/>
</ripple>
don't forget to add the selector or drawable with the same name in drawable folder for pre-lollipop device
Fist declare green colour in your colors.xml file
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="green">#3cb879</color>
<color name="white">#ffffff</color>
</resources>
then create a drawable file called green_button.xml and cop this code
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#e78181" />
<stroke android:width="5dip" android:color="#color/green" />
<corners android:radius="10dip" />
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
</item>
<item>
<shape>
<gradient android:startColor="#ffffff" android:endColor="#ffffff" android:angle="270" />
<stroke android:width="1dp" android:color="#ffffff" />
<corners android:radius="4dp" />
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
</item>
</selector>
and then in activity_main.xml create button and apply background to it like this.
<Button
android:layout_width="150dp"
android:layout_height="60dp"
android:text="OPEN"
android:textColor="#color/green"
android:textSize="30sp"
android:layout_margin="5dp"
android:background="#drawable/green_button"/>
see output here
First declare the colors you want and then use the following xml as your button's background. I guess that it will work fine if you use instead of shape="rectangle" the shape you have declared already
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item >
<shape android:shape="rectangle">
<solid android:color="#color/primary" />
</shape>
</item>
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/primary_dark" />
</shape>
</item>
</ripple>
Related
I'm trying to create a drawable with two shapes next to each other using layer-list, how would I do it?
You can use the following code to have the drawable you want(Change the colors and height as you want)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="rectangle">
<size
android:width="5dp"
android:height="5dp" />
<solid android:color="#color/colorAccent"/>
</shape>
</item>
<item android:gravity="right">
<shape android:shape="rectangle">
<size
android:width="1dp"
android:height="5dp" />
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
</layer-list>
I have a ImageView and a tag_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#272822">
</solid>
<stroke android:color="#686868" android:width="1dp">
</stroke>
<corners android:radius="8dp"/>
</shape>
What changes should i make so to :
change the background colour of the background when the imageview is clicked. i have used this tag_layout as :
<ImageView
android:background="#drawable/tag_layout"
android:padding="5dp"
android:scaleType="fitCenter"
android:layout_marginRight="5dp"
android:layout_width="0dp"
android:layout_height="37dp"
android:src="#drawable/zoomin"
android:layout_weight="1"
/>
How do i assign on click colours in a xml file ?
This should be enough
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#yourcoloronpressed"/>
<stroke android:color="#686868" android:width="1dp"/>
<corners android:radius="8dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#272822"/>
<stroke android:color="#686868" android:width="1dp"/>
<corners android:radius="8dp"/>
</shape>
</item>
</selector>
Replace the yourcoloronpressed by your color.
You can also change the other atributes like stroke and corners on pressed, of course.
I would like the ImageView in the ViewGroup, when pressed, draws the ripple and this is working! But when the ViewGroup is pressed, the ImageView inside it, should remain transparent otherwise the ImageView background is visible: (that color alpha-orange, you actually see, is the ripple when pressed).
This happens only with devices API 21+. With devices API <21 I use a selector and the image background remains transparent as wanted when the ViewGroup is pressed.
layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_detail_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/margin_left"
android:paddingStart="#dimen/margin_left"
android:paddingTop="#dimen/margin_top_item_field"
android:paddingBottom="#dimen/margin_bottom"
android:baselineAligned="false"
android:background="#drawable/layout"
android:stateListAnimator="#anim/touch_raise"
android:orientation="horizontal">
...
<ImageView
android:id="#+id/item_detail_showfield_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/button_mini_oval"
android:stateListAnimator="#anim/touch_raise"
android:clickable="true"
android:contentDescription="#null"
android:scaleType="center"
android:visibility="invisible"
android:src="#drawable/show_button"/>
...
</LinearLayout>
drawable/button_mini_oval.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#color/primary_highlight" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
drawable-v21/button_mini_oval.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="?android:colorControlHighlight">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<color android:color="#android:color/transparent" />
</item>
</ripple>
I tried many configurations in the ripple xml, adding a <selector> it works (see below), but if you just tap the ImageView, the ripple is not visible (the ripple animation seems cut), only if you keep pressed you see the ripple...
What is the combination to have ripple in pressed state and transparent in normal state?
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="?android:colorControlHighlight">
<item>
<selector>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<color android:color="#android:color/transparent" />
</item>
</selector>
</item>
</ripple>
Removing android:state_pressed="true", I've found 2 solutions but in both cases I lost the touch_raise animation (why?):
With masked ripple:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<selector>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<color android:color="#android:color/transparent" />
</item>
</selector>
</item>
</ripple>
With unmasked little ripple (nicer than 1):
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="?android:colorControlHighlight">
<selector>
<item>
<color android:color="#android:color/transparent" />
</item>
</selector>
</ripple>
I don't know why it is sufficient to add <selector> to have a ripple on a transparent background!!! a lot of people were trying to achieve this but it wasn't the intention of Google, instead it is very useful is such situations.
With me, it works
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/white"
android:radius="3dp">
<item android:drawable="#drawable/transparent_ripple_button"/>
</ripple>
and a separate
transparent_ripple_button.xml
in your folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="#color/black_12" />
<stroke android:width="0.2dp" android:color="#color/white" />
<corners android:radius="3dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/black_12" />
<stroke android:width="0.2dp" android:color="#color/white" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke android:width="0.2dp" android:color="#color/white" />
<corners android:radius="3dp" />
</shape>
</item>
</selector>
I need to make my EditText look like its got depth like in the image below.
I have this shape I don't know what to add to it
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark" />
</shape>
you can accomplish that with a drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--background to compensate the transparency under shadow and glow (for bigger depth values)-->
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark" />
</shape>
</item>
<!--top, dark, inner shadow-->
<item
android:bottom="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#1A000000" />
</shape>
</item>
<!--bottom, light, outer glow-->
<item
android:top="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#4DFFFFFF" />
</shape>
</item>
<!--your color-->
<item
android:top="#dimen/depth"
android:bottom="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark />
</shape>
</item>
</layer-list>
and define a dimen in dimens.xml
<dimen name="depth">2dp</dimen>
by changing of the dimen you can change the depth of the drawable
This might also make your field look close to the effect but with a little more depth (see below). It might be worth adding the background to a outer view to wrap the edit text too so you can indent the text if you haven't already done this.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- outer shine -->
<item
android:top="4dp"
android:left="4dp">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#1597FB" />
</shape>
</item>
<!-- inner shadow -->
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#004173" />
</shape>
</item>
<!-- inner background -->
<item
android:top="2dp"
android:left="2dp">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#006EC3" />
</shape>
</item>
</layer-list>
And then you EditText as below;
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:background="#drawable/rounded_rect_layered_combined">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:textColor="#ffffff"/>
</FrameLayout>
Here is my button_style.xml which i am including with my button. However, I still can't seem to get the border on the left. Can anyone help me here please?
ps - My background should be transparent
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<layer-list>
<item android:left="2dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#999999"/>
</shape>
</item>
</layer-list>
</selector>
Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:bottom="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#FFF" />
</shape>
</item>
</layer-list>
There is some inherit problem with the borders of the button. But I found the best way to do it. Let say if you want a border only on the left side of the button. In the MainActivity xml file where the button is placed do it like this -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/newstyle"
android:orientation="vertical" >
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:gravity="center_vertical"
android:paddingLeft="10sp"
android:text="Button"
android:textAllCaps="false"
android:textColor="#939393"
android:textSize="20sp" />
</LinearLayout>
For the newstyle.xml file which will be located in the drawable use this code -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="0sp"
android:left="-2sp"
android:right="-2sp"
android:top="-2sp">
<shape android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke
android:width="1sp"
android:color="#d6d6d6" />
</shape>
</item>
</layer-list>
So the whole idea is -
Keep the background of the button as #null and keep the button in the linera layout. Give the background to the liner layout and voila its done..:)..
Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:left="1dp" />
<solid android:color="#999999" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<layer-list>
<item android:left="2dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"
>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#999999"/>
</shape>
</item>
</layer-list>
</selector>
try this it may work