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
Related
I have an activity that contains a horizontal recycler view.
Now the main problem is I want to have a comment layout like the one in whats app which is at the bottom of the screen which is not filling the parent.
activity layout:
<?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.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_mood_detail_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
row view of the recycler view:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/row_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_large"
android:layout_marginRight="#dimen/margin_large"
>
<ImageView
android:id="#+id/quote_image_mood_detail_activity"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
/>
<include
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/layout_like_and_share"
android:layout_gravity="right"
/>
<com.ascentbrezie.brezie.custom.CustomTextView
android:id="#+id/comments_count_text_mood_detail_activity"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size_small"
android:layout_margin="#dimen/margin_small"
/>
<LinearLayout
android:id="#+id/display_comments_layout_mood_detail_activity"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_margin="#dimen/margin_small"
/>
<include
android:id="#+id/abc"
layout="#layout/layout_add_comments"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
When I use the above two codes I have the output as this
But I want to set the edittext and the button at the button of the layout as the footer,for that when I am using this layout.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/row_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_large"
android:layout_marginRight="#dimen/margin_large"
>
<ImageView
android:id="#+id/quote_image_mood_detail_activity"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
/>
<include
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/layout_like_and_share"
android:layout_gravity="right"
/>
<com.ascentbrezie.brezie.custom.CustomTextView
android:id="#+id/comments_count_text_mood_detail_activity"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size_small"
android:layout_margin="#dimen/margin_small"
/>
<LinearLayout
android:id="#+id/display_comments_layout_mood_detail_activity"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_margin="#dimen/margin_small"
/>
</LinearLayout>
</ScrollView>
<include
android:id="#+id/abc"
layout="#layout/layout_add_comments"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
Now the problem is I get the XML preview exactly as I want. Have a look [here] but when I run the app on any device I get the output like this.
So the main problem is the footer layout doesn't stretch to fill up the parent and leaves some space to the right of the screen. I have dynamically set the margin for the whole of the view also.
RowLayout is the linear layout inside the scrollview. Card width is the width of the screen
rowLayout = (LinearLayout) holder.v.findViewById(R.id.row_layout);
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(cardWidth, ViewGroup.LayoutParams.FILL_PARENT);
layoutParams.setMargins(10, 10, 0, 0);
rowLayout.setLayoutParams(layoutParams);
This should do it
<LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"><EditText android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"/><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"/></LinearLayout>
I want to apply background image on Relativelayout Under ScrollView.
The Image Appear on XML View but Not Appear on Actual device.
I have added ImageView on Ralativelayout
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/parentView"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/cloudbg"
/>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:id="#+id/vo"
android:layout_below="#id/relativeLayout"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="XYZ"
/>
<TextView
android:layout_width="wrap_content"
android:layout_marginLeft="25dp"
android:layout_height="wrap_content"
android:id="#+id/textvo"
android:text="Voter Number"
/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
Thanks
can try this way:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/cloudbg">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:id="#+id/vo"
android:layout_below="#id/relativeLayout"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="XYZ"
/>
<TextView
android:layout_width="wrap_content"
android:layout_marginLeft="25dp"
android:layout_height="wrap_content"
android:id="#+id/textvo"
android:text="Voter Number"
/>
</LinearLayout>
</ScrollView>
Use android:background="#drawable/background_image" attribute in Relative or Linear Layout tag.
Set background for scrollview
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_launcher" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
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"