Android widgets are incorrectly positioned - android

I'm new to Android programming, and started using Android Studio to develop a very simple app. However, using the "Design" view in the XML file, the widgets are not being correctly placed.
See the image - there are two widgets - Button and TextView. They are positioned at different places within the "Design" view, but they show in the left top corner in the emulator.
Why is this happening?

Your button view is using tools attribute which is only work in preview not on device make sure you remove them and use appropriate attributes
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/tv"
android:text="adhfbkj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:text="button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>

Related

Why can't I see the Google login button?

I have linked Google login to my 'JoinActivity'. Like this...
activity_join.xml
<?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=".JoinActivity">
<!-- this line-->
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>
But, I couldn't see any 'visual' button on my Design tab, there was only '200dp-linear button('cause its width values is 200dp. It doesn't have height value. idk why)' on the top-left.
I referenced other sites, videos. They all have visual button like this but not me.
Yes, we can not see the icon in design mode, but it display when
running the app.
Your XML has an error:
This view is not constrained. It only has designtime positions, so it
will jump to (0,0) at runtime unless you add the constraints
To make it work properly, we must add the constraint for horiziation and vertical.
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
And this is constraint-layout introduction
Try running Gradle, this sometimes triggers the design to redraw (if you have just added the google library without having ran Gradle fully)

Drag drop views in constraintlayout move views to top left corner

I am new to constrain layout and after reading documentations i know that view must have 1 horizontal and 1 vertical coordinates but whenever i drag a new view into design it move to 0,0 coordinates
My XML
<?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/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="181dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add_friend" />
</androidx.constraintlayout.widget.ConstraintLayout>
I already set views vertical and horizontal constrain but it still hangs at the top left also tried with vertical and horizontal bias but views sticks to top left.Please help
I also checked this and this but not working for me.
It happens sometimes if we move around commits. For me it's mostly build related issue. Building the project or make project would fix this issue.

Android Studio kotlin chat screen layout

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.

Some missing layout attributes in the textView

I'm looking for some attributes such as layoutCenteringParent in my textView and cannot find them. I want to find that specific attribute in order to center the text (I'm following an online tutorial). I tried to follow the advice here:
Missing attributes in the layout design - Android Studio
and deleted my Android studio cache but it didn't help.
I'm a beginner so there is a good chance I'm just missing something here. I'm attaching a screenshot:
With ConstraintLayout you should constrain Textview from all four sides to center it.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ABC"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Your best option is to use ConstraintLayout, like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/greeting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is an excellent tutorial about ConstraintLayout: https://www.youtube.com/watch?v=4N4bCdyGcUc
To center text's container set all constraints as parent and remove any biases.
To center text inside container use android:gravity = "center"

Layout content overlap in Oreo

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.

Categories

Resources