I'm working on an Android widget which essentially places a button on the homescreen. The button uses a selector in order to show a default state and a pressed state. Each state has its own image, as you'll see in the code below.
I already have code to change the hue of an image and return a new StateListDrawable for use in the ImageButton.
My question: How do I actually apply the StateListDrawable to the ImageButton's android:background attribute using the RemoteView?
Here is the XML source for the widget layout:
<LinearLayout
android:id="#+id/LinearLayout01"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#drawable/buttonselector" />
</LinearLayout>
Instead of using the hardcoded "#drawable/buttonselector" it needs to be the dynamic selector I'm generating.
I have posted an answer link text which I think is similar to your problem. This, however, involves two layouts that are almost similar. The only difference is the part that should change.
Related
I'm developing an android app and want to add a button (widget?) with icon.
As i understand, it's appearance should be described in xml resources.
I can do it in java code, but it seems incorrect.
public class VideoButton extends android.support.v7.widget.AppCompatButton {
private void onCreate(){
setBackground(ResourceManager.getDrawable(R.mipmap.roundbackgroundnormal));
Drawable icon = ResourceManager.getDrawable(R.mipmap.video);
icon.setBounds(6,0,50,44);
setCompoundDrawables(icon,null,null,null);
setPadding(12,8,8,8);
...
So, i wrote an xml replacement code that doesn't fit my expectations
<blah.blah.blah.ui.widgets.VideoButton
android:id="#+id/record"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#mipmap/roundbackgroundnormal"
android:drawableStart="#drawable/video"
android:visibility="visible" />
I expect this (ty java),
but get this
How to fix my xml code to get a proper result?
TY, if possible fix terminology.
Better to use FloatingActionButton
Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.
Compile this dependencies
compile 'com.android.support:design:27.0.2'
SAMPLE CODE
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_check_box_black_24dp" />
RESULT
OR
You can use ImageButton
Displays a button with an image (instead of text) that can be pressed or clicked by the user. By default, an ImageButton looks like a regular Button, with the standard button background that changes color during different button states. The image on the surface of the button is defined either by the android:src attribute in the XML element or by the setImageResource(int) method.
SAMPLE CODE
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_check_box_black_24dp" />
OUTPUT
<blah.blah.blah.ui.widgets.ViseoButton
android:id="#+id/record"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#mipmap/roundbackgroundnormal"
android:drawableStart="#drawable/video"
android:visibility="visible" />
You can design with your custom icon.png and move it into your project folder
mipmap
android:background="#mipmap/roundbackgroundnormal"
I am very new to this forum and really need help in something I got stuck in during developing the app.
This is the image I am using as my background (I named it SampleBG in xml):
https://i.gyazo.com/946507c2690c8170b54a1ace752906bd.png
Basically, this is what I want my design to look like:
https://i.gyazo.com/896e29846dfd9e4bc9ab15ca39f9a796.png
And for smaller devices, it automatically resizes and looks like this:
[i.gyazo.com/f4278339cc8f246187c011474796a12c.png]
And when I switch to a tablet device, it automatically looks like this:
[i.gyazo.com/1b0e233a0b1731148664e0ac78a05f08.png]
And the above is exactly what I want it to look like. The wooden signs are in the same position for all sizes...
But the problem is:
I want the wooden signs to be clickable, because they are meant to be buttons.
So, I tried to use a button widget and made it transparent and placed it over the wooden signs... it worked but it only worked for that particular size I designed it for (designed it for Nexus 5 to be specific).... However, when I switched to the Nexus One layout, or Nexus 9 layout, etc, the buttons weren't placed correctly over the wooden signs and thus didn't work.
I want a way to make the wooden signs clickable and and the buttons to be fixed with the signs for all device sizes/etc, and at the same time.
I would prefer an xml solution but a programmatic solution is nice too.
Here's the layout code right now, it just using the background image right now....
`<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/sampleBG">
</RelativeLayout>`
NOTE:
I have tried using the door image as the background only and then adding the wooden signs manually by using the ImageButton widgets, but the wooden signs were being placed differently for different screens and it looked odd, so therefore I fixed the wooden signs with the background (in Photoshop).. now I just want the signs to be clickable.
This is a sample code that you can use, in order to achieve this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#mipmap/ic_launcher"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.test.androidtestapp.MainActivity">
<ImageButton
android:id="#+id/equationsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/equationsOfTheWeekButton"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Equations Button"
android:onClick="equationsButtonClick" />
<ImageButton
android:id="#+id/equationsOfTheWeekButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Equations Of The Week Button"
android:onClick="equationsOfTheWeekButtonClick" />
<ImageButton
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/equationsOfTheWeekButton"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Settings Button"
android:onClick="SettingsButtonClick" />
</RelativeLayout>
You need to slice your image and then just change the background attributes in the code above. When you achieve that, you can change the background to a selector where you can change the image depending on the different states -> when it's clicked, focused, normal; that would make it more user friendly.
The wooden signs should NOT be on the background image.
Instead, make a real background image (ie. with only the "door" background) and make separate images with the signs.
Then use these images to build your buttons.
Edit: I did read your note about the fact that you tried that, but you should definitively go this way. Another advantage is that you'll be able to easily make the buttons reacting to the user click, with "onPress" states, which would be impossible (or at least difficult and ugly) with a single background image.
You can separate wood pics that you want to be button and give them as a background for buttons. For example, you named the wooden pics as 'wood1.png' , 'wood2.png' and 'wood3.png' and by this sample code you can set them for background image for buttons :
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/wood1"
/>
Or you can design your app by your own solution that described but you should create your app design by different layout for different size device :
layout-large
layout-small
layout-normal
layout-xlarge
layout-xxlarge
you can search about autoLayout design in android app and find your solution better..
I'm drawing an ImageView (a 50% transparent icon) over an ImageButton, but the icon disappears when I click the ImageButton (an Activity transition gets triggered at this moment). That looks pretty awful...
What is the best approach to do this, without actually putting the icon into the src-File of the ImageButton? Is there a way to do it with setting drawables as background or foreground? And what exactly are those two properties for? I can't find any documentation about android:foreground...
BTW: I'm using the new Lollipop shared element transition and testing on a nexus 9.
<Relative Layout...>
<ImageButton
android:id="#+id/imageView1"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_width="400dp"
android:layout_height="250dp"
android:src="#drawable/call1"
android:foreground="#drawable/phone" <!-- Does this make any sense?-->
android:transitionName="#string/trans_call_pic"
android:onClick="clickCall"
/>
<ImageView
android:id="#+id/imageButton1"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="#drawable/phone"
android:layout_alignBottom="#id/imageView1"
android:alpha="0.5"
android:layout_marginLeft="14dp"
/>
</RelativeLayout
The android:foreground attribute is for a foreground selector (added to a FrameLayout). It's not intended to simply draw an image.
One solution would be to wrap the button & the image in a container view and put your transition on the container. This way the two child views would be treated as one.
Try adding a foreground selector to your view. You can extend ImageButton, override onDraw(), and draw the foreground selector after calling super.onDraw(). This will ensure that the foreground selector is drawn on top of the entire ImageButton. More detailed instructions can be found here.
I'm trying to set a background via a XML file that has to contain various shapes, I don't whant them to overlap (i've already played with that) but I want them to be one below the other.
I already have a layer-list defined in one xml, and now I want to have a shape under that one.
How do I accomplish that using only xml?
Thanks, I've been looking arround but all I find it's information about layer-list and not this particular situation. I'm sure there's a post about it arround here, but I can't seem to find it. Sorry in advance.
PD: Since I'm asking, any way to accomplish a blur effect on a shape?
Edit: Another way to ask the same question: I have a rectangle.xml and a circle.xml, how to I put one below the other for it to be used in a background.
There are two obvious options here:
Split the layers out into separate drawables and assign them to different views in e.g. a vertically orientation LinearLayout.
Specify an appropriate value for the android:top attribute to offset the second (and 3rd an 4th etc) drawable.
Example for 1:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/drawable1" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/drawable2" />
</LinearLayout>
If your current LayerDrawable depicts some sort of state, you may also want to look into StateListDrawable or LevelListDrawable.
Example for 2:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/drawable1" />
<item android:drawable="#drawable/drawable1" android:top="50dp" />
</layer-list>
The second option requires some a priori knowledge about the size of the first item. If you define the drawable using xml, you'll have to set the at appropriate offset value at design time.
I am looking for a view or some sort of information regarding the bottom bar in default applications of Android such as Email, or Unlock pattern as shown in the picture below. I have not been able find anything about this on Androids site nor from Google searches.
Image: http://img11.imageshack.us/i/viewdn.jpg/
I believe that Christopher is correct; there is no special widget to create the bar in your image. However, if you want to emulate it, you can create a layout and use the style style="#android:style/ButtonBar". That will give you the light gray background and the correct margins.
I don't believe there's any standard view for the button bar used at the bottom of these apps; it's generally just two Button items placed together in a LinearLayout or RelativeLayout.
For example, looking at the Android Open Source Project, you can see the button bar for one of the email app setup screens is defined as two plain old Button objects.
However, it is surprising that Google didn't abstract more of the common stuff into an Android theme or sublayout, rather than having the same views and attributes in each layout XML.
From: http://code.google.com/p/k9mail/source/browse/k9mail/trunk/res/layout/account_setup_basics.xml?r=1314
<RelativeLayout
android:layout_marginTop="-45dip"
android:padding="0dip"
android:layout_alignParentBottom="true"
android:gravity="bottom|right"
android:background="#android:drawable/bottom_bar"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<Button
android:id="#+id/manual_setup"
android:text="#string/account_setup_basics_manual_setup_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginBottom="-4dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="false"
/>
<Button
android:id="#+id/next"
android:text="#string/next_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawableRight="#drawable/button_indicator_next"
android:layout_marginBottom="-4dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="false"
/>
</RelativeLayout>