In my code my app runs fine, but I am running into issues when I am using a different screen size. The buttons line up correctly but the images do not scale at all.
This is my XML file
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="SpeakableTextPresentCheck">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFC107"
android:padding="40dp"
tools:context=".ActivitiesActivity">
<!-- ImageView Declarations -->
<ImageView
android:id="@+id/alabama_music_hall_of_fame"
android:layout_width="match_parent"
android:layout_height="150dp"
android:contentDescription="@string/alabama_music_hall_of_fame_logo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="@id/the_boiler_room"
app:srcCompat="@drawable/activity_alabama_music_hall_of_fame_card" />
<Button
android:id="@+id/alabama_music_hall_of_fame_FacebookButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/alabama_music_hall_of_fame"
app:layout_constraintStart_toStartOf="@id/alabama_music_hall_of_fame"
app:layout_constraintEnd_toStartOf="@id/alabama_music_hall_of_fame_InstagramButton"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<Button
android:id="@+id/alabama_music_hall_of_fame_InstagramButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/alabama_music_hall_of_fame"
app:layout_constraintStart_toEndOf="@id/alabama_music_hall_of_fame_FacebookButton"
app:layout_constraintEnd_toStartOf="@id/alabama_music_hall_of_fame_WebsiteButton" />
<Button
android:id="@+id/alabama_music_hall_of_fame_WebsiteButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/alabama_music_hall_of_fame"
app:layout_constraintStart_toEndOf="@id/alabama_music_hall_of_fame_InstagramButton"
app:layout_constraintEnd_toStartOf="@id/alabama_music_hall_of_fame_DirectionsButton" />
<Button
android:id="@+id/alabama_music_hall_of_fame_DirectionsButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/alabama_music_hall_of_fame"
app:layout_constraintStart_toEndOf="@id/alabama_music_hall_of_fame_WebsiteButton"
app:layout_constraintEnd_toEndOf="@id/alabama_music_hall_of_fame" />
<!-- The Boiler Room ImageView -->
<ImageView
android:id="@+id/the_boiler_room"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:contentDescription="@string/the_boiler_room_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/alabama_music_hall_of_fame"
app:srcCompat="@drawable/activity_the_boiler_room" />
<!-- Buttons under The Boiler Room ImageView -->
<Button
android:id="@+id/the_boiler_room_FacebookButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/the_boiler_room"
app:layout_constraintEnd_toStartOf="@id/the_boiler_room_InstagramButton"
app:layout_constraintStart_toStartOf="@id/the_boiler_room"
app:layout_constraintHorizontal_chainStyle="spread" />
<Button
android:id="@+id/the_boiler_room_InstagramButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/the_boiler_room"
app:layout_constraintEnd_toStartOf="@id/the_boiler_room_WebsiteButton"
app:layout_constraintStart_toEndOf="@id/the_boiler_room_FacebookButton" />
<Button
android:id="@+id/the_boiler_room_WebsiteButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/the_boiler_room"
app:layout_constraintEnd_toStartOf="@id/the_boiler_room_DirectionsButton"
app:layout_constraintStart_toEndOf="@id/the_boiler_room_InstagramButton" />
<Button
android:id="@+id/the_boiler_room_DirectionsButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/the_boiler_room"
app:layout_constraintEnd_toEndOf="@id/the_boiler_room"
app:layout_constraintStart_toEndOf="@id/the_boiler_room_WebsiteButton" />
<!-- The Escape Room ImageView -->
<ImageView
android:id="@+id/the_escape_room"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:contentDescription="@string/the_escape_room_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/the_boiler_room"
app:srcCompat="@drawable/activity_the_escape_room" />
<!-- Buttons under The Escape Room ImageView -->
<Button
android:id="@+id/the_escape_room_FacebookButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/the_escape_room"
app:layout_constraintEnd_toStartOf="@id/the_escape_room_InstagramButton"
app:layout_constraintStart_toStartOf="@id/the_escape_room"
app:layout_constraintHorizontal_chainStyle="spread" />
<Button
android:id="@+id/the_escape_room_InstagramButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/the_escape_room"
app:layout_constraintEnd_toStartOf="@id/the_escape_room_WebsiteButton"
app:layout_constraintStart_toEndOf="@id/the_escape_room_FacebookButton" />
<Button
android:id="@+id/the_escape_room_WebsiteButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/the_escape_room"
app:layout_constraintEnd_toStartOf="@id/the_escape_room_DirectionsButton"
app:layout_constraintStart_toEndOf="@id/the_escape_room_InstagramButton" />
<Button
android:id="@+id/the_escape_room_DirectionsButton"
android:layout_width="0dp"
android:layout_height="33dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="@id/the_escape_room"
app:layout_constraintEnd_toEndOf="@id/the_escape_room"
app:layout_constraintStart_toEndOf="@id/the_escape_room_WebsiteButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I have tried to set different constraints in the image view, I have tired
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_height="150dp"
Just about any different configuration I have tried, I feel like I am missing something basic.
I have figured it out, I used CardView inside of the ScrollView, which kept the images the same no matter the screen size. I also used a LinerLayout for my buttons so they would stay at the bottom of the image!
`<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:ignore="SpeakableTextPresentCheck">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFC107"
android:padding="40dp"
tools:context=".ActivitiesActivity">
<androidx.cardview.widget.CardView
android:id="@+id/alabama_music_hall_of_fame_card"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:cardCornerRadius="0dp"
app:cardElevation="4dp">
<ImageView
android:id="@+id/alabama_music_hall_of_fame"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@drawable/activity_alabama_music_hall_of_fame_card"
android:scaleType="fitXY"
android:contentDescription="@string/alabama_music_hall_of_fame_logo"/>
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:gravity="center_horizontal">
<Button
android:id="@+id/alabama_music_hall_of_fame_FacebookButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/amhfFB"
android:background="@android:color/transparent"
tools:ignore="VisualLintButtonSize" />
<Button
android:id="@+id/alabama_music_hall_of_fame_InstagramButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/amhfIG"
android:background="@android:color/transparent"
tools:ignore="VisualLintButtonSize" />
<Button
android:id="@+id/alabama_music_hall_of_fame_WebsiteButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/amhfWeb"
android:background="@android:color/transparent" />
<Button
android:id="@+id/alabama_music_hall_of_fame_DirectionsButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/amhfDir"
android:background="@android:color/transparent"
tools:ignore="VisualLintButtonSize" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/the_boiler_room_card"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/alabama_music_hall_of_fame_card"
app:cardCornerRadius="0dp"
app:cardElevation="4dp">
<ImageView
android:id="@+id/the_boiler_room"
android:layout_width="match_parent"
android:layout_height="150dp"
android:contentDescription="@string/the_boiler_room_logo"
android:src="@drawable/activity_the_boiler_room"
android:scaleType="fitXY"/>
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:gravity="center_horizontal">
<Button
android:id="@+id/the_boiler_room_FacebookButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/tbrFB"
android:background="@android:color/transparent" />
<Button
android:id="@+id/the_boiler_room_InstagramButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/tbrIG"
android:background="@android:color/transparent" />
<Button
android:id="@+id/the_boiler_room_WebsiteButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/tbrWeb"
android:background="@android:color/transparent" />
<Button
android:id="@+id/the_boiler_room_DirectionsButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/tbrDir"
android:background="@android:color/transparent"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/the_escape_room_card"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/the_boiler_room_card"
app:cardCornerRadius="0dp"
app:cardElevation="4dp">
<ImageView
android:id="@+id/activity_the_escape_room"
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="@string/the_escape_room_logo"
android:src="@drawable/activity_the_escape_room"
android:scaleType="fitXY"/>
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:gravity="center_horizontal">
<Button
android:id="@+id/the_escape_room_FacebookButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/terFB"
android:background="@android:color/transparent"
tools:ignore="VisualLintButtonSize" />
<Button
android:id="@+id/the_escape_room_InstagramButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/terIG"
android:background="@android:color/transparent" />
<Button
android:id="@+id/the_escape_room_WebsiteButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/terWeb"
android:background="@android:color/transparent" />
<Button
android:id="@+id/the_escape_room_DirectionsButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/terDir"
android:background="@android:color/transparent"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>`