How to create videocall Layout like whatsapp for android native layout? - android

I wish to make a very nice videocall design like whatsapp,where on clicking video call floating action button ,it just appear video and on ending call it just disappear. something like below image . Since i am not good in android native layout design, i would highly appreciate for a design help.


You can do it with a ConstraintLayout. Almost like this:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/download"
android:scaleType="centerCrop"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#drawable/download"
android:scaleType="centerCrop"
app:layout_constraintWidth_percent="0.3"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="60dp"
android:layout_marginTop="60dp"
/>
<android.support.design.widget.FloatingActionButton
android:layout_width="70dp"
android:layout_height="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginBottom="50dp"
android:layout_marginStart="50dp"
android:src="#android:drawable/stat_sys_speakerphone"
android:backgroundTint="#color/bright_blue"
/>
<android.support.design.widget.FloatingActionButton
android:layout_width="70dp"
android:layout_height="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="50dp"
android:layout_marginEnd="50dp"
android:src="#android:drawable/stat_notify_more"
android:backgroundTint="#color/bright_blue"
/>
<ImageButton
android:id="#+id/hangoutButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintWidth_percent="0.3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="50dp"
android:src="#android:drawable/sym_call_incoming"
android:backgroundTint="#ff0000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="04:20"
android:textSize="18sp"
android:textColor="#ffffff"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/hangoutButton"
android:background="#60000000"
android:paddingStart="20dp"
android:paddingEnd="20dp"
/>
</android.support.constraint.ConstraintLayout>
Output as follows:

Related

Android image not showing in custom dialog

I've made a custom dialog in androidstudio (Java) but from a certain activity (google maps) the images are not showing, while when calling from another activity (basic activity), the images are showing. i haven't gotten a clue what the difference is between the two.
But when run and called from the app, it looks like this.
While the same dialog started from another activity is showing ok.
What could be the issue here?
This is the XML for that layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="1000dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/dlg_sa_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/dlg_bckgrnd_action" />
<TextView
android:id="#+id/dlg_sa_tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Starting new Action"
android:textColor="#color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/dlg_sa_btnOk"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:background="#drawable/button_dialog"
android:text="Ok"
android:textSize="34sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/dlg_sa_btnCancel"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginBottom="32dp"
android:background="#drawable/button_dialog"
android:text="Cancel"
android:textSize="34sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/dlg_sa_tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="Dialog Content"
android:textSize="34sp"
app:layout_constraintBottom_toTopOf="#+id/dlg_sa_btnCancel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dlg_sa_tvTitle" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/dlg_sa_background"
app:layout_constraintTop_toBottomOf="#+id/dlg_sa_tvTitle"
app:srcCompat="#drawable/purpleline" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

How to ensure views are well constraint even when they grow in context without pushing other views out of the layout

I am trying to achieve the below in my xml but currently when I my textView does not wrap the text as exepcted but instead pushes the the text down and the imageButton far. I am wondering how can I achieve this having in mind the texts can be bigger and need to wrap and fit in nicely without pushing the button away? below is my code sample
<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">
<ImageView
android:id="#+id/hospitalButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
app:image="#drawable/hospital_btn"
app:layout_constraintEnd_toStartOf="#+id/guidelineCenterButton"
app:layout_constraintHorizontal_bias="0.5"
app:startsChecked="true" />
<View
android:id="#+id/buttonDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="32dp"
android:layout_marginTop="42dp"
android:background="#color/white_"
app:layout_constraintBottom_toTopOf="#+id/hospitalGroup"
app:layout_constraintTop_toBottomOf="#id/hospitalButton" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/hospitalGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#id/buttonDivider">
<TextView
android:id="#+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/id_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/midTextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Get ID" />
<TextView
android:id="#+id/midTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/mid_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/submitButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageButton
android:id="#+id/submitButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="32dp"
android:background="#drawable/submitbackground"
android:src="#drawable/submit_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/animation"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="16dp"
android:elevation="3dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="#+id/submitButton"
app:layout_constraintEnd_toEndOf="#+id/submitButton"
app:layout_constraintStart_toStartOf="#+id/submitButton"
app:layout_constraintTop_toTopOf="#+id/submitButton"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/spinner" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/submitGroupDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/hospitalGroup" />
</androidx.constraintlayout.widget.ConstraintLayout>

From your description it's not clear what you wanted to do but here is the solution you can apply to make your view as a picture you uploaded.
Just apply height & width of midTextView to 0dp
Note: don't know what your idTextView will do it's not clear as per your layout structure.
<TextView
android:id="#+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/id_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Get ID" />
<TextView
android:id="#+id/midTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center_vertical"
android:layout_marginEnd="30dp"
android:text="#string/mid_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/submitButton"
app:layout_constraintStart_toEndOf="#id/idTextView"
app:layout_constraintTop_toTopOf="parent"
/>

