In my app I have buttons which look like this:
I want to make them look like this :
My background.xml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/solid" />
<item android:drawable="#drawable/shape" />
</layer-list>
solid.xml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ababab" />
</shape>
And the shape.xml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<stroke android:width="3dp" color="#ff000000" />
<corners android:radius="15dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
How can I get the desired appearance of the buttons?
Top shape:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
<padding
android:left="3dp"
android:top="3dp"
android:right="3dp"
android:bottom="3dp" />
<solid
android:color="#ffffffff" />
<stroke
android:width="2dp"
android:color="#ff000000" />
</shape>
Middle shape:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:left="3dp"
android:top="3dp"
android:right="3dp"
android:bottom="3dp" />
<solid
android:color="#ffffffff" />
<stroke
android:width="2dp"
android:color="#ff000000" />
</shape>
Bottom shape:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp" />
<padding
android:left="3dp"
android:top="3dp"
android:right="3dp"
android:bottom="3dp" />
<solid
android:color="#ffffffff" />
<stroke
android:width="2dp"
android:color="#ff000000" />
</shape>
Example:
<Button
android:background="#drawable/top"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Top" />
<Button
android:background="#drawable/middle"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="-2dp"
android:text="Middle" />
<Button
android:background="#drawable/bottom"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="-2dp"
android:text="Bottom" />
Look at android:layout_marginTop="-2dp" - you need it to overlap border of top button with border of bottom button
Result (the graphic is not so good, sry):
After some tweaking you'll have a shape as you expect.
My tweaking:
You could do it with bitmaps or images. You'd need three images. One for the top button, one for the middle buttons, and one for the bottom button. Then just set the buttons to their appropriate background images.
I take a different approach to do this.
Usually I create a rounded corner background with will correspond to the background of the whole set of buttons. (Usually I have a linear layout wrapping them.) Then, there is a separator between each button.
That should do what you want in a simple way.
Related
I want to create a view similar to this image.
Is there a similar tagView or drawable resource file?
The text inside can have any length, so taking its image as background is not an option.
Use something like this:
<?xml version="1.0" encoding="utf-8"?>
<corners android:radius="18dp" />
<size
android:width="200dp"
android:height="20dp" />
<solid android:color="#808080" />
This one will be your bottom drawable with grey background, and
<?xml version="1.0" encoding="utf-8"?>
<corners
android:bottomLeftRadius="16dp"
android:topLeftRadius="16dp" />
<size
android:width="140dp"
android:height="20dp" />
<solid android:color="#FFFFFFFF" />
The white one. Next place it one at other in your layout using ConstraintLayout or RecyclerView.
Try below code. First you need to create Background for Right and left capsule like this.
Left capsule Background
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="30dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="30dp"
android:bottomRightRadius="0dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#f2efef"
android:startColor="#f4efef"
android:endColor="#faf6f6"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
Right capsule Background
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="0dp"
android:topRightRadius="30dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="30dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#b1b1b1"
android:startColor="#cec9c9"
android:endColor="#b9b3b3"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
Final Your Capsule like this Gives a background to textview like this.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:gravity="center"
android:text="Hibernate"
android:textColor="#color/imagepicker_black"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:background="#drawable/capsule_background_left"/>
<TextView
android:gravity="center"
android:text="1 Yr"
android:textColor="#color/imagepicker_black"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:background="#drawable/capsule_background_right"/>
</LinearLayout>
Hello I am designing this page in android (style only)
.
First 3 buttons has been designed by taking the reference from this.
But DONATE NOW button which I have designed is become transparent like this
as well as click event (statepreseed = "true")is also transparent like
.
and here is my code of background for DONATE NOW button
<?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" >
<corners
android:radius="0dp" />
<solid android:color="#33e7d283"></solid>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<stroke
android:width="4dp"
android:color="#00e9ca30"
/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<gradient
android:angle="225"
android:centerX="23%"
android:centerColor="#33f4c40e"
android:startColor="#ffdab605"
android:endColor="#ffdab605"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
</shape>
</item>
</selector>
If any one is having the solution.please help
You are using ARGB instead of RGB. Because of this you are creating image with transparent background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="0dp" />
<gradient
android:angle="225"
android:centerColor="#e7d283"
android:centerX="23%"
android:endColor="#ffdab605"
android:startColor="#ffdab605"
android:type="linear" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
Using e7d283 or ffe7d283 color-code instead of 33e7d283 might solve your problem for yellow image background.
Using 33 as alpha means you are giving only 20% opacity to your center color. That is the reason you can see background color in middle of your image.
Here you go..
Your button element should look like below.
<Button
android:id="#+id/angry_btn"
android:text="Button"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="#drawable/buttonshape"
android:shadowColor="#474747"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="3"
/>
ButtonShape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="65%"
android:centerColor="#F5FAF9"
android:startColor="#F39C12"
android:endColor="##F39C12"
android:type="linear"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
Output will look like below.
I want custom shape border like the one shown below:
This is what i have tried so far:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00000000"/>
<stroke android:width="0.1dp" android:color="#FFFFFF" />
<corners android:radius="5dp"/>
<!--<padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />-->
</shape>
But this does not give me curvy sides,only curvy corners.
I need curvy sides
Look at this when change the drawable to this you will get the following output.
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="25dp"
android:src="#drawable/rectangle" />
rectangle.xml file is
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<corners android:radius="20dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
ScreenShot :
Try like this.
Create a drawable
<?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/transparent" />
<stroke
android:width="3dp"
android:color="#android:color/white" />
<corners android:radius="17dp" />
</shape>
And then use it with any view.
<TextView
android:layout_width="50dp"
android:textColor="#android:color/white"
android:background="#drawable/rounded_corner"
android:layout_height="50dp"
android:gravity="center"
android:text="T" />
Change the radious and the height and width according to your need.
Please make sure the height and width of the view must be same if you want this type of effect.
I believe the title sums it up pretty well. I have a Button within a RelativeLayout. My goal is to have both text and a small leaf image on the left side of said text, for that I have used android:drawableStart. Here´s what baffles me: the Graphical Layout does show the image, but when emulator is run the buttons display without the image. I have also tried it on different versions with physical devices, same story.
I have no idea what could be wrong.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/background" >
<Button
android:id="#+id/neverMind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_neverMind"
android:textColor="#E4F5ED"
android:background="#drawable/button_shape_shadow"
android:layout_centerHorizontal="true"
android:drawablePadding="5dp"
android:drawableStart="#drawable/button_leaf"
android:onClick="finish"/>
</RelativeLayout>
I apply the following xml to style the button: (titled button_shape_shadow.xml)
<?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">
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
<solid android:color="#3D6652" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<layer-list>
<item android:right="6dp" android:top="6dp">
<shape android:shape="rectangle">
<corners
android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
<solid android:color="#3D6652" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="#87D1AC"
android:startColor="#62A382" />
<stroke android:width="3dp" android:color="#62A382" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
<padding android:bottom="10dp" android:left="10dp" android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
Here is an image of what I see. The first button shows what I want and what the Graphical Layout does show. The second button is what appears on a physical device or when an emulator executes it.
Im wondering if its possible to combine both having an image on a button and using a drawable source and having text above that?
I'm currently using this as my button style in drawable/red_btn.xml
<?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="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
And then my button
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:textColor="#fff"
android:textStyle="bold" />
Which looks like this
Now I would like to add another .png image (arrow.png) above this button to the right like this
Is this possible, and if, how can I do it?
Thanks in advance.
__________________________________________________________________________________________________________________________________________
Edit
After following Luksprog's advice below I now have "red_btn_normal.xml" in drawable
<?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="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
and red_btn_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right"
android:src="#drawable/arrow" />
</item>
</layer-list>
And then i create my button like this "red_btn.xml"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/red_btn_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/red_btn_normal"></item>
</selector>
And finally my button
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:textColor="#fff"
android:textStyle="bold" />
Problem is that it only shows the white arrows when I click the button and it dosn't show it when its not pressed. What is wrong with the code? =)
Im wondering if its possible to combine both having an image on a
button and using a drawable source and having text above that?
Yes, it's possible. Your selector will become:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/red_btn_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/red_btn_normal"></item>
</selector>
where the two drawables are two layer-list drawables with the first item being the items from your initial selector and the second being the .png image wrapped as a bitmap drawbale. For example for red_btn_pressed.xml you'll have:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right"
android:src="#drawable/arrow" />
</item>
</layer-list>
and the red_btn_normal.xml will be:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#992f2f"
android:startColor="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/allowed" android:gravity="right"/>
</item>
</layer-list>
Keep in mind that the arrow image will be on the right of the text only if the size of the Button allows it(as its part of the Button's background). If you're trying to impose some sort of positioning relation between the text of the Button and that arrow image then you'll need to extend the Button class and do it yourself.
I went with the simple
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:drawableRight="#drawable/arrow"
android:textColor="#fff"
android:textStyle="bold" />