How to get UI to look right - android

I am having a problem getting the ListView to display properly. It currently looks like this with the following xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/favs_main">
<Button
android:text="Return to Home"
android:id="#+id/return_button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:textSize="15sp"/>
<ListView
android:id="#+id/favsListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"
android:layout_above="#id/return_button"/>
</RelativeLayout>
If you notice the list is down on the screen. I want it to be just below the favorites text instead of just above the return to home button. The catch however is that I always want the button to show and the list view to just occupy the space between the favorites text and the button. The text is from the background image so I can't just align below that. So even with 100 items I would still like to show the button.
Thanks for the help

If the word "favorites" is part of a background image as suggested in the RelativeLayout's background attribute, then you won't be able to align an element below it without using hacky margins or something to that effect. If you want to align an element below the word, separate that into a different ImageView and set the layout_below of the ListView to the id of that ImageView. To get an element to align properly in between two other elements, use a combination of layout_above and layout_below.

Couldn't you just align the ListView to the Parents' Top and set a margin for the ListView so that it is below the Text of the Background?
Also you could change the background to provide the Text in an ImageView and align the ListView to be below the ImageView.

Instead of trying to make a persistent View always show up under the ListView and align it (which you can do, see other suggestions), you might want to take a look at using a footerView:
http://developer.android.com/intl/de/reference/android/widget/ListView.html#addFooterView
"Add a fixed view to appear at the bottom of the list."
Note that it can be another layout too if you eventually need to do more than just one Button.

this my listview which have multiple entries and textview and button fixed in the botton. i haven't inserted background. try this hope it will help.
http://www.techuv.com/layout-with-butoon-and-textview-fixed-in-bottom/

You could use a simple LinearLayout and use the weight attribute on the ListView :
<?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="fill_parent"
android:background="#drawable/favs_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ListView
android:id="#+id/favsListView"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"/>
<Button
android:text="Return to Home"
android:id="#+id/return_button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:textSize="15sp"/>
</LinearLayout>

Related

ListView not displaying right