why preview window showing different screen and real device different?

I am developing a new app and preview showing the different UI in android studio and real device showing different UI is different how can show screen in a real device the same as in the preview.
as you can see from the real device skip text is missing
below my XML file.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
xmlns:attrs="http://schemas.android.com/apk/res-auto"
>
<ImageView
android:id="#+id/vector_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:background="#drawable/vectors_1"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<ImageView
android:id="#+id/some_id"
android:layout_width="221dp"
android:layout_height="158dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/doctor_appointment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.442"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.233" />
<TextView
android:id="#+id/search_doct"
android:layout_width="272dp"
android:layout_height="82dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="54dp"
android:layout_alignParentTop="true"
android:layout_marginTop="292dp"
android:gravity="top"
android:text="#string/search_doct"
android:textAppearance="#style/search_doct"
app:layout_constraintBottom_toBottomOf="#id/some_id"
app:layout_constraintHorizontal_bias="0.697"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/vector_1"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/get_list_of"
android:layout_width="217dp"
android:layout_height="58dp"
app:layout_constraintTop_toBottomOf="#id/search_doct"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal|top"
android:text="#string/get_list_of"
android:textAppearance="#style/get_list_of"
/>
<com.rd.PageIndicatorView
android:id="#+id/pageIndicatorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.477"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.801"
app:piv_animationType="scale"
app:piv_dynamicCount="true"
app:piv_interactiveAnimation="true"
app:piv_selectedColor="#color/gray_50"
app:piv_unselectedColor="#color/gray_300"
app:piv_viewPager="#id/viewPager"
attrs:piv_padding="12dp"
attrs:piv_radius="8dp" />
<TextView
android:id="#+id/skip"
android:layout_width="87dp"
android:layout_height="43dp"
android:layout_marginTop="636dp"
android:gravity="center_horizontal|top"
android:text="Skip"
android:textAppearance="#style/skip"
app:layout_constraintHorizontal_bias="0.537"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
below preview windows in android studio
I want to know where exactly I am making mistakes any help will be greatly appreciated.

Your mistake was to use fixed size on your views and on your margins, because different phones got different screen size, you may find your preview layout looking god while on a real device it will look totally different.
You can fix this by using constraint Layout percentage 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">
<ImageView
android:id="#+id/vector_1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:background="#drawable/profile_icon"
app:layout_constraintBottom_toTopOf="#+id/some_id"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/some_id"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/tasks_icon"
app:layout_constraintBottom_toTopOf="#+id/search_doct"
app:layout_constraintEnd_toEndOf="#+id/vector_1"
app:layout_constraintStart_toStartOf="#+id/vector_1"
app:layout_constraintTop_toBottomOf="#+id/vector_1" />
<TextView
android:id="#+id/search_doct"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="top"
android:text="search_doct"
app:layout_constraintBottom_toTopOf="#+id/get_list_of"
app:layout_constraintEnd_toEndOf="#+id/vector_1"
app:layout_constraintStart_toStartOf="#+id/vector_1"
app:layout_constraintTop_toBottomOf="#+id/some_id" />
<TextView
android:id="#+id/get_list_of"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintWidth_percent="0.5"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal|top"
android:text="get_list_of"
app:layout_constraintBottom_toTopOf="#+id/pageIndicatorView"
app:layout_constraintEnd_toEndOf="#+id/vector_1"
app:layout_constraintStart_toStartOf="#+id/vector_1"
app:layout_constraintTop_toBottomOf="#+id/search_doct" />
<Button
android:id="#+id/pageIndicatorView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintDimensionRatio="1:1"
android:layout_centerInParent="true"
app:layout_constraintBottom_toTopOf="#+id/skip"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/get_list_of" />
<TextView
android:id="#+id/skip"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintWidth_percent="0.5"
android:gravity="center_horizontal|top"
android:text="Skip"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/vector_1"
app:layout_constraintStart_toStartOf="#+id/vector_1"
app:layout_constraintTop_toBottomOf="#+id/pageIndicatorView" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this:

Constraintlayout(in RelativeLayout) layout_alignParentBottom cuts from bottom(in default mode of app)

