Creating custom gridView item, using xml - android

I'm using the following RelativeLayout for creating an item in GridView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:background="#drawable/border">
<ImageView
android:id="#+id/icon_service"
android:layout_width="290dp"
android:layout_height="268dp"
android:layout_alignParentTop="true"
android:src="#drawable/icon"
android:layout_centerHorizontal="true">
</ImageView>
<TextView
android:text="My text"
android:layout_height="80dp"
android:id="#+id/service"
android:layout_width="wrap_content"
android:layout_below="#+id/icon_service"
android:layout_marginTop="2dp"
android:layout_centerHorizontal="true"
android:gravity="top|center"
android:textSize="24sp"
android:textColor="#ff0000"
android:ellipsize="marquee">
</TextView>
</RelativeLayout>
which gives me this:
Instead, what I want is this:

Your Image view is at right position,
Below, instead of putting textview directly..
put a linearlayout their with orientation horizontal,
and make two childs of this LinearLayout, TextView and ImageView...
thats it..

You are providing only one ImageView and expecting for two imageviews see your code..for achiving your desired result take one linear layout ,give it wightsum = 10 and orientation vertical and take one Image and another linerlayout inside this.give weight for imageview 7 and linearlayout 3..then the set the second one linearlayout weightsum equal to 6 and take one textview and one imageview inside the second layout and set textview weight equal to 4 and and imageview equal to 2..see the result if not equal to your expecting...customize the weightsums...like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:weightSum="6"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"/>
</LinearLayout>
</LinearLayout>

Related

android gridlayout column width exceed parent (gridlayout) width

I am using gridlayout to group my views. inside it, I have two columns. one column has a child which is relativelayout and the other column has a child which is linearlayout.
My linearlayout orientation is vertical. it has two views, textview and an imageview.
The issue is when I type text in the textview, and the text is long, I cannot see
some characters in the textview
imageview which is below the textview
textview width is extending and and hiding some of it's characters and also imageview before entering 2nd line(textview is muitiline)
I don't want to use margin to solve this issue because if I use it, and the text in textview is short, unwanted space will appear at the right side of textview.
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="2"
app:rowCount="1" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill" >
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12345...50" >
</TextView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/vladmir putin"/>
</LinearLayout>
</android.support.v7.widget.GridLayout>
How can i solve the issue of textview width exceeding gridlayout width?
if i type 1234 everything is ok. but if i type from 1 to 50, i can't see some numbers like from 30 to 32 and imageview?.
To solve this problem, I used RelativeLayout instead of LinearLayout and aligned my textview to the start of the imageview
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="2"
app:rowCount="1"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill" >
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/profile"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:text="12345...50"
android:layout_toStartOf="#id/profile">
</TextView>
<ImageView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/profile"
android:id="#+id/profile"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true" />
</RelativeLayout>

Show 3 scrollable ListViews of equal height in Android Layout

