I am currently programming an Android app and using Kotlin and Android 7, but when I run the app on my phone the picture is a bit different than when I design it in UI Designer. I have chosen the same resolution for both and I am stumped because I have had little contact with the frontend so far. Hopefully someone can help me, thanks already!
XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
tools:context=".MainActivity">
<ImageView
android:layout_width="194.3dp"
android:layout_height="144.3dp"
android:layout_marginStart="83dp"
android:layout_marginTop="583.7dp"
android:layout_marginEnd="82.7dp"
android:layout_marginBottom="52dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/gui_base"
tools:ignore="MissingConstraints"
android:contentDescription="GUI" />
<ImageView
android:layout_width="47dp"
android:layout_height="53.3dp"
android:layout_marginStart="161.3dp"
android:layout_marginTop="648dp"
android:layout_marginEnd="151.7dp"
android:layout_marginBottom="78.7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/homebutton"
tools:ignore="MissingConstraints"
android:contentDescription="HomeButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio
||| My Device
Try something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageBackground"
android:layout_width="194.3dp"
android:layout_height="144.3dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_background"
/>
<ImageView
android:id="#+id/imageFront"
android:layout_width="47dp"
android:layout_height="53.3dp"
app:layout_constraintBottom_toBottomOf="#id/imageBackground"
app:layout_constraintEnd_toEndOf="#id/imageBackground"
app:layout_constraintStart_toStartOf="#id/imageBackground"
app:layout_constraintTop_toTopOf="#id/imageBackground"
app:srcCompat="#drawable/ic_launcher_foreground"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Now You can paste this to another container. And the Result:
It will always center the button. If You want the center image (play button) to be a little lower You can add bias app:layout_constraintVertical_bias="0.75". Now the center image will be at 1/4 hight from the bottom.
But I think You should newer hardcode margins to place somewhere on the screen. E.g. You have added android:layout_marginTop="583.7dp" this will only work on one screen resolution and on every other it will look bad. If You want it to be on the bottom just set the bottom constraint to the bottom of the parent and add a 16dp margin.
Related
I have a custom toolbar in which I set the title and other things programatically. The thing is, even though the title has the setting gravity="center", whenever the navigationIcon appears, it is moved a little bit to the side (like in the picture).
I understand that since the icon is not in the xml it must be moving it but is there a way to make the textView stay in the center no matter the icons? Or is there a way to add an ImageView or Button to the xml and then set the navigationIcon to that button so that the icon is contemplated in the code?
This is my xml, I added the buttons but I don't know a way to set the icons programatically.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintly"
android:layout_width="match_parent"
android:layout_height="41dp"
android:gravity="center"
android:layout_gravity="center">
<Button
android:id="#+id/navigationIcon"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="center"
android:layout_marginStart="12dp"
android:layout_alignParentLeft="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/NavBar.Title"
android:singleLine="true"
android:ellipsize="end"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginEnd="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Title"/>
<TextView
android:id="#+id/subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginEnd="12dp"
style="#style/NavBar.SubTitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/centeredTitleTextView"
tools:text="Subtitle"/>
<Button
android:id="#+id/closeIcon"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="center"
android:layout_marginEnd="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
This is the part where the navigationIcon is set but setNavigationIcon cannot take the view.
public void setNavigationIconArrow() {
super.setNavigationIcon(R.drawable.ic_ui_24dp);
}
public void setNavigationIconClose() {
super.setNavigationIcon(R.drawable.ic_24dp);
}
Thank you.
Because of the icon size, your layout starts after that. So you can't use gravity=center. Also, You can't set static left margin or right margin, Because, Android has so much different screen sizes. So you have to do this programmatically.
1- You have to find the phone's screen width size.
2- Convert that size px to dp.
3- Now you can set the left margin to your layout. Which you want in gravity=center.
I hope, I did help you what you want:)
I can't find this component in the material design documentation and I'd like to know how to do it.
I've never seen it as a pre-built component, maybe someone can correct me if I'm wrong.
But replicating it would be fairly simple.
2 Buttons and a ConstraintLayout
<androidx.constraintlayout.widget.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="wrap_content">
<Button
app:layout_constraintHorizontal_weight="6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/sign_in_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:text="Sign In" />
<Button
app:layout_constraintHorizontal_weight="4"
app:layout_constraintLeft_toLeftOf="#+id/sign_in_button"
app:layout_constraintTop_toTopOf="#+id/sign_in_button"
app:layout_constraintBottom_toBottomOf="#+id/sign_in_button"
android:id="#+id/register_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Register" />
</androidx.constraintlayout.widget.ConstraintLayout >
You will have to tweak it for your use case but this should be like 90% of what you need. You may also have to create a custom button to get that more rounded shape. This is an older tutorial on how to customize buttons it should still be relevant. https://www.codebrainer.com/blog/13-designs-for-buttons-every-android-beginner-should-know
I'm doing a small project on Android Studio, and I've put a picture as a dark blue background.
I inserted white text on top of this dark blue figure, but the white color in the letters still doesn't show.
The Graphical Interface. See that I put the color white, but it still doesn't show up.
Please, check out:
Please, can anyone help to
[1]: https://i.stack.imgur.com/iTtiS.png
Source-code in the XML:
[2]: https://i.stack.imgur.com/u6AIU.png
Please, what to do to the white text appear on the top of the image in Android Studio?
Whole XML 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"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="410dp"
android:layout_height="250dp"
android:color="#color/white"
android:foreground="#drawable/home_bg"
android:textSize="30dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Encontre o seu próximo destino!"
android:textColor="#android:color/white"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.32"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.233" />
<TextView
android:id="#+id/textView2"
android:layout_width="176dp"
android:layout_height="41dp"
android:layout_marginBottom="64dp"
android:text="Procurar Destinos"
android:textColor="#FFFFFF"
android:textColorHighlight="#color/white"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.324"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.742" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Ok I think the problem is that you've set the foreground of the constraint layout instead of the background.
Try this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="410dp"
android:layout_height="250dp"
android:color="#color/white"
android:background="#drawable/home_bg"
android:textSize="30dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
I installed my app on a device for the first time. It worked great on the emulator but it now has this white padding on the edges which affects the locations of the transparent buttons (See screenshot). I am wondering if there is a way to force the whole image to take up the full screen and remove the white on the sides. Please let me know your best solutions.
Thanks.
<?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"
tools:context=".firstroom">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can use android:scaleType="centerCrop" or android:scaleType="fitXY" in your ImageView.
I woulld also recommend you to go through this link: https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide
You can use the "scaleType" attribute in the tag to ImageView
android:scaleType="centerCrop"
or
android:scaleType="fitXY"
There are some other other types also . Shown in image below
You have to use the attribute android:scaleType.
If you want to keep the aspect ratio unchanged, then you have to use android:scaleType="centerCrop", this will center your image to the imageview and scale it keeping the aspect ratio. So it might crop either some portions of width or height if required.
<ImageView
android:scaleType="centerCrop"
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
If you do not want to keep the aspect ratio, then you have to use android:scaleType="fitXY", this will scale both height and width to fill your image to the imageview. As a result your image might be stretched horizontally or vertically.
<ImageView
android:scaleType="fitXY"
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
For more info, see official doc.
I am starting to develop apps for android devices using Android Studio. While I was testing my app for screen size compatibilty I noticed that the imageviews do not auto-resize.
The imageview placement looks completely different in different screen sizes. If the screen is small enough, the imageview will sometimes be placed outside of the viewscope.
I have looked all over the internet but I am a little confused on how to make the app compatible with most screen sizes (not including tablets). I went to the android website and they said to use wrap_content. but if I use this, I wont be able to adjust the height and width of the imageview to how I want it.
Does anyone know how to make imageview auto-resize accordingly to the screen size?
Here are images of what is happening:
This is the layout of the app:
This is how I want it to look like (Pixel 3):
But this is how it looks like in a smaller screen(Nexus 5):
In Xcode there is a feature called auto-resize that automatically resizes the content for you. Does android studio have something similar to that?
This is the xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/resetButton"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginBottom="56dp"
android:background="#F70000"
android:text="Undo"
android:textColor="#000000"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="288dp"
android:layout_height="248dp"
android:background="#1750DF"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.685" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thank you in advance!
the imageviews do not auto-resize
Because you are using a fixed size value on your imageView you are having this problem:
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 240dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
How to fix
You can use those attributes to make your image responsive in size:
app:layout_constraintHeight_percent="0.25"
app:layout_constraintWidth_percent="0.25"
You will need to give your image 0dp size both in android:layout_width and android:layout_height
What I did was to tell the view to be equal to 25% both in width and height according to the screen size, this will make you view responsive to all screen size and thus it will "auto-resize"
Update
Following the answer by #tamir-abutbul , it is a nice workaround to use layout_constraintHeight_percent and layout_constraintWidth_percent to make view fit according to screen size.
I have placed the top items in a Grid Layout, you can apply this to any of your top layout which you are using, the main thing to consider is the layout_constraintHeight/Width_percent here.
Also, for the image , I have set the background transparent and changed scaleType to "fitCenter" so that the image keeps its aspect ratio on any screen. hope this helps. You can change android to androidx.
<?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=".MainActivity"
>
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:background="#faf"
android:columnCount="5"
android:rowCount="4"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintTop_toTopOf="parent">
</GridLayout>
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:background="#00000000"
android:scaleType="fitCenter"
android:src="#drawable/lamborghini"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.30"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/gridLayout"
app:layout_constraintVertical_bias="0.265"
app:layout_constraintWidth_percent="0.7" />
<Button
android:id="#+id/resetButton"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:background="#F70000"
android:text="Undo"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintVertical_bias="0.395" />
</android.support.constraint.ConstraintLayout>
your imageview like that because your define width and height large in other view, so maybe you can try this library for same size in other screen
https://github.com/intuit/sdp