I took a look at the code but couldn't see how I can add a border to a button. Example button that needs a border:
val memoryButton = button {
backgroundColor = mainColour
textColor = textColour
text = "I am a button!"
onClick {
doSomething()
}
}
Any ideas?
Try this
create file button_border.xml in drawable folder like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#00FF00"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
and simply add this to background of button like this
button {
text = "I am a button!"
background=getDrawable(R.drawable.button_border)
onClick {
println("Hello")
}
}
You will get border to your button :)
Related
I am Using LinearLayout to set BackGround Shape which has curve Corner. I have created drawable XML file. When I try to change LinearLayout backGround Colour at RunTime In My Activity, the colour appears is reflected in the Layout but background shape is not been applied. Need help on this
My layout.xml file:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/month_card"
android:backgroundTint="#drawable/circle_corner_rectangle"
app:backgroundTintMode="src_over">
shape.xml file
<shape android:shape="rectangle" >
<corners android:radius="500dip" />
<stroke android:width="2dip" android:color="#color/colorPrimary" />
<gradient android:angle="-90"/>
</shape>
Finally setting it on runtime inside the activity
layout.setBackgroundColor(colorList.get(position));
Use
final int sdk = android.os.Build.VERSION.SDK_INT;
if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
layout.setBackgroundDrawable(ContextCompat.getDrawable(context, R.drawable.circle_corner_rectangle)
);
} else {
layout.setBackground(ContextCompat.getDrawable(context,R.drawable.circle_corner_rectangle));
}
instead of
layout.setBackgroundColor(colorList.get(position));
Try this code
circle_corner_rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#E0F2F1" />
<corners android:radius="6dp"/>
</shape>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/month_card"
android:backgroundTint="#drawable/circle_corner_rectangle">
Maybe this work in your case
val shape = GradientDrawable()
shape.shape = GradientDrawable.RECTANGLE
shape.setStroke(mStrokeWidth!!,mStrokeColor!!)
shape.cornerRadius = 2f
imageView.background = shape
This code is in kotlin
Just try this ,,
layout.setBackgroundColor(Color.parseColor("#20A4E8"));
(or)
layout.setBackgroundColor(Color.BLUE);
just add another xml file You want and add this code in run time
layout.setBackgroundTintList(getContext.getResources().getColorStateList(R.color.your_xml_name));
Try this:
Drawable drawable = yourView.getBackground();
try {
drawable.setColorFilter(Color.parseColor(yourColor), PorterDuff.Mode.MULTIPLY);
} catch (Exception e) {
e.printStackTrace();
}
So I've implemented a custom button for our app, the implementation works perfect on Android 6 and up but I run into an issue on Android 5, where the background color doesn't get applied until I press the button once. Then it looks as it should.
Buttons not correct
Buttons correct
The implementation looks like this:
class MpButton #JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = R.style.ButtonStyle) : AppCompatButton(context, attrs, defStyleAttr) {
private val toScale = 0.9f
private val fromScale = 1f
init {
var style = 0
var allCaps = false
attrs?.let {
val a = context.obtainStyledAttributes(it, R.styleable.MpButton)
style = a.getInt(R.styleable.MpButton_MpButtonColor, 0)
allCaps = a.getBoolean(R.styleable.MpButton_MpButtonAllcaps, false)
a.recycle()
}
when (style) {
WHITE -> {
this.setBackgroundResource(R.drawable.mp_button_white)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
RED -> {
this.setBackgroundResource(R.drawable.mp_button_red)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
BLACK -> {
this.setBackgroundResource(R.drawable.mp_button_black)
this.setTextColor(ContextCompat.getColor(context, R.color.mp_black))
}
BLUE -> {
this.setBackgroundResource(R.drawable.mp_button_blue)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
YELLOW -> {
this.setBackgroundResource(R.drawable.mp_button_yellow)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
else -> {
this.setBackgroundResource(R.drawable.mp_button_green)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
}
this.gravity = Gravity.CENTER
val padding = Utils.convertDpToPixel(context, 5)
this.setPadding(padding, padding, padding, padding)
this.isAllCaps = allCaps
}
override fun dispatchTouchEvent(event: MotionEvent): Boolean {
when(event.action) {
MotionEvent.ACTION_DOWN -> {
this.animate().scaleX(toScale).scaleY(toScale).setDuration(100).start()
}
MotionEvent.ACTION_UP -> {
this.animate().scaleX(fromScale).scaleY(fromScale).setDuration(100).start()
}
}
return super.dispatchTouchEvent(event)
}
companion object {
const val WHITE = 1
const val RED = 2
const val BLACK = 3
const val BLUE = 4
const val YELLOW = 5
}
}
For info Ill also add the XML for one of the colors:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/mp_black">
<item>
<selector
android:exitFadeDuration="#android:integer/config_mediumAnimTime"
android:enterFadeDuration="#android:integer/config_shortAnimTime">
<item android:state_enabled="true" android:state_pressed="false">
<shape android:shape="rectangle">
<corners android:radius="30dp"/>
<solid android:color="#color/jungle_green" />
</shape>
</item>
<item android:state_enabled="true" android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="30dp"/>
<solid android:color="#color/forest" />
</shape>
</item>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:radius="30dp"/>
<solid android:color="#color/mp_gray_5" />
</shape>
</item>
</selector>
</item>
</ripple>
As a last ill copy the part of the XML of the view aswell to give as much info as possible:
<se.motesplatsen.app.ui.controls.MpButton
android:id="#+id/btnStartLogin"
android:layout_width="220dp"
android:layout_height="44dp"
android:text="#string/DEFAULT_LOGIN"
android:layout_marginBottom="10dp"
android:layout_marginTop="20dp"
app:MpButtonAllcaps="true"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/btnStartBecomeMember"/>
<se.motesplatsen.app.ui.controls.MpButton
android:id="#+id/btnStartBecomeMember"
android:layout_width="220dp"
android:layout_height="44dp"
android:layout_marginTop="25dp"
android:text="#string/BECOME_MEMBER_BUTTON"
app:MpButtonColor="1"
app:MpButtonAllcaps="true"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintTop_toBottomOf="#id/tvStartDesc"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/btnStartLogin"/>
UPDATE & SOLUTION!:
Finally got this to work! Solution was to remove
android:exitFadeDuration="#android:integer/config_mediumAnimTime"
android:enterFadeDuration="#android:integer/config_shortAnimTime"
Im guessing it somehow interferes with the ripple animation on certain Android versions. So for anyone else that have my issue, check so you dont have Ripple togheter with fadeduration in the selector :)!
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape >
<solid android:color="#android:color/white"/>
<size android:height="1dp"/>
</shape>
</item>
<item android:bottom="2dip" android:top="2dip" android:left="2dip" android:right="2dip">
<shape>
<solid android:color="#android:color/Transparent"/>
</shape>
</item>
this is exactly look like your correct button
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="5dp"
/>
<solid
android:color="#color/Transparent"
/>
just use this as background you are using on pressed state in your file
I have a SeekBar in my anko dsl (i use 0.10.4) layout like this
seekBar {
max = 2
progress = 1
progressDrawable = drawable(R.drawable.seek_bar_progress)
thumb = drawable(R.drawable.seek_bar_thumb)
onSeekBarChangeListener {
onProgressChanged { _, progress, _ ->
// Something
}
}
}.lparams(matchParent) {
setMargins(dip(16), dip(8), dip(16), dip(8))
}
seek_bar_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#D9D9D9"/>
</shape>
</item>
<item android:id="#android:id/progress">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorRed"/>
</shape>
</item>
seek_bar_thumb.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="oval">
<solid android:color="#color/colorRed"/>
<size android:height="26dp" android:width="26dp"/>
</shape>
</item>
and i have ugly view with this settings on any android devices
see picture.
But when i use "include" tag i have a correct seekbar implementation see picture
include<SeekBar>(R.layout.seek_lay) {
progress = 1
onSeekBarChangeListener {
onProgressChanged { _, progress, _ ->
// Something
}
}
}.lparams(matchParent) {
setMargins(dip(16), dip(8), dip(16), dip(8))
}
seek_lay.xml
<SeekBar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:max="2"
android:maxHeight="2dp"
android:minHeight="2dp"
android:progress="1"
android:progressDrawable="#drawable/seek_bar_progress"
android:thumb="#drawable/seek_bar_thumb"
/>
does anybody faces with the same problem? And how i can resolve this if it's possible?
Thanks
I face the same problem today.. And I search for hours to solve this problem too, but I could not find any 'normally' solution at all.
Finally I change the field mMaxHeight with java reflection to achieve the result.
Just notice that mMaxHeight belong to ProgressBar.class, so you need to use ProgressBar.class to find it.
val field = ProgressBar::class.java.getDeclaredField("mMaxHeight")
val accessible = field.isAccessible
field.isAccessible = true
field.setInt(seekBar, [value])
field.isAccessible = accessible
Result
I dont know it is a good or bad way, it just can work for me.
The code below changes the background color of the button from green to red when clicked, where the appropriate MvxColor's for bgColor are defined in my StartStopCommand. It works, but the MvxBind BackgroundColor overrides the shape of the Button.
Is there a way to keep this shape in Android and only change the color in such a way that it does not require platform specific code (as below)?
The button in Android:
<Button
android:text="Start"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_margin="5dip"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:background="#drawable/buttonshape"
local:MvxBind="Click StartStopCommand; BackgroundColor bgColor, Converter=NativeColor" />
where the shape xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="10dp"
/>
<solid
android:color="#3497db"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
Since you are setting a Background resource for your button, using BackgroundColor later will just discard everything you set there.
What you probably want is a Selector for your Background resource, which determines what is set when the Button is normal, focused, active and whatever other states you want to respond to. This is a very platform specific thing and you probably won't be able to reuse the behavior on other platforms.
Anyways. You could try something like this:
shape_selected.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="10dp" />
<solid android:color="#dddddd" /> <!-- use selected color here -->
<size
android:width="270dp"
android:height="60dp"/>
</shape>
shape_unselected.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="10dp" />
<solid android:color="#3497db" />
<size
android:width="270dp"
android:height="60dp"/>
</shape>
button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_selected" android:state_selected="true" />
<item android:drawable="#drawable/shape_selected" android:state_pressed="true" />
<item android:drawable="#drawable/shape_unselected" />
</selector>
Then you would use button_background for your Buttons Background property:
<Button
...
android:background="#drawable/buttonshape"
local:MvxBind="Click StartStopCommand" />
Otherwise if you want to keep using your property to set the BackgroundColor without nuking the shape, you will need to use the Background property instead, have a converter which dynamically builds the shape drawable.
So in your converter you would just return a ShapeDrawable with your color, which you could build like this:
private ShapeDrawable CreateShapeDrawable(Color color)
{
var roundRect = new RoundRectShape (new [] { 10f, 10f, 10f, 10f, 10f, 10f, 10f, 10f }, null, null);
var shape = new ShapeDrawable (roundRect) {
Paint = new Paint { Color = color }
};
return shape;
}
EDIT:
Something like this would probably work for a converter approach:
public class MyStateToDrawableConverter : MvxValueConverter<MvxColor, Drawable>
{
protected override Drawable Convert(MvxColor value, object parameter, CultureInfo culture)
{
return CreateShapeDrawable(value.ToNative());
}
private ShapeDrawable CreateShapeDrawable(Color color)
{
var roundRect = new RoundRectShape (new [] { 10f, 10f, 10f, 10f, 10f, 10f, 10f, 10f }, null, null);
var shape = new ShapeDrawable (roundRect) {
Paint = new Paint { Color = color }
};
return shape;
}
}
button_selected
<solid android:color="#color/btn_grey" />
<stroke
android:width="1dp"
android:color="#color/transparant" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
button_unselected
<solid android:color="#color/orange_500" />
<stroke
android:width="1dp"
android:color="#color/transparant" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
In java file
private Button btnMap;
btnMap = (Button) findViewById(R.id.btn_map);
if(bool)
{
btnMap.setBackgroundDrawable(getResources().getDrawable(R.drawable.button_selected));
}
else {
btnMap.setBackgroundDrawable(getResources().getDrawable(R.drawable.button_unselected));
what i basically wanna do is this:
When i click on the button i want its Text color to appear in a different color.
What i tried is this:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#color/red" />
<item
android:state_pressed="false"
android:color="#000" />
</selector>
and then i did use this selector as drawable on the button android:textColor
but this doesn solve it since it only changes its color while i press the button.
I want it like this:
Default: black
on click: blue
on click again: black
any ideas how to do that? :S
this is my shape for the button (if it matters):
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="-1dp"
android:insetLeft="-1dp"
android:insetRight="-1dp">
<selector>
<item android:state_pressed="false">
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/background_grey"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/pq_blue"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
</item>
</selector>
</inset>
thx in advance
EDIT
so i tried to do it programatically and tied the folowing just to see if it changes color´s ..but yea..it doesn´t (it seems like my onCLick event doesnt work):
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.listview_item, container, false);
final Button likeButton = (Button)rootView.findViewById(R.id.btLike);
likeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
String test = "tester";
if(BUTTON_STATE==BUTTON_STATE_ONCE){
likeButton.setTextColor(getResources().getColor(R.color.pq_blue));
BUTTON_STATE = BUTTON_STATE_TWICE;
}else{
likeButton.setTextColor(getResources().getColor(R.color.red));
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});
return rootView;
}
}
NOTE: i do all tht stuff in onCreateView since im in a Fragment of my ActionBarActivity(with tabs) if im doing it in the onCreate i get a null pointer exception at findViewById ( since it searches for the ID in my mainActivity, if im right?)
so yea..any ideas?
Your textselector.xml -
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#color/red" /> <!--selected text colour-->
<item
android:state_focused="true"
android:color="#color/red" />
<item
android:color="#color/blue" /> <!--unselected text colour-->
</selector>
Your button in layout.xml -
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exit"
android:textColor="#drawable/textselector" <!-- SET textselector HERE -->
android:background="#drawable/button_color"/>
You can use this code to do it programmatically:
myButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
ColorStateList myList=myButton.getTextColors();
int myColor=myList.getDefaultColor();
switch(myColor)
{
case Color.BLACK:
myButton.setTextColor(Color.BLUE);
break;
case Color.BLUE:
myButton.setTextColor(Color.BLACK);
break;
}
}
});
If You want to have a behaviour like:
First Click: Button text black
Second Click: Button text blue
third Click: button text black again
I don´t think it´s possible with the selector, also not with state focused. Because if any other view will be clicked, the button is not focused anymore and will loose the textcolor, goes back to default. You have to do it in a programmatically way:
First, set the default textColor to what You want: black inside Your xml. So than You have the color on no press. make a globa variabel to save the state:
private int BUTTON_STATE = 0;
private final int BUTTON_STATE_ONCE = 0;
private final int BUTTON_STATE_TWICE = 1;
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
if(BUTTON_STATE==BUTTON_STATE_ONCE){
button.setTextColor(Color.BLUE);
BUTTON_STATE = BUTTON_STATE_TWICE;
}else if(BUTTON_STATE==BUTTON_STATE_TWICE){
button.setTextColor(Color.BLACK);
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});
That´s just a possible solution, there are many ways..
EDIT
for Your code:
Create that global variables like i did in my example above, and use them in the if/else statement:
likeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if(BUTTON_STATE==BUTTON_STATE_ONCE){
likeButton.setTextColor(getResources().getColor(R.color.pqBlue));
BUTTON_STATE = BUTTON_STATE_TWICE;
}else if(BUTTON_STATE==BUTTON_STATE_TWICE){
likeButton.setTextColor(getResources().getColor(R.color.pqBlack));
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});
Try adding text_effect.xml drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/white" /> <!-- pressed -->
<item android:color="#color/black" /> <!-- default -->
</selector>
add this line in button control
android:textColor="#drawable/text_effect"
It will work. Enjoy:)
If you do not mandatorily need a simple Button, you could use a ToggleButton that is made for binary-state handling... With a ToggleButton your selector would look like this :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/red" />
<!-- Default State -->
<item android:color="#000" />
</selector>
It seems like you wanna implement something like toggle button.
Instead of button u can use toggle button.
Though if you wanna use button only then u need to do some changes in your java code as well as xml code also
Create a file def_btn.xml it will look like this..
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/background_grey"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
Create another file press_btn.xml it will look like this..
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/pq_blue"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
Inside your activity declare a private boolean variable(say isPressed) by default isPressed is false. & for default button background will be def_btn.xml
Now write following in button's onClick event.
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
isPressed = !isPressed;
if(isPressed){
btn.setBackgroundResource(R.drawable.def_btn);
}else{
btn.setBackgroundResource(R.drawable.press_btn);
}
}
});
That's it..