0

En mi app tengo un bottom navigation bar, que funciona con un NavGraph. Estoy creando un chat en uno de los destinos que contiene dicha navigation. El problema reside en lo siguiente:

Problema a solucionar

Cuando intentas escribir un mensaje quiero que puedas ver todo el contenido de la vista y eso se puede lograr con adjustResize en ves de adjustPan pues este ultimo lo que hace es empujar la vista hacia arriba que no es mi objetivo. Ahora usando adjustResize obtengo un resultado no deseado que muestro en la foto. Como podría solucionar el problema de que se muestre la barra de navegacion junto con el editText en cuestion??

introducir la descripción de la imagen aquí

Manifest:

 <activity
        android:name="...activities.MainActivity"
        android:configChanges="uiMode"
        android:label="@string/app_name"
        android:theme="@style/AppTheme.NoActionBar"
        android:windowSoftInputMode="stateVisible|adjustResize" />

FragmentChat:

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:scrollbarStyle="outsideInset"
    android:scrollbars="vertical"
    app:layout_constraintBottom_toTopOf="@+id/textInputLayout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appbar">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/messageRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</ScrollView>


<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:layout_margin="16dp"
    android:focusable="auto"
    app:boxCornerRadiusBottomEnd="16dp"
    app:boxCornerRadiusBottomStart="16dp"
    app:boxCornerRadiusTopEnd="16dp"
    app:boxCornerRadiusTopStart="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/btnSendMessage"
    app:layout_constraintStart_toStartOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editTxtMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:layout_toStartOf="@id/btnSendMessage"
        android:hint="@string/message" />
</com.google.android.material.textfield.TextInputLayout>


<com.google.android.material.button.MaterialButton
    android:id="@+id/btnSendMessage"
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_width="48dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    app:icon="@android:drawable/ic_menu_send"
    app:iconTint="@color/colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="@+id/textInputLayout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/textInputLayout" />

FragmentChatCode:

public class ChatFragment extends Fragment implements ChatView {

@BindView(R.id.imgAvatar)
CircleImageView imgAvatar;
@BindView(R.id.txtUser)
TextView txtUser;
@BindView(R.id.txtStatus)
TextView txtStatus;
@BindView(R.id.toolbar_chat)
Toolbar toolbar;
@BindView(R.id.messageRecyclerView)
RecyclerView messageRecyclerView;
@BindView(R.id.editTxtMessage)
TextInputEditText editTxtMessage;
@BindView(R.id.btnSendMessage)
ImageButton btnSendMessage;

private ChatPresenter presenter;
private ChatAdapter adapter;

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_chat_messages, container, false);

    ButterKnife.bind(this, view);
    setUpAdapter();
    editTxtMessage.setShowSoftInputOnFocus(true);
    setUpRecyclerView();
    presenter = new ChatPresenterImpl(this);
    presenter.onCreate();
    if (getArguments() != null) {
        setUpToolbar(getArguments());
    }

    return view;
}

private void setUpToolbar(Bundle i) {
    String email = i.getString(EMAIL_KEY);
    presenter.setChatRecepient(i.getString(Util.UID_KEY));
    boolean online = i.getBoolean(ONLINE_KEY, false);
    String status = online ? "online" : "offline";
    int color = online ? Color.GREEN : Color.RED;
    txtUser.setText(email);
    txtStatus.setText(status);
    txtStatus.setTextColor(color);
    ImageLoader imageLoader = new GlideImageLoader(requireContext());
    imageLoader.load(imgAvatar, AvatarHelper.getAvatarUrl(email));
    toolbar.setTitle("");
    AppCompatActivity activity = (AppCompatActivity) getActivity();
    if (activity != null) {
        activity.setSupportActionBar(toolbar);
    }
    toolbar.setNavigationOnClickListener(v -> Navigation.findNavController(v).navigateUp());
}

private void setUpAdapter() {
    adapter = new ChatAdapter(requireContext(), new ArrayList<>());
}

private void setUpRecyclerView() {
    messageRecyclerView.setLayoutManager(new LinearLayoutManager(requireContext()));
    messageRecyclerView.setAdapter(adapter);
}

@Override
public void onResume() {
    presenter.onResume();
    super.onResume();
}

@Override
public void onPause() {
    presenter.onPause();
    super.onPause();
}

@Override
public void onDestroyView() {
    presenter.onDestroy();
    super.onDestroyView();
}

@Override
public void onMessageReceived(ChatMessage msg) {
    adapter.add(msg);
    messageRecyclerView.scrollToPosition(adapter.getItemCount() - 1);
}

