I am trying to crate a Custom UI similar to pulse android app. As I understand, to start with I have to first create a custom button as shown on the below image marked.
My button has an image and text overlay on it. I know it is a basic question, but I am facing this issue, as I am a beginner to android development. Please do help me to understand how to go with this.
You could compose a simple layout from an ImageView and a TextView aligned to the bottom with black text and some transparency. Both views should be placed inside a RelativeLayout. Then you set a click listener for the RelativeLayout and take appropriate action on click.
Ex:
<RelativeLayout
android:id="#+id/item"
android:layout_width="150dp"
android:layout_height="150dp" >
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="#drawable/my_test_image" />
<TextView
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#4000"
android:text="Giorgio Armany Galaxy S"
android:textColor="#FFF" />
</RelativeLayout>
Then in your program:
RelativeLayout item=(RelativeLayout)findViewById(R.id.item);
item.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// take action
}
});
This is one scenario. Another scenario is to extend the Button and compose your custom UI component if you would like, which will involve some more coding but instead you'll have a unique component.
Please accept the answer if it answered your question.
Now about the part with grid integration: save the XML content of the example above (RelativeLayout + ImageView + TextView), into a new XML file, let it be layout/grid_item.xml.
Add a unique id for the ImageView and TextView
Then in the getView() method of your adapter inflate that layout and find the ImageView and TextView by id, and set appropriate content.
Note, this is not full source code, but a basic scheleton should look like this:
public View getView(int position, View convertView, ViewGroup parent) {
....
convertView = mInflater.inflate(R.layout.grid_item, null);
....
ImageView myImage=(ImageView)convertView.findViewById(R.id.my_image);
TextView myTextView=(TextView)convertView.findViewById(R.id.my_textview);
myImage.setImageResource(...);
myTextView.setText(...);
...
return convertView
}
Related
Hey I really need your help.
My problem is that Android Studio will not display the Layout correctly in the emulator or physical device.
Whenever i place a textView, button etc. and i want to center it (horizontally, vertically or both), and i start the emulator it's stuck to the top left corner.
This is my code::
private void firstStage(){
ViewGroup container = (ViewGroup) findViewById(R.id.container);
container.removeAllViews();
container.addView(getLayoutInflater().inflate(R.layout.first_stage, null));
}
private void showHint(){
ViewGroup container = (ViewGroup) findViewById(R.id.container);
container.removeAllViews();
container.addView(getLayoutInflater().inflate(R.layout.first_hint, null));
firstImage = (ImageView) findViewById(R.id.hintImage);
firstImage.setImageResource(R.drawable.firsthint);
Button back = (Button) findViewById(R.id.first_hint_backButton);
back.setOnClickListener(this);
}
In the showHint Method everything works fine.. the button and imageview are there where i have set them.
In the firstStage method however i have a textView and it is always in the top left corner if I choose something with "center", like Android Studio suddenly can't handle gravity:center anymore.
I tried it with creating a new project but the error still occurs. If i set the textView to the right side and then put it in the middle with margin-right, it works. But that is not really a long-term solution. Did anyone of you experience the same problem?
And before you ask, Yes i have tried everything with "center". In the XML- file, in the code and so on.
Maybe this will also help you::
If i call the layout via setContentView(R.layout.first_stage); it works. The textView is right in there where i want it to be.. I just don't know why it won't work with ViewGroup anymore, when it works perfectly for my other 2 Layouts?!
This is my Layout-Code::
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/first_stage"
android:id="#+id/textView2"
android:enabled="true"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
/RelativeLayout
EDIT::
It works now!! I changed the container from being a RelativeLayout to a FrameLayout. I don't know exactely why it works now, but it works!!!
Thanks to pdegand59 for the fast help, really appreciate it.
When inflating a view, you have to give a parent to the inflater to resolve the layout params of the view.
container.addView(getLayoutInflater().inflate(R.layout.first_stage, container, false));
That's why Android Studio has a warning when inflating with null parent.
By the way, you can add the inflated view automatically to your view hierarchy with only :
getLayoutInflater().inflate(R.layout.first_stage, container, true);
I am a beginner in android application development. I was going through listview today . Got a small doubt , say, I have a listview populated with string data . Now when I click on a list view item , it should set an image to the side of the text view in that particular row. Is it possible ? Please help me out. A code snippet or a tutorial link is much appreciated ! Thanks in advance to all those genius developers out here in this forum.
Of course this is possible.You should do the following:
1. you need to define a layout file for your row of listView, it should include an Imageview and a TextView.
2. In getView method of your Adapter class, you need to inflate the layoutfile in step1, and set ImageView invisible.
3. In your onItemClicked function, you should set ImageView visible.
Wish this helps.
It's possible. First you'll need to use and adapter that inflates custom ListView item layout.
The layout would look something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/itemImage"/>
</RelativeLayout>
Then for your list you would register a OnItemClickListener like this:
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
ImageView image = (ImageView) view.findViewById(R.id.itemImage);
try {
// Open the image as an InputStream
InputStream input = getAssets().open("image.jpg");
// Transform the stream to a Bitmap and set it to the ImageView
image.setImageBitmap(BitmapFactory.decodeStream(input));
} catch (IOException e) {
e.printStackTrace();
}
}
});
Note that for the listener receives the position which can be used to open and set specific images (this example uses 1 image for all items of the list).
I have a problem button visibility. I have 2 button from titlebar.One of them edit, one of them done. First I want to see just edit button and when i clicked edit button, edit button visibility will be false and done button visibility true.
I get their id from xml and when i click one of them i want to change visibility but edit.setVisibility(); it doesnt work.What is wrong?I can see edit button.I want to change buton visibility programmatically.
Can anybody have any idea?
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
final boolean customTitle = requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
edit=(Button)findViewById(R.id.edit);
done=(Button)findViewById(R.id.done);
edit.setVisibility(View.INVISIBLE);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,R.layout.main);
if ( customTitle ) {
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,R.layout.main);
}
main.xml:
<?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">
<Button android:id="#+id/edit"
android:layout_width="57px"
android:layout_height="wrap_content"
android:text="edit"/>
<Button android:id="#+id/done"
android:layout_width="57px"
android:layout_height="wrap_content"
android:text="done"/>
</LinearLayout>
First, you're missing the android:orientation parameter in your LinearLayout.
Second, if you want to change between edit and done you can do this:
edit.setVisibility(View.GONE);
done.setVisibiluty(View.VISIBLE);
and the opposite to change to edit button again.. With View.INVISIBLE the button will not show but still use the space where it was.
The problem is that setFeatureInt just sets the resource ID for the title, which will cause a new inflation of the layout resource, which will be placed in a system FrameLayout called id/title_container. This can be inspected using the Hierarchy Viewer in eclipse.
Essentially, you end up with two instances of the main layout. One set as the content view (below the title) and the other set as the title. When you call findViewById, it will only look in the content view for any views matching the ID. This means that the edit and done buttons you retrieve are the ones in the content view.
If you want to access the buttons in the title area, you can use
View v = getWindow().getDecorView();
edit=(Button)v.findViewById(R.id.edit);
done=(Button)v.findViewById(R.id.done);
edit.setVisibility(View.INVISIBLE);
This will search through the whole view structure of the window, not just the content view, thus solving your problem.
Hey guys please help me out I am new to android application development
Here is the scenerio: This is my layout declaring xml file:
<LinearLayout xxx
<Textview aaa>
</TextView>
</LinearLayout>
//The below LinearLayout I need to display when it meets some condition in java class
i.e if(true) then display the following layout else dont. I can check this condition only after user provides some input.
<LinearLayout xxx
<Textview aaa>
To be displayed after the condition is checked
</TextView>
</LinearLayout>
//following layout is displayed with the first one.
<LinearLayout xxx
<Textview aaa>
</TextView>
</LinearLayout>
Any idea how to do it?
Take a few moments to read the android dev guide. It is worth the time: http://developer.android.com/guide/topics/ui/index.html
Basically, you want to use IDs to refer to the xml layout:
android:id="#+id/myxmlid"
and in your java file:
LinearLayout ll = findViewById(R.id.myxmlid);
if (yourCondition)
mainLayout.add(ll);
I'm assuming that you want to add a widgets to the current layout, rather than just change the text of the current TextView.
Also, this assumes that you want to add more than just a new TextView. If you only need that, you don't need to wrap it in a LinearLayout, which is used to add rows or columns of widgets.
You don't replace your entire layout programmatically just to change the text in one TextView. The way this kind of thing is handled in android, is to include a field in your Activity class for your textview, then instantiate it in your onCreate() method with findViewById() after you've called setContentView() to load the layout so that you can access that TextView's fields and methods.
First, you TextView needs an id in the layout xml.
<TextView android:id="#+id/sometext"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Then in your Activity...
TextView mTextView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mTextView = (TextView) findViewById(R.id.sometext);
}
Somewhere else in the program...
public void myMethod(){
mTextView.setText("Text says this now");
}
Hopefully that gets the idea across. Good luck!
Thank Aleadam for suggesting me to read the link. Follwoing was my approach to get the output.
What I did was I assigned my LinearLayout Visibility to "GONE" (android:Visibility="GONE") when declarning the XML, and in the program after the condition is met, changed the visibility to "VISIBLE". (by using layout.setVisibility(View.VISIBLE))
My issue is that I have a main screen, and I would like to dynamically spawn a view under it with a button click, then slide the main view off the screen revealing the view below it. I've accomplished this, but I feel like there's got to be a better way. The way I've done it is very limited in that you can't just spawn views over and over again under the main.
My main XML file looks like this:
<?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"
>
<RelativeLayout
android:id="#+id/subpage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</RelativeLayout>
<RelativeLayout
android:id="#+id/homescreen"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/homebg"
>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I've deleted some unnecessary stuff. This is what's important. Notice the first child of the main layout is a relative layout with the id "subpage." As it is I use java to inflate another layout into the subpage layout when a button is clicked then I animate the "homescreen" layout off the screen. It seems like I shouldn't have to have the subpage declared in advance though. I guess my question is, is there a way to dynamically declare a new child layout underneath an existing layout?
=======================================================================
Edit: Part 2 of question
I'm trying to use addView and the app crashes. This is the code I use to try to add a view and inflate my xml into it. In the code below subview is a ViewGroup because as I understand it you can only inflate into ViewGroups, not regular views. Also 'activity' is defined at the top of the class as 'private Activity activity = this'. Any ideas what could be causing the crash?
btnHelp.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
subView = (ViewGroup)new View(getApplicationContext());
mainScreen.addView(subView,1);
LayoutInflater inflater = activity.getLayoutInflater();
inflater.inflate(R.layout.help, subView);
}
});
=======================================================================
Edit: Part 3 of question
So one more issue. Everything works great as far as inflating and sliding off. However, the view that is inflated has a button in it. I'm trying to assign a listener to that button, but it doesn't seem to work. I'm doing it by adding the listener to the button after the layout inflater is called in the btnHelp I've been working on. Here's the code:
btnHelp.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
LayoutInflater inflater = activity.getLayoutInflater();
mainScreen.addView(inflater.inflate(R.layout.help, null),0);
homeScrn.startAnimation(slideLeftOut);
btnBackHome = (ImageView)findViewById(R.id.backMenuBtn);
btnBackHome.setOnClickListener(goHome);
}
});
goHome is a handler I've defined below this as such:
private OnClickListener goHome = new OnClickListener(){
public void onClick(View v) {
Log.d("ClickEvent: ","btnBackHome Clicked");
homeScrn.startAnimation(slideRightIn);
}
};
When I click the button referenced by btnBackHome it doesn't do anything. I'm just not sure if it's because the listener isn't actually being assigned, something is keeping the button from actually being clicked, or something else.
Call addView() on the RelativeLayout to add children to it, where the children are either inflated (getLayoutInflater().inflate()) or constructed directly in Java.
Also, you might consider using a ViewFlipper, considering that it does what you're seeking (animated transition from child to child, with only one child visible at a time in the steady state), perhaps with less code.
The default animation when starting a new Activity is a sliding animation.. why not just separate your "homescreen" and "subpage" into 2 different XML files and 2 Activities?