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.
Related
Here's the XAML that I am using for a startup screen:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<item android:drawable="#android:color/black"/>
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textStyle="bold"
android:fontFamily="sans-serif-medium"
android:textColor="#fff"
/>
</layer-list>
I was hoping to see white text centered on a black screen. The screen is black, but instead I cannot see any text appear at all.
I understand what you are trying to do.
You want to display a plain Text on your "Splash Screen" that displays when you open an app. Since you are using Xamarin, you have access to all the native API's and you can do everything that native developers can.
Unfortunately, being able to show plain text on the splash screen is not possible in native development. Android restricted it because "the view comes from the theme. When you set up the UI for your splash activity in the theme, it is available immediately".
Why can't I have plain text on the splash screen, when I can have images? As you see over here in detail, the splash screen only accepts drawable resources. And there is no way to convert plain text into XML drawable resources.
You do have another option though. You can use a "Loading screen". You can make the app show the splash screen, then a Loading screen, and then load the right page. Let me know if that makes sense
Set background attribute to black. Either
android:background="#000"
or
android:background="#android:color/black"
I'm not used to Xamarin in specific, but if you normally want to create some sort of splash screen for your activity, as far as I know, there is no way of directly adding a TextView to it, because LayerList only supports bitmaps (image drawables) as child items. So you would have to create an .img file containing your text. Then, you can add the image with the text to the layer-list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This line below is for the background colour -->
<item android:drawable="#000" />
<item>
<!-- The bitmap below contains the image with the text -->
<bitmap
android:src="#drawable/my_text_on_screen"
android:gravity="center" />
</item>
</layer-list>
To see how to create an image from a text, have a look at this StackOverflow question.
Let me know of this is what you wanted to achieve! I hope this helps.
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...
I have some problems using the new CardView
That's my current situation: I want to use a CardView to provide a Floating Action Button for all devices (also Pre-Lollipop)
my activity's layout looks like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cdcdcd"
android:focusable="false">
<include layout="#layout/toolbar"/>
<android.support.v7.widget.CardView
android:layout_width="58dp"
android:layout_height="58dp"
cardview:cardPreventCornerOverlap="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="18dp"
cardview:cardCornerRadius="29dp"
cardview:cardBackgroundColor="?attr/colorPrimary">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_margin="12dp"
android:src="#android:drawable/ic_menu_edit"/>
</android.support.v7.widget.CardView>
Running the app on a Nexus 5 (4.4.4) the screen looks like this:
now I want to set the cardElevation by setting this in the xml
cardview:cardElevation="8dp"
After starting the app the button looks like this (it isn't a circle anymore):
It seems setting the card elevation also affects the view's dimensions... If you take now a closer look to picture #1 you can see, that this button isn't also a perfect circle.
Is there a way to figure that out? I also tried to set this
cardview:cardPreventCornerOverlap="false"
But it also has no affect
Thanks guys :)
Using CardView for FAB shadows is not the best idea. CardView is a layout, so it's pretty heavy. It's also very limited on pre-Lollipop versions. The shadow is not animated, corners pad the content and there's no ripple. Seems like there's no good method to achieve 100% FABs using only AppCompat.
In general I'm not happy being limited to AppCompat, so I wrote my own Button classes based on regular ones. I was able to achieve pretty good results as you can see on the screenshot. It's Gingerbread and there are animated shadows, ripples, vector graphics, etc. It's a pretty large repository, so I'm unable to give you a short solution here, but if you wish, check out the code on github.
You could try using the FAB from this MaterialDesign library if you're desperate for the shadow effect on older devices.
You can find the library at https://github.com/navasmdc/MaterialDesignLibrary
<com.gc.materialdesign.views.ButtonFloat
android:id="#+id/buttonFloat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="24dp"
android:background="#1E88E5"
materialdesign:animate="true"
materialdesign:iconDrawable="#drawable/ic_action_new" />
Alternatively you could create your own shadow resource in your drawables folder, and add the shape below your button, something like this:
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/black_alpha"/>
<corners android:radius="20dip"/>
And create a layer list resource where you include your button and the shadow
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shadow"/>
<item
android:drawable="#drawable/button"
android:bottom="4px" />
</layer-list>
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>