How to align 2 image view in a row? - android

this is my xml code i want to set two images in row
XML code
<?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"
android:padding="10dp"
android:background="#ffffff"
tools:context=".SplashActivity">
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="left"
android:src="#drawable/ic_2"
android:text="Hello World!"
android:tint="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="-52dp" />
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="right"
android:src="#drawable/ic_karo"
android:text="Hello World!"
android:tint="#0000b3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="123dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
In Android Studio Preview, It's looking perfect as I want. But when I install APK in a device, It's not working
Android Studio Preview:
This is my Device Preview:


You should use a Linera Layout instead Constraint Layout or Linear Leyout within parent Constraint Layout. You can directly use the following code:
<?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"
android:padding="10dp"
android:background="#ffffff"
tools:context=".SplashActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="left"
android:src="#drawable/ic_2"
android:text="Hello World!"
android:tint="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="-52dp" />
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="right"
android:src="#drawable/ic_karo"
android:text="Hello World!"
android:tint="#0000b3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="123dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>


As I mentioned in the comment add layout_gravity as centre in both the ImageView. I have also edited the code as you can not use text in Image View.
<?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"
android:background="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="10dp"
android:orientation="horizontal">
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="center"
android:src="#drawable/ic_2"/>
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="center"
android:src="#drawable/ic_karo"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Hope this will work perfectly for you.


i think you should try with Linear Layout
Like this...
<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="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_gravity="center"
android:background="#ffffff">
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="center"
android:src="#drawable/app_icon"
android:text="Hello World!"
android:tint="#ff0000"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="-52dp" />
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_weight="1"
android:layout_gravity="center"
android:src="#drawable/app_icon"
android:text="Hello World!"
android:tint="#0000b3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="123dp" />
</LinearLayout>


As I can see your question you can use Constraint layout property to set two images in row :-
Start to Start
End to End
Start to End
End to Start
for example :-
<?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="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="#+id/button_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button_share"
app:layout_constraintHorizontal_chainStyle="spread" />
<ImageView
android:id="#+id/button_share"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toEndOf="#+id/button_save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

How to divide screen two equal part vertically in ConstraintLayout in android

<?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"
android:gravity="bottom">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_12"
android:src="#drawable/ic_top_log"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_4"
android:src="#drawable/ic_top_log_p"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
app:layout_constraintStart_toEndOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="#+id/imageView4" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/textView9"
android:layout_width="match_parent"
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/imageView4">
// this part we have to divide in two part
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This my code i want to divide in two part equal part i have tired but it not showing in two part please help me how to divide ConstraintLayout in to two equal part vertically .

<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/textView9"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4">
<LinearLayout
android:id="#+id/linear1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/linear2"
app:layout_constraintTop_toTopOf="parent">
<!--Do Your Stuff -->
</LinearLayout>
<LinearLayout
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/linear1">
<!--Do Your Stuff-->
</LinearLayout>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="#id/linear1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/linear2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Preview
You can replace any view instead of LinearLayout too.

Stop contents from overflowing and auto sizing to text expansion