@OnClick(R.id.btnSendMessage)
public void sendMessage() {
    if (!editTxtMessage.getText().toString().trim().isEmpty()) {
        presenter.sendMessage(editTxtMessage.getText().toString());
        editTxtMessage.setText("");
    } else {
        Snackbar.make(requireView(), "Mensaje vacío o en blanco", Snackbar.LENGTH_SHORT).show();
        editTxtMessage.setText("");
    }
}

}
5
  • A ver si entendí, ¿La idea es ocultar el navbar mientras estás ingresando un mensaje?
    – Mateo
    el 3 may. 2020 a las 21:17
  • Por cierto, sería mejor que añadas el código del Activity. Y si has intentado algo en Java también deberías agregarlo a la pregunta.
    – Mateo
    el 3 may. 2020 a las 21:19
  • el codigo del fragment de que puede servir?? no entiendo? y que parte exactamente es necesaria?
    – Alex Rivas
    el 4 may. 2020 a las 19:08
  • Eso es xml, un lenguaje de marcado que se usa como método de generación de interfaz. Con el solo nos muestras lo visible. El código, del lenguaje de programación en Android es en Java y Kotlin. Con este último podemos ver lo que no está a la vista, su comportamiento.
    – Mateo
    el 4 may. 2020 a las 23:28
  • @Mateo edite la pregunta para que veas el codigo
    – Alex Rivas
    el 5 may. 2020 a las 0:11

1 respuesta 1

1

Esta solución consiste en determinar si el tamaño (verticalmente) de la porción visible de la Activity es 200dp mayor a su tamaño ocupando la pantalla completa. Para ello, se hará uso de ViewTreeObserver.

Para su correcto funcionamiento la Activity debe estar declarada en AndroidManifest la propiedad android:windowSoftInputMode="stateVisible|adjustResize" y su Layout principal (que debe ser uno solo) de la debe tener un id asignado. Por ejemplo, activityRoot.

Este código lo añadirías al método onCreate de dicha Activity:

final Context c = this;
final View activityRootView = findViewById(R.id.activityRoot);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        int heightDiff = activityRootView.getRootView().getHeight() - activityRootView.getHeight();
        if (heightDiff > dpToPx(c, 200)) { // si es máyor a 200dp, probablemente sea un teclado...
            // ... código  a ejecutar cuando esto suceda
        }
     }
});

Y el del método dpToPx:

public static float dpToPx(Context context, float valueInDp) {
    DisplayMetrics metrics = context.getResources().getDisplayMetrics();
    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, valueInDp, metrics);
}

Ahora, solo sería cambiar la visibilidad del menú, si quieres también puedes añadirle una animación o lo que se te ocurra. Digamos que el menú lo guardas en una variable llamada menu y el código te quedaría más o menos así:

final Context c = this;
final View activityRootView = findViewById(R.id.activityRoot);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        int heightDiff = activityRootView.getRootView().getHeight() - activityRootView.getHeight();
        if (heightDiff > dpToPx(c, 200)) {
            menu.setVisibility(View.GONE); // Lo haces invisible y que no ocupe espacio.
        }
        else {
            menu.setVisibility(View.VISIBLE); // Lo haces visible
        }
     }
});

Solo sería cuestión de usar un Layout adaptable en tu Activity y que los componentes sean capaces de adaptarse a él, así no quedan espacios sin utilizar cuando ocultes el menú.

Idea de detección tomada de: How to check visibility of software keyboard in Android?

7
  • pruebo tu solucion y te digo gracias por la ayuda
    – Alex Rivas
    el 5 may. 2020 a las 19:33
  • funciona de maravilla pero tiene un pequeñisimo detalle.. el lugar donde iria el bottom nav como en la foto ahora esta en blanco como hago para quitar ese espacio??
    – Alex Rivas
    el 6 may. 2020 a las 6:50
  • espero que me puedas ayudar con el problema que estoy teniendo
    – Alex Rivas
    el 6 may. 2020 a las 18:42
  • Lo comenté en la solución. Deberías diseñar la interfaz de modo adaptable. Una opción puede ser envolver el código XML de FragmentChat en un Layout principal, podría ser un RelativeLayout cuyo width y height sea matchparent y respecto a los elementos que contiene, el chat alinearlo al borde superior del padre (el layout que acabas de añadir), la entrada de texto y el botón Enviar al borde inferior.
    – Mateo
    el 7 may. 2020 a las 1:54
  • Debes modificar el fragment de modo que ocupe todo el tamaño que pueda. Al usar la visibilidad GONE con el menú, el espacio deja de estar ocupado, por lo que el problema de adaptación debe estar en FragmentChat o la activity que los contiene.
    – Mateo
    el 7 may. 2020 a las 2:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.