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
Related
I have a bottom navigation bar and a bottom sheet above it. The bottom sheet can be expanded to fill the entire screen and I would like to add an animation that hides the bottom navigation bar as the bottom sheet is expanded. Below are screenshots of my layout, the expanded image shows what it currently looks like and the desired image shows what I want it to look like. I have looked in the bottom sheet documentation but I could not find anything useful.
Collapsed: https://i.imgur.com/B4rVGzn.png
Expanded: https://i.imgur.com/Z25I2h0.png
Desired: https://i.imgur.com/PsE06gQ.png
Below is my layout
<androidx.constraintlayout.widget.ConstraintLayout 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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backgroundTint="?attr/colorSurface"
android:elevation="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/bottom_nav_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:cameraZoom="13.8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:context=".MainActivity" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/navigation_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:elevation="16dp" >
<include layout="#layout/bottom_sheet" />
<LinearLayout
android:id="#+id/floating_action_buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:clipToPadding="false"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp"
app:layout_behavior="jonathan.gpsapp.FloatingButtonBehavior">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/center_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:clickable="true"
android:src="#drawable/ic_center"
app:backgroundTint="?attr/colorSurface"
app:fabSize="mini"
app:tint="?attr/colorPrimary" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/record"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/ic_record"
app:backgroundTint="?attr/colorPrimary"
app:fabSize="auto"
app:tint="#f2f2f2" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>```
You need to use the addBottomSheetCallback to listen the slide position of your BotomSheet and with this value you can hide the BottomNavigation smoothly :
private int navigationHeight;
bottomSheet.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
#Override
public void onStateChanged(#NonNull View bottomSheet, int newState) {
}
#Override
public void onSlide(#NonNull View bottomSheet, float slideOffset) {
if (navigationHeight == 0)
navigationHeight = navigation.getHeight(); //the height of the navigationView
float slideY = navigationHeight - navigationHeight * (1 - slideOffset);
navigation.setTranslationY(slideY);//Translate the navigatinView
}
});
Note: for a good result you must move the bottom Navigation on the coordinatorlayout
So when I launch my app it just crashes because the button in my first fragment class cannot be found for some odd reason.
When I removed the
case R.id.button_accept : the program ran fine, so I was thinking it's most likely something I did with the XML in the register_user_fragment. So is there a specific way I need to call the button because there are multiple layouts in one class?
Here's the error.
Caused by: java.lang.IllegalStateException: Required view 'button_accept' with ID 2131296297 for field 'button_accept' was not found. If this view is optional add '#Nullable' (fields) or '#Optional' (methods) annotation.
Here's my baseactivity
public class BaseActivity extends AppCompatActivity implements View.OnClickListener {
//Fragments
Fragment usernameFragment;
Fragment passwordFragment;
//
FragmentManager fragmentManager;
#BindView(R.id.button_login)
Button button_login;
#BindView(R.id.button_accept) //CRASHES HERE.
Button button_accept;
#Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
//check if user is logged in or not
setContentView(R.layout.activity_login);
ButterKnife.bind(this);
usernameFragment = new UsernameFragment();
passwordFragment = new PasswordFragment();
fragmentManager = getFragmentManager();
button_login.setOnClickListener(this);
button_accept.setOnClickListener(this);
//setcontentview register page or whatever use is logged into
}
#Override
public void onClick(View view) {
switch (view.getId()){
case R.id.button_login :
Toast.makeText(this, "testds", Toast.LENGTH_SHORT).show();
fragmentManager.beginTransaction()
.setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out)
.replace(R.id.content_login, usernameFragment)
.commit();
break;
case R.id.button_accept :
fragmentManager.beginTransaction()
.setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out)
.replace(R.id.register_user_fragment, passwordFragment)
.commit();
break;
}
}
XML containing the "button_accept"
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/ghostWhiteColor">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/ghostWhiteColor"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/register_user_fragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="100dp">
<TextView
android:id="#+id/register_user_label_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/f_roboto_medium"
android:gravity="center"
android:text="Choose a username"
android:textColor="#color/myBlack"
android:textSize="25sp" />
<TextView
android:id="#+id/register_user_label_below"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/f_roboto_lightitalic"
android:gravity="center"
android:paddingTop="35dp"
android:text="Your nickname can be changed."
android:textColor="#color/myBlack"
android:textSize="16sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="200dp">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/register_username"
android:layout_width="285dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="#string/hint_name"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/label_tos"
android:layout_width="match_parent"
android:layout_height="60dp"
android:fontFamily="#font/f_roboto_lightitalic"
android:gravity="center"
android:text="#string/label_tos"
android:textColor="#color/myBlack"
android:textSize="#dimen/fui_heading_padding_bottom" />
<Button
android:id="#+id/button_accept"
android:layout_width="125dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginBottom="80dp"
android:background="#drawable/oval"
android:text="#string/btn_sign_up"
android:textColor="#android:color/white" />
</LinearLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Because the "button_accept" is in your fragment layout , not in your activity layout :).
Your binding a UI component that doesn't exist on your activity layout.
You just made your layout mixed. just remove the Button accept_button from frame layout .
The problem is here you have button in a layout parent in which you are placing fragment dynamically. so remove the button to out side or to upper parent and out side the fragment container.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/ghostWhiteColor">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/ghostWhiteColor"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/register_user_fragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="100dp">
<TextView
android:id="#+id/register_user_label_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/f_roboto_medium"
android:gravity="center"
android:text="Choose a username"
android:textColor="#color/myBlack"
android:textSize="25sp" />
<TextView
android:id="#+id/register_user_label_below"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/f_roboto_lightitalic"
android:gravity="center"
android:paddingTop="35dp"
android:text="Your nickname can be changed."
android:textColor="#color/myBlack"
android:textSize="16sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="200dp">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/register_username"
android:layout_width="285dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="#string/hint_name"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/label_tos"
android:layout_width="match_parent"
android:layout_height="60dp"
android:fontFamily="#font/f_roboto_lightitalic"
android:gravity="center"
android:text="#string/label_tos"
android:textColor="#color/myBlack"
android:textSize="#dimen/fui_heading_padding_bottom" />
</LinearLayout>
</FrameLayout>
<Button
android:id="#+id/button_accept"
android:layout_width="125dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginBottom="80dp"
android:background="#drawable/oval"
android:text="#string/btn_sign_up"
android:textColor="#android:color/white" />
</android.support.design.widget.CoordinatorLayout>
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);
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 have a hidden layout.
add_event_price.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/add_event_price_layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<EditText android:id="#+id/add_event_wording"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:hint="#string/event_wording_hint" />
<EditText android:id="#+id/add_event_price"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:inputType="number"
android:hint="#string/event_price_hint" />
<ImageButton android:id="#+id/add_event_cross"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/cross"
android:background="#null"
android:layout_gravity="center_vertical"
android:contentDescription="#string/delete" />
</LinearLayout>
When clicking on a button in the main layout, the hidden layout appears.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#color/app_background_color">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/add_event_dynamic"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
<Button android:id="#+id/add_event_add_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:text="#string/add_event_add_field" />
</LinearLayout>
</ScrollView>
add_event_add_field.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
LinearLayout priceLayout = (LinearLayout) rootView.findViewById(R.id.add_event_price_layout);
LinearLayout dynamicLayout = (LinearLayout) rootView.findViewById(R.id.add_event_dynamic);
View hidden = inflater.inflate(R.layout.add_event_price, priceLayout, false);
dynamicLayout.addView(hidden);
}
});
Adding the hidden layout dynamically works but I don't know how to retrieve the values of the EditText in the hidden layout, and delete a view when clicking on the corresponding add_event_cross ImageButton.
First, you can call findViewById on dynamicLayout:
EditText et = (EditText) dynamicLayout.findViewById(R.id.add_event_wording);
Second, I suggest not to show/hide layout by adding view. Just put the dynamicLayout inside your main layout and use something like:
dynamicLayout.setVisibility(LinearLayout.GONE); //makes the layout hidden
I have not tested the code but you can build upon it.