I am working on Xamarin app but I believe this concept also applies for android.
I would like to show my LinearLayout wrapped items in GridView as below. But is does not render as I expected.
Is there anything I am missing here?
Code:
Main.axml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<GridView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gridViewHomeItems"
android:horizontalSpacing="10px"
android:verticalSpacing="10px"
/>
HomeItem.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:padding="25px">
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/homeItemImage" />
<TextView
android:text="Item Title"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/homeItemTitle" />
</LinearLayout>
Remove the px from properties. Use sp or dp instead. Same thing apply to the Grid View layout also.
Like this.
<?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:minHeight="25dp"
android:minWidth="25dp"
android:orientation="vertical"
android:padding="25dp">
<ImageView
android:id="#+id/homeItemImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_btn_speak_now" />
<TextView
android:id="#+id/homeItemTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Item Title"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
Grid View like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minHeight="25dp"
android:minWidth="25dp"
android:orientation="vertical">
<GridView
android:id="#+id/gridViewHomeItems"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="96dp"
android:horizontalSpacing="10dp"
android:minHeight="25dp"
android:minWidth="25dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp" />
</LinearLayout>
Try adding this atributes. Main.axml#GridView:
android:columnWidth="96dp"
android:numColumns="auto_fit"
HomeItem.axml (#ImageView and #TextView):
android:layout_centerHorizontal="true"
Try the below code in your layout.
<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:orientation="vertical"
>
<GridView
android:numColumns="auto_fit"
android:gravity="center"
android:columnWidth="100dp"
android:stretchMode="columnWidth"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/gridViewHomeItems"
/>
</LinearLayout>
Change your custom layout as below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="25dp"
android:minWidth="25dp"
android:orientation="vertical"
android:padding="10dp">
<ImageView
android:id="#+id/homeItemImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_menu_gallery"/>
<TextView
android:id="#+id/homeItemTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Item Title"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
Also make sure you use dp instead of px as per android standards.
Related
What I want is for qrcodetext to fit and display all the text in qrcode_layout and have qrimageView to fill the rest of qrcode_layout? But my layout below has the entire qrimageView cover qrcode_layout. I tried a bunch of other variations but without success.
Here is what it looks like.
Here is what I want it to look like.
<?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">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/qrcodelayout">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/qrimageView"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/qrcodetext"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="4dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</RelativeLayout>
Use following code. Align your textview to bottom and then align your Qrcode Image above text:
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/qrcodetext"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_marginTop="4dp" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/qrimageView"
android:layout_gravity="center_horizontal"
android:layout_above="#id/qrcodetext"
android:layout_alignParentTop="true"
android:layout_marginTop="8dp" />
</RelativeLayout>
I think what i have understand you want is below: Plz check and tell me:
<?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">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/qrcodelayout">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/qrcodetext"
android:gravity="center"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginTop="4dp" />
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/qrimageView"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp" />
</LinearLayout>
</LinearLayout>
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>-->
</RelativeLayout>
I am trying to create Custom Gridview with image and text at bottom but when i scroll down then the alignment gets mismatched because of text
Alignment after scrolling down
Alignment beforescrolling down
gridview.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.staritsolutions.apptitude.CategoryImageResize_Adapter
android:id="#+id/picture"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="150"
android:textColor="#android:color/black" />
</LinearLayout>
</FrameLayout>
Try changing height of TextView to wrap_content:
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="150"
android:textColor="#android:color/black" />
Try this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="3" >
<com.staritsolutions.apptitude.CategoryImageResize_Adapter
android:id="#+id/picture"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="2"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:gravity="center"
android:layout_weight="1"
android:textColor="#android:color/black" />
</LinearLayout>
</FrameLayout>
You can 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.staritsolutions.apptitude.CategoryImageResize_Adapter
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center"
android:layout_weight=".5"
android:textColor="#android:color/black" />
</LinearLayout>
</FrameLayout>
For TextView - you can set equal weight is 1 & if your text is not big then set fix weight what you want like .2 or .3
I'm trying to create a android layout like:
[####EditText###][Button]
[####listview#####]
For that i'm using weight, but the following xml is giving me something very strang like:
[editText][button][ListView]
Someone know why?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
android:weightSum="10"
>
<EditText android:id="#+id/nova_lista"
android:inputType="text"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="9"
android:hint="#string/new_list_hint">
</EditText>
<Button android:id="#+id/nova_lista_botao"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/new_list"/>
<ListView
android:id="#+id/list_of_lists"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
You are using android:orientation="vertical"
and you are specifying android:layout_width equal to 0dp.
For vertical layout layout_height should be 0 dp and for Horizontal layout layout_width should be 0 dp if you are using weight in LinearLayout.
Put EditText and Button in separate Horizontal Layout. Use below code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10"
>
<EditText android:id="#+id/nova_lista"
android:inputType="text"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="9"
android:hint="#string/new_list_hint">
</EditText>
<Button android:id="#+id/nova_lista_botao"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/new_list"/>
</LinearLayout>
<ListView
android:id="#+id/list_of_lists"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
Maybe this is what you are looking for:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff" >
<EditText
android:id="#+id/nova_lista"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/nova_lista_botao"
android:inputType="text"
android:hint="something">
</EditText>
<Button
android:id="#+id/nova_lista_botao"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:text="Hello"/>
<ListView
android:id="#+id/list_of_lists"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/nova_lista" >
</ListView>
</RelativeLayout>
Hope that helps.
1.Set your main layout is RelativeLayout
2.Create LinarLayout and move EditText and Button to LinerLayout
3.Set LinerLayout is "#+id/top_layout" and set listview is
android:layout_below="#+id/top_layout"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
android:weightSum="10" >
<LinearLayout
android:id="#+id/top_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/nova_lista"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="9"
android:hint="#string/new_list_hint"
android:inputType="text" >
</EditText>
<Button
android:id="#+id/nova_lista_botao"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/new_list" />
</LinearLayout>
<ListView
android:id="#+id/list_of_lists"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top_layout" >
</ListView>
</RelativeLayout>
How do I let my include exactly at the end of the screen? At the time he gets to the end of the content.
<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ScrollView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#f6ba79"
android:orientation="vertical" android:id="#+id/layout">
<LinearLayout android:id="#+id/linearLayout2"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/preferences_background">
<include android:id="#+id/include1" android:layout_width="fill_parent"
layout="#layout/top" android:layout_height="wrap_content"></include>
<LinearLayout android:layout_width="fill_parent"
android:gravity="center" android:id="#+id/linearLayout1"
android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical"
android:layout_width="270dp" android:id="#+id/body"
android:layout_height="wrap_content" android:focusableInTouchMode="true">
<ImageView android:src="#drawable/preferences"
style="#style/Theme.Connector.ImageElement" android:layout_width="wrap_content"
android:id="#+id/title" android:layout_height="wrap_content"></ImageView>
<Spinner android:layout_width="fill_parent"
style="#style/Theme.Connector.WelcomeSpinner"
android:layout_weight="1" android:id="#+id/spinner_isp"
android:layout_height="wrap_content" />
<EditText android:singleLine="true" android:hint="#string/txt_user"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:id="#+id/edit_user" style="#style/Theme.Connector.PreferencesInput" />
<EditText android:singleLine="true" android:hint="#string/txt_password"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:id="#+id/edit_password" android:password="true"
style="#style/Theme.Connector.PreferencesInput" />
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:id="#+id/frm_action"
android:layout_height="fill_parent" android:baselineAligned="false">
<Button android:text="#string/btn_save"
android:layout_weight="0" android:layout_width="130dp"
android:layout_height="wrap_content" style="#style/Theme.Connector.Button"
android:layout_gravity="center" android:id="#+id/btn_save"></Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
<include android:id="#+id/include1" android:layout_width="fill_parent"
layout="#layout/menu" android:layout_height="wrap_content" android:layout_alignParentBottom="true"></include>
</RelativeLayout>
The problem is that your ScrollerView has a layout_height="fill_parent". RelativeLayout will make that view fill the entire space.
A LinearLayout will work better in your case:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#f6ba79"
android:orientation="vertical"
android:id="#+id/layout">
...
</ScrollView>
<include
android:id="#+id/include1"
android:layout_width="fill_parent"
layout="#layout/menu"
android:layout_height="wrap_content" />
</LinearLayout>
The key here is to have the height of the ScrollerView set to 0dp and the weight set to 1 (or any number really). LinearLayout will then stretch the ScrollerView to fill the view and still make room for the #layout/menu at the bottom.
I need somehow to do this :
I tried playing with Relative Layout, I placed top imageview and bottom button but how do I place my gridview in the center? BUT BETWEEN top image and bottom button?
Have the top image and the bottom button use wrap_content for height, and the GridView use 0dip for height along with a weight of 1. This will cause the top and bottom elements to measure first, and the GridView will get all remaining space in the middle.
<?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="vertical">
<ImageView android:id="#+id/top_image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<GridView android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<Button android:id="#+id/bottom_button"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
adamp's answer didn't work for me. This is what I found to work perfectly:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView android:id="#+id/top_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<Button android:id="#+id/bottom_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<LinearLayout
android:id="#+id/container_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottom_button"
android:layout_below="#id/top_image"
android:gravity="center" >
<GridView android:id="#+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</RelativeLayout>
I've used this with other LinearLayouts in place of the GridView, with android:gravity="center" set on the innermost layout as well to make all of its text views and images centered horizontally as well as vertically.
use something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/table">
<TableRow
android:weightSum="100">
<ImageView android:id="#+id/image1"
android:src="#drawable/icon"
android:visibility="visible"
android:gravity="center"
android:layout_weight="50" />
</TableRow>
<TableRow
android:weightSum="100">
<GridView
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</GridView>
</TableRow>
<TableRow
android:weightSum="100">
<Button android:id="#+id/btn1"
android:visibility="visible"
android:gravity="center"
android:layout_weight="50" />
</TableRow>
</TableLayout>
</LinearLayout>
You could try this:
<?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="vertical">
<ImageView android:id="#+id/top_image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<GridView android:id="#+id/grid1"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<Button android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Add these to your Grid View:
android:layout_above="#id/bottom_button"
android:layout_below="#id/top_image"