Text over button on Android like in the Apollo Music Player - android

I'm a novice on the Android platform when it cames to development. However I'm going further from basic Views and I'd like to create something like the following buttons:
This is what I want to achieve. I first tought that a Button with a custom background would have sufficed. However I don't know any way to make that small darker line with the text inside. All of the image reacts like a button and gets highlighted when you touch it.
Can you help me?

If you look at the source code for Apollo you can see ArtistsFragment is not made up of Buttons but rather an inflated RelativeLayout created by a subclass of the SimpleCursorAdapter class.
Since any view can have an OnClickListener you can make any create a layout to look however you want and still have it act like a button:
// Or load it as an item from an existing layout.
View myView = this.getLayoutInflater().inflate(R.layout.anything);
myView.setOnClickListener(new OnClickListener(){
public void onClick(View arg0) {
// Do stuff.
}
});

Every segment with an image could be a Layout with the background set to the appropriate image. Then, you just put the button inside of the layout.

You have to use Framelayout or RelativeLayout. For example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/your_drawabele" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="your_text" />
</FrameLayout>

Related

Android: i want to change color of my Image View

i want to change color of my imageView.
pasted the code below:-
firstly i pasted the footer.xml file
<?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="48dp"
android:background="#f1eeee"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fHome"
android:background="#drawable/colorchanged"
android:src="#drawable/home" /> <!-- your image here -->
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fAttendence"
android:src="#drawable/att" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fTarget"
android:src="#drawable/target" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fReport"
android:src="#drawable/report" />
</LinearLayout>
pasted .png which i used in this file
pasted .png which i used in this file
when i clicked on the imageView i want to set Blue color on it.
can anyone help me for this?
You can use a ColorFilter like below to be triggered on view click:
yourImageView.setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.MULTIPLY);
Note that this will actually change the state of yourImageView instance so, you'll need a variable to keep track of that.
A way to do this is to edit through photoshop those two .png.
The currently "grey" versions could have for example the name
home_button_unselected.png
Edit this image and change from grey to blue or the color you want, save it as
home_button_selected.png
Import them to your project, so now you have those two files. (for each image)
1) Set the default state, i guess that could be "home_button_unselected.png" through xml like this :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fHome"
android:src="#drawable/home_button_unselected" />
Also in an image view you shouldn't have android:background and android:src working together. If you want to know the difference between those two you could google it.
2) Then in your .java file let's say MainActivity.java you have to put an on click listener to that button, that means make it do something when the user clicks.
Declare your button(ImageView) as global variable ( before onCreate() )
private ImageView mHomeButton;
Find the View (in your onCreate() )
mHomeButton = (ImageView) findViewById(R.id.fHome);
fHome is the id of the imageView if you look at the xml above -> "android:id="#+id/fHome"
Set the OnClickListener so when user presses the button the image it changes from "home_button_unselected" to "home_button_selected". (inside onCreate() )
.
mHomeButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
mHomeButton.setImageResource(R.Drawable.home_button_selected); // setting the image to the selected one ( which is blue/selected)
}
});
If you have other buttons you should check first which is selected and if another button is selected, then all other buttons should change to the unselected png

Android transition: Buttons not clickable after transition [duplicate]

