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..)
Related
Newbie question here, but I'm struggling to find the answer.
When laying out components, clearly if android can fit all the components on the screen while respecting all the requested attributes (height, margin etc), then it will do that.
But what if there is not enough room on the screen for everything? I had thought that it would simply put what it could on the screen starting at 0,0, and then have horizontal or vertical scrollbars for the rest.
However, that's not what I'm seeing, but I can't figure out what I am seeing. For example, when I try to view the following layout on my phone, the text has disappeared off the top of the screen (I can get this by turning the phone to landscape mode where there is obviously less available height).
What gives? How is android determining how to lay out these components and where to place the centre of the screen?
Many thanks!
EDIT: It looks like the problem has to do with me using so many dp values that mean that there's no way for everything to fit on the screen. I've fixed my immediate problem by using layout 'weight' to scale my components proportionally to the screen rather than trying to specify absolute sizes. I'm still curious why the layout code would choose to push my text off the top though - perhaps it priortises dp values?
The layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:text="#string/TextView1Text2" />
<Button
android:id="#+id/button"
android:layout_width="200dp"
android:layout_height="150dp"
android:onClick="#string/Button1OnClick"
android:text="#string/Button1Text" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/bla"
app:srcCompat="#drawable/blank_1024_200" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
It looks like there's a lot of information on how to add a shadow to an element like a toolbar or a footer, but none of them seem to work for me. I'm working with api 29 (Android 10) and would like a current practice in adding shadows to elements. Hopefully, today, this means not having to create a separate drawable and then setting that to the background and can be today elegantly achieved by setting elevation and without having to bring in another library. Unfortunately, none of the simpler solutions seem to work for me at the moment. Below is a simplified version of the most recent pattern I tried:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<Toolbar
android:layout_width="match_parent"
android:layout_height="10dp"
android:elevation="4dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="lorem ipsum......"/>
<Button
android:margin="10dp"
android:text="Submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
I'm having issues with my Activity and an ImageButton inside it. It looks like it is clipping:
This is the XML of the corresponding activity:
<?xml version="1.0" encoding="utf-8"?>
<!-- A RecyclerView with some commonly used attributes -->
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:id="#+id/todo_linear_layout"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="horizontal">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
app:srcCompat="#android:drawable/ic_input_add" />
<EditText
android:id="#+id/edittodo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20px"
android:layout_weight="5"
android:textColor="#android:color/black" />
</LinearLayout>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/todo_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" >
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Additionally the Layout Designer in Android Studio shows the Layout correctly:
Where is the problem here? I already tried to change margin or padding values but the Button is still clipping in the running app on my android device.
I believe that what's happening is that the device you're running your app on doesn't have the #android:drawable/ic_input_add drawable.
I tried running the code you posted, and everything worked for me. However, if I delete the app:srcCompat attribute from the <ImageButton> tag, then I get the same behavior you posted in your first screenshot.
In general, you can't rely on 100% of devices having #android: resources. Some manufacturers remove resources, and others replace the values with nonsense (I've seen #android:color/white come through as gray, for example).
I recommend creating your own drawable (maybe even just manually copying the one from Android and adding it to your project), and referencing that instead.
app:srcCompat="#drawable/your_own_add"
Changing the app:srcCompat to:
android:src="#android:drawable/ic_input_add" did it! So the issue was, that the device didn't find that icon and displayed just something gray.
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.
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.