I have this guitar fret-board image that I would like to place dots over but android studio's designer won't let me scroll around it to place them. This is a big image so the whole thing can't be displayed at once and needs to be scrolled around both in the designer and programmatically scrolls with java (the latter of which I have already working).
Here is my simple xml code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res /android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rotation="90"
android:scaleType="centerCrop"
android:src="#drawable/fretboard"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is the image that is used in case anyone wants to try to replicate. I'm on Android Studio 4.0.1 and the emulator is running Android 9.0 Wear OS.
As you can see, it's flipped 90 degrees in the xml, which makes it a bit tougher. I had to center crop it because it wouldn't let me increase it's size with the height and width parameters without it going off the screen. The image scrolls fine with a java OnTouchListener albeit, kind of sloppily. Any Help is deeply appreciated with this.
Solved it by encapsulating the ImageView inside of a FrameView and putting them all in a HorizontalScrollView. You have to have the FrameView or else you can't put other elements over top of the fretboard.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="199dp"
android:layout_height="213dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#c1c1c1"
android:src="#drawable/fretboard" />
</FrameLayout>
</HorizontalScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I'm working on an app where I have 4 image buttons, but for some reason the images I use get very zoomed in / cropped, as can be seen below. Any suggestions?
I've tried resizing the image files themselves, but no matter whether they're 2k or 100x100, there's very little visual difference.
Here's the XML layout code for one of the buttons:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginEnd="520dp"
android:onClick="Click1"
android:src="#drawable/placeholder1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="SpeakableTextPresentCheck"
tools:srcCompat="#drawable/placeholder1" />
In your ImageButton tag set attribute to
android:scaleType="centerInside"
or
android:scaleType="fitXY"
i looking to align to the top of screen a simple image with ConstraintLayout. I just tried:
<ImageView
android:id="#+id/imagecookie"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/before_cookie"
app:layout_constraintTop_toBottomOf="parent" />
The pict is positionning in the middle of screen.
Any help?
Thanks
You're setting the top of your ImageView to the bottom of the parent (ConstraintLayout), you need to set it to the top
EDIT Sample with the whole layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Result
Thank for you time and help but it still not positioned at the top of screen.
i put my picture at the top of the screen (and middle horizontal) with:
<ImageView
android:id="#+id/imagecookie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/suzuki"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
I have a scrolled content, so I put a constraint layout inside a scrollview, I have a problem when put an image inside a constraint layout, but the image show a space from top such as in screenshot below, how can I remove that space?
<?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.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- have whatever children you want inside -->
<ImageView
app:srcCompat="#drawable/main_header"
android:id="#+id/img_icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffccbb"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="1"
android:contentDescription="TODO" app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintVertical_bias="0.0"/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
In your Imageview you have added app:layout_constraintDimensionRatio="1:1" that means it will take space 1:1, so width and height also will be 1:1. But your image app:srcCompat="#drawable/main_header" is not 1:1. So you have to add an image which has width and height of the same size. Otherwise, you can add android:scaleType="fitXY" or android:scaleType="centerCrop" according to your expectation.
Try this, remove app:layout_constraintTop_toTopOf="parent" in your ImageView it works!
I just checked your code on my phone and it looks good.
One thing that I made different from you is that I have used a different image resource for the imageView.
So I think that you don't actually have a problem, I think that it's just the image and how it looks, try to change your image resource and see if this problem remains.
He is how my layout file looks like:
<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">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/main_header"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
How can I take a center of an image and put in on a corner of another image?
you can use ConstraintLayout to get this behavior, for example :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageViewCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/drawable1" />
<ImageView
android:id="#+id/imageViewToPosition"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/imageViewCenter"
app:layout_constraintStart_toEndOf="#id/imageViewCenter"
app:layout_constraintEnd_toEndOf="#id/imageViewCenter"
app:layout_constraintTop_toTopOf="#id/imageViewCenter"
app:srcCompat="#drawable/drawable2" />
</android.support.constraint.ConstraintLayout>
if you have issues with constraint layouts, consider trying the codelab
I'm new to Android and I've got problems designing a layout in Android Studio. I've found many related questions but none of them worked. Values of constraints are always hardcoded in dp by Android Studio according to the current preview size (Pixel, Nexus 7...).
Code I write in the XML editor (that works just fine on my phone):
<?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">
<com.meanstreet.note.Slider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.meanstreet.note.MainActivity">
<RelativeLayout
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/bold"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="#string/bold_button" />
...
Code changed after I went to the Design tab (that doesn't fit to my phone screen):
<?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">
<com.meanstreet.note.Slider
android:id="#+id/slider"
android:layout_width="344dp"
android:layout_height="495dp"
tools:context="com.meanstreet.note.MainActivity"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
<RelativeLayout
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/bold"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="#string/bold_button" />
...
The Slider is a custom view that extends RelativeLayout.
The hardcoded values in Slider depend on the selected phone for the preview in Android Studio, and the view is now out of my phone (if the selected phone was bigger) or with big margins on right and bottom (if the selected phone was smaller).
This seems very weird to me: I can still avoid going to the Design tab, that way the code won't be changed and will work on any device, but that's annoying.
Why is Android Studio behaving like that ? How can I have the width and height to stay at "match_parent", and so have the right size on any phone ?
Thanks in advance for help.
match_parent is not supported for elements inside ConstraintLayout. Instead you can do;
Set the Slider's width to 0dp.
Add constraints to left and right with these attributes.
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
This way you can stretch that view horizontally. You can do the same thing vertically with same logic.
<?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">
<com.meanstreet.note.Slider
android:id="#+id/slider"
android:layout_width="0dp"
android:layout_height="495dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:context="com.meanstreet.note.MainActivity"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
<RelativeLayout
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/bold"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="#string/bold_button" />