I have 2 layouts which contain the same buttons
layout_1.xml
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:text="button2"
android:background="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
and
layout_2.xml
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:text="button2"
android:background="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Please assume these are all valid layouts etc.(I am just adding the relevant code.).
So in my fragment ,I inflate and use layout_1.xml in onCreateView.I want to toggle between the 2 scenes using button_1.
I can set the listener for button_1 in layout_1.xml during the onCreateView().
The problem is trying to set a listener on that button in the second view.i.e. the listener does not activate for the second scene(with layout_2.xml).And hence i canot toggle between the 2 scenes.Is there a way to achieve this?
It would actually appear that a proper way to do this would be to on the second scene you define an action to be performed as such:
mSecondScene.setEnterAction(new Runnable() {
#Override
public void run() {
((Button) mSecondScene.getSceneRoot().findViewById(R.id. button_1)).setOnClickListener( ... );
}
This will allow you to set your ClickListener on the View without the data binding to a generic click listener method. Then you can perform the Transition to the second scene and viola.
In general, it is not a good idea to have multiple views with the same id. This is what caused the confusion here.
Note: Below is the solution used by OP that was suitable for their specific needs:
One simple solution is to use the onClick attribute in the XML file. You can assign the same onClick method to multiple items. Like this:
And in your activity.java add this:
public void buttonClicked(View v){
Log.d("TAG","Button clicked!!"
// do stuff here
}
2nd option:
When you set a listener for one button with the id of button_1, it does not set the listener for both buttons, it only sets it for the first one. If you want to set the same listener for both, all you need to do is to assign these button different ids and then assign them the same listener.
This is what you should do:
Listener myListener = new Listener(){.. blah blah....};
((Button) findViewById(R.id.some_id)).setListerner(myListener);
((Button) findViewById(R.id.some_other_id)).setListerner(myListener);
3rd option:
findViewById(R.id.id_of_layout1).findViewById(R.id.button_1)
findViewById(R.id.id_of_layout2).findViewById(R.id.button_1)
in this case, you need add some id to your layout files, for example: layout_1.xml:
<RelativeLayout
android:id="+id/id_of_layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:text="button2"
android:background="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

Android how to create textview one over another

I am developing an Android application with a textview updated by one event and at the same place where the textview is present, I want 1 more textview so that other event can update this new textview. How do i achieve in having 1 textview on other
I'm assuming that you're asking how you could have two TextView components overlaying each other. There are a few way you could do this.
Frame Layout
Use a Frame Layout to determine the area in which the TextViews will occupy. Like this...
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tv1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tv2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</FrameLayout>
Credit goes to https://stackoverflow.com/a/2634059/3769032
Create a Compound View
This is fairly in-depth for the type of question you are asking. CompoundViews are a collection of typical views, such as a TextView, that you can create if you plan on re-using the view frequently.
If you plan on overlaying the TextViews often, I recommend this. So check out this tutorial.
Use only one TextView
Having two overlayed textviews can become messy really quickly. If you have two pieces of text overlayed is becomes impossible to read. So since the content of your textview is based on an event. Use the same event listener in your java code to determine the content of your TextViews.
For example, in your on click listener you might have...
TextView tv1 = (TextView) findViewByID(R.id.tv1);
public void onClick(View view){
if (first_event_happened){
tv1.setText("One event happened");
} else if(second_event_happened){
tv1.setText("A different event happened");
}
}
These conditions might mean checking the type of view that was clicked, or checking its id (what I usually do). Please comment if things aren't clear. Some clarification on your question would be helpful too.
use relative layout and also you can set text on exiting textView like when event one triggered textView.setText(your text) and same when event two triggered textView.setText(your text)
There is no trick to this. Just put two TextViews in a RelativeLayout at the same position and they will draw overtop of one another. Like this:
<?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"
android:background="#android:color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first textview"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second textview"/>
</RelativeLayout>
You can make each one visible or invisible by using TextView.setVisibility(...) or you can set their text with TextView.setText(...).

Setting custom view into layout in android

I am just learning about android development, and I am having some issues with getting this to work.
I have an activity that uses a relatively layout. I need it to have 2 buttons along the bottom, and then right above the bottoms, I want my custom view to take up the rest of the space.
viewer.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<sketchViewer.AnimationPanelView
android:id="#+id/animationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/homeFromViewerButton"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<Button
android:id="#+id/homeFromViewerButton"
android:layout_width="640dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Replay" />
<Button
android:id="#+id/replayButton"
android:layout_width="640dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Home" />
</RelativeLayout>
The issue I am having is I that when I run my program, I need to pass a number of parameters into my custom view constructor so that my custom view decides what it should draw. So after creating an instance of my custom view (AnimationPanelView), I am not sure how I set this object into the space I provided for the view.
This is my activity class:
Viewer.java
public class Viewer extends Activity {
AnimationPanelView animationPanelView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_viewer);
animationPanelView = new AnimationPanelView(this, true /*, more parameters here */);
animationPanelView.setBackgroundColor(Color.GREEN);
RelativeLayout v = (RelativeLayout) findViewById(R.id.viewerLayout);
v.addView(animationPanelView);
}
Right now, with my v.addView command, the view takes up the entire page, covering up the buttons at the bottom. Can anyone shed some light on this? I feel like I am close, but I've been playing around with it for a while, and I just seem stuck.
Check out the implementing a custom view section here. You need to override onLayout and onMeasure so you can tell your container how big you are.
You are adding another custom view to your layout instead you should use
animationPanelView = (AnimationPanelView) findViewById(R.id.animationView);
animationPanelView.setBackgroundColor(Color.GREEN);

how to capture events from dynamically added layouts in Android

In my android project, I need to add controls dynamically into my main activity screen. I created one xml (row.xml) which is added on button click on main screen. I want to capture events from the controls (button) given in row.xml.
Can anybody help me where and how to capture onClick events from newly added layouts?
Also, I want to add many child layout elements, do I need to write separate onClick methods for all the child views added dynamically?
row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_Time"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:orientation="horizontal" >
<EditText
android:id="#+id/editText_FromTime"
android:layout_width="216dp"
android:layout_height="wrap_content"
android:focusableInTouchMode="false"
android:hint="#string/hintFromTime" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:orientation="horizontal" >
<Button
android:id="#+id/button_Delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnDelete" />
</LinearLayout>
</LinearLayout>
So, when I click on Add Time slot button, I get a newly created row with two elements.
I want to delete this row when I click on Delete button. Do I need to have a viewID also to delete this newly-added-view?
Create an onclicklistener in the list adapter and set it to the buttons in the getView method of the adapter. That should work.
You can keep track of your controls as Java variables - don't worry about dynamic android xml. Consider declaring them all at the top, outside of methods.
One way to avoid adding a new OnClickListener for each control is let your class implement OnClickListener then use view.setOnClickListener(this). Alternatively create a subclass which overrides onClick(View) and use setOnClickListener(MyListener).
You can use Layout.removeView(View) to remove controls, as long as you keep track of them.

Categories

Resources