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>
Related
I just started app development trying to make an e-commerce app since using fragments is a better way rather than activities I made a home page inside which I want to show first the action bar then top-selling (top-4 selling products) and after that all the products.
this is some i want to achieve
image
I am using guideline to constraint view pager to limited section but since its a fragment its not scrollable so i have to set it to scrollable but the second I set it to scroll view the size of screen increase and the view pager gets distorted.
code of my home fragment without scroll view
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".home.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/home_actionbar"
layout="#layout/actionbar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/top_selling_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15sp"
android:layout_marginTop="15sp"
android:text="#string/top_selling_heading"
android:textSize="14sp"
app:fontFamily="#font/roboto_bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/home_actionbar" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.45"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/top_seller_vp"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="5sp"
android:layout_margin="15sp"
android:clipToPadding="false"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading"
app:layout_constraintBottom_toTopOf="#id/guideline2"
app:layout_constrainedHeight="true" />
<TextView
android:id="#+id/product_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:layout_constraintStart_toStartOf="#id/top_selling_heading"
app:layout_constraintEnd_toEndOf="#id/top_selling_heading"
android:text="#string/all_products_heading"
android:textSize="20sp"
android:fontFamily="#font/roboto_bold"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/productRV"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#id/product_heading"
android:layout_margin="10sp"
tools:listitem="#layout/product_item"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
is there any other way to achieve this. please help fast..
try using LinearLayout inside scrollView(Copy and paste)
<FrameLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/home_actionbar"
layout="#layout/actionbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/top_selling_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15sp"
android:layout_marginTop="15sp"
android:text="#string/top_selling_heading"
android:textSize="14sp"
app:fontFamily="#font/roboto_bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/home_actionbar" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.45"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/top_seller_vp"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="15sp"
android:clipToPadding="false"
android:padding="5sp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<TextView
android:id="#+id/product_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_bold"
android:text="#string/all_products_heading"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="#id/top_selling_heading"
app:layout_constraintStart_toStartOf="#id/top_selling_heading"
app:layout_constraintTop_toBottomOf="#id/guideline2" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/productRV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10sp"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/product_heading"
tools:listitem="#layout/product_item" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</FrameLayout>
and
As you can see, the images don't seem to be aligning with each other very well. It seems to happen when the text for "Hobby" grows longer than the ones next to it. I still can't seem to fix this though. Here's the xml for the horizontal view:
<FrameLayout
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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
/>
</FrameLayout>
and here's the xml for my adapter:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
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="wrap_content"
android:layout_margin="4dp"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/dog_img"
android:layout_width="match_parent"
android:layout_height="194dp"
android:scaleType="centerCrop"
android:importantForAccessibility="no"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textAppearance="#style/TextAppearance.MaterialComponents.Headline6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/dog_img"
/>
<TextView
android:id="#+id/age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/name"
/>
<TextView
android:id="#+id/hobby"
android:layout_width="156dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/name"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
I really want the images to line up with each other regardless of the length of the "Hobby". Sorry if this might seem a bit basic, but I'm new to Android Studio. Anyways, thanks in advance!
I'll suggest you set the scale type to centre inside and another tag adjustViewBounds like the following code.
android:adjustViewBounds="true" and android:scaleType="centerInside"
<ImageView
android:id="#+id/dog_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:importantForAccessibility="no"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
<?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.
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>
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"