I have the following XML code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="0dp"
android:color="#CCFFFFFF" />
<solid android:color="#55FFFFFF" />
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp" />
<corners android:topLeftRadius="0dp" android:topRightRadius="0dp" android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp" />
</shape>
which produces the following:
How do I modify the code so there is a black line on the top like this:
You can add above the text and below the shape in xml file this code
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000" />
You should do what with nine-patch or insert View widget with height 1dp (or more) and black background above this TextView.
when the color of the top layer IS NOT semi-transparent, there is a fast, versatil, and clean, to add borders to a view, with layerlist drawable.
Probably you couldnt use it in your case, but it this will be handful to somebody else who reach this question
for this, you create an xml file in you drawable folder, called border.xml with this content:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<padding android:left="0dp" android:top="0dp" android:right="0dp"
android:bottom="0dp" />
<solid android:color="#000000" />
</shape>
</item>
<item >
<shape
android:shape="rectangle">
<padding android:left="0dp" android:top="10dp" android:right="0dp"
android:bottom="0dp" />
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
Then in your layout, you use
android:background="#drawable/border"
with this you have a way to quickly add borders, to one, or more sides of any view.
Related
This is my TabLayout xml code:
<android.support.design.widget.TabLayout
app:tabBackground="#drawable/profile_tab_selector"
android:id="#+id/profileTabLayout"
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/white">
</android.support.design.widget.TabLayout>
And this one is for tabBackground="#drawable/profile_tab_selector":
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<stroke android:width="1dp" android:color="#color/white"/>
<solid android:color="#color/white"/>
</shape>
</item>
<item>
<shape>
<stroke android:width="1dp" android:color="#color/white"/>
<solid android:color="#color/blue"/>
</shape>
</item>
</selector>
I want to design it like this, with rounded cornenrs:
The problem is that in selector I can not detect the first and the last tabs to modify them. And this is the result:
You have given the shape in the drawable file , but you didn't give corner radius.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<stroke
android:width="10dp"
android:color="#android:color/transparent"></stroke>
<solid android:color="#23cf5a" />
</shape>
And you can design something like this too
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="16dp"
android:bottomRightRadius="16dp"
android:radius="32dp"
android:topLeftRadius="16dp"
android:topRightRadius="16dp" />
<solid android:color="#color/tab_color" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:height="32dp" />
</shape>
Your Solution is here
Don't Use : app:tabBackground="#drawable/profile_tab_selector"
Use : android:background="#drawable/profile_tab_selector"
You also try it.
I wanna have a button with backgroundTint and corner radius :D
Here is the style I defined:
<style xmlns:tools="http://schemas.android.com/tools" name="myButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:background">#drawable/button_light</item>
<item name="android:backgroundTint" tools:targetApi="lollipop">#e0e0e0</item>
</style>
And the #drawable/button_light code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="15dp" />
<solid android:color="#FAFAFA" />
</shape>
And I apply #style/myButton to the button I want and the result is I have round corners but no ripple effect (backgroundTint doesn't work indeed).
How can I solve this?
You can use layer-list to achieve this.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<corners android:radius="15dp" />
<solid android:color="#FAFAFA" />
</shape>
</item>
<!-- Put any image or anything here as the drawable -->
<item android:drawable="?attr/selectableItemBackground"/>
</layer-list>
Create a drawable/butt.xml file containing:
?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
android:width="2dip"
android:color="#03ae3c" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#3AA76D" />
<stroke
android:width="2dip"
android:color="#03ae3c" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
</item>
</selector>
2: Use it in button tag in any layout file in your code
<Button
android:layout_width="220dp"
android:layout_height="220dp"
android:background="#drawable/butt"
android:text="#string/btn_scan_qr"
android:id="#+id/btn_scan_qr"
android:textSize="15dp"
/>
you can use from this library :
material ripple effect
to add ripple effect to your button and adding your shape to button
like this :
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
>
<Button
android:id="#+id/call_btn"
android:layout_width="60dp"
android:layout_height="25dp"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:text="call"
android:textSize="12sp"
android:background="#drawable/call_btn_bg"
android:textColor="#color/deep_orange_600"
/>
</com.balysv.materialripple.MaterialRippleLayout>
I am new to Android and i was setting up my xml file. Is there a way to change the colour of the button with a feel of "click" when the button is clicked and then return to it's original colour WITHOUT changing the colour of the border?
I am using eclipse.
Thank you
First you need to make some xml files in the Drawable folder:
btn_clicked.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#ff0000" />
<stroke
android:width="1dp"
android:color="#fff" />
</shape>
btn_normal.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#00ff00" />
<stroke
android:width="1dp"
android:color="#fff" />
</shape>
name_btn.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_clicked" android:state_pressed="true"/>
<item android:drawable="#drawable/btn_normal"/>
</selector>
and then use it like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<Button android:layout_width="140dp" android:layout_height="40dp"
android:background="#drawable/cancel_btn" />
</RelativeLayout>
AndroidGeek,
You can specify the effects inside an .XML file under the drawable folder and then linking the file to the Button under the layout folder.
Example:
Inside your activity_main.xml Your Button tag will look like as :
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Styled Button"
android:id="#+id/styledButton"
android:background="#drawable/button"/>
Create an XML file [Example: button.xml] under the res/drawable folder to specify the changes that will take place when the button is pressed.
Below is the contents of the button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Changes that the button has to show when it is pressed -->
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ef4444" />
<!-- Keep the stroke values same if you want the same border effect, irrespective you press / un-press the button
In case ih you want to change the border thickness, while the button is being clicked,
then increase the "android:width" value -->
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<!-- Default appearance when the button is displayed -->
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Hope this helps.
This should work irrespective of the IDE. Eclipse and Android Studio.
I need to make a custom rectangle that should use hex colors from #bff54a up to #88c010.
Actually I have this xml but I can only use one of those colors. How can I make the gradient possible? I already searched and I didn't found anything like this.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/gray_light" />
<solid android:color="#88c010" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
Thanks to all!
Use Gradient as the color of the Drawable :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/gray_light" />
<gradient
android:type="linear"
android:centerX="0"
android:centerY="1"
android:startColor="#bff54a"
android:endColor="#88c010" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
See Drawable Resources
You can create file shape and implement this code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangule"> <!-- oval -->
<gradient
android:startColor="#388E3C"
android:endColor="#448AFF"
android:centerColor="#color/colorPrimary"
/>
</shape>
</item>
</selector>
Result
I'm using an xml file in drawable to make my buttons in my app 'pretty'.
^ Like that.
It works fine, however I want to add a tick or cross to the buttons (to mark completed or not) - I'm not too sure if it's possible.
Here is my xml for the buttons:
<?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="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</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="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
</selector>
I'm setting the Background element on the button to use the above like #drawable/bluebuttons
Any help will be really appreciated
If you are using button then you can use Button's property in XML file.
android:drawableRight="#drawable/ANY_DRAWABLE_IMAGE"
In my case it was like this:
<Button android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
...
android:drawableRight="#drawable/ic_tick" />
Or in your code, you can put like this:
// PUT ZERO FOR NO DRAWABLE
textView1.setCompoundDrawablesWithIntrinsicBounds(LEFT_DRAWABLE, TOP_DRAWABLE,RIGHT_DRAWABLE, BOTTOM_DRAWABLE);
Hope this will help you.
If you are interested in setting image on button dynamically from Activity then you can use this :
Drawable iconTick= getApplicationContext().getResources().getDrawable(R.drawable.icon_tick);
mBtnTaks1.setCompoundDrawablesWithIntrinsicBounds(iconTick, null, null, null); // left,top,right,bottom
Thanks.