Sorry for long post, but it isn't long. But only looks long due to images.
I wanted to make layout like below:
So I wrote a layout for it as under
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_height="match_parent"
android:layout_width="70dp"
android:src="#drawable/ic_launcher_background"
android:id="#+id/stock_item_image_small"/>
<!-- Arrow at the end of the fragment item -->
<ImageView
android:layout_width="30dp"
android:layout_height="match_parent"
android:src="#drawable/ic_chevron_right_black_18dp"/>
</LinearLayout>
</FrameLayout>
And this is visible as below
I then added a long string with below code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_height="match_parent"
android:layout_width="70dp"
android:src="#drawable/ic_launcher_background"
android:id="#+id/stock_item_image_small"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="#android:color/black"
android:text="A line to string which is long enough to overflow our of container"/>
<!-- Arrow at the end of the fragment item -->
<ImageView
android:layout_width="30dp"
android:layout_height="match_parent"
android:src="#drawable/ic_chevron_right_black_18dp"/>
</LinearLayout>
</FrameLayout>
And it now looks like below.
As you can see, the arrow at the end, which was visible prior to adding a TextView has now overflown out of the view and is not visible.
I basically want to know how can we add components one after another and they don't flow out of the view
How can I fix this ?
Also, can someone suggest a good material to for Layouts or begining with Android layout design ?
UPDATE:
I incorporated the suggestions of Ichvandi Octa, and wrote below code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:padding="5dp">
<!-- Added to create border around frame -->
<!-- Achieved using corner radius and padding -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
app:contentPadding="1dp"
android:backgroundTint="#android:color/black"
app:cardElevation="20dp">
<androidx.cardview.widget.CardView
android:layout_margin="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/fragment_stock_item_image"
android:layout_width="70dp"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/fragment_stock_item_name"/>
<TextView
android:id="#+id/fragment_stock_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:text="A line to string which is long enough to overflow our of container and it has lot of text"
app:layout_constraintStart_toEndOf="#id/fragment_stock_item_image"
app:layout_constraintTop_toTopOf="#id/fragment_stock_item_image"
app:layout_constraintBottom_toBottomOf="#id/fragment_stock_item_image"
app:layout_constraintEnd_toStartOf="#id/_fragment_stock_frame_line_sep"/>
<androidx.cardview.widget.CardView
android:layout_width="10dp"
android:layout_height="match_parent"
android:id="#+id/_fragment_stock_frame_line_sep"
app:layout_constraintStart_toEndOf="#id/fragment_stock_item_name"
app:layout_constraintTop_toTopOf="#id/fragment_stock_item_name"
app:layout_constraintBottom_toBottomOf="#id/fragment_stock_item_name"
app:layout_constraintEnd_toStartOf="#id/fragment_stock_item_qty">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#android:color/darker_gray"
android:layout_marginLeft="4.5dp"
android:layout_marginRight="4.5dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/fragment_stock_item_qty"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="200"
app:layout_constraintEnd_toStartOf="#id/_fragment_stock_item_arrow"
app:layout_constraintStart_toEndOf="#id/_fragment_stock_frame_line_sep"
app:layout_constraintTop_toTopOf="#id/_fragment_stock_frame_line_sep"
app:layout_constraintBottom_toBottomOf="#id/_fragment_stock_frame_line_sep"/>
<ImageView
android:layout_width="30dp"
android:layout_height="match_parent"
android:id="#+id/_fragment_stock_item_arrow"
android:src="#drawable/ic_chevron_right_black_18dp"
app:layout_constraintStart_toEndOf="#id/fragment_stock_item_qty"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
</FrameLayout>
But now, I this number '200' is taking too much space.

Try this out
<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="80dp"
android:padding="5dp">
<ImageView
android:id="#+id/imageView25"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView66"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView25"
app:layout_constraintEnd_toStartOf="#+id/imageView26"
app:layout_constraintStart_toEndOf="#+id/imageView25"
app:layout_constraintTop_toTopOf="#+id/imageView25"
tools:text="#tools:sample/lorem/random" />
<ImageView
android:id="#+id/imageView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_arrow_right_black" />
</androidx.constraintlayout.widget.ConstraintLayout>
it should be like this
<?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="80dp"
android:padding="5dp">
<ImageView
android:id="#+id/imageView25"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView66"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView25"
app:layout_constraintEnd_toStartOf="#+id/view4"
app:layout_constraintStart_toEndOf="#+id/imageView25"
app:layout_constraintTop_toTopOf="#+id/imageView25"
tools:text="#tools:sample/lorem/random" />
<ImageView
android:id="#+id/imageView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_arrow_right_black" />
<View
android:id="#+id/view4"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView67"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView67"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="2"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintBottom_toBottomOf="#+id/imageView26"
app:layout_constraintEnd_toStartOf="#+id/imageView26"
app:layout_constraintTop_toTopOf="#+id/imageView26" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now, it should be like this

Aligning horizontal recycler view below imageview using constraint layout

I am using below xml code for placing a horizontal RecyclerView below ImageView
But My Recycler is not displaying and ImageView occupies entire space.
In Big size mobile design looks fine. But not able to acheive that for small mobile phones.
Horizontal RecyclerView consists of multiple images..it should be bottom of the screen...On clicking the image, I want to display it above horizontal RecyclerView.
I am using barrier for that issue but that does't solve my question.
Anybody please help me to find the solution.
<?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/constriantLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/top_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/barrier3"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteX="39dp" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="view_current_photo"
app:barrierDirection="bottom" />
</androidx.constraintlayout.widget.ConstraintLayout>

