Bottom Navigation on Android - Content Hidden

user_8916090 0
Viewed 4704

i managed to implement bottom navigation and fragments in my first tries with Android(Studio 3.0).

Now when implementing Widgets on the first Fragment i realize that the Bottom Navigation is overlaying/hiding the lower-most part of the Fragment.

demonstration

The Fragment consist of two layouts, one listview and two buttons:

<FrameLayout 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="com.example.xyz.ticketvendor.QuickRideFragment">

<!-- TODO: Update blank fragment layout -->


 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <ListView
        android:id="@+id/lvTransportLines"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <LinearLayout
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignBottom="@id/lvTransportLines">
        <Button
            android:id="@+id/getTicket"
            android:layout_width="0dp"
            android:layout_height="120dp"
            android:layout_weight=".75"
            android:text="Get Ticket" >
        </Button>
        <Button
            android:id="@+id/setDefaultSMSApp"
            android:layout_width="0dp"
            android:layout_height="120dp"
            android:layout_weight=".25"
            android:text="Reset" >
        </Button>
    </LinearLayout>
</RelativeLayout>

As you can see i am using android:layout_alignBottom="@id/lvTransportLines" to position the LinearLayout (which keeps the 2 buttons) below the Listview. I can only see the buttons because i set their height for testing purpose to something huge.

but - which layout-attribute could i use to position the LinearLayout high enough to not get hidden by the Bottom Navigation? Thanks!

Update after implementing @Nero's solution i came up with this:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      tools:context="com.example.antibala.ticketvendor.QuickRideFragment"
      android:layout_width="match_parent"
      android:layout_height="match_parent"

    >

    <ListView
        android:id="@+id/lvTransportLines"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <LinearLayout
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"

        >
        <Button
            android:id="@+id/getTicket"
            android:layout_width="0dp"
            android:layout_height="140dp"
            android:layout_weight=".75"
            android:text="Get Ticket"

            >
        </Button>
        <Button
            android:id="@+id/setDefaultSMSApp"
            android:layout_width="0dp"
            android:layout_height="140dp"
            android:layout_weight=".25"
            android:text="Reset"

            >
        </Button>
    </LinearLayout>
</RelativeLayout>

But i get exactly the same outcome as in my first picture. What am i doing wrong?

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.xyz.ticketvendor.MainActivity">

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="@string/title_home"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>
android-studio-3.0 android-fragments android-layout android java
2 Answers

Sorry for the delay mate, I was testing couple of things and had to create this example from scratch. Funny thing is you only have to make a single amendment to the FrameLayout in your Main_activity.xml file.

Please add the following attribute and it should give you the design you wish.

android:layout_marginBottom="?actionBarSize"

Updated as requested

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.nero.myapplication.MainActivity">

<RelativeLayout
    android:id="@+id/fragment_Container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="?actionBarSize"></RelativeLayout>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />

Fragment_blank.xml

<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"
android:orientation="vertical"
tools:context="com.example.nero.myapplication.BlankFragment">



<LinearLayout
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true">

    <Button
        android:id="@+id/getTicket"
        android:layout_width="0dp"
        android:layout_height="140dp"
        android:layout_weight=".75"
        android:text="Get Ticket"/>
    <Button
        android:id="@+id/setDefaultSMSApp"
        android:layout_width="0dp"
        android:layout_height="140dp"
        android:layout_weight=".25"
        android:text="Reset"/>

</LinearLayout>


<ListView
    android:id="@+id/lvTransportLines"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/buttons"/>
</RelativeLayout>

Main_activity.java

public class MainActivity extends AppCompatActivity {

private TextView mTextMessage;


private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = new BottomNavigationView.OnNavigationItemSelectedListener() {

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.navigation_home:
                mTextMessage.setText(R.string.title_home);
                return true;
            case R.id.navigation_dashboard:
                mTextMessage.setText(R.string.title_dashboard);
                return true;
            case R.id.navigation_notifications:
                mTextMessage.setText(R.string.title_notifications);
                return true;
        }
        return false;
    }
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mTextMessage = (TextView) findViewById(R.id.message);
    BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportFragmentManager()
            .beginTransaction()
            .add(R.id.fragment_Container, new BlankFragment(), "blankFragment")
            .disallowAddToBackStack()
            .commit();
}

}

Result

user_73112690

add this to your relative layout or frame layout

android:layout_marginBottom="?actionBarSize">
user_110047600
Related