Custom Header in Mono for Android App - android

I'm working on my first app using Mono for Android. I feel like I'm trying to do something basic but I'm not having any luck. Essentially, I want to have a custom "banner" at the top of my app. The banner is simply a black rectangle with two words: "Hello" and "World". Hello is in red, and World is in Blue.
I'm not getting anywhere with this. Does anyone know how to do this?
Thank you!

Here is a very basic layout example to get you started.
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:padding="5dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:text="Hello"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FF0000" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="World"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#0000FF" />
</LinearLayout>
<!-- The rest of your activity layout goes here. -->
</LinearLayout>

Related

How to make the ellipsize textview and imageview show correct

I'm working on a layout file. This layout requires that the icons should always after the single line TextView. If the TextView is too long,then the TextView is ellipsize and the icons should be shown.Such as:
situation1: [[textview][icon1][icon2] ]
situation2: [[textview......][icon1][icon2]].
I have found the similar case in here, but it doesn't work for me.
My current code is something like this:
<RelativeLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="left">
<!-- icon show here -->
<LinearLayout
android:id="#+id/icons"
android:paddingLeft="5dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|left">
</LinearLayout>
<!--text show here-->
<TextView
android:id="#+id/text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="#id/icons"
android:singleLine="true"
android:ellipsize="end"
android:gravity="left"/>
</RelativeLayout>
The LinearLayout is used to add icons when fetch data from server. Android's layout preview is like above situation,but the apk runs on device like this this:
situation1: [ [textview][icon1][icon2]]
situation2: [[textview......][icon1][icon2]].
I'm really confused. Anybody has some ideas about this situation? Thanks in advance.
I found the code works fine after Android 4.3(include 4.3,I haven't test 4.2),it doesn't work below Android 4.3.The reason I think is that different Android systems parse these layout params in different ways.Such as some version think the parent container layout's params is more important than the child view.
Finally, I got my stupid situation.But it works.I will give you code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--text show here-->
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:layout_weight="1" />
<!-- icons show here -->
<LinearLayout
android:id="#+id/icons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
</LinearLayout>

Content goes off screen in Android 4.1.1

i noticed recently when i checked my app in android 4.1.1 that my content goes off the screen but works very well in 4.2.2 above. Please check the screenshot.
and yes, its a bilingual app (English/Tamil). After few research i found out that English ListItem works well but Tamil causes problem
Layout Code :
activity_latest_news.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
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=".LatestNews" >
<ListView
android:id="#+id/LatestNewsView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
</ListView> </RelativeLayout>
latest_news_single_view.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="match_parent" >
<TextView
android:id="#+id/LatestNews_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/latest_news_dummy_title"
android:textSize="15sp" />
<TextView
android:id="#+id/LatestNews_description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#id/LatestNews_title"
android:text="#string/latest_news_dummy_desc"
android:textColor="#color/getCCC"
android:textSize="14sp" />
<TextView
android:id="#+id/LatestNews_posted_on"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/LatestNews_description"
android:paddingLeft="3dp"
android:paddingTop="2dp"
android:text="#string/latest_news_posted"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#911991" />
<ImageView
android:id="#+id/latest_news_addfav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/LatestNews_posted_on"
android:src="#drawable/star"
android:layout_alignParentRight="true" />
</RelativeLayout>
Is this Unicode issue? or layout problem?
And also please take a look at both emulator. if u notice, in 4.1.1 the theme is like greyish white while in 4.2.2 is complete white.. and even the drawable (refresh image) is looking weird (Yea, i know i haven't setup separate drawable for mdpi,hdpi etc) But what causes the difference? Is this App Theme issue?
Any help will be much appreciated. Thank you!
Try changing your layouts as below and check what happens.
your listview layout :
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LatestNewsView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
Row 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="wrap_content" >
<TextView
android:id="#+id/LatestNews_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/latest_news_dummy_title"
android:textSize="15sp" />
<TextView
android:id="#+id/LatestNews_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/LatestNews_title"
android:text="#string/latest_news_dummy_desc"
android:textColor="#color/getCCC"
android:textSize="14sp" />
<TextView
android:id="#+id/LatestNews_posted_on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/LatestNews_description"
android:paddingLeft="3dp"
android:paddingTop="2dp"
android:text="#string/latest_news_posted"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#911991" />
<ImageView
android:id="#+id/latest_news_addfav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/LatestNews_posted_on"
android:src="#drawable/star"
android:layout_alignParentRight="true" />
</RelativeLayout>
Image problem:
as you can see one emulator is Nexus S and one is Nexus One so there is a difference in their ppi values which is causing the problem. you need to set appropriate image for corresponding density.
Update :
check this it may help
Try and manually specify the number of lines for each text view. For instance, change the first TextView to look like this:
<TextView
android:id="#+id/LatestNews_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:singleLine="false"
android:maxLines="3"
android:ellipsize="end"
android:text="#string/latest_news_dummy_title"
android:textSize="15sp" />
Note that I added:
android:singleLine="false" <!-- Allows content to wrap into other lines -->
android:maxLines="3" <!-- Makes maximum no. of line wraps = 3 -->
android:ellipsize="end" <!-- Adds an ellipsis (...) to the end of line-->
Side note: you're mixing fill_parent and match_parent. They do the same thing. For more consistency, stick to match_parent.
EDIT: Also, get rid of layout_alignParentRight="true". I don't think you need it because the width is already going to fill the parent view. Using layout_alignParentLeft="true" is sufficient since both English and Tamil are written left-to-right.

How to do a bar with a similar style to Search in android

I've tried researching about this for many days. I've really really no idea how to start on doing a very similar style as below. I know it consists of one button and a edittext. However, i do not know how to begin with. Do anybody have a sample code for similar styled bar?
The android search bar is a mix of native and custom elements.
The Layout used by the search bar can be found in the android source code at this path (for the 2.1 version I can on my hard drive):
frameworks/base/core/res/res/layout/search_bar.xml
You can found the detail of the layout below:
<view
xmlns:android="http://schemas.android.com/apk/res/android"
class="android.app.SearchDialog$SearchBar"
android:id="#+id/search_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:focusable="true"
android:descendantFocusability="afterDescendants">
<!-- Outer layout defines the entire search bar at the top of the screen -->
<LinearLayout
android:id="#+id/search_plate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="12dip"
android:paddingRight="12dip"
android:paddingTop="7dip"
android:paddingBottom="16dip"
android:background="#drawable/search_plate_global" >
<!-- This is actually used for the badge icon *or* the badge label (or neither) -->
<TextView
android:id="#+id/search_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dip"
android:drawablePadding="0dip"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorPrimaryInverse" />
<!-- Inner layout contains the app icon, button(s) and EditText -->
<LinearLayout
android:id="#+id/search_edit_frame"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/search_app_icon"
android:layout_height="36dip"
android:layout_width="36dip"
android:layout_marginRight="7dip"
android:layout_gravity="center_vertical"
/>
<view class="android.app.SearchDialog$SearchAutoComplete"
android:id="#+id/search_src_text"
android:background="#drawable/textfield_search"
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1.0"
android:paddingLeft="8dip"
android:paddingRight="6dip"
android:drawablePadding="2dip"
android:singleLine="true"
android:ellipsize="end"
android:inputType="text|textAutoComplete"
android:dropDownWidth="fill_parent"
android:dropDownHeight="fill_parent"
android:dropDownAnchor="#id/search_plate"
android:dropDownVerticalOffset="-9dip"
android:popupBackground="#android:drawable/search_dropdown_background"
/>
<!-- This button can switch between text and icon "modes" -->
<Button
android:id="#+id/search_go_btn"
android:background="#drawable/btn_search_dialog"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
/>
<ImageButton
android:id="#+id/search_voice_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="8dip"
android:background="#drawable/btn_search_dialog_voice"
android:src="#android:drawable/ic_btn_speak_now"
/>
</LinearLayout>
</LinearLayout>
</view>
All the drawables and styles are also in the source code.
To make exactly the same thing, you will have to copy the different elements in your own project.
You may also have to have a look the different classes:
SearchDialog.SearchBar
SearchDialog.SearchAutoComplete
I assume from your question that you want to put EditText and Button in the same line as Google Search, not exactly google search implementation. Use the following snippet in your main LinearLayout of android Activity.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
If you don't mean what i perceive , let me know .
Regards

Disappearing Views

I have a fairly standard layout for the first screen of the setup wizard on my app. I have been developing it with a solid color background which I defined in a theme. I have recently got a png file that I would like to used as the background. This works fine on all screens apart from the 3 screens for the setup wizard. The problem being that only the first textview is drawn. I used the hierachy viewer and the other views where not listed.
These are the only screens that use an include statement so I suspect this may be the root of the problem but even if I take out the include statement I still have the problem.
<?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">
<TextView
android:id="#+id/welcome"
android:text="#string/welcome"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:gravity="center_horizontal"
android:textColor="#433A33"
android:textStyle="bold">
</TextView>
<ImageView
android:id="#+id/mainIcon"
android:src="#drawable/main_icon"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerHorizontal="true"
android:layout_below="#+id/welcome">
</ImageView>
<TextView
android:id="#+id/description"
android:text="#string/description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_below="#+id/mainIcon"
android:gravity="center_horizontal"
android:textColor="#433A33"
android:textSize="15dip">
</TextView>
<TextView
android:id="#+id/choice"
android:layout_below="#id/description"
android:text="#string/choice"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:gravity="center_horizontal"
android:textColor="#433A33"
android:textSize="15dip">
</TextView>
<Spinner
android:id="#+id/language"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/choice"
android:prompt="#string/languagePrompt"
android:textSize="10dip"
android:layout_marginRight="20dip"
android:layout_marginLeft="20dip">
</Spinner>
<include layout="#layout/wizard_bottom" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</RelativeLayout>
Let me know if anybody has any ideas.
Edited to show the problem with a screen shot
The problem was that the theme I was using was setting the background to all Views rather than just the window background. So the background that is in the screen shot is the background for that one imageView and all the other views where pushed off the page.
I changed the them accordingly and it working fine now

Android view layout design help

Last week i started to develop an android app and almost done the coding part but the layout design for the app is too confusing...
The following is the design what i wanted,
Anyone please give me the coding part to create the design/layout. Thanks in advance...
This may be helpful - http://developer.android.com/resources/articles/layout-tricks-efficiency.html.
Also read about ListView (http://developer.android.com/resources/tutorials/views/hello-listview.html)
Have a look on the code. It wil produce the result exactly same as you want.
Donot forget to vote the answer.
have a look here also
<?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:orientation="horizontal"
android:background="#ffffff">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/a_thumb" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="name"
android:textColor="#000000"
android:layout_marginBottom="5dip" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="data"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time-Like-Comment"
android:textColor="#000000"
android:typeface="sans"
android:textSize="12sp"
android:layout_marginTop="5dip" />
</LinearLayout>
</LinearLayout>
Thanks
Deepak
You should check , creating custom listview , and all the things you require can easily be achieved.
Check here,
http://www.softwarepassion.com/android-series-custom-listview-items-and-adapters/

Categories

Resources