I dont get it - I cannot align the RelativeLayout in the ListView - that is I want to center the RelativeLayout that holds and image and some textviews.
The RelativeLayout is still on the lefthand-side of the screen, though the listview-width should match the parent. What could be wrong?
Here's the xml, for the list item layout in the adapter.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout_os_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/os_listview_imageview1_id"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_margin="10dp"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher_background"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/os_listview_imageview1_id"
android:orientation="vertical"
android:layout_centerVertical="true">
<TextView
android:id="#+id/os_listview_name_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nougat"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/os_listview_version_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:text="7.0"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/os_listview_api_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="24"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/os_listview_release_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="2016"
android:layout_centerVertical="true"/>
</LinearLayout>
</RelativeLayout>
And the ListView is here in the following layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
tools:context="se.listview.stude.listviewtest180303.MainActivity">
<ListView
android:id="#+id/os_listView_id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Edit: this is how it looks the list item in the design-mode in android-studio.
Use this as rootLayout of your item :-
<RelativeLayout
xmlns:android
="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout_os_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
>
You would get the same output..
Also in your activity put listView width as match_parent
I think here's the layout that you want. Keeping it as simple as possible.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout_os_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/os_listview_imageview1_id"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/os_listview_imageview1_id"
android:orientation="vertical">
<TextView
android:id="#+id/os_listview_name_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nougat" />
<TextView
android:id="#+id/os_listview_version_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7.0" />
<TextView
android:id="#+id/os_listview_api_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="24" />
<TextView
android:id="#+id/os_listview_release_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2016" />
</LinearLayout>
</RelativeLayout>
Related
Currently my listview design looks like
But I want to make it look like below image
Where image will be on right hand side, title in Bold and Subtitle just below it. What changes do I need to make in my layout, Below is my code. Thanks in
advance.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tom Cruise"
android:textColor="#166CED"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tvDescriptionn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#009A57"
android:text="Description" />
</LinearLayout>
For better result to manage your view use relativelayout.
You can manage your layout as example give below-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
card_view:cardBackgroundColor="#color/grey">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:src="#drawable/arrow"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/arrow"
android:orientation="vertical" >
<TextView
android:id="#+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Murdochs needed counselling after hacking scandle says magazine"
android:textColor="#166CED"
android:padding="5dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tvSubtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/ivImage"
android:padding="5dp"
android:text="NEW YORK:The British phone hacking scandle"
android:textColor="#000"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher"/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I would suggest you to use relative layout . this will make your layout more flexible to edit. I have suggested a layout below , give it a try .
<?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">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="Tom Cruse"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#166CED" />
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/tvName"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tvDescriptionn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvName"
android:layout_margin="10dp"
android:layout_toLeftOf="#+id/ivImage"
android:text="Description"
android:textColor="#009A57" />
</RelativeLayout>
Please do accept this answer if it worked for you.
You have to use flowTextView jar to your project. Here you can find the jar:
https://github.com/deano2390/FlowTextView
Inside LinearLayout, place textview at the top to show the title. Make height wrap_content and width match_parent.
Below this, add linearlayout which contains textview and image. set orientation horizontal to inner liner layout.
For better placing you can always used relative layout. for example
<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="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.testlayout.MainActivity" >
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<TextView
android:id="#+id/descriptionText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:text="description"/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:layout_toLeftOf="#+id/rightArrow"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/rightArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:src="#drawable/ic_launcher"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I have JPGs of various sizes.
I created a custom listview with an imageview and two textviews.
I want to align the imageview to the top left of the LinearLayout, but nothing I have tried everything, but nothing works.
<?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">
<ImageView
android:id="#+id/petPhoto"
android:layout_gravity="top|left"
android:layout_width="150dp"
android:layout_height="150dp" />
<LinearLayout
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/petName"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/petDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Try this,
Change your LinearLayout to RelativeLayout and add the alignParentTop property to top,
<?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="wrap_content"
android:padding="#dimen/card_padding"
android:background="#color/card_background">
<ImageView
android:id="#+id/thumbnail"
android:src="#drawable/thumbnail"
android:layout_width="72dip"
android:layout_height="72dip"
android:scaleType="centerCrop"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Card title"
android:layout_toRightOf="#+id/thumbnail"
android:textAppearance="#android:style/TextAppearance.Holo.Medium"
android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Card description"
android:layout_toRightOf="#+id/thumbnail"
android:layout_below="#+id/title"
android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"
android:textAppearance="#android:style/TextAppearance.Holo.Small"/>
</RelativeLayout>
Output of your code like this,
I have a listView, and view of each item of the list should be like this (a background image and group name) :
but when i set layout_centerInParent="true" to linearLayout, it placed in center of screen(not in center of image).like this :
and there is my xml :
<?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="wrap_content"
android:background="#444">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/linear_category_name"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingRight="16dp"
android:paddingLeft="16dp">
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:text="Gold"/>
</LinearLayout>
</RelativeLayout>
How can i place linearLayout in center of relaytiveLayout ??
For your scenario, I think it's a lot easier to use FrameLayout instead.
<?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="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/gold_image"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/white_border"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gold"
android:textColor="#android:color/white"
android:textSize="18sp"/>
</LinearLayout>
</FrameLayout>
I've tested this and it looked exactly like what you're trying to achieve.
Try this.
<?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="wrap_content"
android:background="#444">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test/>
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:text="Gold"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Try this
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:src="#drawable/test"/>
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:layout_centerInParent="true"
android:text="Gold"/>
So far this is the result of my layout
I am trying to put the textview at the bottom of my ImageView (not below it). The textview should BottomAlign with the ImageView.
The image of my ImageView is a square. If the content of the textview turns out to be longer that the width of my ImageView, the content should continues to the next line.
At the moment i don't care if the content of the ImageView does not scaled proportionally (i.e. gets stretched, etc).
This is the XML that i have:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:id="#+id/iconItem"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignBottom="#+id/textItem"
android:scaleType="fitXY"
android:padding="0dip"
android:src="#drawable/shout_ic"/>
<TextView
android:id="#id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="11sp"
android:text="Motorcycles"
android:textColor="#FFF"
android:background="#8888"/>
</RelativeLayout>
How can i achieve the result i want?
EDIT 1:
I think i am making a progress... (but not exactly like what i have in mind
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:id="#+id/iconItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:padding="0dip"
android:src="#drawable/thumbqoo_launcher_ic"/>
<TextView
android:id="#+id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignBottom="#+id/iconItem"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="11sp"
android:text="Motorcycles"
android:textColor="#FFF"
android:background="#8888"/>
</RelativeLayout>
Change your parent layout to FrameLayout with orientation vertical like this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >
<ImageView
android:id="#+id/iconItem"
android:layout_width="80dp"
android:layout_height="80dp"
android:padding="0dip"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#8888"
android:gravity="center"
android:layout_gravity="bottom"
android:text="Motorcycles"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFF"
android:textSize="11sp" />
</FrameLayout>
remove this line android:layout_alignBottom="#+id/textItem" from your imageview and try adding line android:layout_alignBottom="#+id/iconItem"in your TextView
set width of ImageView to width of your row layout
http://i.stack.imgur.com/HUY4o.png Check the sample image...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/album_item"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/cover"
android:layout_width="148dp"
android:layout_height="148dp"
android:src="#drawable/empty_photo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cover"
android:background="#70000000"
android:padding="6dp" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >
<ImageView
android:id="#+id/iconItem"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignBottom="#+id/textItem"
android:padding="0dip"
android:scaleType="fitXY"
android:src="#drawable/shout_ic" />
<TextView
android:id="#id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#8888"
android:gravity="center"
android:text="Motorcycles"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFF"
android:textSize="11sp" android:layout_alignBottom="#id/iconItem"/>
</RelativeLayout>
Hi I'm newly entered in this project. How to reduce listview text view distance please...
xml code:
<?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="wrap_content"
android:orientation="horizontal" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/thumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/thumb"
android:layout_toRightOf="#+id/thumb"
android:layout_centerVertical="true"
android:layout_marginTop="1000dip"
android:textColor="#ffffff"/>
<TextView
android:id="#+id/detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/thumb"
android:layout_alignParentBottom="true"
android:textColor="#ffffff" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imgArrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
You have given android:layout_alignParentBottom="true" to the below text.so it will set itself to the bottom of the layout.Either remove this and give marginTop to the this text or give marginTop to the above text.Here is only problem,look at it.
Use this XML as the list_item of your listview and make changes wherever needed
<?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="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="aaaaaaaaaaaaaaaaa"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bbbbbbbbbbbbbbb"/>
</LinearLayout>
</LinearLayout>
i dont know whether this is the only reqirement of yours though i have tried to shorten the distance between them.Try it n Hope this will help you.