How can I overlay an ImageView with translucent views? - android

I have an ImageView in an activity that takes up the whole screen. What I want to do is have a few translucent buttons in the corner of this ImageView overlayed on top (like 30% transparency). Is this possible with an ImageView in android? If it is can someone point me in the right direction to get started?

Use a layout, and make your ImageView and two Buttons children within the layout.
Example using RelativeLayout:
<?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:src="#drawable/image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0.5"
android:text="Button 1"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button1"
android:alpha="0.5"
android:text="Button 2"/>
</RelativeLayout>
You can position your buttons better by using android:layout_marginTop and android:layout_marginLeft attributes.
The key parts to understand here are:
1/ The ImageView is set to match_parent, therefore it'll stretch to fill the RelativeLayout.
2/ By default, sub Views are positioned at the top left of RelativeLayouts, this is why button1 appears there.
3/ Button2 is positioned to the right of button1 using the RelativeLayout attribute layout_toRightOf. Its vertical position is still set to the default - top.

Related

Why does the orientation of a linearlayout determine the centering of a child element?

Why doesn't this center a button both horizontally and vertically on the screen?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#FFFFFFFF">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/red"
android:textColor="#color/white"
android:text="click"
android:layout_gravity="center"/>
</LinearLayout>
layout_gravity specifies alignment for the button within it's parent. But this only centers the button vertically, not horizontally. If I change the orientation of the linearlayout to vertical, the button is centered horizontally, not vertically. I don't see why the orientation matters here because I only have 1 child element.
I know I can achieve this by specifying the gravity in the LinearLayout with android:gravity="true" or using a RelativeLayout and have the Button android:centerInParent="true", but I'd like to know how android came up with the layout in the code above.
P.S. Why does the background color still show as gray if that's the hex code for white?
LinearLayout will only allocate the minimum amount of space needed for a view in the direction of its orientation. That's why you can't seem to center a view in the same direction as the orientation. LinearLayout generally assumes that you want to put multiple things adjacent to each other, not occupy an entire space unconditionally for a single item.
P.S. I see the entire background of the LinearLayout as white in my preview view in Android Studio, so I don't know what you mean in your P.S.
Don't use a linear layout to display items in the middle of the screen, as these are meant to list items in a row. Use a relative layout instead. So your code should look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#FFFFFF">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/red"
android:textColor="#color/white"
android:text="click"
android:layout_centerInParent="true"/>
</RelativeLayout>

How to position buttons in linear layout

I have two buttons in a horizontal LinearLayout. They are currently next to each other and the very left. I want to move the second button to the right end of the LinearLayout.
I tried android:gravity on these buttons but this didn't change the position of them at all.
Thanks
You cannot achieve this using a LinearLayout.
Use a RelativeLayout instead and place each button relative to RelativeLayout right or left. Something like below example:
<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="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
The easiest way to do this is to use RelativeLayout. You can give your Button you want on the right the property alignParentRight="true".
<Button
...
android:layout_alignParentRight="true"/>
For a horizontal LinearLayout, android:layout_graivty (which is what you would want instead of android:gravity) left and right won't do anything because the Views are already placed from right to left.
See this answer on the difference between android:gravity and android:layout_gravity if you are uncertain about those.
Edit
Depending on exactly what you need/want, it is possible to do this with a LinearLayout though probably still much easier and more flexible with a RelativeLayout. Anyway, you can use weight to achieve something similar and play with the values. The following gives me a Button on the left and a Button on the right.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Left Button"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Right Button"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Right Button"/>
</LinearLayout>
Try setting the left button's layout_gravity to left (or start) and the right button's layout_gravity to right (or end).
The problem is that you are currently using gravity which
Specifies how an object should position its content, on both the X and Y axes, within its own bounds.
Instead, you should use layout_gravity that is
Standard gravity constant that a child supplies to its parent. Defines how the child view should be positioned, on both the X and Y axes, within its enclosing layout.
In other words - you are currently telling the buttons how to align their child views, instead of telling them how to be aligned within their parent.
You can set the android:layout_weight='1' and both buttons will share the screen equally(side by side) or if you want the extra space between them, you can place a button each in a linear layout and set the android:layout_gravity to left and rightfor each.
Add a RelativeLayout and set values to layout_marginLeft, layout_marginTop, etc.
eg.
android:layout_marginLeft="32dp"
android:layout_marginTop="160dp"
make linearLayout orientation Vertical and set button's gravity => center and as you want..

