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.
Related
I don't understand this issue. I'm pretty sure I used to do this, yet in this case, the zindex ordering is not followed, and the TextView below is hidden behind the button:
<?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="wrap_content">
<Button
android:text="Button"
android:layout_width="match_parent"
android:layout_height="50dp" />
<TextView
android:textColor="#color/black"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
I have restarted Android Studio, but even worse, this is the same on my device too, so its not an Android Studio bug. What is the issue here exactly?
Please use the elevation
android:elevation="10dp"
here is you can see your solution
If you add any views to Relative Layout, It places your view above another view if you don't use layout alignment like layout_above/layout_below/layout_leftof or rightof etc
I think I have tried and researched enough, if not everything, yet I just can't get the two icons on the right get displayed in android emulator.
The strange thing is, that they are perfectly visible in design window.
Moreover, with similar/same GUI design, other activities display all my elements just fine.
I already know well, that how views overlap on screen depends on order of elements as I place them in the 'Component Tree' of Android Studio IDE.
Correctly looking design in Android Studio:
Missing icons on the right in emulator:
Moreover, the app in missing the title, which could be caused by an inappropriate parent activity class (its Activity which I changed from AppCompatActivity as I spent quite some time with the AS Designing tool).
How else can I control the order of elements when they overlap?
Or what weird Android concept am I still missing?
Or what has changed since all worked fine for me?
Below is the code XML for app design:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sbm.bc.smartbooksmobile.ActivityTeacherHwkCheckByTask">
<ImageView
android:id="#+id/Problems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginTop="57dp"
android:elevation="24dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_problems" />
<ImageView
android:id="#+id/Talar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="42dp"
android:layout_marginTop="57dp"
android:elevation="24dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_menu_talar" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_dark"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="45dp"
android:background="#android:color/holo_blue_bright">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:visibility="visible">
<LinearLayout
android:id="#+id/ListOfTaskRows"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="24dp"
android:orientation="vertical"
android:visibility="visible">
</LinearLayout>
</ScrollView>
</TableRow>
<TextView
android:id="#+id/Description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="63dp"
android:allowUndo="false"
android:elevation="20dp"
android:ems="10"
android:text="Úloha"
android:textAlignment="center"
android:textSize="18sp"
android:visibility="visible" />
</RelativeLayout>
I think you are missing the fact that the RelativeLayout children are drawn in front of each other if they overlap. In your case you have a TableRow whose width is match_parent - it fills the parent's width but as it's added after the image views it's drawn in front of them.
You could constrain the table's width so that it leaves room for the images by setting it's layout_alignEnd attribute to the id of your left-most image, so that the table would end where the image begins.
Well, believe it or not the reason for missing icons was, that I decided to derive my app from plain Activity and not AppCompatActivity as I had it before.
So I have restored my activity to extends AppCompatActivity again and lo and behold.. It works.
This of course also enabled the Activity title again.
As its a pure nonsence (another one) and my time wasted counts already in days (not only this issue, but many other crappy designs and apparent bugs in ADT), I've just decided to abbandon native Android development in the near future and switch back to Xamarin/C# instead. (I've started my Android development from C# Xamarin 4 years ago and only left because of insufficient HW access support at that time).
Howhg !
For user of "Material Design":
Another simple workaround is using "elevation" property of any GUI element.
By increasing this value, one can force to draw this element on foreground over those with lower elevation.
As a bonus (or drawback), you get shading around your elevated GUI element according to how much you have elevated.
I wonder how much this feature prolongs rendering time
Another question is min supported API version. (Did not find it right away..)
I am creating a messaging app and am currently working on the inbox. I'm using a RecyclerView to display the list of conversations and would like each list item to look like this:
Leftmost is the contact image at 90dp x 90dp
The first row has two columns--the contact name and the date. The date should not be a fixed size as I currently have it, but fit at most DD/MM/YYYY (can be smaller in the case of something like "Sunday") and should be anchored to the right margin. The contact(s) should expand as necessary to fill any space up to the date.
The second row contains as much text of the last message as will fit.
I was going to use layout_weight but that doesn't work in a RelativeLayout (and doesn't allow the contact names to elongate in the case of a shorter date) and LinearLayout doesn't let me use layout_toEndOf. I'm a newbie at Android development so I'm not sure if one of those is the "right" answer.
What's the proper way of accomplishing the layout I'm looking for?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/conversation_info"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_horizontal_margin">
<RelativeLayout
android:id="#+id/conversation_image_layout"
android:layout_width="90dp"
android:layout_height="90dp">
<ImageView
android:id="#+id/conversation_contact_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
<TextView
android:id="#+id/conversation_contact_name"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:gravity="center_vertical"
android:textSize="#dimen/conversations_contact_font_size"
android:layout_toEndOf="#id/conversation_image_layout" />
<TextView
android:id="#+id/conversation_date"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/conversation_contact_name"
android:gravity="right"
android:paddingRight="#dimen/activity_horizontal_margin"
android:textSize="#dimen/conversations_date_font_size" />
<TextView
android:id="#+id/conversation_snippet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/conversation_contact_name"
android:textSize="#dimen/conversations_snippet_font_size"
android:layout_toRightOf="#id/conversation_image_layout" />
</RelativeLayout>
</LinearLayout>
This is what a list item currently looks like (I haven't loaded contact images yet). It's fine for the most part (though my layout code is probably incredibly bloated so I'd appreciate if anyone could point out ways to make it more concise) but notice how the date isn't on the same level as the contact name and wraps:
One of the textView in question has the MarginTop attribute, and the other one doesn't. Either remove it on both or add it to both:
<TextView
android:id="#+id/conversation_contact_name"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:gravity="center_vertical"
android:textSize="#dimen/conversations_contact_font_size"
android:layout_toEndOf="#id/conversation_image_layout" />
<TextView
android:id="#+id/conversation_date"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/conversation_contact_name"
android:gravity="right"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:textSize="#dimen/conversations_date_font_size" />
Also, I'd recommend that you use Linear Layouts with nested Linear Layouts and weights, for better performance on different screens and devices. This may all fall apart if you run it on a different device. Don't trust me, try it :)
After it became clear to me that some of the layout parameters didn't mean what I thought they did, I spent some more time looking at my choices.
It is not recommended to nest LinearLayouts/use layout_weight within a list item, as the number of views created increases rapidly as more items are added. I managed to minify my code and keep it in a single RelativeLayout with the following code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/conversation_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/conversation_contact_image"
android:layout_width="64dp"
android:layout_height="64dp"/>
<TextView
android:id="#+id/conversation_contact_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/conversations_contact_font_size"
android:layout_toEndOf="#id/conversation_contact_image"/>
<TextView
android:id="#+id/conversation_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/conversation_contact_name"
android:textSize="#dimen/conversations_date_font_size"/>
<TextView
android:id="#+id/conversation_snippet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/conversation_contact_name"
android:textSize="#dimen/conversations_snippet_font_size"
android:layout_toEndOf="#id/conversation_contact_image"/>
</RelativeLayout>
Notable changes:
No nested tags - It was unnecessary to group the first line in its own layout
Used layout_alignBaseline - #Vucko pointed out that I was using marginTop on the contact name but not the date. Even after removing it, the two were still misaligned. android:gravity had no effect and it turns out none of these actually affect the text inside the layout
Used layout_alignParentEnd to fix the date issue. I've realized that in my case, a layout component usually only needs to reference one other in order to properly align itself relative to the rest of the layout.
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.
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..