Currently I am trying to create a little app with mainly a horizontalscrollview and a main view. The horizontalscrollview contains a linearlayout with a bunch of BoxItems defined in my BoxItem.axml file. One BoxItem is also displayed on the main view.
The Problem is that I need to shrink the items in order to fit the scrollview. I would like the items to automatically resize (with all its child views) to fit the parentview (in height).
If it is possible I would also like to implement a function the set the size in code (but that’s not my main concern).
BoxItem.axml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/Box"
android:gravity="center_vertical">
<TextView
android:text="Shelf"
android:id="#+id/Shelf"
android:textColor="#009900"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30sp" />
<TextView
android:text="ProductName"
android:id="#+id/Name"
android:textColor="#009900"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30sp" />
<TextView
android:text="Barcode"
android:id="#+id/Barcode"
android:textColor="#009900"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30sp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout3"
android:gravity="center">
<TextView
android:text="10"
android:id="#+id/StockCurrent"
android:textColor="#009900"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp" />
<TextView
android:text="/"
android:id="#+id/textView4"
android:textColor="#009900"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp" />
<TextView
android:text="10"
android:id="#+id/StockMax"
android:textColor="#009900"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>
I would like the items to automatically resize (with all its child views) to fit the parentview (in height).
You need API 11 or above to scale a View. Usage like this :
LinearLayout ll = FindViewById<LinearLayout>(Resource.Id.Box);
float scalingFactor = 0.5f; // scale down to half the size
ll.ScaleX = scalingFactor;
ll.ScaleY = scalingFactor;
But the scale size is difficult to calculate.
Alternative choice, it is suggested that use CardView to implement this function.
Related
I am using SortableTableView as my table view and I am having trouble including a TextView right below the component.
<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">
<de.codecrafters.tableview.SortableTableView
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tableView_columnCount="4"
app:tableView_headerElevation="10" />
<TextView
android:id="#+id/txtSummaryRecords"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Summary details goes here"
android:layout_below="#+id/tableView"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="?android:attr/colorError" />
</RelativeLayout>
However, when I add a static value to the height as below, it displays right below to the table.
<de.codecrafters.tableview.SortableTableView
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="450dp" <--included value
app:tableView_columnCount="4"
app:tableView_headerElevation="10" />
Result:
I tried settingandroid:layout_height= to match_parent and no difference. Looks like SortableTableView filled through whole screen disregard to the wrap_content layout height. Any support would highly appreciate.
I also found this problem, which seems to be that the default height is already match_parent.
If you want the TextView at the bottom,and SortableTableView above it.You could do like below as a workaround.
<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">
<de.codecrafters.tableview.SortableTableView
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:layout_above="#+id/txtSummaryRecords"
app:tableView_columnCount="4"
app:tableView_headerElevation="10"
app:tableView_headerColor="#color/primary" />
<TextView
android:id="#+id/txtSummaryRecords"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Summary details goes here"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="?android:attr/colorError" />
</RelativeLayout>
I made a Layout File and added different kinds of views and adjusted them using Layout - ViewGroup and Layout - RelativeLayout properties. The images and icons that I'm using were made for mdpi by a graphic designer. The runtime display doesn't match the one in the desinger mode. Since I am positioning the UI elements based on the element above it, the resulting elements shift downwards and some aren't even visible on the screen.
I tried aligning using Layout - RelativeLayout both with the element above and below the current element and then adjust margin using Layout - ViewGroup properties but I couldn't do the later because the element got stretched even though I set Layout Height and Layout Width to wrap_content.
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/imageViewLoginBG"
android:src="#drawable/loginbg"
android:scaleType="fitXY" />
<ImageView
android:src="#drawable/loginlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageViewLoginLogo"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="75dp" />
<EditText
android:inputType="textEmailAddress"
android:layout_height="wrap_content"
android:id="#+id/editTextLoginEmail"
android:hint="Email"
android:layout_below="#+id/imageViewLoginLogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:layout_marginRight="0.0dp"
android:layout_width="300.0dp"
android:textSize="15sp" />
<EditText
android:inputType="textPassword"
android:layout_width="300.0dp"
android:layout_height="wrap_content"
android:id="#+id/editTextLoginPass"
android:hint="Password"
android:textSize="15sp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editTextLoginEmail"
android:layout_marginTop="15.0dp" />
<ImageButton
android:src="#drawable/loginbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButtonLogin"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editTextLoginPass"
android:layout_marginTop="45.0dp" />
<TextView
android:text="Don't have an account? Register Now"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textViewLoginReg"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageViewLoginBG"
android:layout_marginBottom="10.0dp"
android:textColor="#fffafafa"
android:textSize="12sp"/>
<TextView
android:text="Forgot Password?"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textViewLoginFrgPass"
android:layout_centerHorizontal="true"
android:layout_marginBottom="0.0dp"
android:textColor="#fffafafa"
android:textSize="12sp"
android:layout_below="#+id/imageButtonLogin"
android:layout_marginTop="10.0dp" />
</RelativeLayout>
This is how the layout looks in the designer:
https://ibb.co/YLn3X4g
This is what it looks like in an emulator:
https://ibb.co/4wyDB9D
Note: Even the action bar gets displayed!?
I have a problem. I created a ListView with a custom adapter. Therefore I created a new Layout for just 1 row. In that layout I set the main layout to a height of 120dp, but when the list gets created all the rows are not equal and for my opinion not 120dp. Here is the code of the row layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="120dp"
android:minWidth="0px"
android:minHeight="50px"
android:background="#edf0f4">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="70"
android:layout_height="match_parent"
android:background="#edf0f4"
android:id="#+id/LayoutSettingName">
<TextView
android:text="Dark Theme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtSettingName"
android:textColor="#000000"
android:autoSizeMaxTextSize="20dp"
android:autoSizeMinTextSize="17dp"
android:autoSizeTextType="uniform"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:textStyle="bold" />
<TextView
android:text="Change the theme to something more dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txtSettingDescription"
android:textColor="#666666"
android:autoSizeMaxTextSize="18dp"
android:autoSizeMinTextSize="16dp"
android:autoSizeTextType="uniform"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="30"
android:layout_height="match_parent"
android:background="#edf0f4"
android:id="#+id/LayoutSettingValue"
android:gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#dddddd"
android:textColor="#FFFFFF"
android:id="#+id/SettingEditText" />
<Spinner
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/SettingSpinner" />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/SettingSwitch" />
</LinearLayout>
</LinearLayout>
Here is a screenshot of the ListView I have right now:
I want to rows to be double the size of the first row, but it doesn't matter which size I give them, they always look like this.
What am I doing wrong?
If you go back through the source code you can see that ListView will call makeAndAddView(... ) to get the View, and in this method, the obtainView method of the parent AbsListView is called, which generates an AbsListView.LayoutParams of MATCH_PARENT width and WRAP_CONTENT height,so the height you set in the item XML doesn't take effect because the ListView defaults to LayoutParams for each item
you could change by the following two ways：
1.Nest the layout in the XML one more time:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#edf0f4"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="70"
android:layout_height="match_parent"
android:background="#edf0f4"
android:id="#+id/LayoutSettingName">
<TextView
android:text="Dark Theme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtSettingName"
android:textColor="#000000"
android:autoSizeMaxTextSize="20dp"
android:autoSizeMinTextSize="17dp"
android:autoSizeTextType="uniform"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:textStyle="bold" />
<TextView
android:text="Change the theme to something more dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txtSettingDescription"
android:textColor="#666666"
android:autoSizeMaxTextSize="18dp"
android:autoSizeMinTextSize="16dp"
android:autoSizeTextType="uniform"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="30"
android:layout_height="match_parent"
android:background="#edf0f4"
android:id="#+id/LayoutSettingValue"
android:gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#dddddd"
android:textColor="#FFFFFF"
android:id="#+id/SettingEditText" />
<Spinner
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/SettingSpinner" />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/SettingSwitch" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
2.Manually set an abslistview.layoutparams for convertView in the getView method in Adapter
public override View GetView(int position, View convertView, ViewGroup parent)
{
...
convertView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.layout6, null);
convertView.setLayoutParams(new AbsListView.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, 300));//300 is your custom height
...
}
I am working whit Xamarin pcl. Now has the Android project an auto rendered layout for Toolbar and Tabbar. I am customizing the toolbar.axml to have a icon in the center of it. Everything is going wel untill a page got a back button (navigation page attribute I guess) end the icon shifts to the right because its not anymore the only one in the toolbar. Is there an easy fix to give the icon a fixed position? The back-button, I think, is not declared in an axml but generated through the function of Xamarin.Forms new NavigationPage().
My axml looks now like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#72B1A2"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_gravity="center"
android:baselineAlignBottom="true"
android:scaleType="fitCenter"
android:src="#drawable/ictzaak_FC"
/>
</android.support.v7.widget.Toolbar>
I already look into the use of android:layout_gravity="center" and android:layout_gravity="center_horizontal" and android:center_horizontal or something but it didn't fix it
How it looks:
Startup screen without the return button
With return button and out of center
You can try to nest the Image in a RelativeLayout. And in this you can center your Image. Like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#72B1A2"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_centerInParent="true"
android:baselineAlignBottom="true"
android:scaleType="fitCenter"
android:src="#drawable/ictzaak_FC"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Image set in center using LinearLayout.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_img"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
I'm trying to recreate a cardview similar to this one with an image with title on top and then some data and maybe some action buttons below. But for the life of me I can't get the text to be on top of the image.
Here is what I have so far
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="325dp"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image1"
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_alignParentTop="true"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/recipeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/image1"
android:maxLines="3"
android:padding="8dp"
android:text="name"
android:textColor="#222"
android:textStyle="bold"
android:textSize="22dp" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="description"
android:textColor="#666"
android:textSize="14dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/description">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="View"
android:textColor="#666"
android:textSize="14dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="Add"
android:textColor="#666"
android:textSize="14dp" />
</LinearLayout>
</RelativeLayout>
I will assume you want #+id/recipeName on top of #+id/image1.
On recipeName, you have set: android:layout_below="#+id/image1" which will layout the element below image1. Remove that line as you do not want it below that element. Try android:layout_alignBottom="#+id/image1". There are enough layout parameters to do most things: LayoutParams, though it can be a bit of a rabbit hole once you start doing complex layouts...
Also you've got layout_below on elements inside your LinearLayout which won't do anything.