So i`m coding this custom listView Adapter. The adapter AXML looks like this:
The problem is that when i compile and run in emulator, the ListView item turns into this :
Can anyone help me figure out what is happening? Maybe help me fix it?. If you need any code let me know.
UPDATE: AXML file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="ABC 232"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/shopName"
android:textColor="#3c3c3c"
android:textSize="22dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2"
android:weightSum="1">
<TextView
android:text="~800m away"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/distance"
android:layout_marginLeft="0.0dp"
android:textColor="#3c3c3c"
android:layout_weight="0.5"/>
<TextView
android:text="Total: 12.45 RON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/total"
android:layout_gravity="right"
android:layout_marginLeft="22.0dp"
android:textColor="#3c3c3c"
android:layout_weight="0.5"/>
</LinearLayout>
</LinearLayout>
Please change all the text views width and height attribute to wrap_content. Specially for text view for shopName.
You can also remove linearLayout1, linearLayout3 and linearLayout4. Since they added noting important to your view.
You do not need to encapsulate each TextView in a LinearLayout. If you desire padding around the font, the TextView has padding attributes that will achieve the same effect in a cleaner manner.
If you clean up the code in this way, the issue with views not appearing may appear clearer.
It could be much simpler, use relative layout and align all three text one another.
Steps to design:
1) Take Parent Relative layout and make it centre vertical and horizontal
2) Place text1 and make align top of parent and give margin or padding from left
3) Place text2 below of text1 and give padding or margin from top.
4) Place text3 toRight of text1 or text2 or make make it centre vertical and horizontal of parent or you give margin left. it is your choice which once you choose.
Let me if you want more help. :)GlbMP

Android Layout proplem

I have a layout contain one image and 3 text field
I've tried to align the image to right and text field to left but I've failed
I've used
android:layout_gravity="right" for image and left to text but it did not work also I've used end and start in gravity with no success
this is the layout code:
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:background="#drawable/card_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/listthumb"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:contentDescription="Rss video thumbnail"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/listtitle"
style="#style/listTitle"
android:maxLines="3"/>
</LinearLayout>
<TextView
android:id="#+id/shortdescription"
android:layout_width="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/listpubdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11dp"/>
</LinearLayout>
</FrameLayout>
Try to use a <RelativeLayout> instead of a <LinearLayout>
With the RelativeLayout you could place a widget depending on the position of another widget
Here the Relative Layout description
Hope this will help, I have not had time to test....
One linear layout should have vertical orientation and contain the 3 text fields.
One linear layout should have horizontal orientation and contain both the above linear layout and the image.
To push two views to the edges of the screen, you can also give each a left/right margin and then put a blank view with weight = 1 in between them.
Please read a bit more on how layouts work on Android and the different types available to you. A LinearLayout will stack the containing Views either Horizontally or Vertically one after the other. A FrameLayout is simply a container and the items within have to position themselves. RelativeLayout allow you to position your views with a relative reference to other views (in your case, you can position your ImageView, and then your 3 TextViews relative to where the ImageView is).
If you can use LinearLayout instead of RelativeLayout, you should do so, as RelativeLayout is always slower, due to having to perform two passes prior to rendering as it needs to measure each view and then also perform the layouts based on that. You might be looking for something like (pseudo-code):
<LinearLayout orientation=horizontal>
<LinearLayout orientation=vertical>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<ImageView />
</LinearLayout>
You have not described your question well . Check below code if it works .
You just forgot to add orientation in linear layout containing one text view and a Image view .
Add Orientation to Your Linear Layout.

listview item row with textview and imagebutton only show ripple effect on imagebutton

I have my listview, with a text and a ImageButton near to it, should be on the right side in the future. I want to see a ripple effect when i touch on the text or white field. How can i do this?
At the moment, theres only a ripple effect when i touch the image button.
Thats my code for list_item, where i set up the layout for a row:
<?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"
>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/text"
android:elevation="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15dp"
android:textColor="#android:color/black"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:layout_marginTop="40dp"
android:paddingStart="?android:attr/listPreferredItemPaddingStart"
android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_delete_black_24dp"
android:tint="#F44336"
android:backgroundTint="#color/background"
/>
</RelativeLayout>
I found out, that i have to use a LinearLayout, but i dont know, how i have to use it correctly. My ListView looks like this:
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:divider="#E0E0E0"
android:dividerHeight="1dp"
android:drawSelectorOnTop="true"
>
</ListView>
Here's a screenshot how it looks currently:
Any suggestions to fix? ^^ Thanks in advance
EDIT:
I forgot to say, that the OnItemClickListerner from listview, doesnt work anymore, when i have defined the imagebutton
As per my knowledge, Ripple is only shown to clickable views (ListView's row, Buttons or other clickable objects). As per material theory animation shown from those objects which responds (I don't think that TextView needs to respond on click). In your case TextView is not showing because simply it dosen't work normally but it works on buttons (ImageButton is Button).
If you still want this simply use one of these third partly libraries -
https://github.com/lgvalle/Material-Animations
or
https://github.com/balysv/material-ripple
Its the easiest way!

Android - Arranging Buttons at Foot of Screen

An app I am working on needs to have two buttons anchored to the bottom of the screen. The technique I've used in the past is to declare a RelativeLayout for the buttons within a parent RelativeLayout (height = fill_parent) and set align_parent_bottom to true. This is declared first and has an id so the next child layout can declare itself to be above the buttons' RelativeLayout.
However, the screen I'm currently working on has a strange problem - there is a large empty gap before the first View object appears:
Here is my layout XML
Can anyone spot where my problem is? Is there a better way to arrange my buttons?
Try this Code , It will work .
Problem is android:layout_above="#id/alarm_details_buttons_layout"
in Scroll View
Edited Code
I checked your code and here is the modification in your buttons layout:
<RelativeLayout
android:id="#+id/alarm_details_buttons_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<Button
android:id="#+id/alarm_details_return_to_list_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="your text here"
android:textSize="15sp" />
<Button
android:id="#+id/alarm_details_update_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/alarm_details_return_to_list_button"
android:state_enabled="false"
android:text="your text here"
android:textSize="15sp" />
</RelativeLayout>
fixed. http://pastebin.com/ucHwzJQP
Note i removed all "#string/", will need to be added back.
I solved the 'gap' problem. As I have set the scroll view to be positioned above the buttons RelativeLayout, I also had to force it to align with it's parent's top:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#id/alarm_details_buttons_layout"
android:orientation="vertical" >

Android Image Button Layout

Could someone please explain how android uses image button sizes? I seem to be getting odd behavior with my buttons.
I have the following code as an example. I have two buttons that sit at the bottom of my layout. These buttons share 50% of the total width as they sit side-by-side.
Within Abode PS, the two images (used for these two buttons) are actually 2" x 38" or 495x94 pixels. This size is of course larger than the available space in the layout.
I am using edge effects on my buttons to give them definition. Android is cutting the edges off my buttons in order to center then in the available layout space.
This particular layout that I am working on will only allow vertical orientation, in case that helps.
Thank you.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/ImageButton1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:layout_weight="1"
android:background="#FF000000"
android:src="#drawable/map4" >
</ImageButton>
<ImageButton
android:id="#+id/ImageButton3"
android:layout_width="0dip"
android:layout_marginRight="1dip"
android:layout_weight="1"
android:background="#FF000000"
android:src="#drawable/buy"
android:layout_height="wrap_content"
android:layout_marginLeft="1dip">
</ImageButton>
</LinearLayout>
</RelativeLayout>
Try using an ImageView and android:scaleType:
http://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType
Experiment the values available to see what is the best combination!
Then add a listener to behave like a button...
try use the button and make it with empty text after this set the background .
or :
use the image button and put the source and the background the same image to get button exactly like the image
**you can use the selector to make some beauty for application buttons
Google it it's easy to use ;)

Categories

Resources