I wish to achieve something similar to the following:
Notice how the image pattern to the right of the triangle repeats until it hits the edge of the screen. Also, the triangle will not actually be a triangle (i.e. the image will not be a simple shape) so please be aware of that.
I'm quite new to Android and know that in iOS it is possible to set a portion of the image to repeat. I'm not sure if this is true also of android and if so how? If not, then what would be the recommended approach?
To repeat an image you may set the TileMode for this Bitmap. To move it in your case to the right you may define a layer-list drawable and give its item a left property:
tile_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap android:src="#drawable/tile_start" android:gravity="left|bottom"/>
</item>
<item android:left="60px">
<bitmap android:src="#drawable/tile" android:tileMode="repeat"/>
</item>
</layer-list>
just some layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<View
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="26dp"
android:background="#drawable/tiled_background" />
</LinearLayout>
If I understand correctly you may want to take a look at NinePatch images http://developer.android.com/reference/android/graphics/NinePatch.html
Nine Patch images are "smart" in the sense they can have certain bounds that can be stretched and repeated as necessary. Here's a quick tool that can give a better idea of it, http://romannurik.github.io/AndroidAssetStudio/nine-patches.html
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 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 can't dig deep into how android implements its layer-list drawable. But I find it interesting and I can hardly know why this happens.
Here are some drawables:
the nine-patch xml
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/cam2tst_ripple_bg_img">
</nine-patch>
the shape xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<padding
android:left="#dimen/cam2tst_ripple_horizontal_padding"
android:top="#dimen/cam2tst_ripple_vertical_padding"
android:right="#dimen/cam2tst_ripple_horizontal_padding"
android:bottom="#dimen/cam2tst_ripple_vertical_padding" />
<solid android:color="#android:color/holo_green_dark" />
</shape>
the ripple xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/holo_green_light">
<item android:drawable="#drawable/cam2tst_ripple_shape"></item>
</ripple>
the layer-list containing all above
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/cam2tst_ripple_bg_img" />
<item android:drawable="#drawable/cam2tst_ripple_base" />
</layer-list>
Unfortainately I still can't get my screenshot thing work on my L preview, but I can describe it.
What I get is the shape (which i obviously didn't set its size explicitly） doesn't cover over the whole nine-patch! The un-streched part of the nine-patch is magically considered as some kind of "auto padding thing". What I was expecting (ok I was expecting exactly what android has done for me, I mean what I was... supposing...) is something not so positive: the not-particularly-sized shape drawable covering the entire nine-patch just as if the latter is a normal png.
But the shape does magically avoid the un-stretched part of the nine-patch and overlays only above the streched-part of the nine-patch.
This is awesome...but confusing, why? I may not able to dig that deep into the source but this do sounds anti-intuition (but nice). I want to know the reason though. So I post this here.
Since I tagged this as android-L because I am working on one. But I think this shall be working from something like gingerbread.(just to replace the ripple drawable with something else, maybe a inset drawable etc.)
This effect is caused by the combination of two things:
All nine-patch drawables have a padding area defined automatically from the edges of the content area. The content area can be defined either explicitly, using the right and bottom lines at the border, or implicitly from the stretchable area defined by the left and top lines.
Layer-list applies the padding on each layer cumulatively to the next layer by default*, effectively treating each layer as the content of the previous layer.
* Lollipop has introduced a new attribute for disabling this behavior.
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 have a layer list object, it contain two images, one is background,
and the other is a rotation disk image which will be raotated at the
top of the background image. i.e. I use this layer-list as a linearlayout background,
and I only want to animate "disk_bg" item of the layer-list;
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/
android">
<item android:drawable="#drawable/player_bg" />
<item android:top="166dp" >
<bitmap android:id="#+id/disk_bg" android:src="#drawable/cd"
android:gravity="center" />
</item>
I use this layer-list as a layout background, do you know how can I animate the disk_bg layer in my application?
can you help me, many thanks to you~
don't you get my question? or there is no way to do that?
First create 2(or more) layer-list resources ie *layer_frame1.xml* and *layer_frame2.xml* , where you set your frames. In your case let's say changing the android:top of the disk item.
Then create an animation-list resource where you set the timing and order of the frames :
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item
android:drawable="#drawable/layer_frame1"
android:duration="100"/>
<item
android:drawable="#drawable/layer_frame2"
android:duration="100"/>
</animation-list>
Save it in a file ie *drawable/player_animation.xml* and set it as background on a View
<View
android:id="#+id/animation_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/player_animation" />
Finally in your code just say when you want the animation start.
((AnimationDrawable)findViewById(R.id.animation_test).getBackground()).start();
Watch out do not start the animation inside onCreate() method.