So I've been searching the web for a way to display a simple shadow for a layout, but there is no proper way to do that.
All I found was a workaround where you create a layout behind the one you want a shadow to be applied to, and then tweak it to be transparent and some other stuff.
Is there any other way to have a simple layout shadow without adding a whole new layout ?
I've been able to come up with a solution to this problem, and that by adding a View below our famous layout, displaying a gradient from one color to another.
Usually, the First color would be some sort of dark grayish, and the Second one would be the color of the background (in my case, i'll be having a light gray background so it's not completely white).
The xml would go like this :
...
<LinearLayout
android:id="#+id/headerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/headerImage"
android:orientation="vertical" />
<View
android:layout_width="fill_parent"
android:layout_height="5dip"
android:background="#drawable/drop_shadow" >
</View>
</LinearLayout>
...
drop_shadow.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#404040"
android:endColor="#F1F1F1"
android:angle="270"
>
</gradient>
</shape>
I hope it'll help ;)
You can use the android.support.v4.view.ViewCompat class which sets the elevation of a view using the static method setElevation. The class is a helper for accessing features in view introduced after API Level 4 in a backwards compatible fashion.
The base elevation is in pixels eg
View mFab = (View) findViewById(R.id.floating_button);
ViewCompat.setElevation(mFab, 12);
For lollipop and above you can use elevation.
For older versions:
Here is a lazy hack from:
http://odedhb.blogspot.com/2013/05/android-layout-shadow-without-9-patch.html
(toast_frame does not work on KitKat, shadow was removed from toasts)
just use:
android:background="#android:drawable/toast_frame"
or:
android:background="#android:drawable/dialog_frame"
as a background
examples:
<TextView
android:layout_width="fill_parent"
android:text="I am a simple textview with a shadow"
android:layout_height="wrap_content"
android:textSize="18sp"
android:padding="16dp"
android:textColor="#fff"
android:background="#android:drawable/toast_frame"
/>
and with different bg color:
<LinearLayout
android:layout_height="64dp"
android:layout_width="fill_parent"
android:gravity="center"
android:background="#android:drawable/toast_frame"
android:padding="4dp"
>
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Button shadow"
android:background="#33b5e5"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#fff"
android:layout_gravity="center|bottom"
/>
</LinearLayout>
Related
I am trying to place two image buttons and some text on a single line. Here is the XML for the layout:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
The selector XML for each of the buttons in drawable:
button_delete.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/delete_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/delete_button"
android:state_focused="true" />
<item android:drawable="#drawable/delete_button" />
</selector>
button_add.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_add_normal"
android:state_focused="true" />
<item android:drawable="#drawable/button_add_normal" />
</selector>
In the builder all looks well:
But in the application the gray background is lost and the edges of the image (which are transparent) are shown, but only for the first image:
Strangely, the first image button is not recognizing the transparent background of the image. Additionally I needed to mess with the width and height of the RelativeLayout and the first ImageButton to even get it close to the right size. With the 2nd I did not have to do anything. There is nothing special with the first image.
Here are the images from the directory:
One last issue - How do you make the text wrap before the 2nd image if it is too long for the space? Right now it writes under the 2nd image before wrapping:
Here are all the delete images. Seem to have transparent backgrounds, but I am far from a Gimp expert. Also not sure if StackOverflow keeps the original..
Update
I have verified the images are transparent. The image still has the white background. I have also updated the XML to look like this:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toEndOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
You should use:
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete"
android:background="#android:color/transparent"/>
Use "#null" like background on ImageButton:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/bkash"
android:id="#+id/bid1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#null" />
You haven't included the actual PNG file you are using as an icon for your delete button (screenshot from Windows's Explorer showing this file on your disk isn't quite enough), but I am almost sure that this file lacks an alpha channel. Instead, there is a white color on every pixel you'd like to be set with zero alpha channel value.
Opening your graphic in some image editor and changing these white pixels to transparent will solve your problem, but as for the reason why your layout "looks different" in builder than on your device, it's because there is a default theme applied by the system to every app, you can read more about it here: https://developer.android.com/guide/topics/ui/look-and-feel/themes.html
This default, OS and device specific set of values determines things that aren't determined by app's authors.
In the case of your device, its OS determined app's background color to be gray, which wasn't the case with your builder. Your builder chose the background to be white. Your delete button's graphic never was transparent, but on the white background of your builder it looked like it was.
To make it look like on builder, you need to specifically apply the background by yourself to the root of your view. In this case, it's a LinearLayout which should look like this:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
1) #DimDim had the right solution, if it didn't work, the delete button may have white background in the image, cross check with a png viewer.
2) To prevent overflow of text, try this
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
And put the sectionAdd Image button above this textview in the XML as this textview needs reference to the sectionAdd.
I am pretty new to Android, but just trying to develop a small application similar to "User survey"
User is displayed with multiple questions(Activity1), once he answers all questions a Summary of questions with selected options needs to be displayed(Activity2).
I wanted to use some element/container like LinearLayout, which holds Questions and Options with some border to separate each question. Here Android wont allow more than one LinerLayout.
So is there any other element type similar to LinearLayout that is useful here?
You can provide style to your linear layout with border and place it in drawable. after that you can set background for linear layout. The file under drawable can be writen as follows
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="2dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" />
<stroke
android:width="1dp"
android:color="#android:color/white" />
</shape>
Make root layout, within it make another two layout which contains your questions and result elements, make one of some visibility invisible which you don't need at this moment, then do the same for other.
You can use TableLayout and customize your view accordingly.
Since you have to display a list of questions and answers please add views programmatically. It will create less code and quite readable and you do need to add layout every time for a new question.
If you are really new to android, and you want just to throw view inside of it, meaning, add CheckedTextView's inside of a vertical oriented LinearLayout, and that LinearLayout to be inside of a ScrollView. Also maybe checkout this link, ths may help you do what you need:
https://developer.android.com/training/material/lists-cards.html
Android does allow multiple LinearLayouts.You just have to place them in the right place. You can also use the combination of relative and linear layouts. or you can do like this :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Question1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option4"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Question2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option4"/>
</LinearLayout>
</LinearLayout>
You can also use constraint layout to position your views.Get the detailed info about contraint layout from here : https://medium.com/exploring-android/exploring-the-new-android-constraintlayout-eed37fe8d8f1
I am trying to make a list that looks like the list in the Material Design Guidelines. Google uses these round icons all over the place it seems like. I want to use a colored circle with a material design icon on it. Pretty much exactly like this image:from the guidelines page.
Do I need to create a circle drawable and then just set the icon on top of it, so I have two overlapping views? I feel like there must be a better solution than using two views for every icon.
To make the custom circle drawable:
..drawable/circle_drawable.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="100dip"/>
<solid
android:color="#ff4CAF50" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="6dip"
android:right="6dip"
android:top="5dip"
android:bottom="5dip" />
</shape>
To change circle_drawable color programmatically on Activity:
String hexColor = String.format("#%06X", (0xFFFFFF & intColor));
Drawable drawable = ContextCompat.getDrawable(MyActivity.this, R.drawable.circle_drawable);
drawable.setColorFilter(intColor, PorterDuff.Mode.SRC_ATOP);
layoutWithCircleDrawable.setBackground(drawable);
Then now on you layout you must assign a new background using the new circle_drawable.xml and then just set the icon on top of it.
Layout
...........
<FrameLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:id="#+id/layoutWithCircleDrawable"
android:layout_gravity="center_vertical"
android:background="#drawable/circle_drawable">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView36"
android:src="#drawable/ic_folder"/>
</FrameLayout>
To create a circle drawable you can use this library https://github.com/hdodenhof/CircleImageView
It's very good implementation.
add this to layout file
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="#drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
and for gradle dependencies
dependencies {
...
compile 'de.hdodenhof:circleimageview:2.1.0'
}
for the images you can use picasso library
Aspicas had the right answer, but I made a few changes and want to post my code just in case it helps in the future. And since I am using C# (Xamarin.Android) some methods look a little different.
My circle drawable:
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#33464d"/>
</shape>
My layout for the full list item. I am using vectors for icons so I have to use AppCompatImageView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/routines_rv_item"
android:layout_width="match_parent"
android:layout_height="72dp"
android:orientation="horizontal">
<FrameLayout
android:id="#+id/icon_frame"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="top"
android:layout_margin="16dp"
android:background="#drawable/circle_drawable">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/list_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:scaleType="fitCenter"/>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/rv_main_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingBottom="2dp"
android:paddingRight="16dp"
android:textColor="#color/primary_text_default_material_light"
android:textSize="16sp" />
<TextView
android:id="#+id/rv_secondary_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingRight="16dp"
android:paddingTop="2dp"
android:textColor="#color/secondary_text_default_material_light"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
And the relevant code in my adapter where I change the color and set the icon image (note: have to pass in activity context to the adapter to access resources):
...
var vh = (ViewHolder)holder;
var drawable = ContextCompat.GetDrawable(_context, Resource.Drawable.circle_drawable);
string colorStr = _context.Resources.GetString(Resource.Color.primary).Substring(3);
drawable.SetColorFilter(Color.ParseColor("#"+colorStr), PorterDuff.Mode.SrcAtop);
vh.IconFrame.Background = drawable;
vh.ListIcon.SetImageResource(Resource.Drawable.ic_book_white_24px);
...
Id like to achieve the effect seen in the image ive provided below.....possible?
I know how to do a gradient and I know how to set a imagebuttons src/bg to a drawable but i have nooooooo idea where to even start with pulling off both at the same time.
It's actually incredibly simple. To avoid overdraw by layering a bunch of views, just add a ColorFilter to your ImageView:
imageView.setColorFilter(Color.parseColor("#994dace3"), PorterDuff.Mode.SRC_OVER);
No added overdraw, and you can set whatever color you want, and experiment with different PorterDuff blending modes.
Example:
I know how to do a gradient and I know how to set a imagebuttons
src/bg to a drawable but i have nooooooo idea where to even start with
pulling off both at the same time
I think what you are referring to as being a gradient is actually a color with transparency value set. From what I can tell, you are looking for something like this:
You can achieve this using the following layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/the_picture"
android:src="#color/transparent_color" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Message!" />
</RelativeLayout>
The RelativeLayout is used to position the TextView over the ImageButton. The Picture is set as the background. The src is set to a color(any color) with a transparency value between 00(completely transparent) and ff (completely opaque). In the image above, I have used a transparency of 70. So, say you pick Green(#00ff00), add transparent value to it: #7000ff00 and add it to res/values/colors.xml. You can also use it directly as I have done below.
Here's the complete xml code for the activity in the pic above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/original" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/original"
android:src="#7000ff00" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Optional Message!"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
You can set a custom font to the TextView(as in the picture you've provided) in code.
When using a small gif to be used as a background tile for a layout, I have found that my buttons appear transparent which is NOT what I want and I have not set any transparency parameters either (unless the background gif is transparent?)
My XML is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:background="#drawable/backgroundrepeat"
>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:id="#+id/scrollview1"
android:layout_weight="2"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/textview"
android:scrollbars="vertical"
android:textColor="#android:color/black"
/>
</ScrollView>
<Button android:text="Connect To Phidget" android:id="#+id/connect_button" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:layout_weight="0"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#null"
></Button>
</LinearLayout>
And the drawable tile is:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/original10"
android:tileMode="repeat"
/>
Can anyone help? Thanks
As per the Android developer documentation, it is quite clearly stated that using GIF images is discouraged.
While they don't elaborate on the reason - I'm assuming due to its multi-layering nature. But I've played with the GIF images and encountered unwanted errors similar to yours.
So I'd suggest you to export your GIF image to a PNG and try with that. You can use any tool like Gimp or IrfanViewer.
Ok. Than remove the tag:
android:background="#null"
That makes it transparent in the way you describe it.
add this tag in button
android:background="#android:drawable/btn_default"