I am building an app in Android Studio and have a problem and I do not know why it happens and how to solve it. This is my 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"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="144dp"
android:gravity="center"
android:shadowColor="#000000"
android:text="#string/title"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button"
android:layout_width="342dp"
android:layout_height="0dp"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="260dp"
android:layout_marginEnd="160dp"
android:layout_marginRight="160dp"
android:background="#eadca6"
android:text="#string/all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button2"
android:layout_width="342dp"
android:layout_height="0dp"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="160dp"
android:layout_marginRight="160dp"
android:layout_marginBottom="50dp"
android:background="#eadca6"
android:text="#string/favorite_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>
However, if you run the code like this, the title will be cut off in half. But the 2 buttons will have a normal size. If I use wrap_content on the textview, the TextView will be displayed normally but the buttons height will also only be as big as the text inside (like inherit the wrap content), even if I don't write wrap_content in the buttons field. The LayoutEditor tells me everything is fine, but when I run the app, those design "errors" happen.
I added some modification in your code and added a screenshot for this code
<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="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="144dp"
android:shadowColor="#000000"
android:text="title"
android:textAlignment="center"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button"
android:layout_width="342dp"
android:layout_height="wrap_content"
android:layout_marginTop="260dp"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:background="#eadca6"
android:text="all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_marginTop="23dp"
android:layout_marginBottom="50dp"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:background="#eadca6"
android:text="favqussdi"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
as you can see i change the following:
android:layout_height change value into wrap_content;
android:layout_width change value into match_parent;
added android:paddingTop="10dp" and android:paddingBottom="10dp" in buttons;
modify layout_marginLeft and layout_marginRight;
remove some redundant codes and also avoid adding static number as possible. Hope i help you in small way ^^
You want to know what is wrong with your code so I will start with some explanation before writing code:
TL;DR:
Don't use fixed size on your views, you can use app:layout_constraintHeight_percent="0.xx" with
app:layout_constraintWidth_percent="0.yy" and Guidelines.
Full answer
Different phones got different screen size, in your layout, you are using fixed size on your views (fixed size is android:layout_marginTop="144dp" 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), and this is why you are getting design "errors".
You cant guarantee full layout responsability when using wrap_content as well, for example, if you will take a very large image and put it on your views it wont look the same on different devices.
If you already using constraintLayout here are some tools that can help you achieve a responsive layout that will fit in size to all screen sizes.
For example, look at this 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="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:shadowColor="#000000"
android:text="title"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintWidth_percent="0.9"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#eadca6"
android:text="all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#eadca6"
android:text="favorite_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
</androidx.constraintlayout.widget.ConstraintLayout>
This layout will look like this:
What I did in this layout:
I got rid of every single fixed size on my views and gave them fixed size like, something like this on the view:
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintWidth_percent="0.9"
This view will be equal to 15% of the screen height and 90% of its width in size, it will be responsive for different layouts.
I managed the position of the views by using Guidelines, for example:
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
This guideline will be placed at the top 20% of the screen.
Something extra - you can use ssp /
sdp if you want to scale the size of your views (In your case I would use ssp library to scale your text size on your views).
Try this code in your xml. This way buttons and text will look normal.
<?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="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#000000"
android:text="#string/title"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="342dp"
android:layout_height="120dp"
android:background="#eadca6"
android:text="#string/all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/group" />
<Button
android:id="#+id/button2"
android:layout_width="342dp"
android:layout_height="120dp"
android:layout_marginTop="20dp"
android:background="#eadca6"
android:text="#string/favorite_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#id/group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<androidx.constraintlayout.widget.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="button,button2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I have a problem with the design layout in Android Studio, when designing the layout there, the layout looks acceptable and everything okay, but as soon as I run it forms a very nasty white area between the Status Bar and the Toolbar (although I do not use the Toolbar), and the theme which is applied (Theme.MaterialComponents.Light.NoActionBar), does not imply the presence of ActionBar. In any case, I must admit that my skills and experience in Android development is not enough to solve this problem, I would be glad for any help, thanks in advance.
I attach the code of the 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=".activities.WelcomeActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/btnLogin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/background_intro" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/white_line" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/btnLogin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:layout_constraintVertical_bias="0.285"
app:srcCompat="#drawable/women" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:fontFamily="#font/ptsansbold"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="Welcome text"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="41sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="26dp"
android:fontFamily="#font/ptsansregular"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Lorem Ipsum Text"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnLogin"
style="#android:style/Widget.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:background="#drawable/background_btn"
android:text="Auth"
android:textAlignment="center"
android:textColor="#39632F"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnRegister"
style="#android:style/Widget.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="32dp"
android:background="#drawable/background_btn"
android:text="Register"
android:textAlignment="center"
android:textColor="#39632F"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnLogin" />
</androidx.constraintlayout.widget.ConstraintLayout>
I tried to use android:fitsSystemWindows="true" but it had no effect, unfortunately I could not find any other cases with this problem, I also tried to activate Fullscreen mode.
But this also had no effect, which is needed.
As soon as I add a ProgressBar to my project, Android Studio will show me the following error in layout editor (see picture):
In addition, it tells me to disable experimental Layout Rendering Engine. If I do so, it will throw a Render Error instead (see second picture):
Even though the error is thrown, the ProgressBar itself works fine.
Can I just ignore the error or is there a workaround/fix for it?
Also, my Fragment looks like this:
<?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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.Page1">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1_page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2_page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3_page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.18" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4_page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<TextView
android:id="#+id/textView_page1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/rounded_corners"
app:layout_constraintBottom_toTopOf="#+id/guideline1_page1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_chooseVersion"
android:layout_width="170dp"
android:layout_height="30dp"
android:text="#string/chooseVersion_text"
android:textColor="#color/white"
android:textSize="23sp"
app:layout_constraintBottom_toTopOf="#+id/guideline3_page1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="parent" />
<Spinner
android:id="#+id/spinner1_page1"
android:layout_width="145dp"
android:layout_height="30dp"
android:background="#drawable/spinner_bg"
app:layout_constraintBottom_toTopOf="#+id/guideline3_page1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView_chooseType"
android:layout_width="170dp"
android:layout_height="30dp"
android:text="#string/chooseType_text"
android:textColor="#color/white"
android:textSize="23sp"
app:layout_constraintBottom_toTopOf="#+id/guideline2_page1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="parent" />
<Spinner
android:id="#+id/spinner2_page1"
android:layout_width="145dp"
android:layout_height="30dp"
android:background="#drawable/spinner_bg"
app:layout_constraintBottom_toTopOf="#+id/guideline2_page1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button_AFH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="#string/afh_download"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/textView_page1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.098"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button_gdrive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="#string/gdrive_download"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/textView_page1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.911"
app:layout_constraintStart_toStartOf="parent" />
<ProgressBar
android:id="#+id/progressBar1_page1"
style="#android:style/Widget.Material.ProgressBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/guideline4_page1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
That errors are about editMode aka. preview in IDE. Yes it is safe to ignore them. But if you want to fix it probably adding some tools properties might help. In this case I guess tools:max might help.
Also if it was a custom view written by yourself (which is not, just saying) you could check it with isInEditMode inside your view.
I have a layout file in my Android application:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:background="#color/player_background"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".Fragments.PlayerFragment">
<ProgressBar
android:id="#+id/progress_bar_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:theme="#style/ProgressBarStyle"
android:visibility="invisible" />
<TextView
android:id="#+id/title_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Title"
android:textColor="#color/white"
android:textSize="24dp" />
<ImageView
android:id="#+id/view_imageview"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_marginTop="10dp"
android:background="#color/white" />
<TextView
android:id="#+id/status_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="20dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/play_pause_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/play_btn" />
<ImageButton
android:id="#+id/sleep_timer_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/sleep_btn" />
<ImageButton
android:id="#+id/share_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/share_btn" />
<TextView
android:id="#+id/sleep_timer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sleep_timer_btn"
android:layout_alignLeft="#+id/sleep_timer_btn"
android:layout_alignRight="#+id/sleep_timer_btn"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="15dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="#style/Volume_Seekbar"
android:paddingStart="30dp"
android:paddingEnd="30dp"/>
</LinearLayout>
It's working perfectly in most of the devices but in a small screen device I can't see the SeekBar because it's out from the screen. Any idea how I can fix it?
You are using very large fixed sizes on your views, and because different phones got different screen sizes what seems to work on some device will actually not work on another
For example - in a smaller device with height of 300dp with views summing up to total of 400dp you will not have enough room for some views because of the small screen size and that's why you are not seeing your view.
You can use ConstraintLayout to make your screen responsive, or if you want to keep your current layout structure you can use the following libraries for scaling size of dp:
ssp and sdp to get a scalable size unit for your views and texts.
Another option is to wrap your layout with ScrollView, giving your screen the option to be scrollable and by that you will be able to "see" all of your views on your screen - note that this may not be intuitive to your user.
It is because the fixed sizes you are using to build your layout is getting summed up eventually being too big for small screen size. You can try the following to fix this:
Create a layout specially for small screen size by using smallest width qualifier
Make your layout scrollable
Use constraint layout
Using the ssp and sdp size units
NOTE that you will have to specify the smallest width qualifier to your current layout in such a way that the smallest width qualifer excludes the small screen devices and include the devices in which your layout fits properly.
I would suggest you to use constraint layout, but if you still want to go ahead with your current view then it will be good practice if you add scrollview to your parent layout, so that your layout won't get cropped on smaller devices:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/player_background"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".Fragments.PlayerFragment">
<ProgressBar
android:id="#+id/progress_bar_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:theme="#style/ProgressBarStyle"
android:visibility="invisible" />
<TextView
android:id="#+id/title_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Title"
android:textColor="#color/white"
android:textSize="24dp" />
<ImageView
android:id="#+id/view_imageview"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_marginTop="10dp"
android:background="#color/white" />
<TextView
android:id="#+id/status_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="20dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/play_pause_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/play_btn" />
<ImageButton
android:id="#+id/sleep_timer_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/sleep_btn" />
<ImageButton
android:id="#+id/share_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/share_btn" />
<TextView
android:id="#+id/sleep_timer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sleep_timer_btn"
android:layout_alignLeft="#+id/sleep_timer_btn"
android:layout_alignRight="#+id/sleep_timer_btn"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="15dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingStart="30dp"
android:paddingEnd="30dp"
android:theme="#style/Volume_Seekbar" />
</LinearLayout>
</ScrollView>
How can i get rid of these spaces that i marked with red ?
I tried to set padding to zero and nothing changes
<Button
android:id="#+id/req_delete_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:text="Delete"
app:layout_constraintBottom_toBottomOf="#+id/req_pp"
app:layout_constraintEnd_toStartOf="#+id/req_accept_btn"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#+id/req_name" />
Note: android:layout_width="0dp" because it has constraints with another button and it expands with it.
Full xml file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/req_pp"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#drawable/default_pp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/req_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintStart_toEndOf="#+id/req_pp"
app:layout_constraintTop_toTopOf="#+id/req_pp" />
<Button
android:id="#+id/req_accept_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="4dp"
android:text="Accept"
app:layout_constraintBottom_toBottomOf="#+id/req_delete_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/req_delete_btn" />
<Button
android:id="#+id/req_delete_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:text="Delete"
app:layout_constraintBottom_toBottomOf="#+id/req_pp"
app:layout_constraintEnd_toStartOf="#+id/req_accept_btn"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#+id/req_name" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
It's the shadow around the button in its background drawable. Create your own background and it will disappear. But keep in mind that when you setting android:background="#null" the button loses its touch animation, but it turns out that setting the background to anything at all fixes that border.
Also you can try to use: <Button android:minHeight="0dp" android:minWidth="0dp"
Or in your button's style:
<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>
Or try: android:includeFontPadding="false"
I have changed the constrain of the DELETE button to imageview, same as TextView constrain so i can use margin to adjust the space .
now i've putted android:layout_marginStart="14dp" but you can change it to fit your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/req_pp"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/default_pp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/req_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="aaa gggg bbb"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintStart_toEndOf="#+id/req_pp"
app:layout_constraintTop_toTopOf="#+id/req_pp" />
<Button
android:id="#+id/req_accept_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="16dp"
android:text="Accept"
app:layout_constraintBottom_toBottomOf="#+id/req_delete_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/req_delete_btn" />
<Button
android:id="#+id/req_delete_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginLeft="15dp"
android:layout_marginEnd="4dp"
android:text="Delete"
app:layout_constraintBottom_toBottomOf="#+id/req_pp"
app:layout_constraintEnd_toStartOf="#+id/req_accept_btn"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="#+id/req_pp" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
I could only find one thread pertaining to this and the answers didn't help fix the error. I am using a fresh install of Android Studio on a new laptop if that matters (maybe I need to install something that isn't currently there).
Error: This view is not constrained, it only has design time positions, so it will jump to (0,0) unless you add constraints
Edit2: It seems the new version of Android Studio doesn't use relative layout? I've tried manually changing the code as per this thread (How to switch from the default ConstraintLayout to RelativeLayout in Android Studio 2.3.3). Still not working.
Edit:
Here is an example of the code from a previous project (as you can see, this is different from my actual current code):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.squirreloverlord.ccarringtonphonephotoprint.MainActivity">
Below is my code for the main activity that is giving me the above error x4 (button/textView x2/radiogroup).
<?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.mercenaryferret.ccarrington1_currency.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_title"
android:textSize="24sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.032" />
<EditText
android:id="#+id/editText_usd"
android:layout_width="350dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/us_label"
android:inputType="numberDecimal"
android:textAlignment="center"
android:textSize="12sp"
tools:layout_editor_absoluteX="17dp"
tools:layout_editor_absoluteY="69dp"
/>
<RadioGroup
android:id="#+id/radioGrp"
android:layout_width="213dp"
android:layout_height="100dp"
tools:layout_editor_absoluteX="86dp"
tools:layout_editor_absoluteY="122dp"
>
<RadioButton
android:id="#+id/radioButtonEuro"
android:layout_width="98dp"
android:layout_height="wrap_content"
android:text="#string/euro_label"
tools:layout_editor_absoluteX="110dp"
tools:layout_editor_absoluteY="203dp" />
<RadioButton
android:id="#+id/radioButtonCanada"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/canada_label" />
<RadioButton
android:id="#+id/radioButtonMexico"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/mex_label" />
</RadioGroup>
<Button
android:id="#+id/buttonConvert"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="#string/convert_label"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="248dp" />
<TextView
android:id="#+id/textViewResults"
android:layout_width="316dp"
android:layout_height="31dp"
tools:layout_editor_absoluteX="34dp"
tools:layout_editor_absoluteY="354dp"
/>
Thank you in advance.
First of all at component tree there is ConstraintLayout left click on it and popup list opens then follow this :-
Constraint Layout >> clear all constraints then
Constraint Layout >> Add Infer Constraints
You need to add some missing constraints, here is how to do that.
Go to the Design View
Right click on your Widget
Click "Constraint Layout"
Click "Infer Constraint"
If above does not work, try below.
Go to the Design View
Right click on your Widget
Clear All Constraints
Click "Constraint Layout"
Click "Infer Constraint"
When you are using ConstraintLayout you must constraint your views both vertically and horizontally or else they may jump to the corner of your screen at run time.
After you constraint, your views as I said it will be placed according to your constraint and be relative to your screen - and your views won't jump in runtime.
Example to this layout using constraintLayout:
<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">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="app_title"
android:textSize="24sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toTopOf="#+id/editText_usd"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.032" />
<EditText
android:id="#+id/editText_usd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:hint="us_label"
android:inputType="numberDecimal"
android:textAlignment="center"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/radioGrp"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<RadioGroup
android:id="#+id/radioGrp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/buttonConvert"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toBottomOf="#+id/editText_usd">
<RadioButton
android:id="#+id/radioButtonEuro"
android:layout_width="98dp"
android:layout_height="wrap_content"
android:text="euro_label" />
<RadioButton
android:id="#+id/radioButtonCanada"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="canada_label" />
<RadioButton
android:id="#+id/radioButtonMexico"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="mex_label" />
</RadioGroup>
<Button
android:id="#+id/buttonConvert"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="convert_label"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="#+id/textViewResults"
app:layout_constraintEnd_toEndOf="#+id/editText_usd"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/editText_usd"
app:layout_constraintTop_toBottomOf="#+id/radioGrp" />
<TextView
android:id="#+id/textViewResults"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="some text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/buttonConvert"
app:layout_constraintStart_toStartOf="#+id/buttonConvert"
app:layout_constraintTop_toBottomOf="#+id/buttonConvert" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.05" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.95" />
</androidx.constraintlayout.widget.ConstraintLayout>