I would like to style the buttons in my Android application like this:
Whats the easiest way to create the buttons like above?
Currently I simply have a rectangle, here is the xml:
<Button
android:id="#+id/Main_DownloadCenter"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="25dp"
android:layout_marginLeft="90dp"
android:layout_marginRight="90dp"
android:background="#drawable/main_button_about_state"
android:text="txt" >
</Button>
What I need to do now is add the extra small rectangles that are on both sides of the main big rectangle. Meaning add a small_rect_grey and after that small_rect_aqua .. how can I achieve that?
Check out the Styling Your Button section:
http://developer.android.com/guide/topics/ui/controls/button.html#Style
Mainly borderless and custom background
button_custom.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_focused"
android:state_focused="true" />
<item android:drawable="#drawable/button_default" />
</selector>
activity_main.xml
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button"
android:onClick="action"
android:background="#drawable/button_custom" />
Related
I'm trying to make a custom switch like this:
with these properites:
text on both sides always shown.
different colors for on and off.
and these are two problems I faced since the switch only shows the text on the chosen side , and I can't seem to find a place where I can specify two different colors?
can I achieve this using the regular switch in android studio or must I use some library?
Thank you.
After researching I found a way that gives me exactly what I needed, this is what I got:
in case of anyone looking for a way to do it, this is how:
based on this post answer , which worked great for me.
this is what I did, I created two drawables one for On and another for Off :
switch_on.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_checked="true" android:drawable="#color/colorGray"/>
<item android:drawable="#color/colorPrimary" android:state_checked="true" />
<item android:drawable="#color/colorPrimaryDark" android:state_pressed="true" />
<item android:drawable="#color/transparent" />
</selector>
switch_off.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_checked="true" android:drawable="#color/colorGray"/>
<item android:drawable="#color/gray_light" android:state_checked="true" />
<item android:drawable="#color/black_overlay" android:state_pressed="true" />
<item android:drawable="#color/transparent" />
</selector>
Next , created a drawable for the outline of the switch.
outline.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#80ffffff" />
<stroke
android:width="1dp"
android:color="#color/gray_light" />
</shape>
one thing that I added is a drawable for the text color, because the color of the text changes depending on whether it's checked or not, this is it :
switch_text.xml
<?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/colorWhite"/>
<item android:state_checked="true" android:color="#color/colorWhite"/>
<item android:color="#color/gray_light"/>
</selector>
and finally, created RadioGroup in my layout this way:
<RadioGroup
android:id="#+id/toggle"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="#drawable/outline"
android:checkedButton="#+id/off"
android:orientation="horizontal">
<RadioButton
android:id="#+id/off"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/switch_off"
android:button="#null"
android:gravity="center"
android:padding="#dimen/fab_margin"
android:text="#string/off"
android:textColor="#drawable/switch_text" />
<RadioButton
android:id="#+id/on"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/switch_on"
android:button="#null"
android:gravity="center"
android:padding="#dimen/fab_margin"
android:text="#string/on"
android:textColor="#drawable/switch_text" />
</RadioGroup>
Notice the usage of each drawable in the right place:
android:background="#drawable/outline" for the RadioGroup
android:background="#drawable/switch_off" for the first RadioButton
android:background="#drawable/switch_on" for the second RadioButton
android:textColor="#drawable/switch_text" for both Radio Buttons
And that's all.
Use ToggleButton(change height/width as per image ratio) & selector, here's the code
<ToggleButton
android:id="#+id/toggle_"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:background="#drawable/on_off"
android:textOff=""
android:textOn=""/>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/ic_on" />
<item android:state_checked="false"
android:drawable="#drawable/ic_off" />
</selector>
To create ON and OFF labels for the switch you can use the attributes android:textOn and android:textOff with the switch declaration.
To ensure, that the text lebals are always displayed, especially for API Level bigger API21, also use this attribute: android:showText="true".
Then your switch should look like this:
<Switch
android:id="#+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="OFF"
android:textOn="ON"
android:showText="true"
/>
In order to change the default color, you have to specify a seperate design for it like that:
1. In file values\styles.xml define a style like that:
<style name="CustomSwitchTheme" parent="Theme.AppCompat.Light">
<item name="android:colorControlActivated">#FF0000</item>
</style>
It is important, that you also reference the correct parent theme.
2. After defining the new switch style, you can link your custom style to the switch with the attribute
android:theme="#style/CustomSwitchTheme"
Finally your Switch should look like that:
<Switch
android:id="#+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="OFF"
android:textOn="ON"
android:showText="true"
android:theme="#style/CustomSwitchTheme"
/>
I'm new to Android programming and want to create my own piano app.
I use absoluteLayout with dp - or is there a better way?
I have buttons declared like this
<Button
android:id="#+id/d3"
android:layout_width="55dp"
android:layout_height="200dp"
android:layout_x="55dp"
android:background="#drawable/selector_button"
android:scrollbars="horizontal"
android:gravity="bottom|center_horizontal"
android:paddingBottom="20dp"
android:textSize="60dp"
android:textColor="#ff4444" />
selector_button
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/white_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/key" />
</selector>
The problem is that the white key when pressed down draws over the black one
here's a screenshot
I've tried the bringToFront-method on the black key, an the elevation option on it, but haven't been able to solve the problem.
Do you have a hint?
I have designed my own graphics composed of two images for an Image Button - one focused and one unfocused. I have the following button in the layout and XML file for it in drawable folder:
<ImageButton
android:id="#+id/btnPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/borderlessButtonStyle"
android:src="#drawable/btn_play" />
.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/ic_playfocused" />
<item android:state_focused="true" android:drawable="#drawable/ic_playfocused" />
<item android:state_selected = "true" android:drawable = "#drawable/ic_playfocused" />
<item android:drawable = "#drawable/ic_playdefault" />
</selector>
When I click the button, it switches the two images properly, but the problem is that I also see a partially transparent blue rectangle that normally highlights button clicks. How can I get rid of this blue highlight so that when my button is clicked, the only thing that happens is the switch between the two images?
Thank you in advance :)
Ok so just set the button background to transparent, worked for me just now.
<ImageButton
android:id="#+id/btnPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
style="?android:attr/borderlessButtonStyle"
android:src="#drawable/btn_play" />
Is it possible to create a custom rating bar like this?
If yes, can you give me an example on how to do it?
Thanks in advance!
Great tutorial here.
I will copy important parts in this answer in case the link will be invalid.
First you should create a style which extends the original RatingBar
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="foodRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/food_ratingbar_full</item>
<item name="android:minHeight">48dip</item>
<item name="android:maxHeight">48dip</item>
</style>
</resources>
Then you need to provide 3 drawables, why? Because you should fill the 3 cases: empty, 50% and full.
This file will be food_ratingbar_full.xml
> Here’s an example of a filled rating (cookie):
<!-- This is the rating bar drawable that is used to
show a filled cookie. -->
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/cookie" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/cookie" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/cookie" />
<item android:drawable="#drawable/cookie" />
</selector>
I just use one image for all states (and it actually looks decent),
but as you can see from the selector, there are four different states
possible (#drawable/cookie is finally an actuall cookie png image).
And the cool thing here is that RatingBar component will automatically
fill in part of the cookie when needed based only on “full” and
“empty” images (if you support half ratings, as in my example image).
Then to use your style you should just add style attribute in RatingBar XML.
style="#style/foodRatingBar
The point is: you should create a custom style if you want.
Then you could use setRotation to rotate it.
Sets the degrees that the view is rotated around the pivot point. Increasing values result in clockwise rotation.
EDIT: This is not an appropriate answer, as OP wanted to customize RatingBar. But it is still a solution.
It is possible. You just have to put each one of the five image resources in your project and then, make a layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="60dp"
android:layout_height="match_parent"
android:background="#android:color/black"
android:gravity="left"
android:orientation="vertical"
android:weightSum="5" >
<ImageView
android:id="#+id/oneStar"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/twoStars"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:visibility="visible" />
<ImageView
android:id="#+id/threeStars"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:visibility="visible" />
<ImageView
android:id="#+id/fourStars"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:visibility="visible" />
<ImageView
android:id="#+id/fiveStars"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:visibility="visible" />
Put your resources as source of your ImageViews. That should be a start for you :D
I have a radio group with two radiobuttons. each button has a custom selector. I would like for the drawable in the selector to fill out the width of the radio button. Under different resolutions the button looks different. I am not using a nine-patch so this makes sense but even if i was I am not sure how to make the button drawable stretch. Below is the code for the radio group and a selector. widths are different from fiddling around.
The layout xml:
<RadioButton
android:id="#+id/radiomale"
android:layout_width="126dp"
android:layout_height="50dp"
android:minHeight="50dp"
android:minWidth="126dp"
android:button="#layout/signupmale"
/>
<RadioButton
android:id="#+id/radiofemale"
android:layout_width="128dp"
android:layout_height="50dp"
android:minHeight="50dp"
android:minWidth="128dp"
android:button="#layout/signupfemale" />
</RadioGroup>
The Selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_window_focused="false"
android:drawable="#drawable/genre_male_pressed" />
<item android:state_checked="false" android:state_window_focused="false"
android:drawable="#drawable/genre_male" />
<item android:state_checked="true" android:state_pressed="true"
android:drawable="#drawable/genre_male_pressed" />
<item android:state_checked="false" android:state_pressed="true"
android:drawable="#drawable/genre_male" />
<item android:state_checked="true" android:state_focused="true"
android:drawable="#drawable/genre_male_pressed" />
<item android:state_checked="false" android:state_focused="true"
android:drawable="#drawable/genre_male" />
<item android:state_checked="false" android:drawable="#drawable/genre_male" android:scaleType="fitXY" />
<item android:state_checked="true" android:drawable="#drawable/genre_male_pressed" android:scaleType="fitXY"/>
</selector>
The problem is when testing under different resolutions gaps form between the buttons. Thanks for any help.
RadioGroup is actually a subclass of LinearLayout so what you could do is use layout_weight of the children to control the spacing. This might be a little helpful: Linear Layout and weight in Android
and this Android layout_weight comportment
<RadioGroup
android:layout_width="match_parent"
android:layout_height="45dip"
android:weightSum="1"
android:orientation="horizontal"
>
<RadioButton
android:layout_width="match_parent"
android:layout_height="40dip"
android:layout_weight=".5"
/>
<RadioButton
android:layout_width="match_parent"
android:layout_height="40dip"
android:layout_weight=".5"
/>
</RadioGroup>
You are going to need to use ninepatch and maybe use padding left or right if there is text on the radio buttons.