Android. How to add transparent image over another image - android

I know how to do this via a surfaceView and I'm wondering if I should go down that rout.
I'm simply trying to create a splashscreen that has a fullscreen image with an opaque image laid over the top (after a short delay). I can't work out how this is done in XML code.
This is what I have......
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/lightDot"
android:src="#drawable/splashlight"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#null"
/>
<ImageView
android:id="#+id/bGround"
android:src="#drawable/splash"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
So my 'lightDot' object is semi-transparent and I want to overlay this on top of my bGround resource after a short delay.
This is my code:
import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
public class SplashAct extends Activity implements OnClickListener{
Button mainButton;
Button lightDot;
ImageView background;
ImageView light;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.splashscreen);
background = (ImageView)findViewById(R.id.bGround);
light = (ImageView)findViewById(R.id.lightDot);
background.setOnClickListener(this);
}
#Override
public void onClick(View arg0) {
//finish();
Intent toMainGame = new Intent(this, ActOptions.class);
startActivity(toMainGame);
}
}
Thank you.

What you want is a FrameLayout.
Child views are drawn in a stack, with the most recently added child on top.
You can get more fancy with where the overlays go using layout_gravity, but it sounds like this is all you need.
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/image" >
</ImageView>
<ImageView
android:id="#+id/overlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/overlay"/>
</FrameLayout>

Use Relative layout not linear layout.
This allows you to place views ontop of one another, as opposed to in a linear list.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/lightDot"
android:src="#drawable/splashlight"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#null"
/>
<ImageView
android:id="#+id/bGround"
android:src="#drawable/splash"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</RelativeLayout>
To make the Dot appear after time, use android:visiblity="INVISIBLE" in the xml. (so it starts invisible)
then use light.setVisiblity(View.VISIBLE); in your code.

You could use a LayerDrawable
Define a simple LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/splash_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
In your Activity class:
LinearLayout layout = (LinearLayout) findViewById(R.id.splash_layout);
Drawable drawableLayers[] = new Drawable[] {getResources().getDrawable(R.drawable.splash), getResources().getDrawable(R.drawable.splashlight)};
// ^ The order of drawables is important: The above line overlays splashlight on top of splash.
LayerDrawable layerDrawable = new LayerDrawable(drawableLayers);
layout.setBackgroundDrawable(layerDrawable);

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="#+id/ll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
***android:background="#drawable/splash"*** >
// Try this for invisible
iv.getBackground().setAlpha(0);
//Try this for visible
iv.getBackground().setAlpha(255);
//What great about this is that you could create a loop
//to slowly increment the alpha, creating a fade effect instead of
//invisible to visible.

Related

Android Screen Slide action

I am just starting to learn android java in Android Studio.
And I have bum into a question related to screen slide action.
I wanted to create a screen slide action that allow me to have additional options beside my basic layout's option, after the chose of the additional option I will return to my basic layout.
The perfect example that could represent my idea would be the Google Calculator, when user need advance Math symbol, it has a green layout that show up while user sliding the right's edge to the left, and after user choose one Math Symbol, it will return to its basic layout.
This is the screen shot of the calculator,photo belong to the internet
I am not very good at explaining, I hope you guys understand what I am trying to approach.
I have it working using SlidingPaneLayout. Let me know if this works.
XML
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/base"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2196F3"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello SlidingPaneLayout!" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:background="#F44336"
android:elevation="50dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello SlidingPaneLayout!" />
</RelativeLayout>
</android.support.v4.widget.SlidingPaneLayout>
Activity
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SlidingPaneLayout slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.SlidingPanel);
slidingPaneLayout.setSliderFadeColor(ContextCompat.getColor(this, android.R.color.transparent));
slidingPaneLayout.openPane();
}
}

R.id cannot be resolved. Android.

I have got the code:
package com.finalyearproject.cookmefood;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.TextView;
public class SearchActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ListView recipes = (ListView)findViewById(R.id.recipes);
}
}
Which is giving me the error "id cannot be resolved".
I have tried cleaning the project but that results in me creating errors in file which currently are fine.
My XML is:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<ListView
android:id="#+id/recipes"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:entries="#array.recipes"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
Any help would be appreciated, where can I go from here?
#array.recipes in the xml should be #array/recipes.
A simple typo like this will prevent your R class from building meaning you can't find any id's or other resources.
You should also make sure that you get the correct R as you are using both android.R and your R
Try to clean and rebuild your code. I don't know why, but it worked for me.
Use this com.finalyearproject.cookmefood.R.id.recipes.

