I am totally new in android programming and I was messing around a bit with lay-outs in order to be able to produce an app for an old (android 2.3.3) device. I messed around a lot in the GUI editor in android studio to make (in my opinion) a pretty nice looking GUI. I only then noticed that I was working in API 23. This resulted in a completely messed up GUI for my old device (API 10) and then I started changing everything so that it would look at least as nice for the device I want to develop for.
I worked with a vertically oriented LinearLayout, put some TextViews and a Chronometer in there and the big finale (the cause of my problems) a ToggleButton that changed color as it was clicked. My code for that ToggleButton looks as follows:
<ToggleButton android:id="#+id/toggleButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dip"
android:enabled="true"
android:background="#drawable/toggle_button"
android:button="#android:drawable/ic_btn_speak_now"
android:buttonTint="#FFFFFF"
android:textAllCaps="false"
android:textOn="#string/toggle_on"
android:textOff="#string/toggle_off"
android:textColor="#FFFFFF"
android:gravity="center" />
In this code fragment ic_btn_speak_now is some speaker-icon I found in the system-drawables. toggle_button on the other hand was written by me and looks as follows:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#drawable/toggle_color" />
<corners android:radius="5dip" />
</shape>
where toggle_color on its turn looks like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#669900"
android:state_checked="true" />
<item android:color="#cc0000"
android:state_checked="false" />
</selector>
This leads to this very nice looking button which works perfectly for API 23, but fails to work for API 10.
I've been looking around already quite a lot and everywhere there are other solutions and other reasons for why certain things don't work. I tried multiple things, but nothing turned out to work. I even omitted the nice shape of my button in the hope I would manage to achieve the color-changing, but I didn't manage to do that either.
My question could thus be asked as follows:
What makes that my code does not work for API 10?
How could I get my beloved buttons work for API 10?
Every bit of help is appreciated.
I don't know why my code did not work, but I managed to solve it quite easily by changing the shape programmatically. Therefore I made 2 shapes (for each colour one) in my res/drawable folder as follows:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#cc0000" />
<corners android:radius="5dip" />
</shape>
This would then be red_toggle.xml and I did the same with another colour to make green_toggle.xml. My ToggleButton was altered to call a onToggle() method when clicked and eventually looked like:
<ToggleButton android:id="#+id/toggleButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dip"
android:onClick="onToggle"
android:padding="15dp"
android:background="#drawable/toggle_button"
android:button="#android:drawable/ic_btn_speak_now"
android:buttonTint="#FFFFFF"
android:textAllCaps="false"
android:textOn="#string/toggle_on"
android:textOff="#string/toggle_off"
android:textColor="#FFFFFF"
android:gravity="center" />
In my Activity, I then have this method onToggle() which does the following:
public void onToggle(View view) {
//only togglebutton should be calling this method
if(((ToggleButton) view).isChecked()) {
toggle.setBackgroundResource(R.drawable.red_toggle);
} else {
toggle.setBackgroundResource(R.drawable.green_toggle);
}
}
and that was actually all I needed...
Related
So, I am developing an android application, and across all the layouts that I have created so far, I have buttons, not AppCompatButton or Material Button just plain simple button which has the following attributes set:
<Button
android:id="#+id/logout"
android:layout_margin="8dp"
android:text="#string/log_out_button"
android:textColor="#000"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
app:layout_constraintBottom_toBottomOf="parent"/>
rounded_buttons.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFF"/>
<corners
android:radius="8dp"/>
</shape>
This throws a fidelity warning:
Paint.letterspacing() not supported.
The weird part is this xml when referenced in layouts created earlier works as intended.
I appreciate any help you could provide.
If it helps this started after I installed a third party plugin to import material icons:
Material Icon Generator
I have since disabled this plugin, invalidated caches and restarted the ide, somewhere on SO, it suggested to change the theme, tried that to no avail, so changed it back to the one I was using.
This is pretty embarrassing, All I had to do was change the theme in the preview from
Material Components to AppTheme.
Pretty stupid to not have figured this out earlier.
Also the Material Icon generator is pretty great and did not cause this issue.
I have this code and works for every version since API 14 but on Android 5.0 (Lollipop) isn't working correctly.
Below is the way how I want the buttons to appear.
click of button1
buttonArrivals.getBackground().setAlpha(180);
buttonDepartures.getBackground().setAlpha(255);
click of button2
buttonArrivals.getBackground().setAlpha(255);
buttonDepartures.getBackground().setAlpha(180);
On the Lollipop version, the buttons appear with the same Alpha but I never set the same alpha. I just use the code above.
UPDATE 24/11/2014
Here is the XML of the buttons (AutoResizeButton extends Button)
br.com.timo.gru.util.AutoResizeButton
android:id="#+id/buttonArrivals"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#00abbd"
android:drawableLeft="#drawable/icon_aviao_desemb"
android:drawablePadding="-5dp"
android:drawableStart="#drawable/icon_aviao_desemb"
android:gravity="center"
android:paddingEnd="0dp"
android:paddingLeft="2dp"
android:paddingRight="0dp"
android:text="#string/chegadas"
android:textColor="#android:color/white"
br.com.timo.gru.util.AutoResizeButton
android:id="#+id/buttonPartidas"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#00abbd"
android:drawableLeft="#drawable/icon_aviao_partida"
android:drawablePadding="-5dp"
android:drawableStart="#drawable/icon_aviao_partida"
android:ellipsize="end"
android:gravity="center"
android:text="#string/partidas"
android:textColor="#android:color/white"
Internally ColorState (used by ColorDrawable) is shared between these 2 buttons (optimization), so whenever you change alpha on one button's background - other button will get this change as well.
You can try to to mutate background drawable before changing its alpha:
buttonArrivals.getBackground().mutate().setAlpha(180);
buttonDepartures.getBackground().mutate().setAlpha(255);
You can also read good explanation from Romain Guy on why this is happening: http://curious-creature.org/2009/05/02/drawable-mutations
However, it looks like you try to implement something which is easily achievable with Android selectors. You can specify different color for each button state (in your case selected/not selected), so in your code you just need to update state:
buttonArrivals.setSelected(true);
buttonDepartures.setSelected(false);
And selector would look like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#ff00abbd"
android:state_selected="true" >
</item>
<item android:color="#b400abbd"
android:state_selected="false">
</item>
</selector>
I am having trouble customizing the look of an Android Switch widget. I have custom xml drawables that I want to use for the thumb (the little button part that usually says On or Off) and the track (the background that the thumb slides across). When I set just the thumb using android:thumb, it works fine. When I set the track (whether or not the thumb is set), the switch disappears entirely and I'm left with only the text showing.
Here is my code when just the thumb is applied:
<com.blahblahblah.blah.CustomSwitch
android:id="#+id/switch_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Off"
android:textOn="On"
android:text="Something Awesome"
android:textColor="#android:color/black"
android:thumb="#drawable/custom_switch_thumb" />
Here is what it looks like in the preview window:
And with the track applied:
<com.blahblahblah.blah.CustomSwitch
android:id="#+id/switch_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Off"
android:textOn="On"
android:text="Something Awesome"
android:textColor="#android:color/black"
android:track="#color/track_color" />
Preview window with track applied:
For reference I am using Android Studio 0.2.3 on OSX 10.7.5.
I just stumbled upon the same problem and found a fix through on the HoloEverywhere issue tracker. You'll need to set the <size> of the drawable XML shape you are using.
Not working (the widget is there and I can interact with it, but I can't see it, it's hidden):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/black_50" />
</shape>
Working (not the added <size>):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/black_50" />
<size android:width="56dp" android:height="20dp" />
</shape>
In general just for changing an image you don't need to subclass a control you can style it e.g. with the style attribute.
About your problem there are several controls which expect a drawable and not a plain color. In the control definition (the xml part) you can just define that you allow a reference but you cannot limit it to drawable references. So just avoid to use colors directly. If you don't want to add a image you could also define it with xml, but note that this does not work in all cases.
I have been toying with a few different libraries and code snippets for the past few days. I am trying to create a menu like the one seen in the facebook app.
Now there are many libraries and resources on building something of that kind, but I'm having major difficulties in drawing a shadow between the 'top' and 'bottom' page as to create the illusion that the 'top' page is actually on top.
Now the exact effect Im trying to create is displayed in this article:
http://android.cyrilmottier.com/?p=717
The author of the article I got this from is not very thorough in his explanation. This could be due to my programming-skills-under-development, or maybe I'm not the only one.
I'm using the following library and example app to test and develop with:
https://github.com/jfeinstein10/SlidingMenu
I would be very happy if anyone could help me get this to work.
PS: I'm very sorry, but since I'm a newbie here I am not allowed to post any pictures.
What I did is I'm putting a shadow at the right of my menu view (ie behindView) with a margin on the right of your above view :
<!-- Show shadow on the right of the menu -->
<RelativeLayout
android:id="#+id/menuShadow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusable="false"
android:clickable="false"
android:background="#00000000"
android:layout_marginRight="40dp">
<ImageView
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_width="6dp"
android:layout_height="fill_parent"
android:background="#layout/border_menu_progressive_shadow"/>
</RelativeLayout>
With my shadow layout:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#00101010"
android:endColor="#252525"
android:angle="0" />
</shape>
</item>
</selector>
I'm trying to create an icon/widget (1 cell x 1 cell) that can be placed on the home screen of android. The widget will look and act exactly like the other standard shortcuts in android. It will have an icon and under that a label, it will be selectable with the trackball (highlight able) it will be highlighted when it is selected/clicked.
How do I go about creating this home screen widget?
Do I have to create the widget myself using code/xml or is there some standard xml, style, theme, code that I can use to ensure that the widget will have the same style/theme as the other home screen widgets?
I currently have the following
res/drawable/corners.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Corners">
<stroke android:width="4dp" android:color="#CC222222" />
<padding android:left="4dp" android:top="1dp" android:right="4dp" android:bottom="1dp" />
<corners android:radius="4dp" />
</shape>
res/layout/widget.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Widget"
android:layout_width="72dip"
android:layout_height="72dip"
android:orientation="vertical"
android:focusable="true"
android:gravity="center_horizontal"
style="#android:style/Widget"
>
<ImageView
android:id="#+id/WidgetIcon"
android:src="#drawable/icon"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:paddingTop="3dip"
android:gravity="center"
/>
<TextView
android:id="#+id/WidgetLabel"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/app_name"
android:textSize="15dip"
android:background="#drawable/corners"
/>
</LinearLayout>
The resulting widget looks some what close, but its not selectable, it doesn't get highlighted when clicked and the label isn't exactly in the correct location or the correct style.
Any ideas, if there is a correct way to do this, or should I just keep working away on the above until I am closer?
The "correct way to do this" is to make a shortcut, and not try to mimic it with an app widget. This has been pointed out repeatedly by the core Android team (notably Romain Guy) on the [android-developers] discussion list, such as:
Widgets should look like widgets, not
like shortcuts. The main reason is
that there is absolutely NO guarantee
about what a shortcut will look like.
Other devices (especially ones with
custom system UIs like MOTOBLUR or HTC
Sense) might have a different look and
feel. Or in the next update of Android
we might change the way shortcuts are
presented.
To make your item consistent with the system look and feel is not hard by referencing the system attribute android:attr/selectableItemBackground. For example, if you want to make an ImageView in your widget look "selectable" with proper highlighting etc: just do
<ImageView
...
android:background="?android:attr/selectableItemBackground"
...
/>
There are a lot in android_sdk_path/platforms/android-x. Happy digging!
EDIT: I found out later that this simple attribute does not live in SDK < v11. So the best way I know now is to download the appwidget template pack and use it.