Como mostrar um layout em cima do outro programaticamente no meu caso?

84

Meu layout principal main.xml simplesmente contém dois LinearLayouts:

  • O primeiro LinearLayouthospeda um VideoViewe um Button,
  • O segundo LinearLayouthospeda um EditText, e isso LinearLayoutdefiniu o valor de visibilidade para " GONE " ( android:visibility="gone")

como abaixo:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"
        android:orientation="vertical"
>
    <LinearLayout 
        android:id="@+id/first_ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"

    >
        <VideoView 
            android:id="@+id/my_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="9"
        />

        <Button
            android:id="@+id/my_btn"
            android:layout_width="30dip" 
            android:layout_height="30dip"
            android:layout_gravity="right|bottom"
                android:layout_weight="1"
        />

    </LinearLayout>

    <LinearLayout 
        android:id="@+id/second_ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingTop="2dip"

        android:visibility="gone"
    >
        <EditText 
            android:id="@+id/edit_text_field"
            android:layout_height="40dip"
            android:layout_width="fill_parent"
            android:layout_weight="5"
            android:layout_gravity="center_vertical"
        />

    </LinearLayout>
</LinearLayout>

Implementei com sucesso o recurso que quando Button(com id my_btn) é pressionado, o segundo campo LinearLayoutcom EditTexté mostrado, com o seguinte código Java:

LinearLayout secondLL = (LinearLayout) findViewById(R.id.second_ll);

Button myBtn = (Button) findViewById(R.id.my_btn);
myBtn.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View v){
        int visibility = secondLL.getVisibility();

        if(visibility==View.GONE)
            secondLL.setVisibility(View.VISIBLE);

    }
}); 

Com o código Java acima, o segundo LinearLayout com EditTexté mostrado como anexado abaixo do primeiro, o LinearLayout que faz sentido.

MAS , O que eu preciso é: quando Button(id: my_btn) é pressionado, o LinearLayout com EditText é mostrado no topo do primeiro LinearLayout , que se parece com o LinearLayout com EditTextestá a subir a partir da parte inferior da tela, eo segundo LinearLayout com EditTextsó ocupam parte do tela de baixo, esse é o 1º LinearLayout ainda visível, como a imagem abaixo mostra:

insira a descrição da imagem aqui

Assim, quando Button(id: my_btn) é pressionado como mostrar o segundo LinearLayout com EditText em cima a primeira LinearLayout vez de acrescentar 2 LinearLayout abaixo LinearLayout de programação?

Mellon
fonte

Respostas:

187

Use um FrameLayout com dois filhos. Os dois filhos ficarão sobrepostos. Isso é recomendado em um dos tutoriais do Android, na verdade, não é um hack ...

Aqui está um exemplo onde um TextView é exibido na parte superior de um ImageView:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <ImageView  
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 

    android:scaleType="center"
    android:src="@drawable/golden_gate" />

  <TextView
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="20dip"
    android:layout_gravity="center_horizontal|bottom"

    android:padding="12dip"

    android:background="#AA000000"
    android:textColor="#ffffffff"

    android:text="Golden Gate" />

</FrameLayout>

Aqui está o resultado

Alexandru Cristescu
fonte
14
Nesse código, o que o torna TextViewno topo? é porque vem em segundo lugar na lista?
Adam Johns de
14
Como a documentação do FrameLayout diz: Visualizações filho são desenhadas em uma pilha, com o filho adicionado mais recentemente no topo. Considerando que o layout xml é analisado de cima para baixo, o item TextView é desenhado na parte superior como o último no xml.
Maciej Pigulski
Estou tentando fazer isso, mas com Scrollview como primeiro filho do FrameLayout e TextView como segundo filho. Mas aqui não está mostrando o scrollview no background. Qualquer ajuda.
Raju
1
Obrigado irmão! Essa resposta foi exatamente o que estou procurando! Ótimo! @Raju: coloque o seguinte FrameLayout antes da ÚLTIMA tag de fechamento do seu layout (tela inteira) ... <FrameLayout android: id = "@ + id / icon_frame_container" android: layout_width = "match_parent" android: layout_height = "match_parent"> </FrameLayout> Agora faça referência a ele e execute seu método onClick ou onTouch normalmente.
Martin Pfeffer
1
FrameLayout é a escolha certa aqui, mas também vale a pena notar que RelativeLayout se comportaria da mesma maneira em ter visualizações filho empilhadas umas sobre as outras conforme são adicionadas. (Eu era novo no Android e pensei erroneamente que apenas FrameLayout poderia realizar o empilhamento depois de ler esta resposta. Upsia)
Lucas
5

FrameLayout não é a melhor maneira de fazer isso:

Use em seu RelativeLayoutlugar. Você pode posicionar os elementos em qualquer lugar que desejar. O elemento que vem depois tem o índice z mais alto do que o anterior (ou seja, ele vem sobre o anterior).

Exemplo:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        app:srcCompat="@drawable/ic_information"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a text."
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="8dp"
        android:padding="5dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:background="#A000"
        android:textColor="@android:color/white"/>
</RelativeLayout>

insira a descrição da imagem aqui

Raj Yadav
fonte
4

A resposta, dada por Alexandru, está funcionando muito bem. Como ele disse, é importante que essa visão de "acessador" seja adicionada como o último elemento. Aqui está um código que funcionou para mim:

        ...

        ...

            </LinearLayout>

        </LinearLayout>

    </FrameLayout>

</LinearLayout>

<!-- place a FrameLayout (match_parent) as the last child -->
<FrameLayout
    android:id="@+id/icon_frame_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

</TabHost>

em Java:

final MaterialDialog materialDialog = (MaterialDialog) dialogInterface;

FrameLayout frameLayout = (FrameLayout) materialDialog
        .findViewById(R.id.icon_frame_container);

frameLayout.setOnTouchListener(
        new OnSwipeTouchListener(ShowCardActivity.this) {
Martin Pfeffer
fonte