Android TextView text not being displayed inside tab?

Forgive my simple questions, as I'm new to android. :)
Why is the text property of the textview not displaying inside this tab?
Screen: Here
Here's my code..
MapTab2.java
package com.test.maptab2;
import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
public class MapTab2 extends TabActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost.TabSpec spec;
spec = getTabHost().newTabSpec("tab1");
spec.setContent(R.id.mapstub);
spec.setIndicator("Map");
getTabHost().addTab(spec);
spec = getTabHost().newTabSpec("tab2");
spec.setContent(R.id.detailstub);
spec.setIndicator("Detail");
getTabHost().addTab(spec);
getTabHost().setCurrentTab(0);
}
}
Main.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Tab-switch panel -->
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<!-- Tab contents -->
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Map here -->
<TextView android:id="#+id/mapstub"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="map"/>
<!-- Other stuff -->
<TextView android:id="#+id/detailstub"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="detail"/>
</FrameLayout>
</LinearLayout>
</TabHost>
I'm trying to build my way up to displaying a map within a tab. Best to understand the basics first, I thought. :')
I actually have had more luck setting the gravity in the parent view (in this case, your LinearLayout), then setting the layout_gravity attributes in the child views (in your case, your TextViews, etc).
To get this simple example working, I would change all your "fill_parent" attributes to "wrap_content" (or 0.0dp as another alternative) - then you can start playing with the different attributes to get everything positioned exactly how you would like.
Try adding android:gravity="center" in every TextView inside a Tab.

Opening a new window from within tabhost

Hey im developing my first proper app for android and have run into 2 small hickups and was hoping for some help basicaly the main problem is that i cant seem to change to a new view from within tabhost. I have 4 tabs 2 just show a simple xml file the 3rd shows a series of pictures which i want to make clickable so that they expand out into player bio's. atm im attempting to do this in the following way but it just causes my application to crash
package com.BPRUFC;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TabHost;
public class BPRUFCAppActivity extends TabActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost mTabHost = getTabHost();
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("Fixtures").setContent(R.id.fixtures));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("Results").setContent(R.id.results));
mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("Players").setContent(R.id.bio));
mTabHost.addTab(mTabHost.newTabSpec("tab_test4").setIndicator("Tour").setContent(R.id.tour));
mTabHost.setCurrentTab(0);
int days = 184;
String tour2 = getString(R.string.tour, days);
}
public void clicked(View view)
{
Intent myIntent = new Intent(BPRUFCAppActivity.this, PlayerBio.class);
BPRUFCAppActivity.this.startActivity(myIntent);
}
}
main Xml stopped after first pic as its quite long
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/fixtures"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/fixtures" />
</ScrollView>
<TextView
android:id="#+id/results"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Results go here" />
<ScrollView
android:id="#+id/ScrollView02"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/bio"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:layout_width="90dip"
android:layout_height="90dip"
android:id="#+id/imageView1"
android:src="#drawable/forrest"
android:onClick="clicked"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp">
</ImageView>
Thanks in advance and im sure its a noob mistake
I fixed this myself. I was going about it the wrong way nesting too many layouts. I changed it all so that each tab has 1 frame layout and this is then modified accordingly it now behaves properly.

Replication of Apple's Search in Android