I am trying to show three different vertical sections in my Android layout on one screen, each taking up one third of the screen, one on the top, one in the middle, and one on the bottom. Each section has a TextView and a ListView, and the ListViews can scroll so that you can see all items, but the overall page does not move. I have tried putting each TextView and ListView in a LinearLayout and setting the height of each LinearLayout to one third the total height of the screen, but the first ListView just shows all the items in it, taking up most of the screen, and the other sections are pushed down. I also tried using layout_weights, but for some reason it did not work. (EDIT: Setting layout_weight="1" ended up working, I'm not sure what I did wrong the first time) How can I make this work, or is there a better way to go about this?
<LinearLayout
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal" >
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#FF0000"/>
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#00FF00">
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#0000FF">
</LinearLayout>
This will give you three equally wide columns: to make it rows, change the orientation to vertical and swap the values of layout_height and layout_width for each listview. If you need to add the TextViews, you'll have to make each listview in this code either a RelativeLayout LinearLayout or FrameLayout, using same width/height/weight and arranging the ListView and TextView inside to taste. To do this most efficiently, use a Framelayout and use a margin on the listview to offset it from the TextView. You can place the TextView relative to the ListView inside the FrameLayout by using the layout_gravity in the TextView.
Ie (swapping the first "column"):
<FrameLayout android:orientation="vertical" android:layout_width="0dp"
android:layout_weight="1" android:layout_height="match_parent"
android:background="#FF0000">
<TextView android:text="Column!" android:background="#3Eff0000"
android:layout_height="40dp" android:layout_width="match_parent">
<ListView android:layout_marginTop="48dp" android:layout_height="match_parent"
android:layout_width="match_parent" android:background="#8Aff0000"/>
</FrameLayout>
Use 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="horizontal"
android:weightSum="3">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff89ff91">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#1"
android:id="#+id/textView"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_below="#+id/textView" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffff8177">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#2"
android:id="#+id/textView2"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_below="#+id/textView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffe85d">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#3"
android:id="#+id/textView3"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView3"
android:layout_below="#+id/textView3" />
</RelativeLayout>
</LinearLayout>

Android: Correctly position buttons inside layout

I have a following layout :
<LinearLayout //container, should adjust height based on CONTENT view height
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:clickable="false"
android:padding="20dp">
<RelativeLayout //this is the CONTENT view height
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="5">....</RelativeLayout>
...
<RelativeLayout //this is the button layout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2">
<Button android:layout_width="40sp" android:layout_height="40sp"/>
<Button android:layout_width="40sp" android:layout_height="40sp"/>
</RelativeLayout>
</LinearLayout>
I want the height of the container (LinearLayout) to be adjusted to contain all the views in the RelativeLayout (shown on the left, let's call it CONTAINER).
Then, there are two buttons in the RelativeLayout (shown on the right). I need to align them on top and bottom borders of RelativeLayot, correspondingly. What's really important, is that the height of the buttons' container should be the same (should correspond) to the height of the CONTAINER.
The problem is, if I try to use android:layout_alignParentBottom="true" and android:layout_alignParentTop="true" attributes for the buttons, they will stretch the container height, and it will take the whole screen height.
So, what magic should I use to do the trick? :)
Try to align your right relative layout top and bottom to the left one.
Try something like this:
<RelativeLayout //container, should adjust height based on CONTENT view height
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:clickable="false"
android:padding="20dp">
<RelativeLayout //this is the CONTENT view height
android:id="#+id/contentRL"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="5"
android:layout_alignParentLeft="true">....</RelativeLayout>
...
<RelativeLayout //this is the button layout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_alignTop="#id/contentRL"
android:layout_alignBottom="#id/contentRL"
android:layout_alignParentRight="true">
<Button android:layout_width="40sp"
android:layout_height="40sp"
android:layout_alignParentTop="true"/>
<Button android:layout_width="40sp"
android:layout_height="40sp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Use this
<?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"
android:baselineAligned="false"
android:clickable="false"
android:padding="20dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="5"></RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="2">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</LinearLayout>
Ok, based on a hint provided by Damien R. above I successfully accomplished the task by doing following:
Use RelativeLayout as a root with paramters layout_width="wrap_content", layout_height="wrap_content"
Use LinearLayout as a "wrapper" around container RelativeLayouts. This is because I need to lay out these containers using layout_weight attribute.
RelativeLayout layout_height should be fill_parent. No need to use android:layout_alignBottom="#id/..." and android:layout_alignBottom="#id/..." in the RelativeLayout attributes. This will only work if RelativeLayout is a child View of another RelativeLayout, and that's not the case, because I need to use LinearLayout's weight
The code is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:clickable="false"
android:padding="10dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ticketbackground"
android:id="#+id/ticket_layout"
>
<RelativeLayout
android:id="#+id/contentRL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:layout_alignParentLeft="true">
</RelativeLayout>
<!--second column-->
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3">
...
</RelativeLayout>
<!--third column with buttons-->
<RelativeLayout
android:id="#+id/sdfsdf"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2">
<Button...
android:layout_alignParentTop="true" />
<Button...
android:layout_alignParentBottom="true" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

Android relative layout children sizes

I have a relative layout inside linear layout, inside relative layout i have a image view and glsurface stacked on top of it, i want glsurface to have same size as imageview, how to accomplish this task??
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.zibi.ResizableImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center_horizontal"
android:src="#drawable/notepad" />
<com.zibi.zGLSurfaceView android:id="#+id/surfaceviewclass"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.zibi.travelersnotepad.zGLSurfaceView>
</RelativeLayout>
Try to set layout_align* attributes. TextView will cover ImageView. More about relative layout attributes
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
android:scaleType="fitXY"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#AFFF"
android:layout_alignRight="#+id/img"
android:layout_alignLeft="#+id/img"
android:layout_alignTop="#+id/img"
android:layout_alignBottom="#+id/img"
android:text="sample text"/>
</RelativeLayout>
You cannot use RelativeLayout to force size properties for children views inside it.
If you dont have a particular need for it, you can use LinearLayout instead and give both views the same weight:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.zibi.ResizableImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center_horizontal"
android:src="#drawable/notepad" />
<com.zibi.zGLSurfaceView android:id="#+id/surfaceviewclass"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0">
</com.zibi.travelersnotepad.zGLSurfaceView>
</LinearLayout>

layout_centerHorizontal is not centering

I have a relative layout, and inside it i place 3 items, 2 imageviews and one scrollview.
My layout is 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:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:baselineAligned="true"
android:background="#drawable/background">
<RelativeLayout
android:id="#+id/logosLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="16dp"
android:gravity="center">
<!-- An image will be placed here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#33ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/up" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_margin="8dp"
android:fadingEdgeLength="32dp"
android:scrollbars="none" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/hotelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/button_background"
android:contentDescription="#string/hotelBtnDesc"
android:gravity="center"
android:src="#drawable/icon1" />
<TextView
android:id="#+id/hotelBtnDescTxtVw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/hotelBtnDesc"
android:textColor="#ffffff"
android:textSize="14sp" />
<!-- more scrollview items -->
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
The above code produces the view shown here:
You may note that the arrows are not aligned in the center, but are slightly moved to the right. Why is that, and how can I fix it ? Note that i have already used android:layout_centerHorizontal="true" to my imageviews.
Thank you in advance
Its problem with your
android:layout_margin="8dp"
remove it from both scrollview and imageView
and pass it to RelativeLayout direct.
or add
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip"
in your RelativeLayout.
and pass
android:layout_centerHorizontal="true"
to your scrollview
they are aligned to the center if you put the marginRight into consideration, try adding android:layout_margin="8dp" to the arrows.
u need to set image view that is under the Relative layout set this image view width fill parent.
Try removing android:layout_weight="1" from your RelativeLayout and see if it works.
In your LinearLayout, the attribute android:orientation="horizontal" causing your display to be aligned horizontaly. Therefore your RelativeLayout is in center but since its shared with another layout thats why you cant note the difference. If you completely remove the first RelativeLayout (the one with id logosLayout) then i hope you'll see the second layout in center.
So, first you need to define the hierarchy of layout you require and then adjust your views accordingly.
It seems problem with your android:layout_margin="8dp" for your scrollview only and pass it to RelativeLayout direct but instead of using margin use padding = "8dp".

Categories

Resources