Please help me find a way to combine two ConstraintLayouts so that the ImageViews are displayed correctly.
I have an activity that used to work fine for quite a few years. But after updating to androidx and updating to androidx.constraintlayout:constraintlayout:2.1.2 from 1.1.3, all ImageViews in one of the ConstraintLayouts has lost its position. Strangely, I can't get this activity back to the way it used to be displayed by changing back to the 1.1.3-version... The only thing that works is to go back to an older backuped version. Doing this however, does not seem to be a good solution since it probably won't be compatible with future updates.
The structure of this Activity-view is described in the picture below. One ConstraintLayout is putting one child ConstraintLayout and one child LinearLayout together using two FrameLayouts. These two FrameLayouts are positioned using a HorizontalGuideline in percent, that splits the view in two. The LinearLayout displays correctly. But the ImageViews in the child ConstraintsLayout either:
For MatchParent: The ImageViews forgets all about their relative position to each other, gets detached to each other and spread out over the screen and even outside of the cellphone screen.
For WrapContent: The ImageViews forgets all about their relative position to each other, gets position in the center of the cellphone screen. The center looks like a miniature window of the child ConstraintLayout with its ImageViews squezed together and on top of each other.
The ImageViews in the child ConstraintLayout are displayed with the help of one vertical and one horizontal guidelines, these are set in percent. What have I missed here?
(I assume there might be a work-around using a different layout instead of the child ConstraintLayout, but that would probably mess-up already developed animations... Hence, I would like to avoid that.)
[Views in design mode and on the cellphone screen][1]
[Structure][2]
Code parent ConstraintLayout
<?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:id="#+id/Constraintlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.85" />
<FrameLayout
android:id="#+id/containergame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/guideline14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="#+id/containergamecontrol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline14" />
</androidx.constraintlayout.widget.ConstraintLayout>
Code child ConstraintLayout (failing on device, but looks ok in design view in Android Studio)
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<ImageView
android:id="#+id/tile2"
style="#style/TileButton_3by3"
android:src="#drawable/borderpiece_upper"
android:visibility="visible"
app:layout_constraintLeft_toRightOf="#+id/guideline5"
app:layout_constraintRight_toLeftOf="#+id/guideline5"
app:layout_constraintTop_toBottomOf="#id/guideline6"
app:layout_constraintBottom_toTopOf="#id/tile5"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/tile1"
style="#style/TileButton_3by3"
android:src="#drawable/cornerpiece_left_upper"
android:visibility="visible"
app:layout_constraintRight_toLeftOf="#+id/tile2"
app:layout_constraintTop_toBottomOf="#+id/guideline6"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/tile3"
style="#style/TileButton_3by3"
android:src="#drawable/cornerpiece_right_upper"
android:visibility="visible"
app:layout_constraintLeft_toRightOf="#+id/tile2"
app:layout_constraintTop_toBottomOf="#+id/guideline6"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/tile5"
style="#style/TileButton_3by3"
android:src="#drawable/centerpiece"
android:visibility="visible"
app:layout_constraintLeft_toRightOf="#+id/guideline5"
app:layout_constraintRight_toLeftOf="#+id/guideline5"
app:layout_constraintTop_toBottomOf="#+id/tile2"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/tile4"
style="#style/TileButton_3by3"
android:src="#drawable/borderpiece_left"
android:visibility="visible"
app:layout_constraintRight_toLeftOf="#+id/tile5"
app:layout_constraintTop_toBottomOf="#+id/tile1"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/tile6"
style="#style/TileButton_3by3"
android:src="#drawable/borderpiece_right"
android:visibility="visible"
app:layout_constraintLeft_toRightOf="#+id/tile5"
app:layout_constraintTop_toBottomOf="#+id/tile3"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/tile8"
style="#style/TileButton_3by3"
android:src="#drawable/borderpiece_bottom"
android:visibility="visible"
app:layout_constraintLeft_toRightOf="#+id/guideline5"
app:layout_constraintRight_toLeftOf="#+id/guideline5"
app:layout_constraintTop_toBottomOf="#+id/tile5"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/tile7"
style="#style/TileButton_3by3"
android:src="#drawable/cornerpiece_left_bottom"
android:visibility="visible"
app:layout_constraintRight_toLeftOf="#+id/tile8"
app:layout_constraintTop_toBottomOf="#+id/tile4"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/tile9"
style="#style/TileButton_3by3"
android:src="#drawable/cornerpiece_right_bottom"
android:visibility="visible"
app:layout_constraintLeft_toRightOf="#+id/tile8"
app:layout_constraintTop_toBottomOf="#+id/tile6"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand12"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand11"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand10"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand9"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand8"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand7"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand6"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand5"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand4"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand3"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand2"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/operand1"
style="#style/Operand_3by3"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#drawable/operand_level_list"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/number2"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile2"
app:layout_constraintEnd_toEndOf="#+id/tile2"
app:layout_constraintStart_toStartOf="#+id/tile2"
app:layout_constraintTop_toTopOf="#+id/tile2" />
<TextView
android:id="#+id/number1"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile1"
app:layout_constraintEnd_toEndOf="#+id/tile1"
app:layout_constraintStart_toStartOf="#+id/tile1"
app:layout_constraintTop_toTopOf="#+id/tile1" />
<TextView
android:id="#+id/number3"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile3"
app:layout_constraintEnd_toEndOf="#+id/tile3"
app:layout_constraintStart_toStartOf="#+id/tile3"
app:layout_constraintTop_toTopOf="#+id/tile3" />
<TextView
android:id="#+id/number5"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile5"
app:layout_constraintEnd_toEndOf="#+id/tile5"
app:layout_constraintStart_toStartOf="#+id/tile5"
app:layout_constraintTop_toTopOf="#+id/tile5" />
<TextView
android:id="#+id/number4"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile4"
app:layout_constraintEnd_toEndOf="#+id/tile4"
app:layout_constraintStart_toStartOf="#+id/tile4"
app:layout_constraintTop_toTopOf="#+id/tile4" />
<TextView
android:id="#+id/number6"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile6"
app:layout_constraintEnd_toEndOf="#+id/tile6"
app:layout_constraintStart_toStartOf="#+id/tile6"
app:layout_constraintTop_toTopOf="#+id/tile6" />
<TextView
android:id="#+id/number8"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile8"
app:layout_constraintEnd_toEndOf="#+id/tile8"
app:layout_constraintStart_toStartOf="#+id/tile8"
app:layout_constraintTop_toTopOf="#+id/tile8" />
<TextView
android:id="#+id/number7"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile7"
app:layout_constraintEnd_toEndOf="#+id/tile7"
app:layout_constraintStart_toStartOf="#+id/tile7"
app:layout_constraintTop_toTopOf="#+id/tile7" />
<TextView
android:id="#+id/number9"
style="#style/Number_3by3"
app:layout_constraintBottom_toBottomOf="#+id/tile9"
app:layout_constraintEnd_toEndOf="#+id/tile9"
app:layout_constraintStart_toStartOf="#+id/tile9"
app:layout_constraintTop_toTopOf="#+id/tile9" />
<TextView
android:id="#+id/operands"
style="#style/Operands_as_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/operand1"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
[1]: https://i.stack.imgur.com/zCwvG.png
[2]: https://i.stack.imgur.com/BnVdW.png
Solved it!
Remember, we had ImageViews that were wrongly positioned after an update to AndroidX. This also made the view of the fragment lose it's shape. To see a picture of this weird behavior please look at this:
In turned out that the problem was an incautious java-programing on my part. I wanted the ImageViews to be connected to the program logic in the rest of my java-code. To achieve this I altered the Ids on the ImageViews themselves, so that the id's carried some information connected to the other code. I did this in the onCreateView method in my fragment like this:
int id = <A unique integer carrying some information>
iv.setId(id)
Erasing these two lines of code above leaving the id:s unchanged, makes the app work flawless again.
Hmmm, how could this be? Well, I guess that the id's of the ImageViews are read earlier by the layout engine in AndroidX and before the change of the id's in the onCreateView method in my java-code takes place. So when I change the id:s to something else (afterwards), I accidentally destroy the link between the awareness of the views and the views themselves, leaving the layout engine confused.
Lesson learned: Never change the id's of the ImageViews unless you know exactly when the id:s are read and how they are used by the layout engine.
Related
I have a constraint layout as below:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
style="#style/LoginScreenBg"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
android:scrollbars="none"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="-100dp"
android:contentDescription="#null"
android:src="#drawable/ic_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#id/dm_title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dm_title"
style="#style/titlesp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toTopOf="#id/username_input_layout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<EditText
android:id="#+id/username_input_layout"
style="#style/CreateAccountEditTextHint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/EMAIL_HINT_TEXT"
android:inputType="textEmailAddress"
app:layout_constraintBottom_toTopOf="#id/password_input_layout"
app:layout_constraintLeft_toLeftOf="parent"/>
<EditText
android:id="#+id/password_input_layout"
style="#style/CreateAccountEditTextHint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/PASSWORD_HINT_TEXT"
android:inputType="textPassword"
android:maxLength="20"
app:layout_constraintBottom_toTopOf="#id/btn_login"
app:layout_constraintLeft_toLeftOf="parent" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn_login"
style="#style/LoginButton"
android:layout_width="match_parent"
android:layout_height="#dimen/generic_button_height"
android:layout_marginStart="#dimen/dp_16"
android:layout_marginEnd="#dimen/dp_16"
android:layout_marginBottom="#dimen/dp_24"
android:background="#color/login_button_color"
app:layout_constraintBottom_toTopOf="#+id/btn_forgot_username_password" />
<Button
android:id="#+id/btn_forgot_username_password"
style="#style/ForgotButton"
android:layout_width="wrap_content"
android:layout_height="#dimen/generic_button_height"
android:layout_marginBottom="#dimen/dp_24"
android:text="#string/FORGOT_USERNAME_PASSWORD_BUTTON"
app:layout_constraintBottom_toTopOf="#+id/btn_create_account"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_create_account"
style="#style/CreateAccountButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_16"
android:layout_marginEnd="#dimen/dp_16"
android:layout_marginBottom="#dimen/dp_24"
android:text="#string/SCREEN_LOGIN_CREATE_ACCOUNT"
app:layout_constraintBottom_toBottomOf="parent"
app:uidComponentType="Secondary" />
<ProgressBar
android:id="#+id/progress_circular"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Below code is added in the manifest
<activity
android:name=".ui.Activity"
android:configChanges="screenSize|orientation|keyboard"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
When we use the adjustResize, UI components gets overlapped with each other.
If I do not add the adjust resize there are few layouts which over the notification bar on my device.
If I add the adjust resize it is distorts the UI.
I am using single activity model. So the change in manifest will affect all the screens
Could you please let me know how to resolve this
This was happening because the views at the top of the screen are chained to each other but the button at the end is independent and is constrained to the bottom of the screen.
When the screen is resized, the elements are not chained to each other and the views are distorted
I have the following content for my recycler card element
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cardview_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginHorizontal="4dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="6dp"
>
<ImageView
android:id="#+id/imageview_category_icon"
android:layout_width="30dp"
android:layout_height="45dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/ic_own_groceries" />
<TextView
android:id="#+id/textview_item_name"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_plus"
android:layout_toEndOf="#+id/imageview_category_icon"
android:gravity="center_vertical"
android:text="Item Name"
android:textColor="#color/grayDark"
android:textSize="#dimen/small_text_size"
android:textStyle="normal" />
<Button
android:id="#+id/button_plus"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_minus"
android:background="#color/greenDark"
android:text="+"
android:textColor="#color/white" />
<Button
android:id="#+id/button_minus"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_status"
android:layout_alignParentTop="true"
android:background="#color/redDark"
android:text="-"
android:textColor="#color/white" />
<Button
android:id="#+id/button_status"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_edit"
android:background="#color/grayMedium"
android:gravity="center"
android:text="3"
android:textColor="#color/white"
android:textSize="#dimen/normal_text_size" />
<ImageView
android:id="#+id/button_edit"
android:layout_width="20dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:onClick="goToEditor"
app:srcCompat="#drawable/ic_baseline_edit_24" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
Unfortunately, android:layout_marginTop="4dp" in the root element does not seem to have an effect on the margin between consecutive cards in the app display. In fact, there is no margin at all, no matter to what value I change the "4dp". On the other hand, android:layout_marginHorizontal="4dp" works fine.
Also, app:cardCornerRadius="4dp" has no effect either, though when visualizing in Android Studio only this layout file, the rounded corners do appear.
As suggested by answers to a similar question, I did use "wrap_content" for height wherever possible. To no avail.
What's wrong?
This answer was posted by the author of the question.
The problem persists, but I found a hack by inserting above RelativeLayout an empty TextView with the same height as the desired top margin.
I try to write a to-do list app using ListView. But there is a problem when I use the keyboard on my phone and try to add something to the list the first elements are not visible. After I add 3 or 4 elements, I am able to see the to-do list items. How I can adjust the listview that it won't go up when I use the keyboard.
Here is the XML code
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<ListView
android:id="#+id/listView"
android:layout_width="0dp"
android:layout_height="450dp"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:focusableInTouchMode="false"
android:isScrollContainer="false"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.403" />
<Button
android:id="#+id/button"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="73dp"
android:background="#drawable/custom_button"
android:onClick="add"
android:text="+"
android:textSize="40sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editText" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="75dp"
android:ems="10"
android:hint="Click to add..."
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
I am using constraint layout and i am a beginner ,can anyone help me for creating a single layout that will look same on both horizontal and vertical view,i have created this but this is looking different on view.
Do i need to create separate layout for both?
My code of xml for 5 inch screen:-
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
android:padding="16dp"
tools:context=".MainActivity">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="53dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginTop="85dp"
app:layout_constraintTop_toBottomOf="#+id/button2"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginTop="88dp"
app:layout_constraintTop_toBottomOf="#+id/button3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
app:layout_constraintGuide_begin="1097dp"
android:orientation="horizontal" />
Use code like this
<android.support.constraint.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"
android:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button3"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button4"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="#+id/button3" />
</android.support.constraint.ConstraintLayout>
This should work on both screen orientations.
NOTE
With ConstraintLayout, using the layout editor is far easier than using the text editor.
I am trying to implement similar screen. Unable to add different items at proper place. I want to add shoes at the proper place.
Layout
<?xml version="1.0" encoding="utf-8"?><RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:padding="0dp">
<ImageView
android:id="#+id/imgBody"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="#drawable/dress" />
<ImageView
android:id="#+id/imgFeet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgBody"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp"
android:src="#drawable/ic_shoe1"
android:visibility="gone" />
<ImageView
android:id="#+id/imgFace"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_marginLeft="55dp"
android:layout_marginTop="0dp"
android:src="#drawable/ic_head"
android:visibility="gone" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white"/>
Try to user Table layout for split a screen in two part. like below :
Here i have use android:layout_weight="0.5" for screen size.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#EBEBEB"
android:stretchColumns="2"
android:weightSum="2">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#FFFFFF"
android:orientation="vertical">
<!--Write your xml Right side xml code here-->
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#FFFFFF">
<!--Write your xml Left side xml code here-->
</RelativeLayout>
</TableRow>
</TableLayout>
Use Constraint Layout it will be easy for you to Design your Requirement
Add this dependency in your Project
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Here I have added a code for your design
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/splash" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:minHeight="55dip"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right" />
</android.support.design.widget.TabLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Review"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteX="265dp"
tools:layout_editor_absoluteY="463dp" />
<android.support.v7.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I think instead of layout you should try to use canvas in left preview screen. On selecting any item should update left canvas by adding item in canvas and rendering elements.
Please have a look over canvas and drawing images over canvas.