I want to create a UI similar to as shown here http://appsreviews.com/wp-content/uploads/2010/08/Cures-A-Z-App-for-iPhone.jpg
I started out with trying to put two custom lists side by side like in this code
import java.util.ArrayList;
import java.util.List;
import java.util.WeakHashMap;
import android.app.Activity;
import android.content.Intent;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteException;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;
public class Emp extends Activity {
/** Called when the activity is first created. */
private String tableName = DBHelper.tableName;
private SQLiteDatabase newDB;
public static WeakHashMap<String, Empbook> temp = new WeakHashMap<String, Empbook>();
final List<Empbook> listOfEmpbook = new ArrayList<Empbook>();
final List<String> listOfAlphabets = new ArrayList<String>();
TextView txt;
EmpbookAdapter adapter = new EmpbookAdapter(this, listOfEmpbook);
Integer pos;
Integer count=0;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
txt=(TextView)findViewById(R.id.textView1);
ListView list = (ListView) findViewById(R.id.ListView01);
ListView alist = (ListView) findViewById(R.id.ListView02);
list.setClickable(true);
alist.setClickable(true);
AlphabetListAdapter alphabetadapter = new AlphabetListAdapter(this,
listOfAlphabets);
list.setAdapter(adapter);
alist.setAdapter(alphabetadapter);
the alphabetadapter is for the list displaying alphabets on the right in the screen.
My XML is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:text="TextView" android:id="#+id/textView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<ListView android:id="#+id/ListView01" android:layout_width="280dp"
android:orientation="vertical" android:layout_height="wrap_content"></ListView>
<ListView android:id="#+id/ListView02" android:layout_width="wrap_content"
android:orientation="vertical" android:paddingLeft="282dp"
android:layout_height="wrap_content"></ListView>
</LinearLayout>
The problem that's occurring is that only one view at a time(the one which is put earlier in the above xml is displayed while the other just doesn't appear).
Can someone please push me in the right direction?
EDIT: I tried to set the weights of the lists setting one to zero and setting the other to 1,it works partially now i can see both lists however one of the list isn't getting populated....will update if i work it out.
Posted an answer below (One listview dropped though.) Check it out.
If the index on the side is what you're looking for, you should try this: http://hello-android.blogspot.com/2010/11/sideindex-for-android.html
If you want to add to elements side by side which together fill their parent:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/ListView01"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="90"
android:background="#FFFF0000"/>
<ListView
android:id="#+id/ListView02"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="10"
android:background="#FF00FF00"/>
</LinearLayout>
You had "wrap_parent" as the height of the second element. If it wasn't being filled properly it would have the height of 0 - I've changed it to match parent. I've also added a system for using "percentage" filling.
Also, all other "fill_parent" tags I've changed to "match_parent" - not because it changes the functionality of the code but because "fill_parent" is deprecated because as a label it is misleading.
Also, I've added a background to the elements which will more helpfully debug where your problem is.
I would also suggest that what you should be aiming for is infact one View (NOT a ListView even though I have kept it for this example) which would be placed above the other (Just as the Apple search has their alphabet):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView android:id="#+id/ListView01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFF0000"/>
<!-- Since the contents of the view don't change it seems wasteful to create this as a listview -->
<ListView android:id="#+id/ListView02"
android:layout_width="20dp"
android:layout_height="match_parent"
android:background="#FF00FF00"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"/>
</RelativeLayout>
Found a work around now use a textview and a listview nested in a framelayout like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ListView android:id="#+id/ListView01" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:cacheColorHint="#00000000" />
<TextView android:id="#android:id/empty"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:text="textview" />
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:background="#android:color/transparent" android:id="#+id/sideIndex"
android:paddingLeft="280dip"
android:layout_width="300dip" android:layout_height="fill_parent"
android:gravity="center_horizontal">
<TextView android:text="T" android:id="#+id/textView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>
</FrameLayout>
More can be found out here http://dotslasha.in/wp/143/creating-floating-views-in-android .
Ty and Cheers !! :)
You don't need to implement this yourself, Google has helpfully given you API to use their search functionality.
The documentation on the subject should be enough to get you from start to finish. It's available here: http://developer.android.com/guide/topics/search/search-dialog.html
In the second ListView you have got one big padding: android:paddingLeft="282dp". I assume you are not coding for tablets in landscape only, so just remove the padding-attribute.
Remove the text view which is the first element (you can replace this by using addHeaderView() or wrapping this linearlayout onside a vertical one).
Look carefully at how the width and height are set in the following code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/ListView01"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
></ListView>
<ListView
android:id="#+id/ListView02"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0"
></ListView>
</LinearLayout>
In my experience, the weight will only work properly if the width is set to wrap_content.

Categories

Resources