Thank u all for ur answers,
I got a solution,
here it is,
<?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:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toTopOf="#id/image_view_guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
android:contentDescription="#string/view_current_photo" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7"/>
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/top_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintTop_toBottomOf="#id/image_view_guideline"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

I have try to modify your layout hope it help you, do not fix your image size.
<?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/constriantLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#id/top_guideline"/>
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/top_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/top_guideline"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

I am not sure about my answer but this is my code if i understand correctly your problem. RecyclerView scroll horizontall with each item is an image, when i click item, image will display, replace for image above
<?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"
tools:context="vn.prdcv.dlreader.InputPasswordActivity"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#drawable/panasonic"
android:scaleType="fitXY"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="16dp"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/red"
/>
</android.support.constraint.ConstraintLayout>

TextView goes beyound the ConstraintLayout

I would like to get a effect dotted text(ellipsis property) - both textView in this same line, but I have problem with ConstraintLayout.
In first TextView if I have long text, my second textView going to off screen.
I would like to block second textView on the end of layout and dotted 1st textView.
It is possible ?
Screens:
short text
long text
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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="36dp"
android:background="#00D54C4C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlong"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="85dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView2"
tools:layout_editor_absoluteY="85dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Your constraints aren't correct as you don't have an end constraint. The following should resolve that issue:
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="36dp"
android:background="#00D54C4C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlong"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="85dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="85dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
That however still leaves you with some fairly gnarly layout code that isn't too great. There is never a good reason to have nested ConstraintLayouts so I'd recommend refactoring it to be something like this (which will still give you same end result):
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlong"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The above also includes vertical constraints (constraintTop_...) which will ensure the layout displays correctly at runtime and will also resolve the IDE warning you had with the code previously.
And then from there to get the ellipsize effect you just need to add the following attributes to your TextView: android:ellipsize="end" and android:lines="1"
The final XML would look something like this:
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlonglongTextlongTextlongTextlongTextlongTextlong"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
One thing to note: this does remove the margin you had previously. Making use of Guideline you are able to add the margins/padding you wanted by adding a start and end Guideline which has a vertical orientation. The final-final version of the layout would look something like this:
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineStart"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineEnd"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlonglongTextlongTextlongTextlongTextlongTextlong"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintTop_toBottomOf="#id/textView2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Having TextViews On Same Line
If you want to have the TextViews on the same line you can use another Guideline to include where the first should stop and the second should begin. In this example the guideline is set at the halfway point using app:layout_constraintGuide_percent=".5":
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineStart"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineCenter"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent=".5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineEnd"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="longTextlongTextlong"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintEnd_toStartOf="#+id/guidelineCenter"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintStart_toStartOf="#+id/guidelineCenter"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Add the following to your text view you want to ellipsize(...)
android:ellipsize="end"
android:singleLine="true"

How to remain fixed positions of layout after dynamically setting the text?

I'm making an application that gets the categories of foods from a remote database and put them in a recyclerView
but the positions keep changing after setting the text,
I need the "see more" to remain on the right side like this
.
How can I solve this problem?
This is how it looks now
.
That's my 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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/textTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="Heading"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
app:layout_constraintBaseline_toBaselineOf="#+id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView"
app:layout_constraintStart_toStartOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="right">
<TextView
android:id="#+id/textView"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="#string/see_more"
android:textColor="#26979d"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textTest1"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="17dp"
android:layout_height="19dp"
app:srcCompat="#drawable/ic_right_arrow"
tools:layout_editor_absoluteX="335dp"
tools:layout_editor_absoluteY="9dp" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

Thanks to CodeRed answer, I found the answer, hope it will help someone else. It was a wrap-content error
<?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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/textTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="Heading"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
app:layout_constraintBaseline_toBaselineOf="#+id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView"
app:layout_constraintStart_toStartOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/see_more"
android:textColor="#26979d"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textTest1"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="15dp"
android:layout_height="15dp"
app:srcCompat="#drawable/ic_right_arrow"
tools:layout_editor_absoluteX="335dp"
tools:layout_editor_absoluteY="9dp" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

I cannot try this myself but I am sure that your android:layout_width in the second LinearLayout is the suspect. As you can see, the See More > is floating in the right however the width itself is restricting it to go further

Categories

Resources