Linearlayout spacing in Android

This is my layout:
TEXTVIEW
IMAGEVIEW (optional)
LINEARLAYOUT - to which I add Buttons dynamically
LINEARLAYOUT - with two buttons side by side (left button and right button)
What do I need to do to ensure that the bottom two linear layouts are fixed to the bottom of the screen, regardless of how much space they may take up? ie. The first linear layout might have 3 buttons and take up over half the screen, which is okay. It just needs to be above the left/right buttons in the last linear layout, which is fixed to the bottom.
Then I want my TextView and my ImageView vertically centred in the remaining space. The ImageView will be set to invisible if there is no image, so it could only be the text view which needs to be centred.
I've been playing around with android:gravity="bottom", android:layout_height="0dip"/android:layout_weight="1" (I later realised this would only give 50% to the text/imageview and 50% to the 2 linear layouts), but I can't get my desired result.
Any advice appreciated.
You have to take RelativeLayout.
There you have a better control of the relative position of the views, something like this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/textView"
android:layout_above="#+id/imageView"
android:layout_centerVertical="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/imageView"
android:layout_above="#+id/ll_1"
android:layout_centerVertical="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLyout
android:id="#+id/ll_1"
android:layout_above="#+id/ll_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLyout
android:id="#+id/ll_2"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>

How do I stack Buttons and TextViews neatly in FrameLayout?

I am trying to program an alternative landscape view file (an xml file) for my app, and I must use FrameLayout instead of LinearLayout (that's what the book said). But Framelayout does not stack well, so we are supposed to use android:layout_gravity and then assign an x/y dimension, for example: android:layout_gravity="center". This example centers something exactly in the middle (both vertically and horizontally).
But my problem is, I have 4 levels on the vertical plane, where I want to place things. A text line, a line with 2 buttons (true, false), another button (cheat), then finally a line with 2 arrow buttons (previous and next). But with the layout_gravity, they only have very crude placements: top, center, bottom. I noticed that if you do not assign anything, they all end up in the upper left corner.
So how do I stack these vertically so they fall nicely spaced from top to bottom? Assigning 2 things the same parameters does not stack them, but rather overlaps them terribly.
Thank you for your help, below is my code. I have not put any gravity layouts in there yet.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/question_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/true_button" />
<Button
android:id="#+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/false_button" />
</LinearLayout>
<Button
android:id="#+id/cheat_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cheat_button" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow_left"
android:contentDescription="#string/move_back"
/>
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow_right"
android:contentDescription="#string/move_forward"
/>
</LinearLayout>
</FrameLayout>
You should use a Relative Layout or Linear Layout to achieve this because the Frame Layout is simply not designed for this.
Here is the api documentation for frame layout-
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other. You can, however, add multiple children to a
FrameLayout and control their position within the FrameLayout by
assigning gravity to each child, using the android:layout_gravity
attribute.
So controlling the position of child in Frame layout is very much limited,ie only using gravity.

Centering elements in space remaining after placing another element

In my android app, I have a toolbar with an ImageView and two spinners. I would like the ImageView to appear flush with the left side of the screen, and the two spinners to be evenly spaced, horizontally centered in the remaining space (not horizontally centered on the screen, but horizontally centered in the space remaining after the ImageView is placed. What's the best way to achieve this?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id\img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id\img"
android:orientation="vertical"
android:layout_gravity="center_horizontal" >
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
The relative layout fixes the relative positions of the image and spinners (as a group). The Linear layout sets the spinners and centers them within the layout horizontally by setting the layout gravity.
I'm assuming you want them one on top of the other. If you want them side by side, change the orientation.

Categories

Resources