I have a simple Android menu in which I want to add extra shading/shadows to all sides of the buttons in order to make them more pronounced on screen. How can I do so?
Screenshot (Ignore coloured buttons in middle, they will all be transparent):
XML- 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:orientation="vertical"
android:background="#drawable/menubackground" >
<Button
android:id="#+id/btnSearchHomeDate"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:background="#drawable/circle4"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="10"
android:text="Date"
android:textSize="30sp" />
<Button
android:id="#+id/btnSearchHomeGame"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:background="#drawable/circle"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="5"
android:text="Game"
android:textSize="30sp" />
<Button
android:id="#+id/btnSearchHomeMedValues"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:background="#drawable/circle3"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="5"
android:text="Meditation Values"
android:textSize="30sp" />
<Button
android:id="#+id/btnSearchHomeAttValues"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:background="#drawable/circle2"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="5"
android:text="Attention Values"
android:textSize="30sp" />
<Button
android:id="#+id/btnSearchHomeScore"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:background="#drawable/circle4"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="5"
android:text="Score"
android:textSize="30sp" />
</LinearLayout>
**XML for transparent button (Circle 4): **
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#0000" />
<stroke
android:width="1dp"
android:color="#4a6176" />
<padding
android:left="10dp"
android:right="10dp"
/>
<corners android:radius="8dp" />
</shape>
1) First we need to create a transparent colour so we will create a new file in values folder called colors.xml:
<resources>
<color name="yellow_transparant">#33c9ce6a</color>
</resources>
As you see the '33' before the colour number specify the opacity of this colour. in our case it is 20%. For full list of them check this Answer: How to make a background transparent in android. I use it as a reference.
2) Assign this colour to your 2nd layer of your shape:
Try this one and see if this what you are looking for:
<?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="#0000" />
<stroke
android:width="1dp"
android:color="#android:color/holo_green_light" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape
android:shape="rectangle" >
<solid android:color="#color/yellow_transparant" />
<stroke
android:width="1dp"
android:color="#4a6176" />
<padding
android:left="10dp"
android:right="10dp"/>
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>
3) Add this to your button to create a shadow for your text:
android:shadowColor="#android:color/holo_green_light"
android:shadowDx="1" <!-- put a negative value to change direction --!>
android:shadowDy="1"
android:shadowRadius="0.1"
I use a gradient for buttons to give them a sort of 3D look:
In my drawable folder (file name button_gradient.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#color/buttonGradientTop"
android:endColor="#color/buttonGradientBottom"
android:angle="90"/>
<corners android:radius="10dp" />
</shape>
and calling it in a layout:
android:background="#drawable/button_gradient"
Related
I have a dialog and in this i have 2 button "Yes" and "No". If i slide right then it will treat as pressed "No" and if i slide left it will treated as pressed "Yes" same as like some phone calling screes do for accept and reject calls. I tired this link. Initially my slider is positioned at mid position (android:progress ="50"), and if current progress returns 5 i am considering it pressed "yes" and if it returns 90 i consider pressed "No" and when i try to slide left or right it should produce a sliding effect for better UI as thumb moves. I tired this way but its not a good effect when right/left movement of thumb..
Means i want exactly same as slide to unlock button like this but want to keep the slider in middle so that i can move both side for Yes and No.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<gradient
android:angle="0"
android:startColor="#ff2c10"
android:endColor="#ff2c10" />
<corners android:radius="35dip" />
<size android:height="55dp"
android:width="250dp"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip >
<shape>
<gradient
android:angle="0"
android:centerY="0.5"
android:startColor="#295d0b"
android:endColor="#295d0b" />
<corners android:radius="35dip" />
<size android:height="55dp"
android:width="250dp"/>
</shape>
</clip>
</item>
</layer-list>
And my seekbar.xml looks like....
<SeekBar
android:id="#+id/sb"
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:progress="50"
android:progressDrawable="#drawable/seek_bar"
android:thumb="#drawable/slide_thumb"
android:splitTrack="false"
android:background="#null"
android:thumbOffset="2dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yes"
android:textSize="25sp"
android:textColor="#android:color/white"
android:layout_marginTop="22dp"
android:layout_marginLeft="10dp"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No"
android:textSize="25sp"
android:textColor="#android:color/white"
android:layout_alignParentRight="true"
android:layout_marginTop="22dp"
android:layout_marginRight="10dp"
android:textStyle="bold"
/>
but its not giving me the right effect as i wanted, i want same as these below pictures are.. But with "yes" and "No" text.
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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:layout_marginTop="121dp"
android:max="100"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:progress="50"
android:progressDrawable="#drawable/seekbar_progressbar"
android:thumbTintMode="multiply" />
<TextView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:background="#drawable/circle_background_no"
android:textColor="#dedede"
android:text="No"
android:padding="5dp"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_alignTop="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:textColor="#dedede"
android:background="#drawable/circle_background_yes"
android:padding="5dp"
android:paddingRight="7dp"
android:paddingLeft="7dp"
android:gravity="center"
android:text="Yes"
android:id="#+id/textView"
android:layout_marginRight="13dp"
android:layout_marginEnd="13dp"
android:layout_alignTop="#+id/seekBar"
android:layout_alignRight="#+id/seekBar"
android:layout_alignEnd="#+id/seekBar"
android:layout_marginTop="4dp" />
In drawable
circle_background_yes.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#14ba92" android:width="0dip"/>
<solid android:color="#14ba92"/>
</shape>
circle_background_no.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#990800" android:width="0dip"/>
<solid android:color="#990800"/>
</shape>
seekbar_progressbar.xml
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape android:shape="rectangle" >
<corners android:radius="5dp"/>
<gradient
android:angle="180"
android:endColor="#14ba92"
android:startColor="#14ba92" />
</shape>
</item>
<item>
<clip>
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<gradient
android:angle="180"
android:endColor="#990800"
android:startColor="#d14900" />
</shape>
</clip>
</item>
<item>
<clip>
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<gradient
android:angle="180"
android:endColor="#990800"
android:startColor="#d14900" />
</shape>
</clip>
</item>
If you don't like the default thumb, you will have to create your own Drawable, which you can then set the thumb in code with something like:
Drawable thumb = getResources().getDrawable( R.drawable.myThumb );
SeekBar mSeekBar = (SeekBar) findViewById(R.id.mySeekBar);
mSeekbar.setThumb(thumb);
Or you can set the thumb in XML with:
<SeekBar
...
android:thumb="#drawable/seek_thumb" />
The actual Drawable can be an image, shape, or any other kind of Drawable you could possibly desire. If you want the thumb to change appearance when it is pressed, you will want to create a State List Drawable.
How can i achieve this scenario:
My android button tag in xml file:
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="100dp"
android:layout_height="10dp"
android:text="Select Plan"
android:id="#+id/button"
android:background="#ffffff"
android:textColor="#2D74B9"
android:layout_below="#+id/textView9"
android:layout_alignEnd="#+id/textView10"
android:layout_alignBottom="#+id/textView6"
android:layout_alignParentEnd="true"
android:clickable="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select Plan"
android:padding="10dip"
android:id="#+id/button"
android:background="#drawable/border"
android:textColor="#2D74B9"
android:clickable="true" />
and
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#2D74B9" />
<corners android:radius="10dip"/>
<solid android:color="#android:color/transparent" />
</shape>
This will be your button xml
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="100dp"
android:layout_height="10dp"
android:text="Select Plan"
android:id="#+id/button"
android:background="#drawable/borderButton"
android:textColor="#2D74B9"
android:layout_below="#+id/textView9"
android:layout_alignEnd="#+id/textView10"
android:layout_alignBottom="#+id/textView6"
android:layout_alignParentEnd="true"
android:clickable="true" />
And this will be your borderButton.xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dip"
android:color="#2D74B9" />
<corners android:radius="10dip"/>
<solid android:color="#android:color/transparent" />
Create the following xml file under drawable folder let say abc.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="16dp"/>
<stroke
android:color="#000000"
android:width="3dp"
/>
</shape>
And,use it in your button background.
<Button
android:background="#drawable/abc"/>
i design a Button combine between image.png and text . i have been searching but still can't get like what i want.
for selector :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid
android:color="#00ffffff" />
<!--make button border solid color, nontransparent-->
<stroke
android:color="#ffffff"
android:width="2dp"/>
<corners
android:radius="2dp"
android:bottomLeftRadius="1dp"
android:bottomRightRadius="1dp"
android:topLeftRadius="1dp"
android:topRightRadius="1dp"
/>
<padding
android:left="5dp"
android:right="5dp"
/>
</shape>
</item>
</selector>
for button.xml
<Button
android:layout_width="350dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:text="Guest"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textStyle="bold"
android:textSize="20sp"
android:gravity="left|center_vertical"
android:paddingLeft="20dp"
android:drawableRight="#drawable/ico_arrow_white_xhdpi"
android:background="#drawable/button_guest_register_login_border"/>
this image that i want to resize :
Thank in advance
Instead of button you can use this and implement click event of framelayout.
<FrameLayout
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="<Your Background image>">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="<Your text>"
android:textSize="18sp" />
<ImageView
android:id="#+id/image"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="right|center"
android:layout_marginRight="10dp"
android:gravity="center|right"
android:src="<image drawable>" />
</FrameLayout>
In my current android layout I have 5 buttons that are transparent.
I wish to change their shapes to fully circular and add an a 3d effect to them like the shading in the accepted answer for this question
How can I do so?
Current look:
Android xml 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:orientation="vertical"
android:background="#drawable/menubackground" >
<Button
android:id="#+id/btnSearchHomeDate"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:background="#drawable/circle2"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="10"
android:text="Date"
android:textSize="30sp" />
<Button
android:id="#+id/btnSearchHomeGame"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:background="#drawable/circle2"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="10"
android:text="Game"
android:textSize="30sp" />
<Button
android:id="#+id/btnSearchHomeMedValues"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:background="#drawable/circle2"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="5"
android:text="Meditation Values"
android:textSize="30sp" />
<Button
android:id="#+id/btnSearchHomeAttValues"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:background="#drawable/circle2"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="5"
android:text="Attention Values"
android:textSize="30sp" />
<Button
android:id="#+id/btnSearchHomeScore"
android:layout_width="270dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:background="#drawable/circle2"
android:shadowColor="#A8A8A8"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="5"
android:text="Score"
android:textSize="30sp" />
</LinearLayout>
Circle2 drawable:
<?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="#0000" />
<stroke
android:width="1dp"
android:color="#android:color/black" />
<padding
android:left="0.9dp"
android:right="0.9dp"
android:top="0.9dp"
android:bottom="0.9dp"/>
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape
android:shape="rectangle" >
<solid android:color="#0000" />
<stroke
android:width="1dp"
android:color="#4a6176" />
<padding
android:left="10dp"
android:right="10dp"/>
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>
ok first make a btn_blue.xml file in your drawable folder
put this code on it
<?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="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
now on button side
set
android:background="#drawable/btn_blue"
it will give you that view
i hope it helps you
I used this button generator. http://angrytools.com/android/button/
Is there an easy way to add an icon to the left of the text.
The drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="10dp"
/>
<gradient
android:angle="90"
android:startColor="#cacaca"
android:endColor="#FBFBFB"
android:type="linear"
/>
<padding
android:left="50dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="600dp"
android:height="60dp"
/>
<stroke
android:width="2dp"
android:color="#9f9f9f"
/>
</shape>
The button
<Button
android:id="#+id/angry_btn"
android:text="button"
android:textColor="#000000"
android:textSize="18sp"
android:layout_width="600dp"
android:layout_height="60dp"
android:background="#drawable/buttonshape"
android:shadowColor="#A4A4A4"
android:shadowDx="2"
android:shadowDy="3"
android:shadowRadius="5"
/>
Use android:drawableLeft attribute in the Button XML.
use 'android:drawableLeft="#drawable/userImage"' or 'android:drawableRight="#drawable/user_image"' in Button xml attribute
Try this wount really fail
<Button
android:id="#+id/fab"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/btn_registration_login"
android:text="LOGIN"
android:paddingLeft="125dp"
android:paddingRight="125dp"
android:textColor="#color/white"
android:drawableRight="#drawable/ic_navigate_next_white_18dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>