Is there any way where I can have default arrows in a list view,without reading them as an array from the xml? If I use ImageViews for arrows,then they might become really ugly. I am bad in graphic design.
Thank you.
EDIT
I found this site that could be useful to many people.
material design icons
You can always use this Unicode codes to draw arrows as text (if that is what you want)
U+2192 →
U+25B6 ▶
U+2794 ➔
More codes here: http://unicode-table.com/en/sets/arrows-symbols/
You can use custom layout to make the arrow as a part of the background of the list view row, look here
you will be able to do something like this:
Just follow the instructions
If you are bad at graphic design you can use free resources from net instead.
Here you have the Google free icon resources you can use with material style where you can find some arrows
Google icon pack
Look at this for android icons for different uses https://romannurik.github.io/AndroidAssetStudio/. You can use it for your list item row. If you want arrow like ios then create row ui and take imageview for arrow.
Row XML :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tvText"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Your Text"/>
<ImageView
android:id="#+id/ivArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/arrow" >
</ImageView>
</RelativeLayout>
Related
I use latest Android Studio and SDK. In preview & real device i see this:
My code:
<?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="match_parent"
android:layout_height="match_parent"
tools:context="com.myappname.view.AboutActivity">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listViewAbout" />
</RelativeLayout>
How i make subtitle text color is gray? Like this:
I'm going out on a limb and assume that you're using the row layout simple_list_item_2.xml (based on the screenshot) which gives you two rows. The problem, if you may call it that, is that depending on the SDK version, the styling for this layout has changed.
On SDK 23, it looks like this:
However, on say SDK 19, it looks like this:
Why?
To understand this we first need to take a look at the xml that generates the rows from simple_list_item_2.xml, you'll see it's a pretty simple layout that uses the now deprecated view TwoLineListItem but that's just a plus on why to use your custom layout.
<TwoLineListItem xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/listPreferredItemHeight"
android:mode="twoLine"
android:paddingStart="?attr/listPreferredItemPaddingStart"
android:paddingEnd="?attr/listPreferredItemPaddingEnd">
<TextView android:id="#id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textAppearance="?attr/textAppearanceListItem" />
<TextView android:id="#id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text1"
android:layout_alignStart="#id/text1"
android:textAppearance="?attr/textAppearanceListItemSecondary" />
</TwoLineListItem>
The reason is because of the way the style textAppearanceListItemSecondary is resolved in each SDK version. The style is what gives the text the size, the color, etc. The evolution of the interface in Android has given birth to a huge ecosystem of themes and relying on the default styling will result in inconsistencies like the one you stumbled upon.
What to do about it?
You should use your own layout for this to allow for uniform styling across versions. To do so, please refer to any of the multiple questions covering this matter. But in short it just means creating a layout file, call it for example custom_row.xml and having the layout look exactly as you please. This also gives you total control over placement of the items, extra Views that you may need, and overhead in terms of coding is minimal compared to the SimpleAdapter or ArrayAdapter that perhaps you were using.
Note
You should consider moving your code towards RecyclerView instead of ListView if you haven't already.
You can set Textview property
android:textColor="#color/grey"
in you Adapter layout to change colour of your sub item
Hope this will help
I am trying to make a nice interface to control the input of the number of cars to my application..
I would like to have something like the icon of the car and then an upper arrow and lower arrow, so the user could control the amount of the cars in the application.. you get it?
The design would be something like this picture:
But I don't know if the Android Library was something already to handle this.. is there something ? Or do I need to make the widget myself ?
If I need to do it myself what would be the best way ? Using 3 images, and adding a image listener to the arrows images ? And how would I put it on the screen aligned like that ? Imagine that I would have cars and bikes.. and would be in the same line ?
Thanks alot in advance !
Let's say you make 3 separate images stored in your drawable folders: upArrow.png, downArrow.png, and car.png (or whatever type of image, your choice). To make them vertically aligned like that, you can place them in a linear layout with a vertical orientation. Since you want the arrows to be clickable, I would make them ImageButtons and use the arrow images as backgrounds for the buttons.
<LinearLayout
android:id="#+id/layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/upButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/upArrow.png"
android:onClick="incrementCars" />
<ImageView
android:id="#+id/carImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sample"
android:contentDescription="This is a car" />
<ImageButton
android:id="#+id/downButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/downArrow.png"
android:onClick="decrementCars" />
</LinearLayout>
You can do the same thing for bikes, just switching out the center image and the onClick methods.
On an iOS App I saw such a Button:
The same I would like to do in Android, how could I achieve this?
What I tried is the following code:
<Button
android:id="#+id/widget41"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Email1 testmail#gmail.com"
android:textStyle="bold" />
Looks something like that:
Well just a normal (ugly looking) Button. I have no idea, how I could style it like in iOS. Any suggestions or links would be appreciated!
The best solution would be to create your own custom view that behaves like the iOS counterpart (though, as other users have mentioned, Android does have it's own design guidelines, and the view that you are seeing is an iOS implementation that is designed for that platform).
If you look at the iOS image above (a copy of yours with some parts highlighted), I have split it up into sections.
You could use an Android ViewGroup like a LinearLayout to create the overall image, and give the LinearLayout a border or background (which can be a bitmap image of a rounded rectangle for example (See Android Nine Patch for an example of how to make this fit multiple screens).
Firstly, for the mail icon you would need a LeftAligned ImageView
with appropriate dimensions.
Next up we have a Bold TextView containing the text "Email1".
This is followed by another TextView which is blue and uses the
elipsize property (as defined in an Android XML layout) to create
"..." at the end once the text has reached the max width it can
consume. (Use android:ellipsize="end" in the XML)
Finally we have an indicator image, which again can be an ImageView
sized appropriately.
You could also achieve this with a RelativeLayout, which would allow you to RightAlign the indicator image, LeftAlign the mail icon, and allow the text to fill the space in between that it can get hold of.
Example of Nine Patch use for the background here
That is UITableView in iOS(just like ListView in android). It depends on the list item design you do it. There is no such Button Control in Android.
You should design your own button to looks like iOS one.
Android has it own design guidelines:
http://developer.android.com/design/patterns/pure-android.html
Well, as others have clearly mentioned there is no default Button in Android like this, and for your info neither is in iOS. Its all about the design. Anything is possible, in the end it all comes to how far are you willing to go to achieve it.
Below is a simple code, that will be close to your design.
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:background="#drawable/text_background"
android:drawableLeft="#drawable/envelope"
android:drawablePadding="10dp"
android:drawableRight="#drawable/right_arrow"
android:ellipsize="end"
android:gravity="center_vertical"
android:text="#string/email" />
There can be other ways also, like that whole view could be a ViewGroup, either a LinearLayout or a RelativeLayout and there could be multiple TextViews and ImageViews inside that.
Here is a tutorial for creating stylized android buttons. You can round the corners and change the background colors to look like the buttons in ios.
Here is a similar question.
Hope this helps.
I'm trying to make an Android layout like the one below. I have a couple of questions:
1 - what is the element called that FB uses for posts? Ie, it doesn't look like a text view, but the element looks like it separates each post with a divider line. Also, the text style is different for a person's name and how long ago they posted. I'm looking to duplicate this (minus pictures) but I can't find the right UI elements.
What is the element called at the bottom? It's like a static menu. IE, it's the same as a menu but instead of pressing "menu" to access it, it's on the page at all times.
Finally, are there good tutorials/examples on how to make nice looking, professional layouts like the apps on the market? The tutorials that I've found on layouts are really basic. I'd like to understand what elements exist, what all of the attributes mean and see examples, etc. So far I'm only able to see the capabilities from other applications. I'd like to have a handbook or some type of some type of reference manual to go to.
For the "fancy" text views you can make a linear layout that hosts a <RelativeLayout>:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0">
<ImageView
android:id="#+id/userPhoto"
android:layout_height="64dip"
android:layout_width="64dip"
/>
<TextView
android:id="#+id/userFullName"
android:layout_height="25dp"
android:layout_width="fill_parent"
android:layout_marginLeft="70dp"
/>
</RelativeLayout>
Once you have a relative layout you can add different views inside of that to create a sort of customeized view.
As far as good examples I would look at this book. It's easy to understand and very helpful on such things.
I found a really helpful tutorial to solve a problem in ListView Row design a bit like yours. It goes a bit further explaining how to do Async Image loading but the first part should help you.
Also, I might be wrong (I am still a bit new to this) but I think the answer above lacks a TextView for the actual message besides the userName and the relative positions of the elements since it is a relative layout. Something like:
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
android:textSize="17dp"
android:textStyle="bold" />
<!-- actual message -->
<TextView
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/userName"
android:layout_marginTop="1dip"
android:layout_toRightOf="#id/userPhoto"
android:textSize="15dp" />
The key in organizing a relative layout is:
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
and
android:layout_below="#id/userName"
android:layout_toRightOf="#id/userPhoto"
I might be wrong but if it helps, great! Just adding my bit to the other answer.
Cheers
I am looking for a view or some sort of information regarding the bottom bar in default applications of Android such as Email, or Unlock pattern as shown in the picture below. I have not been able find anything about this on Androids site nor from Google searches.
Image: http://img11.imageshack.us/i/viewdn.jpg/
I believe that Christopher is correct; there is no special widget to create the bar in your image. However, if you want to emulate it, you can create a layout and use the style style="#android:style/ButtonBar". That will give you the light gray background and the correct margins.
I don't believe there's any standard view for the button bar used at the bottom of these apps; it's generally just two Button items placed together in a LinearLayout or RelativeLayout.
For example, looking at the Android Open Source Project, you can see the button bar for one of the email app setup screens is defined as two plain old Button objects.
However, it is surprising that Google didn't abstract more of the common stuff into an Android theme or sublayout, rather than having the same views and attributes in each layout XML.
From: http://code.google.com/p/k9mail/source/browse/k9mail/trunk/res/layout/account_setup_basics.xml?r=1314
<RelativeLayout
android:layout_marginTop="-45dip"
android:padding="0dip"
android:layout_alignParentBottom="true"
android:gravity="bottom|right"
android:background="#android:drawable/bottom_bar"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<Button
android:id="#+id/manual_setup"
android:text="#string/account_setup_basics_manual_setup_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginBottom="-4dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="false"
/>
<Button
android:id="#+id/next"
android:text="#string/next_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawableRight="#drawable/button_indicator_next"
android:layout_marginBottom="-4dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="false"
/>
</RelativeLayout>