jquery404
jquery404

Reputation: 674

How to Design a Android Overlay Layout

I am trying to make a alert dialog which will show like the picture. Im trying to use frame layout but can't make the it right like the picture. In my current layout I used an imageView and textview.

<LinearLayout 
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src=""/>
<TextView 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@strings/text"
/>
</FrameLayout>
<!---<other layouts--->

</LinearLayout>

enter image description here

Upvotes: 0

Views: 993

Answers (2)

John Leehey
John Leehey

Reputation: 22240

A FrameLayout will stack the Views, causing them to overlap each other. If you want one directly above the other, consider using a LinearLayout with the orientation set to vertical.

Update: Try this, replacing your FrameLayout with a LinearLayout:

<LinearLayout 
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

    <TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@strings/text"
    />

    <ImageView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src=""/>

</LinearLayout>

Obviously fill in the src parameter for the ImageView with your image.

Upvotes: 1

schwertfisch
schwertfisch

Reputation: 4579

Create an Activity it represents your overlay.

Put this in your onCreate

requestWindowFeature(Window.FEATURE_NO_TITLE);

@Override
    public void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_NO_TITLE); //importan no title show
    super.onCreate(savedInstanceState);
    setContentView(R.layout.overlay);

 }

put this in styles.xml

  <style name="FloatingPopup" parent="@android:style/Theme.Black.NoTitleBar.Fullscreen">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:background">@android:color/transparent</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowNoTitle">true</item>
</style>

In your manifiest declare the activity thath looks like a overlay and add the theme

<activity
        android:name=".YourOverlayActivity"
        android:screenOrientation="portrait"
        android:theme="@style/FloatingPopup" >
    </activity>

It looks like a semitransparent activity and now you can custom with xml layout editor.

Upvotes: 1

Related Questions