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" />
Related
I started to work with Android Studio, i created a small app and set background:
android:background="#3F51B5"
but when i run the emulator i see a lower white/dark band, specially in smartphone with larger displays
what can i do?
i use linear layout and one section with constraintlayout. the first portion of main activity is
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="false"
android:background="#3F51B5"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context=".MainActivity"
tools:visibility="visible">
do like this:
android:layout_width="match_parent"
android:layout_height="match_parent"
with this way you can fill all the display with the color that you choose
If you wish to keep your LinearLayout as is but the full background as the colour you want, then I suggest wrapping this in a ConstraintLayout whose width and length can be match parent, or height can be wrap content as per your need
<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="match_parent"
android:background="#3F51B5">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="false"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context=".MainActivity"
tools:visibility="visible">
//Views
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I have a fragment layout that contains the following code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".BlankFragment">
<ListView
android:id="#+id/blankList"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listheader="#layout/menu_header"
tools:listitem="#layout/fragment_item" />
</FrameLayout>
My fragment_item contains the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal"
android:background="#f0f0f0">
<ImageView
android:id="#+id/image_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:paddingBottom="3dp"/>
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/menu_article_text_size"
android:layout_marginStart="16dp"
android:textAppearance="?attr/textAppearanceListItem" />
</LinearLayout>
My menu_header contains the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="12dp"
android:id="#+id/view2"
app:cardCornerRadius="40dp"
android:layout_centerHorizontal="true">
<ImageView
android:layout_height="80dp"
android:layout_width="match_parent"
android:id="#+id/imageView1"
android:src="#drawable/ic_launcher_background"
android:scaleType="centerCrop"/>
</android.support.v7.widget.CardView>
</LinearLayout>
My problem is that for some reason when I run it the app the fragment works, the list appears and the items of it are fine, but the header simply isn't there.
any help anyone?
* IMPORTANT FACT *
on the preview, it does work but it doesn't when I run it
My problem is that for some reason when I run it the app the fragment
works, the list appears and the items of it are fine, but the header
simply isn't there.
IMPORTANT FACT * on the preview, it does work but it doesn't when I run it
=> Looks like you have misunderstood about tools attribute. Those are design time attributes, means that it's helpful while designing layouts. Yes those are not meant for runtime and so obviously it won't be appeared in app.
To clarify it by giving you an example, android:text="Hello World and tools:text="Hello World". You should put demo/testing data in layout using tools attribute so user will not be seeing those data but it will be helpful to developers to see that there are views available in layout. In fact, they can adjust margins, paddings and all other layout design time operations!
I created an navigation drawer activity and found that its content page looks different in the preview.
This is the preview.
And this is the AVD appearance (it looks like a real device too).
XML code is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
tools:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
What do you think where the problem is?
Try adding android:scaleType="fitXY" in ImageView like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
android:scaleType="fitXY"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
That's probably a little bug with ImageViews´ previews in Android Studio,
Hope it helps
EDIT: I see you've included the style file and it does appear that your app is running the same style (AppTheme) as your preview so I think we can possibly rule out that as a culprit.
I doubt this makes a difference but I noticed your preview is running api 27 and your device is running api 27.
Try removing the
tools:context="com.xy.xy.HomePage" and see if it makes a difference.
The preview can only show you the current view. It doesn't know the parent view. The child view may have a parent view that constricts the size of the child view. Let's say that your image is set to width="match_parent". In this case, the preview may expand the image to fill the full width but at runtime your image my be placed inside a parent with a width="100dp" which would cause the image to have a width of only 100dp. Padding and margin of the parent view can also cause an issue.
If this isn't the problem then it may be a styling issue. I'd have to see more of your Theme and Style setup in order to know for sure. Your preview might be showing you a different style/theme than what you are actually using at runtime.
In my app, I have some spinners (each of which is part of a fragment) in a scrollView. This scrollView is placed below a textView.
The problem is that, when I'm running the app on my test device (Samsung Galaxy S6 Edge [G925F], API 23), the little arrow of the spinner stays visible above the textView, even though the rest of the spinner is already out of view.
I did a lot of research but couldn't find any solutions, so I'm asking here:
What do I need to do so that the arrows disappear like the rest of the spinner?
Here some pictures:
In this picture, you can see the textView at the top of the activity and below the spinners, before I scrolled down
In this screenshot, you can see the problem. The little triangles of the spinner are still visible, but the spinner itself is already scrolled out of view.
Here is the XML code of the fragment containing the spinner:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<LinearLayout
android:id="#+id/fragLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/gradeDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp"
android:text="1"
android:textSize="30dp"/>
<Spinner
android:id="#+id/spinner"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:entries="#array/grades"/>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp"
android:src="#drawable/ic_remove_black_24dp"
android:background="#null"/>
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_below="#id/fragLayout"/>
</RelativeLayout>
And here is the code of the MainActivitys content:
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="de.jeanma.android.avo.MainActivity"
tools:showIn="#layout/activity_main">
<Space
android:id="#+id/mainContentSpace"
android:layout_width="match_parent"
android:layout_height="16dp" />
<TextView
android:id="#+id/textView"
android:layout_below="#id/mainContentSpace"
android:layout_width="match_parent"
android:text="Standard text"
android:layout_height="wrap_content"
android:textSize="40dp"
android:gravity="end"/>
<ScrollView
android:id="#+id/scrollView"
android:layout_below="#id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/divider"
android:showDividers="middle">
</LinearLayout>
</ScrollView>
</RelativeLayout>
The fragments are added to the LinearLayout (#id/layout) by a Java method. If needed, I will post that here as well.
I'm using Java 1.8.05 and the target SDK is 23, the minimum is 14. The code is written in Android Studio
The textView with the problems is the #id/textView, displaying the large number at the top.
#jeanma you can fix the issue with just setting
android:background="#00FFFFFF"
for your ScrollView or root LinearLayout of the ScrollView
I now have got a workaround running. As suggested as I set the textView's backgroundcolor the same as my activity, the arrrows wheren't showing any longer. But the space did behave difrently. There it han'd changed somethinf that I changed the backgroundcolor. So I just removed it. (It still looks kinda good).
The updated XML-file od the MainActivity'a content can be seen here:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="de.jeanma.android.avo.MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:text="Standard text"
android:layout_height="wrap_content"
android:textSize="40dp"
android:gravity="end"
android:background="#FAFAFA"/>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView">
<LinearLayout
android:id="#+id/layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/divider"
android:showDividers="middle">
</LinearLayout>
</ScrollView>
</RelativeLayout>
But because the arrows were showing threw the padding as well, I changed my
src\main\res\values\dimens.xml to the following (I know that that's really bad practice):
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">0dp</dimen><!-- This was changed from 16dp to 0dp -->
<dimen name="fab_margin">16dp</dimen>
</resources>
Thanks #ScriptKity #Wukash #Bryan for your support
Set Background Color in your parent layout.
android:background="#color/white"
I've run into this problem recently, and believe this is a bug in the hardware accelerated rendering on Android when you combine ScrollView and Spinner.
I was able to fix this by turning the hardware acceleration off for the Spinner(s):
mySpinner.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Other possibilities how to control the hardware acceleration are described here:
https://developer.android.com/guide/topics/graphics/hardware-accel
I'm trying to use some portions of my previous project in my new project but I have encountered with a strange problem. My new project renders the same layout differently from the previous project. Here is the layout.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center" >
<ImageView
android:id="#+id/id1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
/>
</FrameLayout>
And here are the two different results:
Layouts are 100% same but in the first one, ImageView holds a larger space than the image. In the second one, ImageView wraps the image, no extra space around the image. I want to use second one but what am I missing?
Target sdk, min sdk etc. are all the same.
Thanks in advance.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:paddingRight="50dp"
android:paddingLeft="50dp">
<ImageView
android:id="#+id/id1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
/>
</FrameLayout>
You may want to try this code above. Adjust the paddings as you want!
Try this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:src="#drawable/image"/>
</FrameLayout>