fragment_camera.xml:
<?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">
<ImageView
android:id="#+id/iv_camera"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
</ImageView>
<Button
android:id="#+id/btn_take_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:background="#drawable/circle" >
</Button>
</RelativeLayout>
circle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#87cefa"/>
<size
android:width="40dp"
android:height="40dp"/>
</shape>
Result:
My circle is squished *cry*.
As the button does not contain any content I'm guessing the button has a default width and height. How can I get the button to adjust itself to the drawable? Must I set the width and height the same dimensions as the drawable, or is there a dynamic way of doing this?
Stop crying. Use a compound drawable.
It would be drawableLeft for occidental people, or drawableRight for mid-oriental people (it really depends on how you want your image and text to be related - you can even use both of them).
http://developer.android.com/guide/topics/ui/controls/button.html
Related
I am trying to do something similar to this with the background image dissolving:
This is the code I'm using:
<LinearLayout
android:id="#+id/layout"
android:background="#color/yellow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizonal">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
I'm programmatically setting the background image like this:
((ImageView)findViewById(R.id.image)).setBackground(ContextCompat.getDrawable(this, R.drawable.bg_image);
If I had to guess, I need to set the opacity of the layout as it's not the image that is dissolving but the layout surrounding it. I've searched and I think I need to use setAlpha but I don't want the entire image transparent.
You can make use of Gradient in XML resource.
bg_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#color/blue"
android:endColor="#android:color/transparent"/>
</shape>
activity_main.xml
Set Image on the background layout and on top of that set gradient.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_200dp"
android:orientation="vertical"
android:background="#drawable/image"
app:layout_constraintTop_toBottomOf="#id/textView_version">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#drawable/bg_gradient"/>
</LinearLayout>
Result
I am new to android and trying to make circular layouts using xml as background. Now I have a parent relative layout and it has a child relative layout. The parent relative layout has a background xml with corner radius and is displayed as a circle. Now the inner relative layout/child layout must also inherit this and be a circle right?, but it doesn't! the child layout has height and width as match_parent & match_parent. So how do i make the child layout's height and width fit in the circle of the parent?
<RelativeLayout
android:layout_marginTop="12dp"
android:layout_below="#+id/view10"
android:layout_centerHorizontal="true"
android:layout_width="52dp"
android:gravity="center"
android:background="#drawable/dutycirclebackground"
android:layout_height="52dp">
<RelativeLayout
android:visibility="visible"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="match_parent">
</RelativeLayout>
</RelativeLayout>
This is the background xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#cc5228"/>
<corners
android:bottomRightRadius="25dp"
android:bottomLeftRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp"/>
</shape>
here, if i set a background color to the inner layout and check the output i get a square layout but the parent is a circle.
Thanks in advance!
Do as
android:radius="250dp"
instead all corner radius:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" android:padding="10dp">
<solid android:color="#cc5228"/>
<corners
android:radius="250dp" />
</shape>
First thing, If your parent layout is circle it doesn't mean that, your child is also be circular.
Second, In you case your parent is also not circular it is rectangle in shape, you drawable only hides its corners and show you the other part. That is why , when you use match parent or something it will give you square not circle.
use your drawable in child not parent.
or you can use Dileep Patel's answer for your purpose of square inside circle
you can try to this hope this can help you..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:auto="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_below="#+id/view10"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:layout_marginTop="12dp"
android:background="#drawable/dutycirclebackground"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:layout_marginTop="12dp"
android:background="#drawable/dutycirclebackground"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:gravity="center" />
</RelativeLayout>
</RelativeLayout>
I'm trying to add a divider to a horizontal linear layout but am getting nowhere. The divider just doesn't show. I am a total newbie with Android.
This is my layout XML:
<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"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/llTopBar"
android:orientation="horizontal"
android:divider="#00ff00"
android:dividerPadding="22dip"
android:showDividers="middle">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="asdf" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="asdf" />
</LinearLayout>
</RelativeLayout>
use this for horizontal divider
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/honeycombish_blue" />
and this for vertical divider
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/honeycombish_blue" />
OR if you can use the LinearLayout divider, for horizontal divider
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:height="1dp"/>
<solid android:color="#f6f6f6"/>
</shape>
and in LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#drawable/divider"
android:orientation="vertical"
android:showDividers="middle" >
If you want to user vertical divider then in place of android:height="1dp" in shape use android:width="1dp"
Tip: Don't forget the android:showDividers item.
Try this, create a divider in the res/drawable folder:
vertical_divider_1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="1dip" />
<solid android:color="#666666" />
</shape>
And use the divider attribute in LinearLayout like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal"
android:divider="#drawable/vertical_divider_1"
android:dividerPadding="12dip"
android:showDividers="middle"
android:background="#ffffff" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Note: android:divider is only available in Android 3.0 (API level 11) or higher.
It is easy to add divider to layout, we don't need a separate view.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:divider="?android:listDivider"
android:dividerPadding="2.5dp"
android:orientation="horizontal"
android:showDividers="middle"
android:weightSum="2" ></LinearLayout>
Above code make vertical divider for LinearLayout
Update: pre-Honeycomb using AppCompat
If you are using the AppCompat library v7 you may want to use the LinearLayoutCompat view. Using this approach you can use drawable dividers on Android 2.1, 2.2 and 2.3.
Example code:
<android.support.v7.widget.LinearLayoutCompat
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:showDividers="middle"
app:divider="#drawable/divider">
drawable/divider.xml: (divider with some padding on the top and bottom)
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="2dp"
android:insetTop="2dp">
<shape>
<size android:width="1dp" />
<solid android:color="#FFCCCCCC" />
</shape>
</inset>
Very important note: The LinearLayoutCompat view does not extend LinearLayout and therefor you should not use the android:showDividers or android:divider properties but the custom ones: app:showDividers and app:divider. In code you should also use the LinearLayoutCompat.LayoutParams not the LinearLayout.LayoutParams!
I just ran into the same problem today. As the previous answers indicate, the problem stems from the use of a color in the divider tag, rather than a drawable. However, instead of writing my own drawable xml, I prefer to use themed attributes as much as possible. You can use the android:attr/dividerHorizontal and android:attr/dividerVertical to get a predefined drawable instead:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:showDividers="middle"
android:divider="?android:attr/dividerVertical"
android:orientation="horizontal">
<!-- other views -->
</LinearLayout>
The attributes are available in API 11 and above.
Also, as mentioned by bocekm in his answer, the dividerPadding property does NOT add extra padding on either side of a vertical divider, as one might assume. Instead it defines top and bottom padding and thus may truncate the divider if it's too large.
You can use the built in divider, this will work for both orientations.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="?android:attr/listDivider"
android:orientation="horizontal"
android:showDividers="middle">
Frustratingly, you have to enable showing the dividers from code in your activity. For example:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set the view to your layout
setContentView(R.layout.yourlayout);
// Find the LinearLayout within and enable the divider
((LinearLayout)v.findViewById(R.id.llTopBar)).
setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
}
If the answer of Kapil Vats is not working try something like this:
drawable/divider_horizontal_green_22.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="22dip"/>
<solid android:color="#00ff00"/>
</shape>
layout/your_layout.xml
LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/llTopBar"
android:orientation="horizontal"
android:divider="#drawable/divider_horizontal_green_22"
android:showDividers="middle"
>
I encountered an issue where the padding attribute wasn't working, thus I had to set the height of the divider directly in the divider.
Note:
If you want to use it in vertical LinearLayout, make a new one, like this:
drawable/divider_vertical_green_22.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="22dip"/>
<solid android:color="#00ff00"/>
</shape>
Your divider may not be showing due to too large dividerPadding. You set 22dip, that means the divider is truncated by 22dip from top and by 22dip from bottom. If your layout height is less than or equal 44dip then no divider is visible.
In order to get drawn, divider of LinearLayout must have some height while ColorDrawable (which is essentially #00ff00 as well as any other hardcoded color) doesn't have. Simple (and correct) way to solve this, is to wrap your color into some Drawable with predefined height, such as shape drawable
You have to create the any view for separater like textview or imageview then set the background for that if you have image else use the color as the background.
Hope this helps you.
I want to make a border with a title around a LinearLayout like on this picture.
layout http://img829.imageshack.us/img829/3461/borderwithtitel.png
I already have the border.
How can I add the title?
I created the border by making an .xml file in the drawable folder. There I made a shape and then I set the background of the linear layout as this shape.
I am using API Level 8.
According to #Radu's answer,you can see an example:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:color="#000000">
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/rectangle"
android:layout_margin="20dp"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#000000"
android:layout_marginTop="10dp"
android:text="TITLE!"
android:textColor="#ffffff"/>
</RelativeLayout>
</FrameLayout>
And #drawable/rectangle is in a drawable rectangle.xml file like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
<stroke android:width="2dip" android:color="#ffffff"/>
</shape>
You may want to take a look at the Android Frame Layout.
A good tutorial may be found here or you may want to read the dev guides.
NOTE: I have ended up reporting this as a bug to the android project here: http://code.google.com/p/android/issues/detail?id=39159 Please also have a look at the accepted bounty answer, the solution is, unfortunately, to use an absolute (ie specifiying 'dp's rather than 'wrap_content' etc) layout to fix the issue.
I'm getting some VERY strange behaviour when placing a background on an image. I have simplified this down quite heavily to demonstrate the issue to you. What im doing is placing an image in a relativelayout, and also using a background. It seems that giving the relativelayout a padding is causing the background of the image to be missdrawn. Wrap_content seems to be messing up.
Firstly, here is the code that demonstrates the problem. Note that the same behaviour is seen without using a linearlayout and just giving the imageview a background, but this really demonstrates the problem better.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
Here is the black_bg xml file:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF000000"/>
</shape>
Here is red_rectangle:
NOTE that this is a reference image, to demonstrate the problem. my actual image has detail, and so cannot be a .9.png
And here is a screenshot of the problem:
You can see that the image width is less than the linearlayout, despite the linearlayout having a width set to "wrap_content". If I set the relativelayout padding to 0dp, this problem dissapears.
This is hopefully a fairly well contained set of resource I'm providing here, so people can try it out themselves if they wish.
For reference, I am using this to provide a border around the image, so I could set the linearlayout (or the image itself) to have a padding, the problem still persists in that case.
EDIT: It appears I probably need a little more context around this, as answers are focussing round how to provide this border. Here is a screenshot of a more contextual layout. I didnt want to include this in the first place as it adds more confusion to the problem:
The FIRST 5dp padding you see is for the content of this entire item (the relativelayout). Then, as i said originally, the idea is that "I could set the linearlayout (or the image itself) to have a padding" in addition to the first padding you see in the relativelayout. Currently, this layout should have NO border shown.
the problem seems to be with the different stretching properties of image(in image view) and the one set as a background(in linear layout). The image set as a backgroung doesnt necessarily maintains the aspect ratio while the image in the image tends to maintain it.
When you give the height of the layout to 60 dp, the image shrinks maintaining the aspect ratio leaving the black strips on the sides.
This works for me:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:src="#drawable/asd"
android:scaleType="fitXY"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I believe this is a good candidate of a bug!
Anyway, I understand what you intend to achieve with this layout. The problem is setting the height of your RelativeLayout. I will not ask you to wrap content! Simply, since the height is set to 60dp and padding to 5dp, take a further step and set the height of the LinearLayout to 50dp which is 60-2*5 :)
Finally, to get the border, add a padding of, say, 5dp to your LinearLayout and set the Height of the ImageView to 50dp - 2*5 = 40dp.
This will work perfectly
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="5dp"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I dont know why its showing the extra black patch there. Have you tried running the app? The UI editor has some defects, especially when it comes to ImageView..
Now for the border around image, set the background and padding to the ImageView itself. Do not need the LinearLayout. Add the scale type attribute with "centerInside" value.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle"
android:background="#000"
android:scaleType="centerInside"/>
"For reference, I am using this to provide a border around the image"
Add a drawable "border.xml"
<shape xmlns:android:"http://schemas.android.com/apk/res/android" android:shape:"rectangle">
<stroke android:width="5dp" android:color="#FF000000" />
<padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />
</shape>
set your ImageView background to this drawable.
And lets simplify your layout and center the ImageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle"
android:background="#drawable/border" />
</RelativeLayout>
Try this ...........
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg"
**android:padding="5dp"**
>
<ImageView
**android:layout_width="fill_parent"
android:layout_height="fill_parent"**
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
make your image view like this ..
<ImageView
android:id="#+id/imageViewMyicon"
android:layout_width="30dp"
android:background="#drawable/myiconbackground"
android:layout_height="30dp"
android:src="#drawable/myicon"
android:contentDescription="#string/my_icon"
/>
Inside your drawable myiconbackground.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#0D95BD"/>
<corners android:radius="5dp"/>
<padding android:left="2dp" android:right="2dp" android:top="2dp" android:bottom="2dp"/>
</shape>
i checked this one is working for me , should do for you as well