library - com.android.support:design 26

¿Cómo obtener el nuevo NavigationView para jugar bien con la barra de estado en scrim?

Question

¡He estado jugando con la nueva biblioteca de soporte de diseño de Google y es una maravilla! Estoy un poco perplejo aunque en la vista de navegación. Todas las cosas que leo dicen que NavigationView es lo suficientemente inteligente como para manejar una malla transparente por sí misma. (La publicación de android-developers , por ejemplo, busca scrim). De todos modos, cuando intenté hacerlo obtengo el siguiente resultado:

Lo cual es genial; Exactamente lo que quiero. Salvo por una cosa. Cuando el cajón está cerrado, la malla es de un gris oscuro feo, no es mi color primario. . .

Aquí está mi diseño:

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="@+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<fragment
android:id="@+id/fragment"
android:name="com.gmail.rixx.justin.envelopebudget.HomeFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="@layout/fragment_home" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
app:backgroundTint="@color/accent"
android:src="@drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

El código de actividad:

public class Home extends ActionBarActivity {
private Toolbar mToolbar;
private DrawerLayout mDrawerLayout;
private Context mContext = this;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
setUpToolbar();
setUpNavDrawer();
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(mContext, NewTransactionActivity.class));
}
});
}
private void setUpToolbar() {
mToolbar = (Toolbar) findViewById(R.id.toolbar);
if (mToolbar != null) {
setSupportActionBar(mToolbar);
}
}
private void setUpNavDrawer() {
if (mToolbar != null) {
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mToolbar.setNavigationIcon(R.drawable.ic_menu_white_24dp);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_home, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Y v21 / estilos:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:colorPrimary">@color/primary</item>
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<item name="android:colorAccent">@color/accent</item>
<item name="android:textColorPrimary">@color/primary_text</item>
<item name="android:textColorSecondary">@color/secondary_text</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>

Seguí el modelo de la aplicación CheeseSquare de Chris Banes en github pero no github el comportamiento que quiero.

He intentado eliminar el windowDrawsSystemBarBackgrounds y statusBarColor de v21 / styles, y obtengo el color adecuado, pero la barra de estado nunca se vuelve transparente:

La ayuda sería apreciada. Esto es algo nuevo, así que sé que todos estamos aprendiendo.

¡Gracias por leer!

-Justin

Answer 1

Después de luchar con esto por varias horas más, y comparando copiosamente mi código con la aplicación cheesesquare, encontré lo siguiente: DrawerLayout debe tener el atributo android:fitsSystemWindows="true" , y NavigationView también, pero CoordinatorLayout no debería. Una vez que hice esos cambios, funcionó.

Gracias a todos, y espero que esto sea útil para alguien!

Puedes ver mi código para el diseño here .

-Justin

Answer 2

En su archivo de estilo, intente usar el tema AppCompact como padre ...

 <style name="AppTheme" parent="Base.Theme.AppCompat">

Espero que te ayude..

Answer 3

android:fitsSystemWindows="false" en tu navegador con android:fitsSystemWindows="false"

Answer 4

android:fitsSystemWindows="true" en tu navigationView android:fitsSystemWindows="true" esto asegurará que la navegación estará detrás de la statusbar y agregará colorAccent a tu estilo en la carpeta de valores .

Answer 5

Debe comprobar los ejemplos más nuevos de SDK.

en realidad están usando Coordinatorlayout en la activity que desea dibujar en la statusbar y tienen un tema diferente para ese diseño, porque si coloca la statusbar de statusbar transparente para otras actividades en las que no tiene un diseño de raíz, Coordinatorlayout mostrará una statusbar blanca incolora.