I would like to design a frame using 4 ImageView for each of the top, bottom, left and right side of that frame, as shown in the following example:
Seems simple, but I am really having a hard time doing it. I tried using a FrameLayout along with layout_alignParentLeft|Right|Top|Bottomlike the following:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/camera_masque"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
>
<ImageView
android:id="#+id/camera_top_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_top_masque_photo"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/camera_left_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_left_masque_photo"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/camera_right_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_right_masque_photo"
android:layout_alignParentRight="true"
/>
<ImageView
android:id="#+id/camera_bottom_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_bottom_masque_photo"
android:layout_alignParentBottom="true"
/>
</FrameLayout>
It works well for the top and left sides, but not for the others (like it places the right and bottom sides on the top side...).
I also tried using a RelativeLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/camera_masque"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
>
<ImageView
android:id="#+id/camera_top_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_top_masque_photo"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/camera_left_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="-2dp"
android:src="#drawable/ic_left_masque_photo"
android:layout_below="#id/camera_top_masque"
/>
<ImageView
android:id="#+id/camera_right_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_right_masque_photo"
android:layout_marginRight="-2dp"
android:layout_below="#id/camera_top_masque"
android:layout_alignParentRight="true"
/>
<ImageView
android:id="#+id/camera_bottom_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_bottom_masque_photo"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
But same thing, does not work as expected.
Any idea what is wrong with my layouts? How could I accomplish this?
Note: Images sizes are: 640*114px (top, bottom) and 34*572 (left, right).
Thanks!
I usually use linearlayout for things like this and control the fill using layout_weight parameters. You will probably find a lot of similar questions here.
Simply create a vertical linear layout and in the middle section create a horizontal linear layout.
This is made a lot simpler if you use the WYSIWYG layout designer in Eclipse ADT ... .see tools.android.com for details
There are a lot of tutorials available for Android layouts which are a more useful resource as Stack Overflow tends to deal with the programming issues rather than layouts.
I will answer my own question in order to highlight the mistakes I have made. Turns out, I was almost there, I only had to add an alignParentTop at both the right and left ImageViews and an alignParentLeftat the bottom ImageView.
I don't understand the logic behind this, though! (if someone could explain...)
If the frame are built by the same images. You can try a 9-patch drawable or a shape with borders and transparent center.
Related
I'm working on Android app with custom camera module. Main purpose of custom camera module is in adding overlay to camera - it should be something like outer transparent border (see first attached pic). It's actually blurred in the attached picture, but I need at least transparent effect as blur is not trivial to implement on Android.
The main point here is to ensure that "clear" visible area is corresponding to A4 format, so height divided by width should be √2 (main purpose of the app is in taking photos of A4 sheets).
I've figured how to achieve "inverted" effect - see second picture. But I can't get my head around on how could setup the view for the desired effect - first picture. Could someone share their thoughts on the problem? Here is the code:
camera.xml:
<LinearLayout
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"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:id="#+id/overlay"
android:layout_width="316dp"
android:layout_height="446dp"
android:layout_centerInParent="true"
android:background="#drawable/overlay"
android:duplicateParentState="false" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:background="#android:color/black">
<Button
android:id="#+id/button_capture"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/capture_button"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<Button
android:id="#+id/button_close"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_centerVertical="true"
android:layout_marginEnd="50dp"
android:layout_marginRight="50dp"
android:layout_toLeftOf="#+id/button_capture"
android:background="#drawable/close" />
</RelativeLayout>
</LinearLayout>
overlay.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<solid android:color="#88ffffff" />
I've found an article about just like what I needed. With little effort I could adjust the code there to get desired effect: https://blog.budiharso.info/2016/01/09/Create-hole-in-android-view/
To avoid tricky vector masks, it's enough to define the id/overlay as layout with 4 semitransparent rectangles, sharing the same drawable you use now: top, bottom, left, and right. You can determine the dimensions of each rectangle at runtime, but if you like intellectual challenges, you can define them as a ConstraintLayout.
I just started with android development. I just need a screen with some buttons on it that can contact a webserver, to trigger an action there, but i have not even gotten that far.
When i add buttons to the layout, even if they are nicely sided by side, they end up ontop of each other, with the button created last ontop.
And furtermore i have changed the color, but it does not seem to be moved end up in the simulator.
This is a fresh design (2nd try) and i dont understand what is going on. I dont really know what files to include :)
I realize this is something simple, but im just overwhelmed
thank you
Lasse
Phone and design view
You're probably using a FrameLayout, which just stacks things on top of each other and only supports gravity.
For your use case, you can use a LinearLayout, a RelativeLayout or a ConstraintLayout. Here's an example using LinearLayout:
<?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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="Select releases since last candy fix" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="Button 1" />
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="Button 2" />
</LinearLayout>
</LinearLayout>
Have a look at the different layouts to see which one better fits your needs, ConstraintLayout would allow you to flatten your layout, which is good for performance.
Please help I already do like the view like screenshot 2 but having a problem to achieve like screenshot 1.Is it possible to do?
View with rotation with feel the screen.
Thanks in advance.
<?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"
android:background="#color/accent_material_dark"
android:orientation="vertical">
<View
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="120dp"
android:background="#FFFFFF" />
<View
android:id="#+id/body"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#id/header"
android:rotation="165"
android:background="#color/accent_material_dark" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/header"
android:layout_alignParentRight="true"
android:src="#drawable/ic_action_search"
android:layout_marginBottom="-32dp"
android:layout_marginRight="20dp">
</android.support.design.widget.FloatingActionButton>
</RelativeLayout>
I should say that what you're trying to accomplish would be best achieved with a background drawable with the shape you want, rather than trying to rotate views to look like this. It's simply a lot of work and views to achieve something that a basic knowledge in microsoft paint would achieve as well.
That being said, to get your desired result, you just need to apply the pivot points of the view you're rotating to the top left corner (0, 0), and rotate only 15 degrees in the opposite direction"
<View
android:id="#+id/body"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#id/header"
android:transformPivotX="0dp"
android:transformPivotY="0dp"
android:rotation="-15"
android:background="#color/accent_material_dark" />
You might also need to make the view a bit longer, since the rotation will mean the view doesn't extend to the edge of the screen (due to pythagorean's theorem). You could do this by applying a large dp value for the view's width, or by setting the view's scaleX property to 1.5, or something similar.
I am trying to get some text vertically aligned within a TextView, but for some reason it just sticks to the top edge of such TextView.
Trust me, I've read several questions here on Stack Overflow regarding the same, or similar, questions and tried applying the provided solutions, but nothing seems to make a change.
For instance, what I thought would solve the issue right away was to add the attribute android:gravity="center_vertical|left", but that didn't help either.
This user's question describes almost exactly my issue, except that his TextView is inside a RelativeLayout which in turn is inside a ScrollView, which I don't (and don't need or want to) use. And the images he provided are also perfectly applicable to what I'm trying to describe and achieve.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical" />
</LinearLayout>
The problem is that your TextView's height is set to wrap_content. This means that the size of the text's container will be the same as the height of the text, thus there really is nowhere within the view to center the content (it is effectively already centered vertically).
If the LinearLayout that you posted only contains the ImageView and the TextView, then you can simple change the height to match_parent and it should work fine.
If the LinearLayout contains other Views, you might want to consider using a RelativeLayout and setting the TextView to align with both the top and bottom of the image.
as your achievement suggest, you only need to change your gravity to layout_gravity
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
</LinearLayout>
You need to set gravity then you set text alignment to gravity
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical"
android:textAlignment="gravity"
/>
I want to have three images in one row, and a Video or two below them.
So far, I am unable to correctly position the three images via Relative Layout.
It gets quite different behaviour from what I expect it to be... it shows only one picture, as though it is a FrameLayout.I can assure you the images are in place. And the java code is nothing but straightforward OnCreate - super.OnCreate, setContentView(R.layout.component_name) .
What is wrong with this relative layout?
<?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/previous_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/previous_frame" />
<ImageView
android:id="#+id/catch_frame"
android:layout_toLeftOf="#+id/previous_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/catch_frame"
/>
<ImageView
android:id="#+id/next_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/next_frame"
android:layout_toLeftOf="#id/catch_frame"
/>
</RelativeLayout>
Check the code use android:toRightOf instead of android:toLeftOf..