In my app i need to display toggle button that looks like this (this one is for checked state) http://s58.radikal.ru/i159/1308/dc/e3cb45e9a71f.jpg, dark color is parent view background.
It must be just a colored circle with 50x50 size, but for checked state it must include that blue border outside. The whole button must be always 70x70, so it has enough space for border. I guess i have to use simple shape drawable for default state and layer-list drawable for checked state, but it doesnt work for me, it just creates some kind of stretched oval and without any border(like this http://s019.radikal.ru/i619/1308/50/0f02f9ab2ea4.jpg). Here is the code i'm using for ToggleButton background:
first_board_color_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="#drawable/first_board_color_dot_checked"></item>
<item android:drawable="#drawable/first_board_color_dot_default"></item>
</selector>
first_board_color_dot_checked.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:innerRadius="34dp"
android:shape="ring"
android:thickness="2dp" >
<solid android:color="#color/first_player_dot_color" />
</shape>
</item>
<item>
<shape android:shape="oval" android:gravity="center">
<solid android:color="#color/first_board_color" />
<size
android:height="50dp"
android:width="50dp" />
</shape>
</item>
</layer-list>
first_board_color_dot_default.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" android:gravity="center">
<solid android:color="#color/first_board_color" />
<size
android:height="50dp"
android:width="50dp" />
</shape>
</item>
</layer-list>
this is how i'm setting up button
<ToggleButton
android:id="#+id/board_color_button1"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:text=""
android:textOn=""
android:textOff=""
android:background="#drawable/first_board_color_dot"
android:checked="true"
android:onClick="boardColorButtonClicked"/>
i cannot understand what im doing wrong...
Related
I try to put a border for a button in android but unfortunately I can't see the button border.
Drawable File 👇
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="12dp" />
<stroke android:width="3px" android:color="#7E8082" />
</shape>
</item>
</selector>
XML 👇
<Button
android:id="#+id/btn_signup"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="122dp"
android:background="#drawable/bg_signup"
android:fontFamily="#font/poppins_semibold"
android:text="Create an Account"
android:textAllCaps="false"
android:textColor="#color/black"
app:layout_constraintTop_toBottomOf="#+id/btn_login" />
You don't need to use a custom drawable, just use a MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#7E8082"
app:strokeWidth="1dp"
app:cornerRadius="12dp"/>
Don't use a selector for single option use shape directly
bg_signup
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#cdcdcd"/>
<corners
android:radius="4dp"
/>
<stroke
android:width="1dp"
android:color="#000"
/>
</shape>
use Style attribute instead of android:background="#drawable/bg_signup"
make a custom style then call it android:style="#style/bg_signup"
I have a circular drawable on which I set a 8dp white stroke, like this:
circleImage = (ImageView) rootView.findViewById(R.id.image);
circleImage.setOnClickListener(clickListener);
drawable = (GradientDrawable) circleImage.getBackground();
drawable.setStroke(8, getResources().getColor(R.color.colorWhite));
The XML for circleImage looks like this:
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:id="#+id/image"
android:background="#drawable/roundcorner"
android:clickable="true"/>
What I want to do now is to change the drawable.setStroke to include a gradient color like this
I suppose the easiest way to achieve this is to write something in the drawable XML, but I don't quite know how to achieve this.
roundcorner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="100dp"
android:topRightRadius="100dp"
android:bottomLeftRadius="100dp"
android:bottomRightRadius="100dp"
/>
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"
/>
<size
android:width="100dp"
android:height="100dp"
/>
</shape>
You should do something like this. Use layer-list with 2 shapes. First one is for gradient stroke and second one is for solid.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" >
<gradient
android:angle="360"
android:startColor="#543456"
android:endColor="#ff00b5"
android:type="linear" />
<size android:width="24dp"
android:height="24dp"/>
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="oval" >
<solid android:color="#fff" />
</shape>
</item>
</layer-list>
This code looks like this
If you need inner color to be transparent, then you can use a ring shape:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="2dp"
android:useLevel="false">
<gradient
android:startColor="#color/sea_green"
android:endColor="#color/black"
android:angle="270" />
</shape>
I have a button
<Button
android:id="#+id/loginButton"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#drawable/button_shape"
android:text="#string/login"
android:textColor="#ffffff"
android:textSize="12sp" />
following is button_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/button_gradient_login" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/button_gradient_login" />
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="16dp" />
<solid android:color="#color/valid_btn_clr"></solid>
<corners android:radius="10dp"></corners>
</shape>
</item>
Following is button_gradient_login.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="360" android:startColor="#color/red" android:endColor="#color/green"/>
<corners android:radius="4dp"></corners>
</shape>
</item></layer-list>
Now I want to change the background color of button_shape.xml and on press start and end color of button_gradient_login.xml at run time depens on my conditions
You can make drawable selector programatically
Here is code for state_activated.
Please refer below code.
GradientDrawable gradientDrawable = new GradientDrawable();
gradientDrawable.setStroke((int) context.getResources().getDimension(R.dimen.dp1), Color.BLACK);
gradientDrawable.setCornerRadius(context.getResources().getDimension(R.dimen.dp5));
gradientDrawable.setColor(((MainActivity) context).getBgColor());
GradientDrawable gradientDrawableDefault = new GradientDrawable();
gradientDrawableDefault.setStroke((int) context.getResources().getDimension(R.dimen.dp1), Color.BLACK);
gradientDrawableDefault.setCornerRadius(context.getResources().getDimension(R.dimen.dp5));
gradientDrawableDefault.setColor(Color.WHITE);
StateListDrawable stateListDrawable = new StateListDrawable();
stateListDrawable.addState(new int[]{android.R.attr.state_activated}, gradientDrawableDefault); // if activated true
stateListDrawable.addState(StateSet.WILD_CARD, gradientDrawable); // rest all the state
How to change the text color of the keys?
Here is my keyboard layout.
<?xml version="1.0" encoding="UTF-8"?>
<android.inputmethodservice.KeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:keyBackground="#drawable/key_background"
android:background="#color/keyboard_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:keyPreviewLayout="#layout/preview" />
key_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Bottom 2dp Shadow -->
<item android:top="4dp"
android:left="2dp"
android:right="2dp">
<shape android:shape="rectangle" >
<solid android:color="#color/key_shadow" />
<corners android:radius="4dp"/>
</shape>
</item>
<!-- White Top color -->
<item android:bottom="4px"
android:top="4dp"
android:left="2dp"
android:right="2dp">
<shape android:shape="rectangle" >
<solid android:color="#color/white" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Please look into this you will get an idea for your problem.
http://developer.android.com/reference/android/inputmethodservice/KeyboardView.html
android:keyTextColor="your color code"
U can use android:keyTextColor attribute: like
android:keyTextColor="#android:color/black"
Am trying to make a circular togglebutton with a green background. i used
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:visible="true">
<solid android:color="#color/material_green_A200" />
</shape>
for defining the shape and then used
android:background="#drawable/circlebutton"
to change the shape and color but nothing changes. it shows up with a no background color or shape but the text is visible
Try this,
Your activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/style_toggle_button" />
</RelativeLayout>
Style Toggle Button(style_toggle_button.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/offcirclebutton" android:state_enabled="false"/>
<item android:drawable="#drawable/oncirclebutton" android:state_pressed="true"/>
<item android:drawable="#drawable/oncirclebutton" android:state_checked="true"/>
<item android:drawable="#drawable/oncirclebutton" android:state_focused="true"/>
<item android:drawable="#drawable/offcirclebutton"/>
</selector>
Style OFF(offcirclebutton.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:visible="true">
<solid android:color="#android:color/holo_orange_dark" />
</shape>
Style ON(oncirclebutton.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:visible="true">
<solid android:color="#android:color/holo_green_dark" />
</shape>