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>
Related
I have a button with some shapes as a background so basically I want to move the text a little bit to the bottom so it makes a 3D effect
Here is an image of my button
Left(not clicked) and Right(clicked). Please ignore click circle.
Selector XML file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false"
android:state_pressed="false" android:drawable="#drawable/button_red_normal" />
<item android:state_focused="false"
android:state_pressed="true" android:drawable="#drawable/button_red_pressed" />
<item android:state_focused="true"
android:state_pressed="false" android:drawable="#drawable/button_red_focused" />
</selector>
Normal state drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
<corners android:radius="#dimen/button_radius" />
</shape>
</item>
<item android:bottom="#dimen/button_padding_bottom">
<shape android:shape="rectangle">
<solid android:color="#color/red" />
<corners android:radius="#dimen/button_radius" />
</shape>
</item>
</layer-list>
Pressed state drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/red" />
<corners android:radius="#dimen/button_radius" />
</shape>
Is it possible to make the text move to the bottom just with XML?
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"
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...