Develop Reference

ListView with multiple elements in one row

I try to get multiple elements in one row with ListView (Like float:left in html/css) but it won't work.
How can I achieve - for example - that I have 2 or 3 elements in portrait mode and 6 or 8 in landscape. Depending on the width of the elements.
buttonlist.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
app:layout_constraintWidth="80dp"
android:layout_weight="2"
>
<Button
android:id="#+id/buttonText"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="false"
android:background="#drawable/ic_button"
android:padding="0dp"
android:text="ButtonName"
android:textColor="#color/black"
android:textSize="12dp"
android:textStyle="bold"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main.xml
<?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:background="#color/white"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Float-Test"
android:padding="20dp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#color/black"
/>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:dividerHeight="10dp"></ListView>
</RelativeLayout>
Which point am I missing, or is it just the wrong way?
Cheers,
Chriz

Is buttonlist.xml the layout for your list items? If so, you can just add whatever other components you need to display there however you like.
And if you want a different look and feel for different screen orientations, you need to create screen-specific layouts in appropriate directories, such as res/layout/sw-600dp. See support different screen sizes for more information.
If you're supporting different data displayed based on orientation, you'll need to make sure your adapter handles it properly as well.

Why is the look of the activity different in the Android Studio preview than on the device?

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.

ConstraintLayout automatically resized by Android Studio

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" />

Android studio renders same layout differently

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>

Button breaks LinearLayout layout_gravity top

I may be being an idiot, but it seems like adding a Button to a horizontal LinearLayout breaks layout_gravity="top"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:text="TextView"
android:background="#f00" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_weight="0"
android:text="Button" />
</LinearLayout>
This looks like this (in the layout editor):
Note that the text view is in the centre, not the top! If *all I do is remove the <button>, then it looks like this:
See, now it is at the top like it should be. A workaround I will use is to have layout_gravity="start" which does result in the correct behaviour:
But anyway, what's going on? Also see this related question. That might actually be the same problem; I'm not sure. No real answers there anyway.

Aha, I found the answer! You have to set android:baselineAligned="false". Never heard of that before, and kind of annoying that it is on by default!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">
...