Ok, so I'm working on a very simple Android homescreen widget that fetches the latest Image from an imageboard and displays it in a imageview.
I'd like to have the option to Style this widget, to be in keeping with Googles Material design guidelines, however, I hit the following problem whilst developing and testing on my Nexus 5 running Lollipop 5.1 -
I can't seem to use a cardview in a widget. It gives me a class not found exception however I do not get such exceptions previewing the layout and my gradle has the right dependancies so I suspect it is more to do with widget compatibility?
So I did some further reading and on the Google API page about widgets it has a very specific list of views that widgets support, which did not, to my surprise include cardviews. So I've gone back to my plain old Imageview
I guess my question then sits with, how would I get this imageview to look like a material design card? EG, rounded corners, the subtle 3d effect, drop shadow, ETC. I do not wish to give the imageview a border, the edge of the image should extend to the edges and get clipped by the rounded corners.
I have tried by simply setting the style of the Imageview to be that of a cardview, but that seems to have done absolutely nada :)
Anyone has some ideas? Thank you!
you might want to have a look at the source of the google i/o app : https://github.com/google/iosched/blob/master/android/src/main/res/layout/widget.xml
This is from a long time ago, but it's very doable to make a simple card background in XML.
The way to do this is to create an cardview-esque .xml file in your drawables app resources folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<corners android:radius="4dp" />
</shape>
and set the background view of your Widget's XML layout as
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/widget_card_background"
android:orientation="vertical">
<.../>
</LinearLayout>
You are correct in that CardView is not an available View type for Android Widgets, but this should create the functionality you were looking for 2 years ago
Related
I have a drawable which I am using in some scrolling fragment views. This is an image which should be sticky at the bottom of the page, should not scroll with the scroll view and should not stretch.
The drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_emptystate_buildings"
android:gravity="bottom|center_horizontal" />
</layer-list>
Setting this drawable as background like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_buildings_grey"
android:orientation="vertical">
works exactly as I want on newer devices, but when I tried on a Samsung S4 with Android 5.0.1, the drawable background streches all the way to the top. The image ('ic_emptystate_buildings' - an imported vector drawable) is only maybe 100dp tall and should not be stretched and should stick to the bottom.
The reason I did not create an ImageView was because its the background of a ScrollView and the XML got messy when I tried to 'hack' it to work. I also want this behaviour in multiple views, so this solution seemed the best because of no duplicate code and simple, clean XML.
Does anyone know why its not working on older versions, and perfectly on newer? And more importantly; is there any nice way to fix this?
When making a website with html and css you can simply make a box by giving a couple of div tags some attributes like color and such, what is the Android xml equivalent to this? I need to make a layout with simple elements like this example, whether it be just a rectangle or a circle, that can rescale with the screen. Is there a way to do that? Even a link to a tutorial would be greatly appreciated, i could not find anything myself.
what is the Android xml equivalent to this?
To the extent that there is an equivalent, you could use a a ShapeDrawable, used in an ImageView or possibly as a background to something else.
Please understand that not everything that is easy in Web development will be easy in other platforms, and not everything that is difficult in Web development will be difficult in other platforms.
You can use View and give it a background.
If you want a rectangle, you can just assign the color you want:
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" />
If you want to have a circle as background, or something other, you can create a drawable file using shapes:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#000000" />
</shape>
and assigning it to the view:
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle" />
where "circle" is the name of the file with the shape
The Fastest way to make custom buttons and any kind of background.
Oval, Rectangle etc.
In your case as i am getting is that you want an rectangle like we do in HTML/CSS.
Here is an video with very much clarity, i found :
https://www.youtube.com/watch?v=WkJTunLf5iE
In this video he described about custom buttons but you can use it same with your required background and set it to you view like this :
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rectangle" />
That's it !!
I am trying to set a border for few of the image buttons for a particular screen layout in android. But for some buttons, I want to disable the border if the screen-layout background is blue colour. Please help me how to do this?
(I assume you design your app with Material Theme)
I think you can't do it (maybe possible with some hacky technique), because it's not intended to be that way.
Google has designed each view to underline each of their own purposes. So, I believe, If you can modify a button that way, it won't felt like a button to users thus can raise some misunderstanding.
What possibly user think if such button that doesn't have default blue, exist? Do they still think that as a Button?
Personally, I suggest that you leave the border as-is, if you still intended to make it feels like a Button.
Otherwise, if you really need it, you can always use CardView, put an ImageView inside it and attach OnClickListener to it. I think the result is quite similar because almost every rectangular view Google has nowadays, got similar visual to CardView.
Btw, I made this in my recent project to achieve a borderless Button-ey Image. Maybe it'll help.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardElevation="4dp"
card_view:cardUseCompatPadding="true"
card_view:contentPadding="0dp">
<ImageView
android:id="#+id/clickable_photo_thumbnail_image_view"
android:layout_width="#dimen/photo_thumbnail_size"
android:layout_height="#dimen/photo_thumbnail_size"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
</android.support.v7.widget.CardView>
(UPDATE) This is the screenshot from my app, produced with above code:
(In my screenshot, I already use a RecyclerView)
I have custom EditTexts and I noticed their backgrounds draw wrong when they leave their parents. So I used android:clipChildren="false" on their parent. That works fine. They draw correctly when partially out of their parent now.
This gave me a new problem though. On older devices (< Android 2.3? Not confirmed what the max version is for this issue), the background doesn't get clipped to it's padding. The EditText backgrounds are now drawing to the full height/width of the screen. This only happens on the initial layout.
Has anyone experienced this before? It's really weird. I don't get why the background only draws wrong when using android:clipChildren="false" and only on some devices. I need that though since my EditTexts can be dragged around and need to keep drawing outside their parent container.
I just ran across the same problem. It was caused by having ColorDrawables as background (a StateListDrawable (<selector>) containing several #color/... items, to be exact).
It looks like this was fixed in Android 3.2.4-r1 (commit 95930e1).
Before that, the class comment used to say:
Note that a ColorDrawable [...] ignores the Bounds, meaning it will draw everywhere in the current clip even if setBounds(...) was called with a smaller area.
This was removed, and the draw(Canvas) method changed to respect the bounds.
As a workaround, if you need to support older Android versions, you can use a ShapeDrawable with a solid color to get the same behaviour:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/your_background_color"/>
</shape>
We had a 2.3.4 device where this issue was causing an ImageView to cover everything above it in the LinearLayout it was contained in.
The fix was to create the ShapeDrawable mentioned above and use that as the background to the image.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/your_background_color"/>
</shape>
<ImageView
android:id="#+id/this_is"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:background="#drawable/a_rectangle_shape_drawable"
android:contentDescription="#string/an_image_view"
android:scaleType="centerInside"
android:src="#drawable/an_icon" />
Can someone please guide me how exactly can i create a circular buttons and textview in android apps, I am still a new into android development. Please help
You cannot create a real circular view (button or textview) in android - all views are rectangular. That said, you can imitate the look of a circular button by giving it a circular background. There are several ways of doing this. One simple way would be to create a PNG image of a circle, save it in your drawable folder and then set it as a background for your button:
<Button android:background="#drawable/circle_bg" .../>
Another way would be to use custom shapes to draw a circle:
<shape android:shape="oval" ...>
<solid android:color="#FFFFFF"/>
</shape>
Save that as an XML file in your drawable as circle.xml and then reference it in your layout:
<Button android:layout_width="40dp" layout_height="40dp"
android:background="#drawable/circle" ... />
This will create a circular button with 20dp radius.
Of course, you may want to combine this with state selectors to get the highlighted states on touch or focus.
There are loads of examples on the internet. Just search.
As some1 mentioned, to make your custom buttons you've to define Styles:
Custom circle button
About TextView: What do you want to do? Change font? Change colour? Change Size?
You've XML attributes for TextViews if you're doing this by XML. Except to change font, that it was implemented in 4.1.
android:text="TextView"
android:textColor="#288BA2"
android:textSize="30sp"