I'm using my Android phone (Xiaomi A2 Lite, 5.84 inches, 1080 x 2280, which is even bigger than Nexus 5) for app development. I have landscape layouts for every layout I have, and I used ConstraintLayouts for all of the elements inside.
However when testing landscape mode on my phone, the texts and images are not displayed as correctly as in Android Studio :(
Are there any solutions for this? Can I add my own resolutions / devices into the device list?
This is how it should look
This is how it displays
Code of the XML landscape 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ducnguyen.miniexplorer.MainMenu">
<TextView
android:id="#+id/textView11"
android:layout_width="150dp"
android:layout_height="42dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="#string/main_menu_title"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="#string/main_menu_title" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="94dp"
android:layout_height="93dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoReadingScreen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.455"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toBottomOf="#+id/textView11"
app:layout_constraintVertical_bias="0.092"
app:srcCompat="#drawable/forest" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="97dp"
android:layout_height="90dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="48dp"
android:layout_marginBottom="8dp"
android:onClick="gotoExplorerScreen"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.756"
app:srcCompat="#drawable/car" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="96dp"
android:layout_height="76dp"
android:layout_marginStart="68dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="192dp"
android:onClick="gotoSettingScreen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/settings" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="58dp"
android:layout_height="65dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="56dp"
android:layout_marginBottom="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.551"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/phonecall" />
<ImageView
android:id="#+id/imageView12"
android:onClick="LogOut"
android:layout_width="47dp"
android:layout_height="101dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.879"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/logout" />
<TextView
android:id="#+id/textView12"
android:layout_width="152dp"
android:layout_height="27dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoReadingScreen"
android:text="#string/menu_reading"
app:layout_constraintBottom_toTopOf="#+id/imageView10"
app:layout_constraintEnd_toStartOf="#+id/textView13"
app:layout_constraintStart_toEndOf="#+id/textView14"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="184dp"
android:layout_marginEnd="8dp"
android:onClick="gotoExplorerScreen"
android:text="#string/menu_explorer_status"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.891"
app:layout_constraintStart_toEndOf="#+id/textView14"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
android:layout_width="66dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoSettingScreen"
android:text="#string/menu_settings"
android:textSize="15sp"
app:layout_constraintBottom_toTopOf="#+id/imageView11"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.147"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/menu_live_support"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView10"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="23dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoAboutUsScreen"
android:text="#string/menu_about_us"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView15"
app:layout_constraintHorizontal_bias="0.454"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView11"
app:layout_constraintVertical_bias="0.333" />
<TextView
android:id="#+id/textView17"
android:layout_width="69dp"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="gotoLoginScreen"
android:text="#string/logout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.709"
app:layout_constraintStart_toEndOf="#+id/textView15"
app:layout_constraintTop_toBottomOf="#+id/imageView12"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="61dp"
android:layout_height="65dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:onClick="gotoAboutUsScreen"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.155"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:srcCompat="#drawable/question" />
</android.support.constraint.ConstraintLayout>
try this sample layout. It works in Mi A2 device
<?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=".MainActivity"
android:background="#212c3d">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="150dp"
android:layout_height="42dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Main Menu"
android:textSize="30sp"
android:textColor="#FFF"
android:layout_margin="10dp"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.551"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/icon_setting"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Sample Screenshot
Related
Coming from iOS and Xcode I', confused about layout and constraints in android studio. My layout currently looks like this, which is fine for a small sized phone. But on a phone with a large height it leaves a big space at the bottom. I want the layout to follow and match the height of the phone.
My XML looks 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"
xmlns:tools="http://schemas.android.com/tools"
android:theme="#style/NoBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
tools:context="com.sdc_nollvision_relative.myapp.MainActivity">
<ImageView
android:id="#+id/logo"
android:layout_width="80dp"
android:layout_height="70dp"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logo" />
<TextView
android:id="#+id/main_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:text="DEMENSVÅRD"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="#android:color/black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
<TextView
android:id="#+id/subHeader"
android:typeface="monospace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="UTAN TVÅNG"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_header" />
<TextView
android:id="#+id/chapter1Header"
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:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:typeface="serif"
app:layout_constraintBottom_toBottomOf="#+id/chapter1"
app:layout_constraintEnd_toEndOf="#+id/chapter1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder1"
app:layout_constraintTop_toTopOf="#+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/iconHolder1"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon1"
app:civ_border_color="#color/colorPrimary"
app:civ_border_width="0dp"
app:layout_constraintBottom_toBottomOf="#+id/chapter1"
app:layout_constraintStart_toStartOf="#+id/chapter1"
app:layout_constraintTop_toTopOf="#+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/iconHolder2"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon2"
app:civ_border_color="#color/chapter1"
app:civ_border_width="0dp"
app:layout_constraintBottom_toBottomOf="#+id/chapter2"
app:layout_constraintStart_toStartOf="#+id/chapter2"
app:layout_constraintTop_toTopOf="#+id/chapter2" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/iconHolder3"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon3"
app:layout_constraintBottom_toBottomOf="#+id/chapter3"
app:layout_constraintStart_toStartOf="#+id/chapter3"
app:layout_constraintTop_toTopOf="#+id/chapter3" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/iconHolder4"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon4"
app:layout_constraintBottom_toBottomOf="#+id/chapter4"
app:layout_constraintStart_toStartOf="#+id/chapter4"
app:layout_constraintTop_toTopOf="#+id/chapter4" />
<Button
android:id="#+id/chapter1"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/backgroundview"
android:elevation="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subHeader" />
<TextView
android:id="#+id/chapter2Header"
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:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter2"
app:layout_constraintEnd_toEndOf="#+id/chapter2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder2"
app:layout_constraintTop_toTopOf="#+id/chapter2" />
<Button
android:id="#+id/chapter2"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/backgroundview"
android:elevation="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter1" />
<TextView
android:id="#+id/chapter3Header"
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:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter3"
app:layout_constraintEnd_toEndOf="#+id/chapter3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder3"
app:layout_constraintTop_toTopOf="#+id/chapter3" />
<Button
android:id="#+id/chapter3"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/backgroundview"
android:elevation="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter2" />
<TextView
android:id="#+id/chapter4Header"
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:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter4"
app:layout_constraintEnd_toEndOf="#+id/chapter4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder4"
app:layout_constraintTop_toTopOf="#+id/chapter4" />
<Button
android:id="#+id/chapter4"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/backgroundview"
android:elevation="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter3" />
<ImageButton
android:id="#+id/about_button"
android:layout_width="15dp"
android:layout_height="35dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#0000"
android:scaleType="fitXY"
android:src="#drawable/about"
app:layout_constraintEnd_toStartOf="#+id/language_button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/version_button"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
<Button
android:id="#+id/version_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="4dp"
android:background="#color/colorWhite"
android:text="version"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
<Button
android:id="#+id/language_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:layout_marginTop="4dp"
android:background="#color/colorWhite"
android:text="language"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
And yes, I'm aware that I have a fixed size of the buttons. But I have no idea how to make them dynamically follow the height of the phone. Sorry for such a basic question, but I'm still learning the basics here :)
You need to create a vertical chain with its chainStyle as spread or spread_inside to achieve what you want with little bit of margin and padding customizations for your top-most and bottom-most view(s).
XML Code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
tools:context="com.stackoverflow.MainActivity">
<ImageView
android:id="#+id/logo"
android:layout_width="80dp"
android:layout_height="70dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/main_header"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread"
app:srcCompat="#android:drawable/btn_star_big_on" />
<TextView
android:id="#+id/main_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:text="DEMENSVÅRD"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="#android:color/black"
app:layout_constraintBottom_toTopOf="#+id/subHeader"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
<TextView
android:id="#+id/subHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="UTAN TVÅNG"
android:textAlignment="center"
android:typeface="monospace"
app:layout_constraintBottom_toTopOf="#+id/chapter1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_header" />
<TextView
android:id="#+id/chapter1Header"
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:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:typeface="serif"
app:layout_constraintBottom_toBottomOf="#+id/chapter1"
app:layout_constraintEnd_toEndOf="#+id/chapter1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder1"
app:layout_constraintTop_toTopOf="#+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iconHolder1"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon1"
app:civ_border_color="#color/colorPrimary"
app:civ_border_width="0dp"
app:layout_constraintBottom_toBottomOf="#+id/chapter1"
app:layout_constraintStart_toStartOf="#+id/chapter1"
app:layout_constraintTop_toTopOf="#+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iconHolder2"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon2"
app:civ_border_color="#color/chapter1"
app:civ_border_width="0dp"
app:layout_constraintBottom_toBottomOf="#+id/chapter2"
app:layout_constraintStart_toStartOf="#+id/chapter2"
app:layout_constraintTop_toTopOf="#+id/chapter2" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iconHolder3"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon3"
app:layout_constraintBottom_toBottomOf="#+id/chapter3"
app:layout_constraintStart_toStartOf="#+id/chapter3"
app:layout_constraintTop_toTopOf="#+id/chapter3" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iconHolder4"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon4"
app:layout_constraintBottom_toBottomOf="#+id/chapter4"
app:layout_constraintStart_toStartOf="#+id/chapter4"
app:layout_constraintTop_toTopOf="#+id/chapter4" />
<Button
android:id="#+id/chapter1"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#android:drawable/spinner_background"
android:elevation="0dp"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/chapter2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subHeader" />
<TextView
android:id="#+id/chapter2Header"
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:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter2"
app:layout_constraintEnd_toEndOf="#+id/chapter2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder2"
app:layout_constraintTop_toTopOf="#+id/chapter2" />
<Button
android:id="#+id/chapter2"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#android:drawable/spinner_background"
android:elevation="0dp"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/chapter3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter1" />
<TextView
android:id="#+id/chapter3Header"
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:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter3"
app:layout_constraintEnd_toEndOf="#+id/chapter3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder3"
app:layout_constraintTop_toTopOf="#+id/chapter3" />
<Button
android:id="#+id/chapter3"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#android:drawable/spinner_background"
android:elevation="0dp"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/chapter4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter2" />
<TextView
android:id="#+id/chapter4Header"
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:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter4"
app:layout_constraintEnd_toEndOf="#+id/chapter4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder4"
app:layout_constraintTop_toTopOf="#+id/chapter4" />
<Button
android:id="#+id/chapter4"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#android:drawable/spinner_background"
android:elevation="0dp"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/about_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter3" />
<ImageButton
android:id="#+id/about_button"
android:layout_width="15dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#0000"
android:scaleType="fitXY"
android:src="#android:drawable/btn_star_big_on"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/language_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/version_button"
app:layout_constraintTop_toBottomOf="#+id/chapter4"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/version_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="4dp"
android:background="#android:color/white"
android:text="version"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
<Button
android:id="#+id/language_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:layout_marginTop="4dp"
android:background="#android:color/white"
android:text="language"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
</android.support.constraint.ConstraintLayout>
Screenshots (for the above code):
1] For screen size - 5.0 inch (1080 x 1920 pixels) [Device: Nexus 5]
2] For screen size - 7.0 inch (1200 x 1920 pixels) [Device: Nexus 7]
For more information on how to create a chain in ConstraintLayout, its proper usage and various chain styles please go through:
https://developer.android.com/reference/android/support/constraint/ConstraintLayout#Chains
I hope, this helps you.
You have to build a vertical chain of elements.
Check the detailed explanation here: https://medium.com/#nomanr/constraintlayout-chains-4f3b58ea15bb
I have a ScrollView which has a ConstraintLayout. I am trying to load a content, but when the content is too large, I start loosing the footer. This works fine when I have short or medium content, but only happens with very very large content.
This is the problem
This is the structure of my layout
I am doing the inspection with the Layout inspector and this is the result
This is the result of the Layout Inspector
This is the structure of the layout in the Inspector
Any Idea?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/id_scv_article_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible"
tools:context=".ui.activities.contents.ArticleDetailActivity">
<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/id_cnt_article_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<android.support.v7.widget.Toolbar
android:id="#+id/id_article_detail_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:clickable="true"
android:focusable="true"
android:minHeight="?attr/actionBarSize"
android:textAlignment="center"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:titleTextAppearance="#style/TitleBarTextAppearance" />
<ImageView
android:id="#+id/id_img_article_det"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_article_detail_toolbar"
app:srcCompat="#drawable/no_image" />
<TextView
android:id="#+id/id_txt_title_article_det"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/info_not_title_defined"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_img_article_det" />
<TextView
android:id="#+id/id_txt_summary_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/info_not_short_text_defined"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_txt_title_article_det" />
<LinearLayout
android:id="#+id/ln_text_content_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/linear_layout_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_txt_summary_article_det">
<TextView
android:id="#+id/id_txt_text_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:fontFamily="#font/roboto_regular"
android:text="#string/textoooo" />
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/id_cnt_gallery_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ln_text_content_article">
<TextView
android:id="#+id/id_txt_title_gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/title_gallery"
android:textColor="#color/colorSecondary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/id_recycler_view_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_txt_title_gallery" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="2dp"
android:layout_marginEnd="32dp"
android:layout_marginTop="8dp"
android:background="#color/colorLines"
android:backgroundTint="#color/colorLines"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_recycler_view_gallery" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/id_cnt_calendar_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_cnt_gallery_article_det">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/id_calendar_article"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#id/id_calendar_article"
layout="#layout/recycler_view_calendar">
</include>
</android.support.constraint.ConstraintLayout>
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="2dp"
android:layout_marginEnd="32dp"
android:layout_marginTop="8dp"
android:background="#color/colorLines"
android:backgroundTint="#color/colorLines"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_calendar_article" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/id_cnt_resources_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_cnt_calendar_article_det">
<LinearLayout
android:id="#+id/ln_document_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent">
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="2"
app:srcCompat="#drawable/pdf_icon" />
<TextView
android:id="#+id/id_name_pdf_article"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6"
android:ellipsize="end"
android:fontFamily="#font/roboto_regular"
android:maxLines="2"
android:text="#string/info_not_title_defined" />
<ImageView
android:id="#+id/id_img_download_pdf_article"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="2"
app:srcCompat="#drawable/download_icon" />
</LinearLayout>
<View
android:id="#+id/id_ln_document_separator"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#DEDEDE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ln_document_article" />
<LinearLayout
android:id="#+id/ln_link_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/id_ln_document_separator">
<TextView
android:id="#+id/id_txt_link_article"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_weight="5"
android:fontFamily="#font/roboto_medium"
android:maxLines="2"
android:text="#string/info_not_title_defined" />
<TextView
android:id="#+id/id_txt_copy_link_article"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:fontFamily="#font/roboto_regular"
android:text="#string/lbl_copy_link"
android:textAlignment="textEnd"
android:textColor="?android:attr/colorEdgeEffect" />
<TextView
android:id="#+id/id_txt_go_link_article"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:fontFamily="#font/roboto_regular"
android:text="#string/lbl_go"
android:textAlignment="center"
android:textColor="?android:attr/colorEdgeEffect" />
</LinearLayout>
<View
android:id="#+id/id_ln_link_separator"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#DEDEDE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ln_link_article" />
<LinearLayout
android:id="#+id/ln_image_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:weightSum="10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/id_ln_link_separator">
<ImageView
android:id="#+id/id_img_img_article"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="8dp"
android:layout_weight="4"
android:scaleType="centerCrop"
app:srcCompat="#drawable/no_image" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/id_txt_name_img_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_regular"
android:text="#string/info_not_title_defined" />
<TextView
android:id="#+id/id_txt_download_img_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_regular"
android:text="#string/lbl_download"
android:textColor="?android:attr/colorEdgeEffect" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:background="#color/colorLines"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_cnt_resources_article_det" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/lbl_author"
android:textColor="#color/colorSecondary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view1" />
<TextView
android:id="#+id/id_txt_author_article"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="80dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_regular"
android:text="#string/info_not_art_author_defined"
app:layout_constraintStart_toStartOf="#+id/textView13"
app:layout_constraintTop_toBottomOf="#+id/view1" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/lbl_publication_date"
android:textColor="#color/colorSecondary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
<TextView
android:id="#+id/id_txt_publication_date_article"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_regular"
android:text="#string/info_not_art_defined"
app:layout_constraintStart_toStartOf="#+id/id_txt_author_article"
app:layout_constraintTop_toBottomOf="#+id/id_txt_author_article" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/lbl_last_modification_date"
android:textColor="#color/colorSecondary"
app:layout_constraintStart_toEndOf="#+id/id_txt_publication_date_article"
app:layout_constraintTop_toBottomOf="#+id/id_txt_author_article" />
<TextView
android:id="#+id/id_txt_last_update_date_article"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="#font/roboto_regular"
android:text="#string/info_not_art_defined"
app:layout_constraintStart_toEndOf="#+id/textView16"
app:layout_constraintTop_toTopOf="#+id/textView16" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginTop="32dp"
android:background="#android:color/white"
android:backgroundTint="#android:color/white"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
</android.support.constraint.ConstraintLayout>
As I could not find the real problem, I decided to rewrite the layout again. I removed some of the elements that were not necessary like the intern ConstraintsLayouts and I wrapped the content in a layout, instead a scrollview like #E.Abdel suggested.
Thank you!
I'm trying to make a layout divided into two parts in which the lower part should be scrollable.But the scrollview wont scroll completely till the end.
I have tried using NestedScrollView.I have also already tried adding margins and padding to scrollview, constraint layout, last view in the scroll view.Button at the end is not reachable. view abruptly ends in the middle of the textview above that button.
<?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"
tools:context=".mainClusterActivity"
android:id="#+id/const1"
android:layout_height="match_parent"
android:layout_width="match_parent">
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Seen" />
<android.support.v7.widget.AppCompatCheckBox
android:clickable="false"
android:id="#+id/searchedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv1" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/searchedCheckBoxId"
android:text="Learnt" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/learnedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv2" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/learnedCheckBoxId"
android:text="Mark" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/markedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv3" />
</RelativeLayout>
<TextView
android:id="#+id/wordTvId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:text="WORD!"
android:textSize="80sp"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<TextView
android:id="#+id/tempBarTv"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/black"
app:layout_constraintTop_toBottomOf="#+id/wordTvId"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tempBarTv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/meaningTempId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="Meaning"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<ListView
android:id="#+id/meaningLvId"
android:layout_width="350dp"
android:layout_height="200dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/meaningTempId" />
<TextView
android:id="#+id/temp2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Synonyms"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="#+id/meaningLvId"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.069"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/SynonymsLvId"
android:layout_width="350dp"
android:layout_height="250dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:text="Meaning"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/temp2" />
<TextView
android:id="#+id/temp1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Synonyms with Seached Words"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="#+id/SynonymsLvId"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.069"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/SynonymsWithSearchedLvId"
android:layout_width="350dp"
android:layout_height="200dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:text="Meaning"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/temp1" />
<TextView
android:id="#+id/notesTempTvId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:text="Notes"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/SynonymsWithSearchedLvId" />
<TextView
android:id="#+id/notesTvId"
android:layout_width="350dp"
android:layout_height="150dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:background="#drawable/round_rect_shape"
android:text="Notes"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="23sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/notesTempTvId" />
<Button
android:id="#+id/addNotesId"
android:layout_width="350dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:background="#drawable/red_rounded_rect"
android:text="EDIT NOTES!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/notesTvId"
/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
EDIT: I changed the parent constraint layout to relative layout and it works perfectly fine now. Still no idea why it didn't before. Thanks for the response.
<!--I have commented where you have to change and why. do all mention changes. it will work fine-->
<?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:id="#+id/const1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Seen" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/searchedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv1"
android:clickable="false" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/searchedCheckBoxId"
android:text="Learnt" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/learnedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv2" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/learnedCheckBoxId"
android:text="Mark" />
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/markedCheckBoxId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv3" />
</RelativeLayout>
<TextView
android:id="#+id/wordTvId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
android:text="WORD!"
android:textSize="80sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout2" />
<TextView
android:id="#+id/tempBarTv"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/wordTvId" />
<!-- Add app:layout_constraintBottom_toBottomOf="parent"
And also set width and Height to 0dp so scrollView will take rest screen height.-->
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tempBarTv">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/meaningTempId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="12dp"
android:text="Meaning"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<ListView
android:id="#+id/meaningLvId"
android:layout_width="350dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/meaningTempId" />
<!--This textView is having wrong id if you have not defined into resource. There is + sign is missing or define id into resource-->
<TextView
android:id="#+id/temp2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Synonyms"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.069"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/meaningLvId" />
<ListView
android:id="#+id/SynonymsLvId"
android:layout_width="350dp"
android:layout_height="250dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:text="Meaning"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/temp2" />
<TextView
android:id="#+id/temp1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Synonyms with Seached Words"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.069"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/SynonymsLvId" />
<ListView
android:id="#+id/SynonymsWithSearchedLvId"
android:layout_width="350dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:background="#drawable/round_rect_shape"
android:scrollbars="vertical"
android:text="Meaning"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/temp1" />
<TextView
android:id="#+id/notesTempTvId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Notes"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/SynonymsWithSearchedLvId" />
<TextView
android:id="#+id/notesTvId"
android:layout_width="350dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:background="#drawable/round_rect_shape"
android:text="Notes"
android:textAlignment="center"
android:textColor="#android:color/background_light"
android:textSize="23sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/notesTempTvId" />
<Button
android:id="#+id/addNotesId"
android:layout_width="350dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="8dp"
android:background="#drawable/red_rounded_rect"
android:text="EDIT NOTES!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/notesTvId" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
Hi I want to build UI as below
I want to center imageview above textview at the same time there is another view next to imagview dash line I am not able to do this.
Currently I am using RelativeLayout. Any idea how this can be done?
Following is XML
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/ivnumberfill"
android:layout_width="16dp"
android:layout_height="16dp"
app:srcCompat="#drawable/ic_otp_fill" />
<ImageView
android:id="#+id/ivfirstdiv"
android:layout_width="76dp"
android:layout_height="2dp"
android:layout_alignBottom="#id/ivnumberfill"
android:layout_alignTop="#+id/ivnumberfill"
android:layout_toRightOf="#id/ivnumberfill"
android:src="#drawable/stroke_divider" />
<ImageView
android:id="#+id/ivotp"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_toRightOf="#+id/ivfirstdiv"
app:srcCompat="#drawable/otp_process_circle" />
<ImageView
android:id="#+id/ivseconddiv"
android:layout_width="76dp"
android:layout_height="2dp"
android:layout_alignBottom="#id/ivotp"
android:layout_alignTop="#+id/ivotp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/ivotp"
android:background="#drawable/stroke_divider" />
<ImageView
android:id="#+id/ivprofile"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_toRightOf="#+id/ivseconddiv"
app:srcCompat="#drawable/otp_process_circle" />
<TextView
android:id="#+id/tvnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ivnumberfill"
android:alig="#id/ivnumberfill"
android:text="Mobile Number"
android:textColor="?colorAccent"
android:textSize="11sp" />
</RelativeLayout>
I would recommend using ConstraintLayout, you should really learn it and use it instead of Relative Layout, it's more flexible and less computation consuming. Here is my layout, is it also more flexible - you can just move guideline and everything moves with it.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="24dp">
<ImageView
android:id="#+id/ivnumberfill"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="18dp"
android:layout_marginTop="4dp"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/ivotp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline2"
app:srcCompat="#drawable/plane" />
<ImageView
android:id="#+id/ivotp"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="18dp"
android:layout_marginTop="4dp"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/ivprofile"
app:layout_constraintStart_toEndOf="#id/ivnumberfill"
app:layout_constraintTop_toTopOf="#id/guideline2"
app:srcCompat="#drawable/plane" />
<ImageView
android:id="#+id/ivprofile"
android:layout_width="16dp"
android:layout_height="16dp"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/ivotp"
app:layout_constraintTop_toTopOf="#id/guideline2"
app:srcCompat="#drawable/plane" />
<ImageView
android:id="#+id/ivfirstdiv"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="wrap"
android:src="#drawable/line"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintTop_toTopOf="#id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/ivotp"
app:layout_constraintStart_toEndOf="#+id/ivnumberfill"
/>
<ImageView
android:id="#+id/ivseconddiv"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="wrap"
android:src="#drawable/line"
app:layout_constraintBottom_toBottomOf="#id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/ivprofile"
app:layout_constraintStart_toEndOf="#id/ivotp"
app:layout_constraintTop_toTopOf="#id/guideline2" />
<TextView
android:id="#+id/tvnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Mobile Number"
android:textColor="?colorAccent"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="#id/ivnumberfill"
app:layout_constraintStart_toStartOf="#id/ivnumberfill"
app:layout_constraintTop_toBottomOf="#id/ivnumberfill" />
<TextView
android:id="#+id/tvotp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="OTP"
android:textColor="?colorAccent"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="#id/ivotp"
app:layout_constraintStart_toStartOf="#id/ivotp"
app:layout_constraintTop_toBottomOf="#id/ivotp" />
<TextView
android:id="#+id/tvprofile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Profile"
android:textColor="?colorAccent"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="#id/ivprofile"
app:layout_constraintStart_toStartOf="#id/ivprofile"
app:layout_constraintTop_toBottomOf="#id/ivprofile" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
</android.support.constraint.ConstraintLayout>
Well, you can use Constraint layout for this just simple drag and drop and it will give you your desired layout.
sample code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#color/thirdColor">
<View
android:layout_width="272dp"
android:layout_height="2dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/firstColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.333" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.123"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.22"
app:srcCompat="#color/secondColor" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.897"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.22"
app:srcCompat="#color/secondColor" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.533"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.22"
app:srcCompat="#color/secondColor" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Sample Code"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.535"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.741" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Sample Code"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.971"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.729" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Sample Code"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.063"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.729" />
</android.support.constraint.ConstraintLayout>
sample output, change icons and background accordingly.
I am having issues in my application where there is unnecessary spacing and padding in my layout. For some reason there as a big gap of space in between each views. Is there another solution to remove or to avoid unnecessary spacing and padding around my layout?
Thanks for your help!
Layout code
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true" >
<android.support.constraint.ConstraintLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorTeal"
android:ellipsize="none"
android:gravity="start"
android:padding="#dimen/title_padding"
android:textColor="#color/colorWhite"
android:textSize="35sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.571"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/vote_average"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/overview_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/release_date"
app:layout_constraintVertical_bias="0.19999999" />
<TextView
android:id="#+id/release_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="64dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.09"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/title_text" />
<ImageView
android:id="#+id/image_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.02"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title_text" />
<TextView
android:id="#+id/overview_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="12dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.415"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_thumbnail"
app:layout_constraintVertical_bias="0.366" />
<ImageView
android:id="#+id/playbutton"
android:layout_width="39dp"
android:layout_height="44dp"
android:layout_marginBottom="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/trailer_title"
app:layout_constraintHorizontal_bias="0.326"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#android:drawable/ic_media_play" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/overview_text"
app:layout_constraintVertical_bias="0.305" />
<TextView
android:id="#+id/trailer_title"
android:layout_width="93dp"
android:layout_height="21dp"
android:layout_marginBottom="64dp"
android:layout_marginEnd="144dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toEndOf="#+id/imageView2" />
<TextView
android:id="#+id/TrailersName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Trailers"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.055"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
1st layout screenshot
2nd layout screenshot
The space and padding you are seeing are not because of ScrollView, it's because of Viewgroup, try to use LinearLayout with vertical orienation, it should work just fine
Try this,
I had re-write your code and achieve the result as you want.
Please check the following code.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="false">
<RelativeLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#009587"
android:ellipsize="none"
android:gravity="start"
android:padding="20dp"
android:text="Jumaji: Welcome to the Jungle"
android:textColor="#ffffff"
android:textSize="35sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/title_text"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp">
<ImageView
android:id="#+id/ivMoviePoster"
android:layout_width="120dp"
android:layout_height="180dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/release_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="64dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_toEndOf="#id/ivMoviePoster"
android:text="2017-12-08"
android:textSize="24sp" />
<TextView
android:id="#+id/vote_average"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/release_date"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#id/ivMoviePoster"
android:text="6.4"
android:textSize="18sp" />
<TextView
android:id="#+id/overview_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivMoviePoster"
android:layout_marginBottom="8dp"
android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
android:textSize="18sp" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/overview_text"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp" />
<TextView
android:id="#+id/trailer_title"
android:layout_width="93dp"
android:layout_height="21dp"
android:layout_below="#id/view"
android:layout_marginBottom="64dp"
android:layout_marginEnd="144dp"
android:layout_marginStart="8dp"
android:text="Trailer title" />
<ImageView
android:id="#+id/playbutton"
android:layout_width="39dp"
android:layout_height="44dp"
android:layout_below="#id/trailer_title"
android:layout_marginBottom="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:contentDescription="#null"
app:srcCompat="#android:drawable/ic_media_play" />
<TextView
android:id="#+id/TrailersName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/trailer_title"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#id/playbutton"
android:text="Trailers"
android:textSize="24sp" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
Result,
Hope it would be help you.