I have added ConstraintLayout in RelativeLayout and I want that at the bottom of my RelativeLayout.So, it's proper when the app opens in full-screen mode but in default mode constraint layout cuts from the bottom.
I have checked this thing in the different scenario like if I put it on top it comes proper even in the default mode but when I align it to bottom it gets cut.
<RelativeLayout 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="org.cocos2dx.cpp.AppActivity"
android:id="#+id/cameraView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:paddingBottom="0dp"
android:layout_alignParentBottom="true"
android:background="#color/control_background">
<ImageButton
android:id="#+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:background="#android:color/transparent"
android:src="#drawable/close"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageCaptureBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:scaleX="1.20"
android:scaleY="1.20"
android:src="#drawable/capture"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
<ImageButton
android:id="#+id/reverseCameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#android:color/transparent"
android:src="#drawable/reverse_cam"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.508" />
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
So, here in ConstraintLayout when I keep
android:layout_alignParentTop="true"
It doesn't get cut from top like in the image
but when I give it to android:layout_alignParentBottom="true" it gets cut only in default mode of the app and I want this constraintLayout at bottom of the RelativeLayout

You can also use Constraint layout as Rootview like below.
<?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:id="#+id/cameraView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/colorPrimary">
<ImageButton
android:id="#+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageCaptureBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:scaleX="1.20"
android:scaleY="1.20"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageButton
android:id="#+id/reverseCameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to center imageView in third row using Constraint Layout

2x2 plus 1 un-centered tile
I have 5 square tiles all of which need to be the same size but flexible so it can grow and shrink to fit different display sizes. There is text beneath each tile. I want the last row to be centered horizontally and wish to do this using only xml if possible. I also have a toolbar and a navigation bar. Here is my xml file:
<?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:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" android:background="#drawable/sunrise" tools:layout_editor_absoluteY="25dp">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/toolBarColor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/refresh2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Now - The Technology"
android:textColor="#color/appTitleColor"
android:textSize="18sp"
android:layout_gravity="center"
android:id="#+id/toolbar_title"/>
</android.support.v7.widget.Toolbar>
<ImageView
android:id="#+id/ivPlay"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/play"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintEnd_toStartOf="#+id/ivReminder"
android:layout_marginEnd="16dp"
/>
<TextView android:id="#+id/tvPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivPlay"
app:layout_constraintEnd_toEndOf="#+id/ivPlay"
app:layout_constraintTop_toBottomOf="#+id/ivPlay"
android:layout_marginBottom="2dp"
android:text="#string/play_10_minutes"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivReminder"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/reminder"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintStart_toEndOf="#+id/ivPlay"
android:layout_marginStart="16dp"
/>
<TextView android:id="#+id/tvReminder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivReminder"
app:layout_constraintEnd_toEndOf="#+id/ivReminder"
app:layout_constraintTop_toBottomOf="#+id/ivReminder"
android:layout_marginBottom="2dp"
android:text="#string/now_reminder"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivGuide"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/guide"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/tvPlay"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="#+id/ivPlay"
app:layout_constraintEnd_toEndOf="#+id/ivPlay"
app:layout_constraintHorizontal_bias="1.0"/>
<TextView android:id="#+id/tvGuide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
app:layout_constraintTop_toBottomOf="#+id/ivGuide"
android:layout_marginBottom="2dp"
android:text="#string/guide"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivUpgrade"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/upgrade"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toTopOf="#+id/ivGuide"
app:layout_constraintStart_toStartOf="#+id/ivReminder"
app:layout_constraintEnd_toEndOf="#+id/ivReminder"
/>
<TextView android:id="#+id/tvUpgrade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivUpgrade"
app:layout_constraintEnd_toEndOf="#+id/ivUpgrade"
app:layout_constraintTop_toBottomOf="#+id/ivUpgrade"
android:layout_marginTop="2dp"
android:text="#string/upgrade"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivLearn"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/learn"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/tvGuide"
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
app:layout_constraintBottom_toTopOf="#+id/tvLearn"
android:layout_marginTop="16dp"
android:foregroundGravity="center_horizontal"
app:layout_constraintHorizontal_bias="0.5"/>
<TextView android:id="#+id/tvLearn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivLearn"
app:layout_constraintEnd_toEndOf="#+id/ivLearn"
app:layout_constraintTop_toBottomOf="#+id/ivLearn"
app:layout_constraintBottom_toTopOf="#+id/navigation"
android:text="#string/learn"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
android:layout_marginTop="2dp"
android:layout_marginBottom="16dp"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#D3D3D3"
app:menu="#menu/navigation" app:itemTextColor="#color/navAccent" style="#style/AppTheme"
android:visibility="visible" app:itemIconTint="#color/navAccent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp"/>
</android.support.constraint.ConstraintLayout>
Thanks in advance.

Try change attributes of android:id="#+id/ivLearn"
from
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
to
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.
Thanks.

Categories

Resources