I'm trying to create the following layout. I've read that constraint layout is what I should to make my layout responsive. I've tried containing my constraint layout inside a linear layout hoping that the alignment would be fixed but to no avail. (not sure if what I'm doing is right)
Any help is much appreciated.
Here's how it looks in android studio:
Here's my xml code:
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_rightwashed"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/menu_btn"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="#drawable/burger_btn" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/calendar_btn"
android:layout_width="190dp"
android:layout_height="190dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/transparent"
android:layoutDirection="inherit"
android:src="#drawable/calendartrain"
android:visibility="visible"
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"
app:layout_constraintVertical_bias="0.48000002" />
<ImageView
android:id="#+id/skillstree_btn"
android:layout_width="190dp"
android:layout_height="190dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layoutDirection="inherit"
android:src="#drawable/skillstreetrain"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.58000004" />
<ImageView
android:id="#+id/completed_btn"
android:layout_width="190dp"
android:layout_height="190dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layoutDirection="inherit"
android:src="#drawable/completedtrain"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.22"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.24000001" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/leftDrawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light" />
<include
layout="#layout/drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Your layout is dependent upon the dimensions of whatever device you are emulating in the designer. When the screen size or dimensions change, you are getting a mismatch in how you puzzle pieces are lining up.
If you want to stay with the three separate then I suggest that you modify your images to fit together along the horizontal and vertical axes such that the rounded corners of the pieces fit into the corner of an enclosing ConstraintLayout. Once that is done, you can rotate the ConstraintLayout to show your tilted puzzle.
Here is an image of a quick mock-up. I have used squares instead of puzzle pieces since I don't have your images. The concept is the same though.
Here is the XML:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:rotation="45"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_blue_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_red_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_orange_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Related
I'm currently writing an android app with Android Studio. In order to fit most screen sizes I decided to use LinearLayouts inside ConstraintLayout.
I have the following code for 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/colorBackground"
tools:context=".Kadr1Activity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/contentDescrKadr1"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/lol" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/backBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginStart="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_back" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/nextBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_next" />
</LinearLayout>
</LinearLayout>
It looks like this:
I want ImageButtons height depend on the height of the ImageView. I tried using RelativeLayout, however, I cannot get how to implement dependencies not on whole screen size, but only on ImageView size.
So, how can I adjust height of my horizontal LinearLayout (with buttons) to be 4 times smaller (for example) than ImageView height?
Would be grateful for any possible advice.
Thanks to #Marcin Orlowski, I got it:
should set ImageView height to "0dp", horizontal LinearLayout height to "0dp", then set ImageView weight to "4" and LinearLayout weight to "1".
It works properly:
<?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/colorBackground"
tools:context=".Kadr1Activity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:adjustViewBounds="true"
android:contentDescription="#string/contentDescrKadr1"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/lol" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1">
<ImageButton
android:id="#+id/backBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginStart="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_back" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/nextBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_next" />
</LinearLayout>
</LinearLayout>
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>
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.
I would like to have the same as on the enclosed image with the scanning information widgets (progressbar, textview and button) to stay at the bottom of the screen. However when I run my app they go at the top of the screen when the ListView is empty.
I tried a lot of methods described in other topics, but I still could not make it work.
Do you have some suggestions about which layout I should use in this case?
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="60dp"
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" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ListViewDevices">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="#string/scan_in_progress"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/pause_scan"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
</android.support.constraint.ConstraintLayout>
This is the way I did it an app I worked on previously. Using a RelativeLayout as the main shell we are able to position elements in any way inside it.
<?xml version="1.0" encoding="utf-8"?>
<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"
android:layout_weight="10"
android:background="#color/white"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="#color/grey_font">
<ProgressBar
android:id="#+id/progressBarDevice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="12dp" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_centerVertical="true"
android:layout_marginLeft="24dp"
android:layout_toRightOf="#id/progressBarDevice"
android:text="Scanning" />
<Button
android:layout_marginRight="16dp"
android:layout_centerVertical="true"
android:background="#color/orange_pay"
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:text="PAUSE" />
</RelativeLayout>
</RelativeLayout>
I would first simplify the layout by flattening it slightly. Removed the FrameLayout that holds the bottom Constraint.. Then made the listViewDevices constrain bottom to top of the bottom contraint layout (which i have called scanner)..
Looks correct in my layout editor.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toTopOf="#id/scanner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/scanner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/ListViewDevices"
app:layout_constraintBottom_toBottomOf="parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="SCANNING FOR NEW DEVICES..."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="PAUSE"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
I would rather prefer to add LinearLayout as root layout.
So when you scroll down or up then it will not scroll with your layout when its empty.
So when your listview is empty then also it will be in the bottom of the screen only.
<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical" >
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
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" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ListViewDevices">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="#string/scan_in_progress"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/pause_scan"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
Thank you for your answers but none of them works. Sometimes it looks fine in Android Studio but when I test my application on a real phone the widgets are displayed on top of the screen.
If I will find a working solution I will post it here.
I want to make a timeline like this
I tried to make it and its working for match_parent contents but for less there is no bottom line here is the picture
and this is my XML code I use ConstraintLayout and I used match_constraint for bottom and top lines
<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:id="#+id/card1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/red"
app:cardBackgroundColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/circleImageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:padding="15dp"
android:id="#+id/tv"
android:text="125125125"
/>
</android.support.v7.widget.CardView>
<View
android:layout_width="0.6dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#797979"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/circleImageView"
app:layout_constraintStart_toStartOf="#+id/circleImageView"
app:layout_constraintTop_toBottomOf="#+id/circleImageView" />
<ImageView
android:id="#+id/circleImageView"
android:layout_width="6dp"
android:layout_height="6dp"
android:layout_marginEnd="4dp"
android:background="#drawable/circle_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.01"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.06999999" />
<View
android:layout_width="0.6dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#797979"
app:layout_constraintBottom_toTopOf="#+id/circleImageView"
app:layout_constraintEnd_toEndOf="#+id/circleImageView"
app:layout_constraintStart_toStartOf="#+id/circleImageView"
app:layout_constraintTop_toTopOf="parent" />
can anyone please help me to fix this problem? I want to draw a bottom line even without match_parent content