I need to manage my layout with the dp, not with match_parent, or wrap_content.
This is my XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="1"
android:orientation="vertical"
android:paddingBottom="0dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:background="#drawable/backprova"
android:adjustViewBounds="true"
tools:context="com.example.settingavatar.MyAvatar" >
<!-- layer per categoria A -->
<LinearLayout
android:id="#+id/llyA"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_column="0"
android:layout_marginLeft="110dp"
android:layout_marginTop="126dp"
android:layout_gravity="center_horizontal|top"
android:layout_row="0"
android:orientation="vertical"
android:visibility="visible"
android:background="#drawable/cata1" >
</LinearLayout>
<!--anteprima dell'avatar -->
<ImageView
android:id="#+id/anteprimaAvatar"
android:layout_width="145dp"
android:layout_height="352dp"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="43dp"
android:layout_marginLeft="0dp"
android:src="#drawable/avatar"
android:adjustViewBounds="true" />
<!-- other things -->
</RelativeLayout>
When I change devices, the LinearLayout and ImageView don't keep the proportions with the background image (only the aspect ratio between them).
I think the problems are height and width layout.
I have the background image file for every drawable_dpi, but the avatar and the cata1 image only for hdpi, could that be the problem?
In case you want to manage the layout just by using dp, try using an absolute layout, because the basis of using relative layout is to avoid maintaining all the views on dp basis..
Related
I have a fairly simple Xamarin app with a primary interface that consists of two ImageViews, one overlayed on the other. The images are the same size, and I want them to expand to fill the screen. Except that I want the bottom 100 pixels (about) reserved for a banner ad.
Without the ad, I found this simple. I used a RelativeLayout, set the layout_height and layout_width to match_parent, put both images in it, and set layout_CenterInParent to true for both of them. It works great.
And then I went to put the banner in. I tried using a GridLayout with one column and two rows, putting the prior RelativeLayout inside the top cell and the banner inside the bottom cell. But unless I restrict the height of the RelativeLayout to a fixed height, it expands until the banner is invisible. And I don't want to restrict it to a fixed height, because I want to expand it to the full height minus the banner height.
I realize that there's a basic contradiction between filling a space and restricting the height, but I'm hoping that there's some solution for this.
In css, I can use heights like wh-100 to be the full window height minus 100 pixels. Is there anything similar in Xamarin? Failing that, is there any trick I can use to achieve what I'm trying to do?
<GridLayout
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:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="2"
android:columnCount="1"
android:id="#+id/gridLayout1">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="400px"
android:layout_rowWeight="1"
android:background="#ffff44">
<ImageView
android:id="#+id/img1"
android:src="#drawable/img1"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ImageView
android:id="#+id/img2"
android:src="#drawable/img2"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<RelativeLayout
android:minWidth="100px"
android:minHeight="100px"
android:layout_height="100px"
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:background="#ccff44">
<ImageView
android:id="#+id/banner_placeholder"
android:src="#drawable/banner_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
Thanks for any help.
At first, if you use the GridLayout , you can set the control's height as the parent's - 100 in the xml. But you can use the row height to set the control's height such as:
<GridLayout
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:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="2"
android:columnCount="1"
android:id="#+id/gridLayout1">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="400px"
android:layout_row="0"
android:layout_rowWeight="3"
android:background="#ffff44">
<ImageView
android:id="#+id/img1"
android:src="#drawable/img1"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ImageView
android:id="#+id/img2"
android:src="#drawable/img2"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<RelativeLayout
android:minWidth="100px"
android:minHeight="100px"
android:layout_height="100px"
android:layout_row = "1"
android:layout_rowWeight="3"
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:background="#ccff44">
<ImageView
android:id="#+id/banner_placeholder"
android:src="#drawable/banner_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
This will set the first RelativeLayout's height as 3/4 of the parent and the second as the 1/4.
If you still want to set the first RelativeLayout's height as parent's - 100, you can use the ConstraintLayout instead of the GridLayout. And you need to install the package named Xamarin.AndroidX.ConstraintLayout at first.
And then:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/layout1"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="match_parent"
android:layout_height="100dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp" // in the ConstraintLayout the odp means use the rest area in the parent
app:layout_constraintBottom_toTopOf="#+id/layout1"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
In addition, the ConstraintLayout is the most using layout in the native android, it can design many effects which is hard for the other layouts to implement.
I have an imageview and i want to put in the right a textview, but that will stay centered verticaly, so I can make my custom listview.
This photo can explain better:
My code
<?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"
android:gravity="top" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/icon1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/imageView1"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Set your TextView's attribute
android:layout_centerVertical="true"
It would be even better if you set your image as a compound drawable inside the TextView (to the left of it):
android:drawableLeft="#drawable/icon1"
android:drawablePadding="8dp"
The two lines above are in the TextView definition and completely replace your ImageView.
This is a best practice and increases the overall performance, by flattening your layout hierarchy.
And remove the android:gravity="top" attribute in the parent.
Also, to make this the item row of a ListView, this android:layout_height="match_parent" should be android:layout_height="wrap_content"
I have a Button with a background drawable, android:layout_width="wrap_content" and android:layout_height="wrap_content". There is no text on the button. However, its display size is such that the drawable is resized a little bit and looks blurry, unless I set width and height to those of the drawable in px. How can I make wrap_content work? Or any other way that doesn't involve hard-coding the size of button, so that I don't need to make additional edits when the size of the drawable changes?
Here's my XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dp"
android:paddingTop="3dp" >
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
Use ImageButton instead of the regular Button. It provides access to the property android:src and set your image there, instead of as a background. Background images are always fit-to-fill, where as the "source" property controls image resizing via the android:scaleType property. See: http://developer.android.com/reference/android/widget/ImageButton.html and http://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType
Note, for your ImageButton, you'll also need to be sure that android:background="#null", otherwise you'll see the default button image behind your source image.
Edit:
Here is an updated version of your XML. I've added a new button, above the one you started with, although I used one of my images. The particular image is long and not that tall. In the regular Button, it stretches to fill the widget, losing perspective. In the new ImageButton to the top, it maintains it's perspective.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dp"
android:paddingTop="3dp" >
<ImageButton
android:id="#+id/new_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/postwall" />
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/new_btn"
android:background="#drawable/postwall" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
Below is the xml layout for my Android App. I am trying to positions a webview below the gridview on the screen.
Can anyone help explain what I need to do to get that to work?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/HomePage"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<GridView
android:id="#+id/Grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:scrollbars="vertical" />
<WebView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/webView1" />
</LinearLayout>
</LinearLayout>
Thanks
I think two minor changes will help make this work for you. First, when creating a LinearLayout, the android:orientation attribute is required to indicate whether the children should be added horizontally or vertically. Since you want one view on top of the other, add android:orientation=vertical to the HomePage LinearLayout. Second, your GridView currently has a android:layout_height of fill_parent. This will cause it to expand vertically and fill up the entirety of the LinearLayout, which will keep your WebView from being displayed. Try changing this attribute to wrap_content.
Making the height of both children wrap_content could possibly cause you to have some empty space in your app. If you need either the GridView or WebView to take up all of the empty space in the view, you can use the android:layout_weight attribute. Assign the view you want to expand to fill all remaining space after the rest are drawn the attribute like this: android:layout_weight=1. (Here, the 1 represents 100% of the remaining space) If you want more granular control over what percentage of the parent your children occupy, look into using decimal values with the android:layout_weight attribute or android:weightSum on the parent in conjunction with a android:layout_weight on each of the children. Hope this helps!
Use android:layout_height="wrap_content" in Gridview
Set orientation attribute in inner linear layout.
android:orientation="vertical"
Give fixed height of WebView and set android:layout_weight="" in both child.
Try below code and change according to your webview height and grid view height.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/HomePage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:orientation="vertical">
<GridView
android:id="#+id/Grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:layout_weight="1"
android:scrollbars="vertical" />
<WebView
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_weight="1"
android:id="#+id/webView1"
/>
</LinearLayout>
</LinearLayout>
In above code I give Height of WebView 200dp change according to your requirement.
I have an app that I am putting together and I have a background on it. There is a header on top and a ListView in the middle. When I have a list in the middle that isn't at least as big as the screen it just shows gray not the background of the parent layout. The weird thing is that this doesn't happen on my older phone, the background fills the whole screen even if the list doesn't. Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the xml for HomeActivity, more information in HomeActivity.java -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/common_aboutLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg">
<!-- This is the header on the top of the home screen -->
<LinearLayout android:id="#+id/dynamicBanner"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/header"
android:layout_width="fill_parent">
<!-- This is the temp pop-up on start -->
<TextView android:text="#+id/TextView01"
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:textColor="#FFFFFF"
android:visibility="invisible"
android:textStyle="bold"
android:typeface="sans"
android:ellipsize="end"
android:textSize="18sp"
android:gravity="center_vertical|center_horizontal">
</TextView>
</LinearLayout>
<!-- This is the layout of the list of ringtones. -->
<ListView android:id="#+id/homeListView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ListView>
<LinearLayout android:id="#+id/adLayout"
android:layout_width="fill_parent"
android:layout_height="0dp">
<com.admob.android.ads.AdView android:id="#+id/ad"
admob:textColor="#FFFFFF"
admob:keywords="Android application"
android:layout_width="fill_parent"
android:layout_gravity="bottom|center"
admob:backgroundColor="#666666"
admob:refreshInterval="30"
android:layout_height="0dp" />
</LinearLayout>
</LinearLayout>
The TextView is just a temp thing when the window first opens.
Just looking for some help, Thanks.
put All views in RelativeLayout.then put this admob layout and add a tag to plcae this to bottom of layout
like
android:layout_alignParentBottom="true"
<LinearLayout android:id="#+id/adLayout"
android:layout_width="fill_parent"
android:layout_height="0dp">
<com.admob.android.ads.AdView android:id="#+id/ad"
admob:textColor="#FFFFFF"
admob:keywords="Android application"
android:layout_width="fill_parent"
android:layout_gravity="bottom|center"
admob:backgroundColor="#666666"
admob:refreshInterval="30"
android:layout_height="0dp" />
</LinearLayout>
and then Header part inside the relative layout
android:layout_alignParentTop="true"
and the put the ListView and
android:layout_above="#+id/adLayout"
android:layout_below=HEADERVIEW