I'm testing a new activity in our Android app. On all but one devices, everything was fine - except for a Huawei P30 Pro.
The activity is quite simple: it shows an ImageView and a small menu-bar on the bottom. Before the image is set, a ProgressBar (spinning circle) gets shown.
On the Huawei P30 Pro, everything seems to work fine (the ProgressBar appears, the circle is spinning, the ProgressBar disappears), but no Image becomes visible. If you forward the image by pressing the Apply-button in the menuBar, the image gets correctly forwarded, so it actually is available, it just doesn't get shown within the activity.
We tested the same version of the app on several other devices (including Huawei P10, P20, several Samsung-phones and HTC) and everything was ok. But on both Huawei P30 Pro we had available, the same problem appeared.
The layout-code is pretty straightforward:
<LinearLayout 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="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="10">
<LinearLayout
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="9"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:srcCompat="#tools:sample/avatars"
android:contentDescription="Image preview"/>
<ProgressBar
android:id="#+id/indeterminateBar"
android:indeterminate="true"
android:minWidth="100dp"
android:minHeight="100dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout
android:layout_height="0dp">
<LinearLayout
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1">
<!-- bottom menu-bar-code is here as a TableLayout, which works fine on all devices -->
</LinearLayout>
</LinearLayout>
Maybe the ImageView has a height of 0 so it isn't visible?
I'm puzzled about what it could be, since it's only that particular device...
I checked if the ImageView-drawable does properly get set (imageView.getDrawable() != null) and it looks like it does (it is not null), as well as the visibility-state, which also seems to be fine.
So at this point, I think it is a pure layout-problem.
I highly recommend to switch from LinearLayout to ConstraintLayout. Even though your current layout works on 14 of 15 devices, the height of the bottom menu is always 10% and this will not look good on devices with small heights (have you ever tried your layout in landscape? You will see what I mean).
Once switched to ConstraintLayout, your layout issue on the 15th device should also disappear.
I transformed your layout to use ConstraintLayout to show how it could look like. It also has less layouts inside.
<?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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:contentDescription="Image preview"
app:layout_constraintBottom_toTopOf="#id/bottomMenuBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<ProgressBar
android:id="#+id/indeterminateBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:minWidth="100dp"
android:minHeight="100dp"
app:layout_constraintBottom_toTopOf="#+id/bottomMenuBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/bottomMenuBar"
android:layout_width="fill_parent"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<!-- bottom menu-bar-code is here as a TableLayout, which works fine on all devices -->
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Please be aware that for visibility reasons in the layout preview I have added a fixed height for the LinearLayout of the bottom menu. Once you have understood the ConstraintLayout you should also change it for the menu bar. I kept it as a LinearLayout for easier usage with your real layout code.
Related
I have an app that have an activity with 3 imagebutton and a banner ad below. Something like this...
The ImageButton layout sizes are wrap-content, and each source is a png that i've made.
Now, when i've tested in a small screen the bottom one is behind the banner ad.
I want to scale the ImageButtons dending on the size (mainly the height) of the screen.
Can anyone tell me a correct way to do it?
I have to make small png sources that fits on a small screen and then make more drawables with minimal screen width qualifiers? 320dpi and 480dpi its a really big margin, i will have to make some more folders in between.
Thank you all in advance!!!
if you dont domain Constraint Layout, maybe you can try to use a LinearLayout inside your main layout with weight to divide the screen... something like below, it may work:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4"
android:padding="10dp">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
</LinearLayout>
</RelativeLayout>
Just adjust it as you want... Hope this work :)
You don't need to create separate images, you can use ConstraintLayout and it will manage the sizes for you automatically. I have tested the code below and it seems to work fine. Have a go at it:
your_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/imageButton2"
android:background="#color/white"
android:src="#drawable/image_1"/>
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageButton1"
app:layout_constraintBottom_toTopOf="#id/imageButton3"
android:background="#color/white"
android:src="#drawable/image_2"/>
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageButton2"
app:layout_constraintBottom_toTopOf="#id/bannerContainer"
android:background="#color/white"
android:src="#drawable/image_3"/>
<!-- Whatever container your banner is in -->
<RelativeLayout
android:id="#+id/bannerContainer"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#000"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Note:
I have added the background colors just to test out. The main point to focus on for you is that the height of the ImageButton is 0dp for all, and the constraints manage the height automatically.
The good part of ConstraintLayout is that you don't need to specify different weights like you would in a LinearLayout, so you can have images of different heights and it will work just fine.
If you are using css you can use the property unit vh (viewport height). The measurement is a percentage of the viewport/screen height. For example height: 10vh; width: auto; will render the element height as 10% of the screen height, without distorting your png. If you use this measurement for the four elements shown, they will all appear on the screen at the same time if their values add up to 100.
https://www.sitepoint.com/css-viewport-units-quick-start/
I am trying to build a chat layout. Everything is working fine. When users match each other, they can write messages and the messages appear in the chat screen. However, there is this giant gap in between my chat bubbles.
I read the official Android Chat Bubble documentation, went through YouTube videos and stack overflow. I don't really see where I am going wrong here. My bubbles appear in real time, I can read users chats when testing with two virtual android devices, however the chats have a giant gap in between them and are not on top of each other.
<?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=".activities.ChatActivity">
<LinearLayout
android:id="#+id/navigationLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/navigation_height"
android:layout_margin="#dimen/chat_margin"
android:background="#color/shadow"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/topPhotoIV"
android:layout_width="#dimen/navigation_height"
android:layout_height="#dimen/navigation_height"
android:layout_marginRight="#dimen/chat_margin"
android:scaleType="centerInside"/>
<TextView
android:id="#+id/topNameTV"
android:layout_width="match_parent"
android:layout_height="#dimen/navigation_height"
android:gravity="center_vertical"
android:textSize="20sp"
android:paddingLeft="#dimen/chat_margin"/>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/messagesRV"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/messageET"
app:layout_constraintTop_toBottomOf="#+id/navigationLayout" />
<Button
android:id="#+id/sendButton"
style="#style/sendButton"
android:layout_width="#dimen/send_width"
android:layout_height="#dimen/send_height"
android:layout_margin="#dimen/chat_margin"
android:onClick="onSend"
android:text="#string/send_button_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<EditText
android:id="#+id/messageET"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:maxHeight="#dimen/send_height_max"
android:layout_margin="#dimen/chat_margin"
android:padding="#dimen/chat_margin"
android:gravity="center_vertical"
android:background="#drawable/chat_box_bg_rounded"
android:hint="#string/hint_message"
android:minHeight="#dimen/send_height"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/sendButton"
app:layout_constraintStart_toStartOf="parent" />
chat screen
chatxml
currentUserMessage
otherUserMessage
I ended up changing the recycler view to wrap_content and it is still having a gap. I think I am missing somethinghere?
StillAGap
So I went into the item_current_user_message.xml and the item_other_user_message.xml and switched match_parent to wrap_content and voila, it works. :) Thank you!
FIXEDchatBubbles
This issue is because of the match_parent heigh to the layout of the chat adapter. Make sure the adapter's layout should have height as wrap_content. Setting height to wrap_content will resolve the issue.
I've two child layouts in ConstraintLayout (One above the other). It's showing second layout above first in all Android versions except Android 8.1 (Android O),where the second layout is hidden behind the first layout.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout android:id="#+id/subscriberViewContainer"
android:layout_marginBottom="50dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/colorAccent"/>
<RelativeLayout
android:id="#+id/publisherViewContainer"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginBottom="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="120dp"
android:layout_height="90dp"
android:elevation="20dp"
android:background="#color/colorPrimary"/>
</android.support.constraint.ConstraintLayout>
Are there any changes that need to be done in Android O to get the same response as the rest?
I found the last layout to which i'm adding view is coming on top, which is very odd. So i put a temporary fix , if the build version > 25 then add view to second layout again .It's very weird but at the end of the day , i had to fix it.
I have just noticed that my Android app layout is broken when displayed on Marshmallow. It is fine on Nexus 5 with Android 5.1.1 but it renders wrong on Nexus 5 and Nexus 5x with the latest version of Android.
The layout consist of little triangle (see red part) aligned to the bottom and above it there is some view (white) that should span all available height of its parent (grey part).
And this is how it renders on Android 5.1.1 (Nexus 5):
while on Android 6.0 (Nexus 5 and Nexus 5X) it is:
The problem looks like the red view doesn't respect its parent alignment (bottom, right) and it makes the white view (which is placed above) to disappear.
The simplified layout of the grey view and its children is (I have added some background colours to see the view bounds):
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#777777">
<View
android:id="#+id/preview_triangle"
android:layout_width="#dimen/preview_triangle_width"
android:layout_height="#dimen/preview_triangle_height"
android:layout_marginRight="#dimen/preview_triangle_margin_right"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#ff0000"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/preview_triangle"
android:orientation="horizontal">
<View
android:layout_width="#dimen/preview_margin_horizontal"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="3dp"
android:background="#drawable/round_rectangle_white_radius_3dp">
<WebView
android:id="#+id/preview_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:id="#+id/preview_close"
android:layout_width="#dimen/preview_margin_horizontal"
android:layout_height="#dimen/preview_margin_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|top"
android:layout_marginLeft="#dimen/preview_close_margin_left"
android:src="#drawable/icn_close"
android:contentDescription="#null"/>
</FrameLayout>
</LinearLayout>
</RelativeLayout>
The above layout is placed into separate preview.xml file and then included into main layout like this:
<include
android:id="#+id/fragment_main_loyalty_preview_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/fragment_main_loyalty_logo_container"
android:layout_above="#id/fragment_main_loyalty_buttons_container"
android:layout_marginTop="#dimen/fragment_main_loyalty_preview_container_margin_top"
android:layout_marginBottom="#dimen/fragment_main_loyalty_preview_container_margin_bottom"
android:visibility="visible"
layout="#layout/preview"/>
UPDATE
The problem disappears if I replace hosting ScrollView with FrameLayout or so.
I really don't get it why the intermediary parent renders fine and its child is affected by the top most parent :)
And the situation can be reproduced inside Eclipse just by switching target API in the designer.
UPDATE - SIMPLIFIED TEST CASE
Below is the simplest layout I was able to create and reproduce my problem.
Basically the red area should be placed between green and blue ones.
The height of the red area should match the space available between green and blue views as there is another view (see #id/margin_placeholder) which height affects the distance between these two.
Inside the red area I wanted to put white view at the bottom of red area.
And this little white fellow renders different way on Android 6.0:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_marginTop="10dp"
android:background="#007700"/>
<View
android:id="#+id/margin_placeholder"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#id/top"/>
<FrameLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_below="#id/margin_placeholder"
android:background="#000077"/>
<RelativeLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/top"
android:layout_above="#id/bottom"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#770000">
<View
android:layout_width="16dp"
android:layout_height="8dp"
android:layout_marginRight="16dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#ffffff"/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
It renders fine if I upgrade targetSdkVersion from 16 to 20.
I'm using a GLSurfaceView to render a live wallpaper behind my apps interface which consists of android UI elements.
In the beginning of my app I ask the user if they would like to see this wallpaper or not.
ONLY if the user accepts the GLSurfaceView is inflated in the existing xml as a first element so it will stay behind.
My problem is exactly the opposite of what i would think it would.
When the wallpaper is ACTIVATED the screen renders properly, like so:
When I don't use the wallpaper it's rendered like a, partially burned graphic card:
As you see from the xml structure, my GLSurfaceView is not even injected in the problematic case.
Something weird is that when it's injected the DDMS Monitor displays it as just
If the opposite was the case it would be clear that the problem is caused by the GLSurfaceView. But now it seems as if the lack of it causes this problem.
Any ideas on what could be the problem?
I'm using Nexus 4 to test and it seems that it could be related based on DanJAB
XML 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">
<Button
style="?metaButtonBarButtonStyle"
android:id="#+id/home_history"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/button_calibrator"
android:text="#string/history"/>
<View
android:id="#+id/button_calibrator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/home_history"
android:layout_alignBottom="#+id/home_history"
android:layout_centerHorizontal="true"/>
<Button
style="?metaButtonBarButtonStyle"
android:id="#+id/home_help"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/button_calibrator"
android:text="#string/help"/>
<View
android:id="#+id/screen_menu_seperator"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#+id/home_history"
android:background="#color/holo_blue"/>
<ListView
android:id="#+id/homescreen_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/screen_menu_seperator"
android:background="#android:color/transparent"
android:cacheColorHint="#android:color/transparent"/>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_alignParentBottom="true"
android:background="#color/holo_blue"/>
</RelativeLayout>
GLSurfaceView XML:
<?xml version="1.0" encoding="utf-8"?>
<android.opengl.GLSurfaceView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:visibility="gone"/>
and in java:
getLayoutInflater().inflate(R.layout.background, contents);
GLSurfaceView background = (GLSurfaceView) contents.findViewById(R.id.background);
This is a phone bug. Nexus 4 causes this issue with certain theme configurations.