I am novice on Android programming.
My task is simple: I want to create a screen with just two objects:
an action Button;
a drawable area in wich to draw images, text, circles, and so on.
Is it possible so have a working example, or at least a guideline ?
I know how to subclass a view, and to draw int it, using:
MyView d = new MyView(this);
setContentView(d);
But this fills all the screen with MyView and the button is not visible.
Some suggestions ?
You need to define a layout file and specify relative position of button and the drawable area.
Make sure both of them are not specified as fill_parent in layout_width or layout-height.
Set the contentView to this layout file
You go through android Ui for detail understanding.
When you create an android project in eclipse you'll find res/layout/main.xml and this is where your default UI is defined and that is set using setContentView(R.layout.main); in onCreate method.
To put images you can use imageview and textview for Texts in xml. Like that many widgets are there for edit text, Button etc. A simple example including Imageview,textview and Button:
<?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="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HELLO ANDROID"
android:layout_gravity="center"
/>
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="Click Me"
/>
Related
My requirements
Note: I need to support Android API 15 and onwards.
In my PreferenceFragment I am dynamically adding PreferenceScreen's to a PreferenceCategory.
PreferenceScreen as = mgr.createPreferenceScreen(context);
as.setTitle(name);
myCategory.addPreference(as);
When the settings Activity renders these PreferenceScreens are rendered with just a title in it's row, see the image below.
I want to customize what is shown in this row. Ideally I would like to have a title with a summary below, an icon to the left of the title/summary and on certain rows an icon on the right hand side. See the mockup image below.
PreferenceScreen.setWidgetLayoutResource(int widgetLayoutResId)
I know I can use "setWidgetLayoutResource" to add an icon to the right of the row layout (and a summary with "setSummary") using the following code in my settings activity
PreferenceScreen as = mgr.createPreferenceScreen(context);
as.setTitle(name);
as.setSummary(summary);
as.setWidgetLayoutResource(R.layout.as_widget);
myCategory.addPreference(as);
where "as_widget.xml" is
<?xml version="1.0" encoding="utf-8"?>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_favorite"/>
this will produce UI like the following
This gets me closer to what I would like but still not exactly what I would like (missing the icon at the beginning of the row).
PreferenceScreen.setLayoutResource(int layoutResId)
I believe if I use this, then I can control the rendering of the whole row. I have seen examples of this on stackoverflow, such as
Setting preference layout and changing the attribute in it
Creating a custom layout for preferences
From my understanding the layout file you specify has to have the following
its root View with the id "#android:id/widget_frame"
a view with the id android:id="#+android:id/title" (this is where the
string specified in PreferenceScreen.setTitle is placed)
a view with the id android:id="#+android:id/summary" (this is where
the string specified in PreferenceScreen.setSummary is placed)
However when I try and do this, Android Studio highlights "#+android:id/summary" with the error "Can not resolve symbol '#+android:id/summary'. When the application runs my rows are rendered completely blank.
My java is
PreferenceScreen as = mgr.createPreferenceScreen(context);
as.setTitle(name);
as.setSummary(summary);
as.setLayoutResource(R.layout.as_row_layout);
myCategory.addPreference(as);
And my layout is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/widget_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:paddingRight="?android:attr/scrollbarSize">
<ImageView
android:id="#+id/icon1"
android:src="#drawable/ic_action_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:layout_marginRight="6dip"
android:layout_marginTop="6dip"
android:layout_marginBottom="6dip"
android:layout_weight="1">
<TextView android:id="#+android:id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:ellipsize="marquee"
android:fadingEdge="horizontal" />
<TextView android:id="#+android:id/summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/title"
android:layout_alignLeft="#android:id/title"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorSecondary"
android:maxLines="4" />
</RelativeLayout>
<ImageView
android:id="#+id/icon2"
android:src="#drawable/ic_action_favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
Extending PreferenceScreen
I looked at extended PreferenceScreen to overwrite how it renders, but it appears this class has now been made final so all examples on the internet that do it that way can not be used.
I have managed to get this working.
The Preference class uses com.android.internal.R.layout.preference as its layout. This contains an ImageView for an icon on the left hand side, then the title and summary textviews and finally a widget_frame Layout on the right hand side.
By calling "PreferenceScreen.setIcon(..)" you can set the drawable to place in the icon image view. By calling PreferenceScreen.setWidgetLayoutResource("...") you can set the layout to place in the widget_frame layout, in my case I put an ImageView layout containing my image.
Here is my Java code.
PreferenceScreen as = mgr.createPreferenceScreen(context);
as.setTitle(name);
as.setSummary(summary);
// add an icon to the PreferenceScreen,
// this is rendered on the left hand side of the row
accountScreen.setIcon(R.drawable.my_pref_icon);
// specify the layout to inflate into the widget area on the
// right hand side of the row, this layout is just my image
as.setWidgetLayoutResource(R.layout.as_widget);
myCategory.addPreference(as);
This produces a layout like the following
The problem with this layout is that the icons do not left align with the text of the preferences below which have no icons.
This can be resolved by specifying the layout for the PreferenceScreen as well. I copied Android's preference.xml into my project (renaming it appropriately for my usecase) and I changing the ImageView to have a left padding and margin of 0dp.
From
<ImageView
android:id="#+android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
to
<ImageView
android:id="#+android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="0dp"
android:layout_marginLeft="0dp"/>
I then specified my copy of preference.xml for the PreferenceScreen's layout. So my java is now
PreferenceScreen as = mgr.createPreferenceScreen(context);
as.setTitle(name);
as.setSummary(summary);
// add an icon to the PreferenceScreen,
// this is rendered on the left hand side of the row
accountScreen.setIcon(R.drawable.my_pref_icon);
// specify the layout to inflate into the widget area on the
// right hand side of the row, this layout is just my image
as.setWidgetLayoutResource(R.layout.as_widget);
// specify the layout for the preference screen row when it is
// rendered as a row in a preference activity/fragment
as.setLayoutResource(R.layout.preference_row_layout);
myCategory.addPreference(as);
I believe the reason my original attempt at using PreferenceScreen.setLayoutResource was not working was because the layout I specified was incorrect. The incorrect layout had the whole layout with an id of #android:id/widget_frame, i.e.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/widget_frame" ...>
.....
</LinearLayout>
The correct layout does not need an id for the main layout, but needs to contain child views with ids of #+android:id/icon, #+android:id/title, #+android:id/summary, #+android:id/widget_frame, i.e.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
....>
<ImageView android:id="#+android:id/icon" ....>
....
<TextView android:id="#+android:id/title" ...>
....
<TextView android:id="#+android:id/summary" ...>
....
<LinearLayout android:id="#+android:id/widget_frame" ..>
....
</LinearLayout>
You can also customise the layout of a Preference by overriding Preference.onCreateView(parent). The example below uses an anonymous inner class to make red preferences.
screen.addPreference(
new Preference(context) {
#Override
protected View onCreateView(ViewGroup parent) {
View view = super.onCreateView(parent);
view.setBackgroundColor(Color.RED);
return view;
}
});
So I have a list of images that come from the web, I don't know which color are they and I want to place a text over the ImageView.
My idea is to place the ImageView, an image overlay with transparency gradient over that ImageView and the text above it. I want to mimic this behaviour:
Is there anyway to do this via XML?
When you write the XML for your list items which get inflated in the getView(...) of whatever ListAdapter you've written you can surely do this.
Something like this for the list item:
<?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">
<ImageView
android:layout_width="320dp"
android:layout_height="240dp"
android:background="#ACACAC"/>
<RelativeLayout
android:layout_width="320dp"
android:layout_height="240dp"
android:background="#drawable/gradient">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Here is your text"
android:textColor="#000000"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</RelativeLayout>
Then you create that drawable/gradient. For that you can recycle the answer from here.
Thanks to adityajones I managed to get there :)
So although this is my right answer, I'll mark his as the correct one!
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="fill_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/image" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="200dp"
android:background="#drawable/gradient_image" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_margin="6dp"
android:layout_marginBottom="18dp"
android:shadowColor="#000"
android:shadowRadius="7.0"
android:text="This is some random text"
android:textColor="#color/white"
android:textSize="22sp" />
</RelativeLayout>
I'd use a FrameLayout or RelativeLayout. The first View you add to either should be the background ImageView, then obviously you'll need some TextViews and Other ImageViews [or Buttons, or ImageButtons, etc]
Seems like a reasonable layout: a background image, and then one additional view in each corner.
For the gradient, you'll probably want a separate Layout/View at the bottom with a gradient drawable as the background, although I can imagine you might be able to get away with setting the background of one of your TextViews as the gradient.
You do not have to use a gradient drawable file or set it in your xml..
you can do this pragmatically using GradientDrawable Class as explained in this related Question (Create a radial gradient programmatically) then set it as a background for a layout that covers your ImageView, this gives you ability to use different colors and orientations
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 ;)
I need to add an icon and some text to a button, in code (not xml), in my Android app.
The icon (a stock icon, "expander_open_holo_light.9.png") should be on the left and the text on the right.
I can't find any clue...
Take a look at setCompoundDrawableWithIntrinsicBounds(). You can find the info here:
http://developer.android.com/reference/android/widget/TextView.html#setCompoundDrawablesWithIntrinsicBounds(int, int, int, int)
Basically, that is the way to set the android:drawableLeft property of your button programatically.
If you aren't doing much with the button (like resizing, instantiating a few of them) i would just create a custom xml view with an imageview and textview side by side contained in a container.
If you are changing the picture and text often, create a custom ImageView or Button class.
E.G
textbutton.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/base"
android:orientation="horizontal"
android:layout_width="200dp"
android:layout_height="100dp"
android:gravity="center"
android:background="#ff623466">
<ImageView android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/icon"
android:gravity="center"
/>
<TextView android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Hello!"
android:gravity="center"
/>
</LinearLayout>
Then post this line in main.xml or any other layout you want the button:
<include layout="#layout/textbutton" />
Take a TextView and set ImageView as the background.After setting image, append text to it. Text will be moved to right. Hope it helps.
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>