I want to make a button for my shape like this one
Is there a way to do this with xml ?
Like setting some points, in my case I have 5..
What you need is to create a shape xml file in your project's drawable-xxx folder and then use this shape as background for a button.
Here is the shape file called arrow_shape.xml:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Colored rectangle-->
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#5EB888" />
<corners android:radius="0dp"/>
</shape>
</item>
<!-- This rectangle for the top arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="-40dp"
android:bottom="65dp"
android:right="-30dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<!-- This rectangle for the lower arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="65dp"
android:bottom="-40dp"
android:right="-30dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
Then use it as button's background, for example
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/arrow_shape"/>
Here is the screenshot:
More info on Layer-List you can find here.
EDIT:
Keep in mind though that I used certain values for the shape's width and height. If you change those you might need to change the values of the top, bottom and right attributes. So, in that case consider using different values in your project's values directory.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="50dp" android:height="10dp" android:right="6dp">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
<corners
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"/>
</shape>
</item>
<item android:width="7dp" android:height="7dp"
android:left="50dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
</shape>
</rotate>
</item>
</layer-list>
With the Material Components library you can just use the standard MaterialButton defining the shapeAppearanceOverlay attribute:
Something like:
<com.google.android.material.button.MaterialButton
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Button.Triangle"
... />
And in your style define:
<style name="ShapeAppearanceOverlay.Button.Triangle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
Related
List item
my code is in the style
this is inside the style.xml
<style name="SpinnerTheme">
<item name="android:background" >#drawable/bg_spinner</item>
</style>
bg_spinner.xml
<item>
<layer-list>
<item >
<bitmap android:gravity="bottom" android:src="#drawable/under_line" />
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/dropdown" />
</item>
</layer-list>
</item>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/SpinnerTheme"
android:layout_marginTop="15dp"
android:hint="Sex"
android:id="#+id/spinnerSex" />
date,month and year are in full width,and background image also less width, but when it comes sex its not showing full width.
i need the under line in sex full width, please do the needfull
You can draw line by xml code. like below
<item >
<layer-list>
<item>
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent" />
<!-- background color of box -->
</shape>
</item>
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#323232" />
<!-- color of stroke -->
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/downlarrow" />
</item>
</layer-list>
</item>
output looks something like this
replace your xml code with this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke
android:color="#000000"
android:width="2dp"
/>
</shape>
</item>
<!-- Overlap the left, top and right border using background color -->
<item
android:bottom="2dp"
>
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
</shape>
</item>
Full XML Code is:
Keep below code in your drawable directory. File name can be like this: "bg_spinner.xml"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<!-- background color of box -->
</shape>
</item>
<item android:left="-2dp" android:right="-2dp" android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#323232" />
<!-- color of stroke -->
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#mipmap/arrow_down" />
</item>
</layer-list>
</item>
</selector>
In above code change bitmap src to your arrow image from drawable or mipmap directory. You can take nice arrow from "File -> New -> Vector Asset"
In your style.xml file keep below code:
<style name="SpinnerLineTheme" parent="android:Widget.Spinner">
<item name="android:background">#drawable/bg_spinner</item>
<item name="android:elevation">0dp</item>
<item name="android:popupBackground">#color/colorWhite</item>
</style>
And call the theme from spinner like below:
<Spinner
android:id="#+id/mySpinner"
style="#style/SpinnerLineTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorWhite"
android:dropDownWidth="300dp"
android:dropDownVerticalOffset="60dp"
android:gravity="start"
android:paddingEnd="30dp"
android:spinnerMode="dropdown" />
PS: Inspired by #Jayanth answer, as edit request queue is full.
I have a num keypad that I have created using buttons and have hide my android soft keyboard.
This is how my every button looks like for different numbers
<Button
android:id="#+id/seven"
android:text="7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/CustomStyle"
android:background="#drawable/gridlayout_border"
/>
Notice that I am using CustomStyle whose code looks like this with the filename button_style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="CustomStyle">
<item name="android:textSize">24dp </item>
<item name="android:textColor">#fdfdfd</item>
<item name="android:textStyle">bold </item>
<item name="android:padding">20dp</item>
</style>
</resources>
Also, I am using gridlayout_border as a background
gridlayout_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-10dp" android:right="0dp" android:top="-10dp"
>
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<stroke android:color="#ffffff" android:width="2dp"/>
</shape>
</item>
</layer-list>
Since, I have used up the style and background tag in button. How can I now apply one more style/color when my button is being pressed on num keypad?
Thanks in advance
You can use selector to determine different states of a view. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<!-- Write your focused state code-->
</item>
<item android:state_pressed="true">
<!-- Write your pressed state code-->
</item>
<item>
<layer-list>
<item android:left="-10dp" android:right="0dp" android:top="-10dp"
>
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<stroke android:width="2dp" android:color="#ffffff"/>
</shape>
</item>
</layer-list>
</item>
</selector>
I am using the following shape in my app
<?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="oval" >
<solid android:color="#color/primary_light"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="oval">
<stroke android:color="#color/primary_light" android:width="5dp"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/transparent"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</selector>
It is there in my drawable folder. Now I am updating my app to Lollipop and I wish to give a ripple feedback on the circular button that I used.
So in drawable-v21 folder I changed it to a ripple selector:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/primary_light">
<item>
<selector>
<item android:state_focused="true">
<shape android:shape="oval">
<stroke android:color="#color/primary_light" android:width="5dp"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#android:color/transparent"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</selector>
</item>
</ripple>
But unfortunately the ripple effect is not generated by using the above drawable in Lollipop. Is it because of the <solid android:color="#android:color/transparent"/>?
Can anyone show me where I have go wrong? Thanks
After a few trial and errors it seems I have misunderstood the hierarchy of the selector and item.
The following works perfectly.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/primary_light">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#android:color/white"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</ripple>
This works with a transparent background:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight"
android:exitFadeDuration="#android:integer/config_shortAnimTime">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="3dp"/>
<!-- This color is needed to be set - doesn't affect anything -->
<solid android:color="#android:color/white"/>
</shape>
</item>
<!-- This is the background for your button -->
<item>
<!-- Use the shape you want here -->
<shape android:shape="rectangle">
<!-- Use the solid tag to define the background color you want -->
<solid android:color="#android:color/transparent"/>
</shape>
</item>
</ripple>
This was modified a bit from this answer: Transparent ripple
You can have a ripple effect on transparent or semi-transparent background when the ripple mask is specified. The ripple mask is a Drawable but only the alpha value is used setting the ripple alpha per pixel. Here is an example for creating programmatically.
var background = new android.graphics.drawable.GradientDrawable();
background.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
background.setColor(0x77FFFFFF); // semi-transparent background
background.setCornerRadius(10);
background.setStroke(3, 0xFF1144FF); // border color
var mask = new android.graphics.drawable.GradientDrawable();
mask.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
mask.setColor(0xFF000000); // the color is irrelevant here, only the alpha
mask.setCornerRadius(5); // you probably want the same corner as the background
var rippleColorLst = android.content.res.ColorStateList.valueOf(
android.graphics.Color.argb(255,50,150,255)
);
// aaaand
var ripple = new android.graphics.drawable.RippleDrawable(rippleColorLst,background,mask);
yourButton.setBackground(ripple);
(Sorry for the JavaScript/NativeScript code, probably one can understand it)
Following code works for custom shape with ripple effect for transparent button -
main_activity_buttons_ripple_with_background.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="#888888"
tools:targetApi="lollipop">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="25dp" />
<!-- This color is needed to be set - doesn't affect anything -->
<solid android:color="#000" />
</shape>
</item>
<!-- This is the background for your button -->
<item>
<!-- Use the shape you want here -->
<shape android:shape="rectangle">
<!-- Use the solid tag to define the background color you want -->
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#FFF" />
<corners android:radius="25dp" />
</shape>
</item>
</ripple>
styles.xml
<style name="MainActivityButtonsStyle">
<item name="android:background">#drawable/main_activity_buttons_ripple_with_background</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_margin">15dp</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">50dp</item>
<item name="android:textColor">#FFF</item>
<item name="android:textSize">18sp</item>
</style>
activity_main.xml
<LinearLayout 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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_alignParentTop="true"
style="#style/MainActivityButtonsStyle"
android:text="#string/button_search_by_id" />
</RelativeLayout>
</LinearLayout>
I'm trying to style the divider for ListView. What I want is just 2 simple horizontal lines.
list.xml
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/ListView" >
</ListView>
styles.xml
<style name="ListView" parent="android:style/Widget.ListView">
<item name="android:divider">#drawable/divider</item>
<!-- 5dp: just to make sure there's enough space -->
<item name="android:dividerHeight">5dp</item>
</style>
divider.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#00ffff" />
<size android:height="1dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
<size android:height="1dp" />
</shape>
</item>
</layer-list>
The result is a horizontal line with height of 5dp(should be 2, isn't it?) and color of red(color of second item). The first item with color #00ffff does not show up at all.
Can someone please suggest the code for 2 simple horizontal lines?
I'd better answer my own question...
It seems styles.xml - style - item takes the color of the last item in layer-list as background for the entire divider. This last item is on top of other layers, and that is why other items in the layer-list don't show up.
The key is padding.
styles.xml
<style name="ListView" parent="android:style/Widget.ListView">
<item name="android:divider">#drawable/divider</item>
<item name="android:dividerHeight">10dp</item>
</style>
divider.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#0000ff" />
<padding android:top="5dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
</shape>
</item>
</layer-list>
So in my case I just need to change 10dp/5dp to 2dp/1dp to get 2 thin horizontal lines.
I have created a customized title. The supported xmls are
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="CustomWindowTitleBackground" />
<style name="CustomTheme" parent="android:Theme">
<item name="android:windowTitleSize">50dp</item>
<item name="android:windowTitleBackgroundStyle">#style/CustomWindowTitleBackground
</item>
</style>
</resources>
customtitle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:endColor="#color/grey7"
android:startColor="#color/black" />
<corners
android:bottomLeftRadius="12dp"
android:bottomRightRadius="12dp"
android:topLeftRadius="12dp"
android:topRightRadius="12dp" >
</corners>
</shape>
The resultant title bar should be rounded from four corners but it is only rounded on top left and top right.
How to make it rounded on all corners???
you can use android:background to control the round effect:
for example:
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:startColor="#color/bar_more_main_start"
android:endColor="#color/bar_more_main_end" />
<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>