I'm trying to create my own custom app bar with a center-aligned title. Android Studio's editor shows my title is properly centered, but it is not on my actual device.
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar myToolbar = (Toolbar) findViewById(R.id.encounter_toolbar);
setSupportActionBar(myToolbar);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.encounter_menu_bar_layout);
}
encounter_menu_bar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:id="#+id/encounter_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/untitled"
android:textSize="20sp"
android:textColor="#color/titleTextColor"
android:textStyle="bold"
android:layout_gravity="center" />
</LinearLayout>
encounter_menu_bar.xml doesn't have anything in it:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
</menu>
EDIT
A lot of you are recommending that I change android:layout_gravity to android:gravity. I've tried that as well and I'm still not getting it to line up properly.
I'm enabling the app bar to show up on a specific fragment, as shown here:
EncounterFragment.java
public class EncounterFragment extends Fragment {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
setHasOptionsMenu(true);
return inflater.inflate(R.layout.fragment_encounter, container, false);
}
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.encounter_menu_bar, menu);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// TODO: This
return super.onOptionsItemSelected(item);
}
}
I also forgot to mention that I'm attaching the menu in a fragment. This is its layout:
fragment_encounter.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/encounter_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</LinearLayout>
Try adding android:gravity="center".
This happens because you have to center the whole text and not just the layout
Use android:layout_gravity="center"
Example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
NOTE: layout_gravity, not gravity
In your case:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:id="#+id/encounter_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/untitled"
android:textSize="20sp"
android:textColor="#color/titleTextColor"
android:textStyle="bold"
android:layout_gravity="center" />
</LinearLayout>
Change the textview to this
make it match parent for width, And make gravity center to center the text
<TextView
android:id="#+id/encounter_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/untitled"
android:textSize="20sp"
android:textColor="#color/titleTextColor"
android:textStyle="bold"
android:gravity="center" />
You want to change your xml view to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
#this should be horizontal, not vertical.
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:id="#+id/encounter_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/untitled"
android:textSize="20sp"
android:textColor="#color/titleTextColor"
android:textStyle="bold"
/>
To start, you need to make your linear layout horizontal, not vertical. By making it vertical, you are aligning it to the left.
Then, you need to make sure that your textview width and height match the parent, rather than just wrap the content. Then you can use the gravity attribute to make sure that the text is centered. When you used gravity before, the textview simply wrapped the content, and thus it didn't center in the textview. By matching the parent view bounds, you will be able to then center the text as you need to.
This is how your Toolbar XML should be
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:textColor="#android:color/white"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_gravity="center"
/>
</android.support.v7.widget.Toolbar>
Then in your Activity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
Related
//Here is my fragment
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<RelativeLayout
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="#dimen/_420sdp"
android:background="#EAEAEA"
>
<RelativeLayout
android:id="#+id/home_bg_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/_400sdp"
android:background="#drawable/sama">
<Button
android:id="#+id/bookAppointmentBtn"
android:layout_width="match_parent"
android:layout_height="#dimen/_55sdp"
android:layout_marginLeft="#dimen/_30sdp"
android:layout_marginRight="#dimen/_30sdp"
android:fontFamily="#string/roboto_light"
android:textSize="#dimen/_20sdp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/_10sdp"
android:background="#drawable/book_appointmentbg"
android:textColor="#color/white"
android:text="#string/bookappointment" />
</RelativeLayout>
</RelativeLayout>
<Button
android:id="#+id/ContactNoBtn"
android:layout_width="match_parent"
android:layout_height="#dimen/_46sdp"
android:text="#string/shop_number"
android:textColor="#ffffff"
android:textSize="#dimen/_25sdp"
android:layout_below="#+id/discountsTv"
android:textAllCaps="false"
android:layout_marginRight="#dimen/_30sdp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginLeft="#dimen/_30sdp"
android:background="#drawable/black_background"/>
<LinearLayout
android:id="#+id/servicesLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginRight="#dimen/_20sdp"
android:orientation="horizontal"
android:layout_below="#+id/servicesupperview"
>
<LinearLayout
android:id="#+id/menLayout"
android:layout_width="#dimen/_108sdp"
android:layout_height="#dimen/_27sdp"
android:layout_margin="#dimen/_10sdp"
android:layout_weight="1"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#string/roboto_medium"
android:textColor="#535353"
android:layout_marginStart="#dimen/_17sdp"
android:layout_marginTop="#dimen/_5sdp"
android:textSize="#dimen/_12sdp"
android:text="#string/mens"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/womenLayout"
android:layout_width="#dimen/_108sdp"
android:layout_height="#dimen/_27sdp"
android:layout_margin="#dimen/_10sdp"
android:layout_weight="1"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#string/roboto_medium"
android:textSize="#dimen/_12sdp"
android:layout_marginStart="#dimen/_10sdp"
android:layout_marginTop="#dimen/_5sdp"
android:textColor="#535353"
android:text="#string/womens"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/childrenLayout"
android:layout_width="#dimen/_108sdp"
android:layout_height="#dimen/_27sdp"
android:layout_margin="#dimen/_10sdp"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/_12sdp"
android:fontFamily="#string/roboto_medium"
android:textColor="#535353"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_5sdp"
android:text="#string/children_caps"
/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
I am having toolbar in MainActivity. This is my fragment i want to set title, image and back button inside the toolbar. Here i am using bottom navigation to change the fragments. Each and every fragment i want to set different title and image. I have to set title as center of the toolbar and back button as right corner of the toolbar.
In your MainActivity add these lines in OnCreate() method
if (getSupportActionBar() != null) {
getSupportActionBar().setTitle("My Activity Title");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
To use Back arrow you can write this code outside onCreate()
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
Toast.makeText(this, "Back button pressed", Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}
In you fragment you can change title of Toolbar
getActivity().setTitle("My fragment Title");
You can Create custom Toolbar with ImageView and TextView with your arrow .
include_tool_bar.xml
<com.mastercard.wallet.ui.widget.CustomTextView
android:id="#+id/toolbar_title"
style="#style/Toolbar.TitleText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|left"
android:textSize="#dimen/px_48"
app:fontName="InterStateLight"
customviews:fontName="InterStateLight" />
<ImageView
android:id="#+id/toolbar_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#string/adaCitiPayLogoText"
android:src="#drawable/ab_logo"
android:visibility="gone" />
And Add Toolbar
Toolbar toolbar = (Toolbar) appCompatActivity.findViewById(R.id.toolbar);
ImageView logo = (ImageView) toolbar.findViewById(R.id.toolbar_logo);
CustomTextView textView = (CustomTextView) toolbar.findViewById(R.id.toolbar_title);
logo.setVisibility(View.VISIBLE);
logo.setImageResource(logoResourceId);
textView.setVisibility(View.GONE);
appCompatActivity.setSupportActionBar(toolbar);
appCompatActivity.getSupportActionBar().setDisplayShowTitleEnabled(false);
title of the toolbar can be changed from fragment calling this in onActivityCreated
#Override
public void onActivityCreated(#Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
((MainActivity) getActivity()).getSupportActionBar().setTitle(getString(R.string.menu_about_us));
((MainActivity) getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
((MainActivity) getActivity()).getSupportActionBar().setDisplayShowHomeEnabled(true);
}
in your activity make sure to add a toolbar like this.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
and set it in your activity
setSupportActionBar(findViewById(R.id.toolbar));
and for the back press just add a listener and do the needful.
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_action_back));
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// pop up fragment or take another action
}
});
I have a layout on Android support design collapsing toolbar which contains the TextView but when I collapse my toolbar. some TextView showing with toolbar title.
I want to hide every other things rather than toolbar and title.
Here is my layout.
<android.support.design.widget.AppBarLayout
android:id="#+id/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256sp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:background="#ff009688"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginTop="100sp"
app:expandedTitleGravity="center|bottom"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:srcCompat="#drawable/bgimg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
<RelativeLayout
android:layout_width="match_parent"
app:layout_anchor="#+id/MyAppbar"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="#drawable/studentprofile"
app:civ_border_width="2dp"
app:civ_border_color="#0adcf4"
android:layout_marginTop="58dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/branch"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Branch: "
android:textColor="#color/textColorPrimary"
android:textSize="14sp"
android:layout_marginBottom="20sp"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And my java code is...
collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar);
collapsingToolbar.setTitle(name);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.expandedappbar);
collapsingToolbar.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
final ImageView profile=(ImageView)findViewById(R.id.profile_image);
Picasso.with(this)
.load(photo_url)
.placeholder(R.drawable.studentprofile)
.networkPolicy(NetworkPolicy.NO_CACHE)
.into(new Target() {
#Override
public void onBitmapLoaded (final Bitmap bitmap, Picasso.LoadedFrom from){
/* Save the bitmap or do something with it here */
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
#Override
public void onGenerated(Palette palette) {
collapsingToolbar.setContentScrimColor(palette.getMutedColor(ContextCompat.getColor(context,R.color.colorPrimary)));
collapsingToolbar.setStatusBarScrimColor(palette.getMutedColor(ContextCompat.getColor(context,R.color.colorPrimaryDark)));
}
});
//Set it in the ImageView
profile.setImageBitmap(bitmap);
}
#Override
public void onBitmapFailed(Drawable errorDrawable) {
}
#Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
}
});
Since I resolve my problem myself I'm posting this answer so it will helpfull for others .
CollapsingToolBar extends FrameLayout so any xml tag written after another tag will be layered as top of parent. My RelativeLayout is written after the Toolbar thats why Relative Layout elements are showing on Toolbar after CollapsingToolbar collapsed.
just putting RelativeLayout before the Toolbar will hides the element after toolbar collapsed.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:background="#ff009688"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginTop="100sp"
app:expandedTitleGravity="center|bottom"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:srcCompat="#drawable/bgimg"
app:layout_collapseMode="parallax"/>
<RelativeLayout
android:layout_width="match_parent"
app:layout_anchor="#+id/MyAppbar"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="#drawable/studentprofile"
app:civ_border_width="2dp"
app:civ_border_color="#0adcf4"
android:layout_marginTop="58dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/branch"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Branch: "
android:textColor="#color/textColorPrimary"
android:textSize="14sp"
android:layout_marginBottom="20sp"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
try this:
change your CollapsingToolbarLayout layout attribute:
use:
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
instead of
app:layout_scrollFlags="scroll|exitUntilCollapsed"
and add this attribute to the toolbar component
android:minHeight="?attr/actionBarSize"
Explanation:
Assuming enterAlways is declared and you have specified a minHeight, you can also specify enterAlwaysCollapsed. When this setting is used, your view will only appear at this minimum height. Only when scrolling reaches to the top will the view expand to its full height:
for details:https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
I am trying to implement a tabview with the nice gradual change from one view to another animation and have the current tab highlighted. At current all I can get is the basic tabview that functions, but does instant switching of tabs and no highlighting of selections. Here is my current code:
package com.example.ex.test;
public class MainActivity extends navBar {
private FragmentTabHost mTabHost;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("Tab1"),
smithingTable.class, null);
mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("Tab2"),
smithingTable2.class, null);
mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("Tab3"),
Map.class, null);
}
}
meanwhile in my activity main I have:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
and in tab1 for example (tab2 is the same but with slight variation)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".DeviceFragment" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:layout_gravity="center_horizontal"
android:src="#drawable/newcomer_map" />
I would really recommend you use Material Design Tabs, it alredy has nice transitions and its much more customizable.
Here's a very good post on how to implement it
Found out that I needed to add pageviews/listeners
I have a TRANSPARENT overlay in my android app that when user click on it,it fade but it can't fill all activity like below image
MainActivity :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="This is Original View" />
</RelativeLayout>
OverlayActivity :
<?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" >
<ImageView
android:id="#+id/over_lay_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#50220000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="This is Overlay View" />
</RelativeLayout>
Java :
public class MainActivity extends Activity {
private ImageView mOverLayImage;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Dialog overlayInfo = new Dialog(MainActivity.this);
overlayInfo.requestWindowFeature(Window.FEATURE_NO_TITLE);
overlayInfo.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
overlayInfo.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
overlayInfo.setContentView(R.layout.overlay_view);
overlayInfo.show();
mOverLayImage = (ImageView) overlayInfo.findViewById(R.id.over_lay_image);
mOverLayImage.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
overlayInfo.cancel();
}
});
}
}
Use FrameLayout. Each item added to FrameLayout is on top of the previous one, like in this example the second TextView is on top of the frist one, but since it is not fully opaque, you can see them both!
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:text="Blablabla"
android:background="#FFFFFFFF"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#50220000"
android:textColor="#FFFFFF"
android:text="I am on top"
android:gravity="center"
/>
</FrameLayout>
Now all you need to do is show/hide the overlayed items and you are good to go.
Delete your overlay activity, and inside your main activity apply this code :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="This is Original View" />
<!-- This is your overlay -->
<RelativeLayout android:id="#+id/over_lay_page"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/over_lay_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#50220000"
android:onClick="clickedOverlay" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="This is Overlay View" />
</RelativeLayout>
</RelativeLayout>
Note that I added a line on your ImageView which runs a function when clicked, now on your java file add this function:
//The onClick on xml requires a function of signature void(View) which is the clicked view (in this case the ImageView)
public void clickedOverlay(View view)
{
//ImageView is clicked
RelativeLayout rlLayout = (RelativeLayout) findViewById(R.id.over_lay_page);
rlLayout.setVisibility(View.GONE);
}
This will make the RelativeLayout that contains the overlay views (including the ImageView which is clicked) to not only be invisible but not to interfere with anything. It also ignores input to it.
In case I misunderstood anything about your question feel free to correct me (I'm not sure I understood that completely).
Also if you want it to fade in or out or something like that you can do it with an AlphaAnimation.
I am trying to change the display on my android screen when you click on a textview. This textview is inside a tab which is inside a tabhost. I created a fragment which would overlay on top of this tab when you click on it but having issues doing.
In my main activity I got this code;
tabHost.getTabContentView().findViewById(R.id.currentMoney).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
switch(v.getId()){
case R.id.currentMoney:
android.app.FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.replace(R.id.tab2, new OverviewFragment());
transaction.commit();
}
}
});
This is the code that I have in my overview java class
public class OverviewFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.home_tab_transactionhistory, container, false);
}
}
What happens is when I run this home_tab_transactionhistory xml file comes up right underneath what ever I had before. Doesn't even show fully what ever I have got in the home_tab_transactionhistory xml file.
Below I have listed the xml code of the page that should take you to another page when you click on a text view;
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#369742"
android:gravity="start|end"
android:longClickable="true">
<TabHost
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/tabHost"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:clickable="false">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:background="#5DAD68"
android:clickable="false"
android:measureWithLargestChild="true"
android:orientation="horizontal"
android:layout_weight="1.04"
android:longClickable="false"
android:paddingTop="10dp"
android:paddingLeft="30dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"></TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="false">
<LinearLayout
android:id="#+id/tab2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:clickable="false"
android:background="#FFFFFF"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/currentMoney"
android:fontFamily="sans-serif-light"
android:onClick="showCurrentAccountMoney"
android:id="#+id/currentMoney"
android:paddingTop="5dp"
android:layout_gravity="center_horizontal"
android:textColor="#ff000000"
android:textSize="40dp" />
id of the textview is currentMoney
Please can someone help me fix this issue.
You should post the xml layout file where there is your clickable text view. To make the new Fragment overlay, you should add it to a FrameLayout which places its childs on top of each other.